-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
413 lines (351 loc) · 20.9 KB
/
index.html
File metadata and controls
413 lines (351 loc) · 20.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rebecca Black's Projects Hub</title>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- some fonts -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:regular,bold&subset=Latin">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function(){
var sections = ["home", "teaching", "writing", "coding", "resume"];
var url = window.location;
var urlObj = new URL(url);
var sect = urlObj.searchParams.get('section');
if (sections.includes(sect)) {
$(".active").removeClass("in").removeClass("active");
element = document.getElementById(sect);
element.classList.add("in");
element.classList.add("active");
navID = sect+"-nav";
element = document.getElementById(navID);
element.classList.add("active");
}
$(".navtab").click(function() {
var tabID = $(this).attr("id");
var tabName = tabID.split("-")[0];
newurl = 'index.html?section=' + tabName;
if (history.replaceState) {
history.replaceState({}, null, newurl);
}
});
$(".summary").click(function(){
var selected = $(this).attr("id");
var fullID = "#" + selected + "-deets";
$(".details").hide();
$(fullID).show();
});
});
</script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Rebecca Black</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="navtab" id="home-nav"><a data-toggle="tab" href="#home">Home</a></li>
<li class="navtab" id="translation-nav"><a data-toggle="tab" href="#translation">Translation</a></li>
<li class="navtab" id="teaching-nav"><a data-toggle="tab" href="#teaching">Teaching</a></li>
<li class="navtab" id="writing-nav"><a data-toggle="tab" href="#writing">Queer Media Analysis</a></li>
<li class="navtab" id="coding-nav"><a data-toggle="tab" href="#coding">Coding Projects</a></li>
<li class="navtab" id="resume-nav"><a data-toggle="tab" href="#resume">Resume</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<!-- content for home page goes here -->
<div class="row">
<div class="col-sm-3">
<div class="thumbnail">
<img src="me.jpg" style="width:100%">
</div>
</div>
<div class="col-sm-9">
<h3>Welcome!</h3>
<p>I am Rebecca: mathematician, linguist, programmer, educator, writer, translator, artist, anime nerd. This site is my attempt to organize a bunch of my favorite projects and accomplishments into one hub, so that I might better market myself to the world as I attempt to pivot my career out of the confines of academia (too honest??). I have graduate degrees in both math and applied linguistics, twenty years of experience studying Japanese language and culture, twelve years of experience teaching (including designing several original courses), a decade of experience writing about discourse and narrative, and proficiency in Python and relational databases (including designing and implementing several interactive websites from scratch). Please look around and enjoy, and don’t hesitate to reach out if you have questions about any of the work here, or if you might want to work together!</p>
<div class="row">
<div class="col-sm-4">
<a href="https://www.twitter.com/ajolipa" target="_blank">
<div class="tile">
<img src="twitter.png" class="social" /> @ajolipa
</div>
</a>
</div>
<div class="col-sm-4">
<a href="https://www.instagram.com/ajolipa/" target="_blank">
<div class="tile">
<img src="insta.png" class="social"/> @ajolipa
</div>
</a>
</div>
<div class="col-sm-4">
<div class="tile" style="cursor:default;">
<img src="email.png" class="social"/> rebecca.ann.black at gmail
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<a href="https://www.linkedin.com/in/rebecca-black-0a4759231/" target="_blank">
<div class="tile">
<img src="linkedin.png" class="social" /> LinkedIn
</div>
</a>
</div>
<div class="col-sm-4">
<a href="https://medium.com/@ajolipa" target="_blank">
<div class="tile">
<img src="medium.png" class="social"/> Medium
</div>
</a>
</div>
<div class="col-sm-4">
<a href="https://www.upwork.com/freelancers/~01ad94bc8341104d2e" target="_blank">
<div class="tile">
<img src="upwork.png" class="social"/> UpWork
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="teaching" class="tab-pane fade">
<!-- program and philosophy -->
<h3>Teaching Philosophy</h3>
<p>My approach to teaching is summed up most glibly in the word "agency" -- it is my goal as an educator to instill and encourage a sense of agency, ownership, and purpose in my students' relationship to the content of the class and to the idea of mathematics as a whole. In practice this looks like a focus on student-led problem solving and the incorporation of mastery grading elements whenever possible; my goal is always to subvert the model of math education as something passively absorbed and assessed in a rigid, right-or-wrong sort of way. Tying in with my background in linguistics I am extremely interested in the intersections of math and narrative; how does the idea of "proof" change depending on context, format, and audience? What does it mean to have a mathematical voice? Can math be funny? Poignant? My day to day teaching is constantly informed by these musings and I hope to spark similar contemplation in my students, no matter the level or content of the class.</p>
<h3>Selected Courses</h3>
<p>I have taught in many contexts over the years -- mostly math, some English as a second language. Between grad school and my time as a professor I've had the opportunity to teach the entire calculus sequence, intro stats, linear algebra, foundations of arithmetic for elementary ed majors, discrete math, modern algebra, topology, and a self-designed elective on the concept of the infinite. I hope to expand this section in the future with more detail on some of these courses; for now please don't hesitate to get in touch if you want to know more!</p>
</div>
<!-- translation stuff -->
<div id="translation" class="tab-pane fade">
<h3>Japanese to English Translation</h3>
<p>Language has been one of the loves of my life. In high school, driven by a desperate need to be able to read Seto Kaiba's favorite and least favorite foods in the <i>Yu-Gi-Oh Character Guide</i> that I had bought despite not knowing any Japanese, I started studying the language -- first through private lessons for three years and then throughout college. By the end of college I was thoroughly smitten with both the language and the culture of Japan, and spent the next year living in a small town in northen Hyogo prefecture teaching English with the JET Program. That year was incredible, exhilerating, lonely, challenging, eye-opening, daunting, humbling, and one of the best things I've ever done</p>
<p>While my career took me in various other directions after I returned to the US, Japanese language and storytelling has always remained a passion. Translation -- especially of fiction, but also of essays, interviews, articles, scholarship -- brings together so many threads of my life: my love of grammar and linguistic nuance; my passion for narrative and creative storytelling; my fascination with cultural exchange and communication.</p>
<h3>Accomplishments and Experience</h3>
<ul>
<li>Shortlisted in the <a href="https://www.jlpp.go.jp/en/competition5/competition5en.html" target="_blank">5th JLPP International Translation Competition</a></li>
<li>Second place in the <a href="https://jat.org/news/nineteenth_annual_jat_contest_winners" target="_blank">19th JAT Translation Contest</a></li>
<li>Experience translating a 200+ page science fiction novel (unpublished), as well as interviews, essays, short stories, and academic writing (samples available upon request!)</li>
<li>As of spring 2023, translator of light novels for <a href="https://j-novel.club/">J-Novel Club</a></li>
</ul>
<p><i>If you think I might be a fit for an upcoming translation project, please get in touch!</i></p>
</div>
<div id="writing" class="tab-pane fade">
<h3>Narrative Analysis</h3>
<p>I have a not-so-secret agenda of revolutionizing how we talk about the portrayal of queer identities and themes in fiction, and over the past several years I have been part of several projects aimed at deepening and shifting that discourse. While this has so far been on the passion project side of my life rather than the professional side, my writing and collaboration in this area is some of the work I am most proud of. Stories matter, and finding shared history, identity, symbolism, and struggle through stories matters. Too often we present queer fiction as fitting nicely into labels and categories, dichotomized by things like "explicit/canon representation" or moralistic ideas of "good" vs. "bad" rep, but those frameworks are extremely limiting and erase so much of the deep nuance, subtext, metaphor, etc. that queer authors have always used to tell their stories in a hostile world.</p>
<div class="row">
<div class="col-sm-12">
<div class="infodump" id="anigay">
<h4>AniGay</h4>
<h6>Co-founder, editor, writer</h6>
<p><i>AniGay</i> is a blog that I created along with Elizabeth Simins and Rupa Jogani to talk about all facets of how queerness is explored in anime. In particular, our focus is on the queer stories that can fall through the cracks because they are told through subtext, metaphor, allegory, parallelism, etc. The articles I've written for <i>AniGay</i> draw both from my study of the Japanese language and time living in Japan, and from my applied linguistics graduate studies in discourse analysis. I encourage you to poke around and read whatever on the site catches your interest! Below are direct links to my two most-read articles.</p>
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-4">
<a href="https://medium.com/anigay/let-me-begin-by-giving-you-a-puzzle-71aa326293cc" target="_blank">
<div class="tile">
<h4>Impossibilities in Translating Queerness: The Dodgeball Dilemma</h4>
<div class="thumbnail">
<img src="dodgeball.gif" style="width:100%;"/>
<div class="caption">
An in-depth look at layers of meaning in <i>Hunter x Hunter</i> and what gets lost in translation. <i>(10.4K views)</i>
</div>
</div>
</div></a>
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-4">
<a href="https://medium.com/anigay/the-shape-of-queer-liberation-on-the-geometry-of-promare-cf8b1b47ced4" target="_blank">
<div class="tile">
<h4>The Shape of Queer Liberation: On the Geometry of <i>Promare</i></h4>
<div class="thumbnail">
<img src="promare.gif" style="width:100%;"/>
<div class="caption">
In appreciation of the rich visual language with which Studio Trigger's <i>Promare</i> tells a story of radical liberation. <i>(15.2K views)</i>
</div>
</div>
</div></a>
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="infodump" id="icebergs">
<h4>Icebergs</h4>
<h6>Co-author with Elizabeth Simins</h6>
<p>The 1988 anime <i>Legend of the Galactic Heroes</i> changed my life. Before watching it in 2017 I naively did not expect to find one of the most nuanced, unflinching, resonant, heartbreaking critiques of heteronormativity ever written in an anime from the '80s about futuristic space wars. English language scholarship on the way these themes permeate the story was pretty much impossible to find, and so Elizabeth and I set about creating it. While the project has been on hiatus for several years now (as both Elizabeth and I have been finishing graduate degrees, weathering the pandemic, etc.), we are hoping to continue our analysis of the show in some form in the near future, so stay tuned! Meanwhile click below for our FAQ page, from which you can also access the post archive.</p>
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<a href="https://logh-icebergs.tumblr.com/FAQs" target="_blank">
<div class="tile">
<h4>LoGH: Icebergs</h4>
<div class="thumbnail">
<img src="logh.gif" style="width: 100%;" />
<div class="caption">
(Also Tumblr changed how their stylesheets work and messed up a lot of our formatting, and also deleted our first post for some reason, so we will be porting to a new platform at some point!)
</div>
</div>
</div>
</a>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="coding" class="tab-pane fade">
<h3>Coding Projects</h3>
<p>I have taken classes in MySQL/PHP and Java (as part of my linguistics masters), Pandas dataframes (on Coursera), and more recently on AngularJS, React, NodeJS, and AWS (on Udemy). More importantly I have spent the last ten years independently teaching myself and honing my coding and web development skills by creating and maintaining several large scale projects. A common theme of my academic background in math (particularly algebraic geometry and topology) and linguistics (conversation and discourse analysis, as well as classical Chomskyan syntax) has always been the discovery of patterns and the interplay between the messy details and the overarching structures that govern them. I believe this is my strength as a programmer as well: I am quick to see creative big-picture organizational solutions, the complex interconnections between different facets of an application and how to flow along them; and then, perhaps more crucially, I am a master at stubbornly forcing the code to carry out my vision successfully. (Seriously, debugging is somehow my favorite part of coding—is that weird? There’s a purity to it: you know that there must be a problem somewhere, and you have the power to systematically root it out <i>and then it will work.</i> Magical.) My biggest weakness as a programmer is perhaps a corollary of that stubbornness: not every solution I find will end up being the slickest code possible. But I am aware of the possibility of gaps in my knowledge and I learn extremely quickly, and collaborating on my two biggest projects has trained me in the beauty of overly thorough comments.</p>
<!--summary tiles go here-->
<div class="row">
<div class="col-sm-4">
<div class="summary" id="elo">
<h4>Magic: The Gathering Elo Project</h4>
<p>Skills employed:
<ul>
<li>MySQL</li>
<li>PHP</li>
<li>HTML</li>
<li>JavaScript/JQuery</li>
<li>Python</li>
<li>Pandas</li>
</ul></p>
</div>
</div>
<div class="col-sm-4">
<div class="summary" id="cube">
<h4>Cube Draft Simulator</h4>
<p>Skills employed:
<ul>
<li>Python</li>
<li>Flask</li>
<li>JavaScript/JQuery</li>
<li>Ajax</li>
<li>Git</li>
<li>Heroku</li>
<li>Redis</li>
</ul></p>
</div>
</div>
<div class="col-sm-4">
<div class="summary" id="nfl">
<h4>NFL Confidence Pool Site</h4>
<p>Skills employed:
<ul>
<li>MySQL</li>
<li>PHP</li>
<li>HTML</li>
</ul></p>
</div>
</div>
</div>
<div class="details" id="elo-deets">
<p>The collectible card game <i>Magic: The Gathering</i> has a competitive history stretching back to the mid nineties, and yet my collaborator Adam Lizzi and I observed that there was no comprehensive searchable database for the competitive results of individual players. Modifying the Elo rating system from chess, we built a database of MtG competitive history, along with a user-friendly web interface where players can see their match history, Elo ratings, head to head records versus other players, stats and leaderboards from across the competitive scene, and even aggregate statistics among a custom "team" of their own choosing. We continually update the database with new high-level tournament results; at this point our database contains almost 200,000 players and over 2.5 million matches.</p>
<p>For this project Adam was in charge of scraping all of the data from the individual tournament websites and sanitizing it; I was in charge of the database structure and all of the MySQL/PHP code that powers the interactive elements of the site, as well as the graph visualizations which use JavaScript.</p>
<div class="row">
<div class="col-sm-6" style="padding:20px;">
<div class="row row-cols-1">
<div class="col-sm">
<div class="thumbnail">
<img src="elo-player.PNG" style="width:100%"/>
</div>
</div>
<div class="col-sm">
<div class="thumbnail">
<img src="elo-home.PNG" style="width:100%"/>
</div>
</div>
</div>
</div>
<div class="col-sm-6" style="padding:20px;">
<div class="row row-cols-1">
<div class="col-sm">
<div class="thumbnail">
<img src="elo-h2h.PNG" style="width:100%"/>
</div>
</div>
<div class="col-sm">
<div class="thumbnail">
<img src="elo-leaders.PNG" style="width:100%"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="details" id="cube-deets">
<p>When the pandemic hit, it became impossible to get groups of friends together in the same room to play card games or board games together, so many of us turned to digital replacements. My friends and I wanted to play a Magic format in which you simultaneously draft cards from a set of 15-card packs consisting of cards drawn from a custom curated list ("cube"). Digital engines for Magic exist, but don't give you the ability to draft with a specific set of people from a custom pool of cards, so Adam Lizzi and I set out to build a web app that lets you do just that. The Cube Draft Simulator is a lightweight web application built with Flask for Python and deployed on Heroku, and it allows a group of users to simulate the experience of sitting around the kitchen table passing packs of cards around the circle. This app has been used not only by our own friend group to keep in touch during the pandemic, but by several other users who submitted their own curated set of cards, and the site was even used by a group of professional players for a charity cube draft event.</p>
<p>For this project, Adam created the Python engine that simulates the effect of picking a card from a pack and passing the packs around the table, as well as much of the CSS/JavaScript that creates the visual browser interface; I was in charge of getting the pieces to talk to each other so that the cards and picks are coordinated across the individual users' browsers. Tools involved included Flask, Ajax, Jinja2, Git, Redis, JQuery, Heroku.</p>
<div class="row">
<div class="col-sm-6" style="padding:20px;">
<div class="row row-cols-1">
<div class="col-sm">
<div class="thumbnail">
<img src="cube-1.png" style="width:100%"/>
</div>
</div>
<div class="col-sm">
<div class="thumbnail">
<img src="cube-2.jpg" style="width:100%"/>
</div>
</div>
</div>
</div>
<div class="col-sm-6" style="padding:20px;">
<div class="row row-cols-1">
<div class="col-sm">
<div class="thumbnail">
<img src="cube-3.png" style="width:100%"/>
</div>
</div>
<div class="col-sm">
<div class="thumbnail">
<img src="cube-4.jpg" style="width:100%"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="details" id="nfl-deets">
<p>The first interactive website I ever built was a small-scale NFL confidence pool site for my partner and his friends, first built in 2011 and then adapted for several years after that. (Don't worry, only bragging rights were on the line!) The site was built using MySQL and PHP and allowed users who were part of the betting pool to log in, see the lines for each game for that week, and place bets against the spread ordered from most to least confident. The administrator account also had the ability to enter the weekly lines as well as the score from each game, after which the outcomes of all of the bets and the points awarded each participant were calculated and logged automatically. It was a lightweight site and never developed for public use (passwords were not especially secure, for example) but I am proud of it as a first project!</p>
</div>
</div>
<div id="resume" class="tab-pane fade">
<!-- html version of resume? -->
<h3><i>Coming soon</i></h3>
</div>
</div>
</div>
</div>
</body>
</html>