-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (101 loc) · 6.52 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Personal website of Margaret Yu. About, Projects, Links to other profiles">
<title>Margaret Yu</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pompiere" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/hint.css/1.3.2/hint.min.css">
<link type="text/css" href="./stylesheet.css" rel="stylesheet"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="js/typer.js"></script>
<script src="js/scrollbutton.js"></script>
</head>
<body>
<div id="home" class="logo"><img src="images/logo.png" alt="logo" title="home"/></div>
<div id="homepage">
<div id="hello"><p>Hello there! My name is <span class="golden">Margaret</span>.</p></div>
<div id="intro"><p>I am <span class="golden" data-typer-targets="a scientific artist,a musician,a dancer,a thinker,an aesthete,a lifelong learner"></span> <br/>who is passionate about <span class="golden" data-typer-targets="human computer interaction,data visualization,UI/UX,software engineering,design,creative coding,education,productivity,collaboration"></span> <br/>and seeks to <span class="golden" data-typer-targets="learn new things,learn from others,be inspired,inspire others,find balance,identify and bridge gaps,improve processes,understand the why and how"></span>.</p></div>
<div id="navigation">
<div id="nav-who" class="navigator">who</div><div id="nav-what" class="navigator">what</div><div id="nav-when" class="navigator">when</div><div id="nav-where" class="navigator">where</div><div id="nav-why" class="navigator">why</div>
</div>
</div>
<div id="who">
<div id="whoiam"><p>WHO I AM …</p></div>
<div id="description"><p>I am currently a software engineer working in the Bay Area (remotely from LA since March 2020). I grew up in Monterey Park, CA. <br>Please find my personal README <a href="https://fromthemuseinme.wordpress.com/readme" target="_blank" title="personal README">here</a>.</p></div>
<img id="pic" src="images/meInSedona2021.jpg" alt="Me in Sedona, AZ, Winter 2021" title="Me in Sedona, AZ, Winter 2021"/>
<div id="caption"><p>Live life to the fullest.</p></div>
<div class="left nav"><div class="left-arrow arrow golden">←</div><p class="blue">home</p></div>
<div class="right nav"><div class="right-arrow arrow golden">→</div><p class="blue">what</p></div>
</div>
<div id="what">
<div id="whatido"><p>WHAT I DO …</p></div>
<div id="projectintro"><p>These are some of the projects I've worked on:</p></div>
<div id="projects" class="container flexscroll"></div>
<div class="left nav"><div class="left-arrow arrow golden">←</div><p class="blue">who</p></div>
<div class="right nav"><div class="right-arrow arrow golden">→</div><p class="blue">when</p></div>
</div>
<div id="when">
<div id="whenimfree"><p>WHEN I'M FREE …</p></div>
<div id="hobbiesintro"><p>These are some things I love:</p></div>
<div id="hobbies">
<div id="talkshows" class="hobby">Talk shows</div>
<div id="writing" class="hobby">Writing</div>
<div id="singing" class="hobby">Singing</div>
<div id="instrumentalmusic" class="hobby">Instrumental music</div>
<div id="walks" class="hobby">Walks</div>
<div id="tabletennis" class="hobby">Table tennis</div>
<div id="basketball" class="hobby">Basketball</div>
<div id="nature" class="hobby">Nature</div>
<div id="tedtalks" class="hobby">TED talks</div>
<div id="makingmusic" class="hobby">Making music</div>
<div id="dance" class="hobby">Dance</div>
<div id="whistling" class="hobby">Whistling</div>
<div id="photography" class="hobby">Photography</div>
</div>
<div class="left nav"><div class="left-arrow arrow golden">←</div><p class="blue">what</p></div>
<div class="right nav"><div class="right-arrow arrow golden">→</div><p class="blue">where</p></div>
</div>
<div id="where">
<div id="wheretofindme"><p>WHERE TO FIND ME …</p></div>
<div id="profilesintro"><p>These are some of my profiles elsewhere on the web:</p></div>
<div id="profiles" class="container flexscroll"></div>
<div id="email">
<p>Email me at <span class="obfuscate">moc.liamg@teragram.uym</span> if you'd like to contact me. <br/> <strong style="font-size: 18px">*</strong><i style="font-size: 18px">I've obfuscated my email address so that when it is copied, the address is flipped.</i></p>
</div>
<div class="left nav"><div class="left-arrow arrow golden">←</div><p class="blue">when</p></div>
<div class="right nav"><div class="right-arrow arrow golden">→</div><p class="blue">why</p></div>
</div>
<div id="why">
<div id="whyiam"><p>WHY I AM …</p></div>
<div id="influencesintro"><p>These are some things that influence, motivate, and encourage me: <br/> <strong style="font-size: 18px">*</strong><i style="font-size: 18px">In no particular order</i></p></div>
<div id="influences" class="container flexscroll"></div>
<div class="left nav"><div class="left-arrow arrow golden">←</div><p class="blue">where</p></div>
<div class="right nav"><div class="right-arrow arrow golden">→</div><p class="blue">home</p></div>
</div>
<div class="copyright">©
<script>
var year = new Date();
year = year.getFullYear();
document.write(year);
</script> <span class="golden">Margaret Yu</span>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-101624785-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>