-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
420 lines (403 loc) · 21.7 KB
/
index.html
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
414
415
416
417
418
419
420
<!DOCTYPE html>
<html>
<head>
<title>Febie's Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--Noto-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;800&display=swap" rel="stylesheet">
<body>
<div class="home" id="home">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#intro">Intro</a></li>
<li><a href="#languages">Languages</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#fun">Fun</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="my-identity">
<div>
<div class="introduction">
<div>Hello, I am</div>
<!--<div><img src="images/background-top.png" alt="yellow top border"></div>-->
</div>
<div class="name">Febie J. Lin</div>
<div class="pronouns">
<!--<div><img src="images/background-bottom.png" alt="yellow bottom border"></div>-->
<div>(she/her)</div>
</div>
<br>
<br>
<div class="prof">
Aspiring Software Engineer
<br>
Stanford '25 - Computer Science
</div>
</div>
<div class="pic"><img src="images/IMG_6455.jpg" alt="Picture of Febie"></div>
</div>
<div class="welcome">
<h1 id="intro">
Welcome to my page.
</h1>
<p>
My name is Febie. I am a third-year college student with a newfound love for coding.
I'm on the lookout for opportunities to expand my programming skills and expertise.
<br><br>
My interests lies in crafting efficient code and solving complex
problems. I thrive in collaborative environments and am eager to
bring my skills to a dynamic software engineering role. My goal is to be able to transform code into real-world solutions.
<br><br>
Feel free to browse through my page to see some of the exciting work that
I've been involved in so far. If you're
interested in discussing potential opportunities, do not hesitate to
<a href="#contact">reach out</a>!
<br><br>
</p>
</div>
</div>
<div class="languages" id="languages">
<h1>Programming Languages</h1>
<div class="languages">
<figure>
<img src="images/python.png" alt="Python">
<figcaption>Python</figcaption>
</figure>
<figure>
<img src="images/C.png" alt="C">
<figcaption>C</figcaption>
</figure>
<figure>
<img src="images/C++.png" alt="C++">
<figcaption>C++</figcaption>
</figure>
</div>
</div>
<div class="experience" id="experience">
<h1>Experience</h1>
<div class="objective">
<h2>Objective</h2>
<div>
<div><img src="images/objective.png" alt="objective icon"></div>
Actively pursuing a software engineering internship opportunity to bridge theoretical knowledge gained in computer science coursework with real-world industry experience. Eager to tackle complex challenges, contribute to transformative projects, and foster my personal and professional development within a growth-oriented work environment.
</div>
</div>
<div class="three">
<div class="two">
<li class="two-sections">
<h2>Education</h2>
<p>
<div>
<div class="edu-date"><em>Sept. 2021 - June 2025</em></div>
<ul class="college">
<li><strong>B.S. Computer Science</strong></li>
<li>Stanford University</li>
<li>GPA: 3.88</li>
</ul>
</div>
<div>
<div class="edu-date"><em>June 2021</em></div>
<ul class="college">
<li><strong>High School Diploma</strong></li>
<li class="image-container">
<figure>
<img src="images/ahsgrad.jpg" alt="Febie's High School Graduation Speech" class="enlargeable">
<figcaption>Febie's Grad Speech</figcaption>
</figure>
</li>
</ul>
</div>
</p>
</li>
<li class="two-sections">
<h2>Awards</h2>
2021 "Education is QUAY" $10k Scholarship Winner<br>
<a href="https://www.quayaustralia.com/blogs/xo-quay/education-is-quay-scholarship-program">Catching Up with Our 2021 Winners</a>
<br>
<div class="award-media">
<div class="image-container">
<img src="images/quaystuff.JPG" alt="Febie wins QUAY scholarship" class="enlargeable">
</div>
</div>
</li>
</div>
<div class="inv">
<h2>Involvement</h2>
<li class="out">
<p><strong>Stanford Women in Computer Science (WiCS)</strong></p>
<ul class="activity">
<li>2022-2023: Community Intern</li>
<li>2023-2024: Intern Program Director</li>
</ul>
</li>
<div>
<figure class="image-container">
<img src="images/interns.JPG" alt="WiCS intern picnic" class="enlargeable">
<figcaption>Intern Picnic</figcaption>
</figure>
<figure class="image-container">
<img src="images/wicsmeeting.JPG" alt="WiCS meeting" class="enlargeable">
<figcaption>Board Meeting</figcaption>
</figure>
</div>
<br>
<li class="out">
<p><strong>Legacy Dance Team</strong></p>
<ul class="activity">
<li>March 2022 - March 2023: Financial Officer</li>
<li>Spring 2022: Choreographer</li>
</ul>
<div>
<figure class="image-container">
<img src="images/lgcy.jpg" alt="Legacy Dance Team 2021-2022" class="enlargeable">
<figcaption>Fall 2021 Rollouts!</figcaption>
</figure>
</div>
</li>
</div>
</div>
<div class="prof-experience">
<h2>Professional Experience</h2>
<p>
<div class="outer">
<div class="date"><em>Sept. 2023 - Present</em></div>
<ul class="college">
<li><strong>CS106 Section Leader</strong> - Stanford Computer Science Department</li>
<ul class="inner">
<li>Conduct weekly CS106 section, providing instruction and support to students. </li>
<li>Grade student assignments and conduct Interactive Grading (IG) sessions for personalized feedback and conceptual clarifications.</li>
<li>Staff the LaIR office hours, offering assistance in Python and C++ coding, and addressing student questions and debugging needs.</li>
</ul>
</ul>
</div>
<div class="outer">
<div class="date"><em>June 2023 - Aug. 2023</em></div>
<ul class="college">
<li><strong>Software Engineering Intern</strong> - Ersilia</li>
<ul class="inner">
<li>Supported the organization's mission of providing advanced AI tools to laboratories, clinics, and universities in low-to-middle income countries for infectious and neglected disease research.</li>
<li>Conducted testing and troubleshooting of existing models, while also developing new ML models based on available data.</li>
<li>Spearheaded the creation of an automated testing program to streamline and standardize testing procedures.</li>
</ul>
</ul>
</div>
<div class="outer">
<div class="date"><em>June 2022 - June 2023</em></div>
<ul class="college">
<li><strong>Basic Biology Student Research</strong> - The Kapiloff Lab, Stanford Medicine</li>
<ul class="inner">
<li>Assisted and shadowed scientists and post-docs in planning, executing, and analyzing experiments. Gained valuable insights into experimental methodologies and data interpretation.</li>
<li>Managed lab upkeep, including dishwashing, solution preparation, and general maintenance.</li>
</ul>
</ul>
</div>
<div class="outer">
<div class="date"><em>June 2021 - May 2023</em></div>
<ul class="college">
<li><strong>Education Mentor</strong> - 4SED Foundation</li>
<ul class="inner">
<li>Guided high school students in their pursuit of higher education, offering support throughout the college application process.</li>
<li>Conducted one-on-one sessions to assist students in brainstorming, writing, and refining personal essays.</li>
<li>Played a key role in enhancing the foundation's online presence by creating engaging blog posts and social media content, contributing to increased visibility and outreach efforts.</li>
</ul>
</ul>
</div>
<div class="outer">
<div class="date"><em>May 2019 - March 2020</em></div>
<ul class="college">
<li><strong>Academic Tutor</strong> - Kumon North America, Inc, Alhambra, California</li>
<ul class="inner">
<li>Offered individualized instruction to students, focusing on subjects like math and reading.</li>
<li>Assessed and graded students' worksheets to monitor progress and identify areas for improvement.</li>
<li>Communicated regularly with parents to keep them informed about their child's progress, discuss goals, and address any concerns.</li>
</ul>
</ul>
</div>
</p>
</div>
<br>
</div>
<div class="fun" id="fun">
<h1>Fun</h1>
<div class="container">
<input type="radio" class="dance" checked id="" name="bright">
<input type="radio" class="crochet" id="" name="bright">
<input type="radio" class="food" id="" name="bright">
<input type="radio" class="music" id="" name="bright">
<div class="head">
<ul class="nav">
<li class="st st1">
<h2 class="in">Dance</h2>
</li>
<li class="st st2">
<h2 class="in">Crochet</h2>
</li>
<li class="st st3">
<h2 class="in">Food</h2>
</li>
<li class="st st4">
<h2 class="in">Music</h2>
</li>
</ul>
<div class="line">
<span></span>
</div>
</div>
<div class="content">
<section class="dance-section">
<span><i class="fa fa-house">
</i></span>
<h1>Dance</h1>
<p>
Dance has been a huge part of my life since middle school. I started out taking studio lessons in beginner's hip hop. I then spent four years on my high school's competitive dance/drill team. During this time, I dabbled in a variety of styles, including hip hop, jazz, pom, and kick.
<br>
<br>
Now, I am part of <a href="https://www.instagram.com/lgcy_dance/?hl=en">Legacy Dance Team</a>, Stanford's first and only competitive urban dance group. We perform at showcases on campus throughout the year, in addition to competitions within the wider dance community. We also learn the histories behind urban dance styles through means of educational workshops, videos, and presentations.
<br>
</p>
<br>
<div>
<div>
<video height="140" controls>
<source src="videos/mp4/smallfem.mp4" type="video/mp4">
<source src="videos/webm/smallfem.webm" type="video/webm">
<source src="videos/ogv/smallfem.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div>
<img src="images/bg.JPG" alt="Febie dancing at Breaking Ground 2021">
</div>
<div>
<video height="140" controls>
<source src="videos/mp4/candyshop.mp4" type="video/mp4">
<source src="videos/webm/candyshop.webm" type="video/webm">
<source src="videos/ogv/candyshop.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
</section>
<section class="crochet-section">
<span><i class="fa fa-user"></i></span>
<h1>Crochet</h1>
<p>
I have been crocheting on and off from a young age. I've attempted all sorts of crochet projects, from scarves to coasters to stuffed animals. Currently, I am in my hat-making phase. Pictured below are my three most recent hat creations: an otter, a mouse, and a turtle.
<br>
<br>
Many more to come...
<br>
<br>
</p>
<div class="image-container">
<div><img src="images/otter.jpg" alt="crochet otter hat" class="enlargeable"></div>
<div><img src="images/mouse.jpg" alt="crochet mouse hat" class="enlargeable"></div>
<div><img src="images/turtle.jpg" alt="crochet turtle hat" class="enlargeable"></div>
</div>
</section>
<section class="food-section">
<span><i class="fa fa-edit"></i></span>
<h1>Food</h1>
<p>
I am a huge foodie. One of my favorite ways to spend my time is trying out new recipes.
When it comes to cooking, my goal is always to put a "healthier" twist on my favorite foods.
On the other hand, when it comes to baking, I prefer being more creative by experimenting with different flavors and textures.
<br><br>
I enjoy trying out different cuisines. In particular, I find a lot of joy in taking traditional recipes from my childhood and recreating them with my own personal touch.
<br><br>
</p>
<div class="image-container">
<div><img src="images/birria.JPG" alt="birria tacos and consome" class="enlargeable"></div>
<div><img src="images/mealprep.jpg" alt="weekly meal prep" class="enlargeable"></div>
<div><img src="images/bread.JPEG" alt="fresh baked French bread" class="enlargeable"></div>
<div><img src="images/mantou.jpg" alt="white and purple Chinese mantou" class="enlargeable"></div>
<div><img src="images/muffins.jpg" alt="fresh baked blueberry muffins" class="enlargeable"></div>
</div>
</section>
<section class="music-section">
<span><i class="fa fa-cog"></i></span>
<h1>Music</h1>
<div>
<div>
<p>
Music has always been a huge part of my life. From the age of five, I began taking piano lessons. I quickly realized classical music wasn't my forte, but it certainly helped me develop my sense of rhythmn and musicality. I dedicated 9 years to the piano, receiving Certificate of Merit Level 9 and Pasadena Branch Honors 2017.
<br><br>
More recently, I have been exploring my love of music through dance. I love the fact that I am able to dance to the same music that I enjoy, both casually and in performance.
<br><br>
<b>Check out my <a href="https://open.spotify.com/user/febielin">Spotify</a> to see what I've been listening to lately!</b>
<a href="https://open.spotify.com/user/febielin"><img src="images/chillfebs.jpeg" alt="Spotify code to Febie's playlist"></a>
<br><br>
</p>
</div>
<div class="image-container">
<figure>
<img src="images/drake.jpg" alt="Febie at a Drake concert" class="enlargeable">
<figcaption><b>Aug. 16, 2023</b><br>Febs at her first concert (with her all-time favorite artist, Drake)!</figcaption>
</figure>
</div>
</div>
</section>
</div>
</div>
<script src="jquery/jquery.js"></script>
<script>
$(".st1").click(function() {
$(".dance").prop("checked", true);
})
$(".st2").click(function() {
$(".crochet").prop("checked", true);
})
$(".st3").click(function() {
$(".food").prop("checked", true);
})
$(".st4").click(function() {
$(".music").prop("checked", true);
})
document.addEventListener('DOMContentLoaded', function() {
const images = document.querySelectorAll('.enlargeable');
images.forEach(function(image) {
image.addEventListener('click', function() {
const enlargedImage = document.createElement('img');
enlargedImage.src = image.src;
enlargedImage.alt = image.alt;
enlargedImage.classList.add('enlarged-image');
document.body.appendChild(enlargedImage);
enlargedImage.addEventListener('click', function() {
enlargedImage.remove();
});
document.addEventListener('click', function(event) {
if (event.target !== image) {
enlargedImage.remove();
}
});
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
enlargedImage.remove();
}
});
});
});
});
</script>
</div>
<div class="contact" id="contact">
<h1>Contact Me</h1>
<section class="contact-options">
<div>
<h2>Email</h2>
<a href="mailto:febielin@stanford.edu?subject=From%20Your%20Website:%20[Subject]&body=Hey%20Febie!">febielin@stanford.edu</a>
</div>
<div>
<h2>Social Media</h2>
<a href="https://github.com/febielin"><img src="images/github-logo.png" alt="Febie's Github"></a>
<a href="https://www.instagram.com/febielinn/"><img src="images/instagram-logo.png" alt="Febie's Instagram"></a>
<a href="https://www.linkedin.com/in/febielin/"><img src="images/linkedin-logo.png" alt="Febie's LinkedIn"></a>
</div>
</section>
</div>
</body>
</html>