-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
166 lines (161 loc) · 9.76 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
<!DOCTYPE html>
<html>
<head>
<!-- import required libraries -->
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- terminal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.8.0/js/jquery.terminal.min.js"></script>
<link href="jquery.terminal-2.8.0.css" rel="stylesheet"/>
<!-- typing letters -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- style css -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- header -->
<div class="header">
<!-- cat and header -->
<p><span class="green">justin@zhao</span>:<span class="red">~</span><span class="blue">$</span> cat helloworld.txt</p>
<h1 id="header-emphasis">Hi, I'm Justin. I'm a <span class="txt-rotate" data-period="1000"
data-rotate='["student.", "computer scientist.", "filmmaker.", "creative thinker.", "boba enthusiast.", "Pokemon trainer."]'></span>
</h1>
<!-- intro -->
<div id="typed-intro">
<p>
I am currently a senior at <a href="https://troyhigh.com">Troy High School</a> and its Troy Tech program.
^100 <br><br>
I was an intern at <a href="http://www.peraton.com">Peraton's Deep Space Network</a> in Monrovia, California. ^50
They work closely with <a href="https://www.jpl.nasa.gov/">Caltech's Jet Propulsion Laboratory</a> to
communicate with manmade satellites beyond the Moon. ^50 As an intern, I helped modernize the intranet with different
CSS and Javascript libraries to improve workflow efficiency.
^100 <br><br>
I'm the president of my school's <a href="http://www.troyhsfbla.com">Future Business Leaders of America</a>
club and a competitor on its nationally recognized <a href="https://sites.google.com/fjuhsd.org/troyscioly">
Science Olympiad Team</a>.
^100 <br><br>
To access more information about me, type <strong class="green">help</strong> for available commands!
</p>
</div>
<!-- help menu *hidden* -->
<div id="typed-helpmenu" style="display: none">
<p>
> <strong class="green">help</strong>: go back to this page. ^50<br>
> <strong class="green">home</strong>: go back to the home page. ^50<br>
> <strong class="green">resume</strong>: see my resume. ^50<br>
> <strong class="green">scioly</strong>: get a better sense of my involvement with Science Olympiad. ^50<br>
> <strong class="green">fbla</strong>: get a better sense of my involvement with FBLA. ^50<br>
> <strong class="green">pokemon</strong>: check out some of my favorite Pokemon. ^50<br>
> <strong class="green">boba</strong>: see the tier list that I made for boba stores in the LA/OC area. ^50<br>
> <strong class="green">contact</strong>: get my contact info to get in touch with me. ^50
</p>
</div>
<!-- scioly *hidden* -->
<div id="typed-scioly" style="display: none">
<p>
I have been a part of my school's Science Olympiad team since my freshman year.
^100 <br><br>
I've competed in about 15 invitationals, ranging from those at high schools and those at universities
like <a href="www.mit.edu" class="blue">Massachussets Institution of Technology</a> and <a href="www.upenn.edu"
class="blue">University of Pennslyvania</a>. ^50 I've also competed in 2 regional, 2 state, and 2 national
competitions.
^100 <br><br>
I competed in Helicopters (9th, 10th), Wright Stuff (11th, 12th), Electric Wright
Stuff (11th), Code Busters (11th), Boomilever (11th, 12th), Forensics (11th, 12th), and Mission Possible (11th).
^100 <br><br>
Here's me at the Mira Loma invitational in 2017 with my Helicopter. It was my first
ever Science Olympiad competition! <br>
<img src="assets/miraloma-helicopters.JPG" width="20%" height=auto>
^100 <br><br>
Here is the Science Olympiad Nationals 2018 Group Picture! <br>
<img src="assets/scioly2018-TeamPic.JPG" width="40%" height=auto>
^100 <br><br>
This is me at the 2019 Science Olympiad Nationals with my Wright Stuff plane. <br>
<img src="assets/nats2019-wrightstuff.jpg" width="20%" height=auto>
^100 <br><br>
I hope to continue doing well on this team throughout this year, my senior and final year!
^100 <br><br>
To access more information about me, type <strong class="green">help</strong> for available commands!
</p>
</div>
<!-- fbla *hidden* -->
<div id="typed-fbla" style="display:none">
<p>
I am the president of my school's Future Business Leaders of America (FBLA) club. As its president, I've
managed over 250 members, led activities, and created its website. (check it out <a href="wwww.troyhsfbla.com">here</a>!)
^100 <br><br>
We compete in different conferences around the nation, helping to improve our speaking, leadership, and
knowledge about business and other topics like computer science and healthcare.
^100 <br><br>
This is my club at the State Leadership Conference. Last year, we placed 2nd overall in the entire state of
California. <br>
<img src="assets/fbla-slc.jpg" width="40%">
^100 <br><br>
I've competed in Management Information Systems (9th), where I placed 10th at nationals, Management Decision
Making (10th), where I placed 2nd at sections, and Journalism (11th), where I placed 10th at state.
^100 <br><br>
We also help our local community in many ways. ^50 Last year, we helped out at local veterinary shelters. ^50
This year, we are planning on holding beach cleanups to improve the environment!
^100 <br><br>
Here's a picture of our annual banquet at the end of each year, where we can celebrate everyone's achievements. <br>
<img src="assets/fbla-banquet.jpeg" width="40%">
^100 <br><br>
To access more information about me, type <strong class="green">help</strong> for available commands!
</p>
</div>
<!-- pokemon -->
<div id="typed-pokemon" style="display:none">
<p>
I have been a huge fan of Pokemon ever since a young age. ^50 My favorite pokemon are Buizel, Mew, and
(call me basic but...) Pikachu! <br>
<img src="assets/buizel.png" width=20%>
<img src="assets/mew.png" width=20%>
<img src="assets/pikachu.jpg" width=20%>
^100 <br><br>
You can always catch me playing Pokemon Go in my free time. I love meeting people at raids and community days.
^50 <br> My trainer code is <span class="blue">3201 0279 5300</span>, so ^50 add me!
^100 <br><br>
To access more information about me, type <strong class="green">help</strong> for available commands!
</p>
</div>
<!-- boba -->
<div id="typed-boba" style="display:none">
<p>
Anyone who knows me knows that I am an avid boba enthusiast. ^50 I almost always have a
cup of boba with me.
^100 <br><br>
This means that I have been to a lot of boba places, which is why I decided to make a tier list
for the stores that I've been to. ^50 This can help you decide where to drink if you are
in the LA/OC area!
^100 <br><br>
<img src="assets/bobatierlist.png" style="border:solid; border-color:white;border-width:5px;">
<br> If you don't know how tier lists work, the best places are 'S-tier', while the worst ones are 'F-tier'.
^100 <br><br>
I've gone into more details with specific spreadsheets for specific drinks at the different stores, so if you
want information about that, contact me! (use the command <strong class="green">contact</strong> to do so!)
^100 <br><br>
To access more information about me, type <strong class="green">help</strong> for available commands!
</p>
</div>
<!-- contact -->
<div id="typed-contact" style="display:none">
<p>
If you would like to contact me, you can do so in the following ways:
^100 <br><br>
e-mail: <span class="blue">[email protected]</span>
^100 <br>
LinkedIn: <a href="linkedin.com/in/justin-zhao-68239a18b" class="blue">Justin Zhao</a>
^100 <br>
instagram: <span class="blue">@justinzaho</span>
^100 <br><br>
Business/serious inquiries or not, I am always available to talk!
</p>
</div>
<span class="typed"></span>
</div>
<!-- terminal -->
<div id="terminal"></div>
</body>
<!-- run js -->
<script src="script.js"></script>
</html>