-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (129 loc) · 6.35 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ellie Huo</title>
<script type="text/javascript" src="main.js" defer></script>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<header>
<section id="index.html">
<!-- Header and Nav Bar -->
<div class="header w">
<div class="navbar">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="index.html"><img src="./image/logo-resized.jpg" alt="" class="logo"></a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</section>
</header>
<!-- Giant Image -->
<div class="background">
<div class="img"><img src="image/me.PNG"></div>
<div class="filler"></div>
</div>
<!-- About Me -->
<section id="about" class="about w">
<h2>About Me</h2>
<div class="paragraph">
<p>Hiii! My name is Ellie Huo and welcome to my website! I am a sophomore at the University of
California San Diego studying computer science.
I'm really loud, love food and kdramas and I'm very curious.
As a kid, I've always been curious about everything and especially tech. How does wifi work? Why is it when I click a
button it redirects me to another site? And also questions like the purpose of life (but thankfully God
met me). Now, my questions are not all answered just because of one class but it started turning some
gears in my head. The fact that everything is related to technology somehow makes my brain factory start
producing a lot more questions and also many more perspectives. When the street lights outside my window
turn on at night, I wonder how it was programmed to turn on at a certain time before dark and then turn
off. When I play video games and I kill an enemy, I wonder behind my screen, all the calculations of
damage that are being made. So I chose CS as my college major and I definitely struggle A LOT. But as it
brings me new challenges, I can seek for new answers.
</p>
</div>
<div class="timeline">
<img src="image/timeline.PNG" alt="">
</div>
</section>
<div class="hobbies">
<div class="hint w">
<img src="image/hint1.PNG" alt="">
</div>
<img src="image/hobbies-before.PNG" alt="" onmouseover="this.src = 'image/hobbies-after.PNG'"
onmouseout="this.src = 'image/hobbies-before.PNG'" class="imghob">
</div>
<!-- Resume Section -->
<section id="resume" class="resume w">
<div class="title">
<h2>My Resume</h2>
</div>
<div class="hint w">
<img src="image/hint2.PNG" alt="">
</div>
<a href="image/Ellie Huo Resume.pdf">
<div class="container-top w">
<img src="./image/resume.jpg" alt="" class="imgRes">
</div>
</a>
</section>
<section id="portfolio" class="portfolio w">
<h2>Portfolio</h2>
<div class="port">
<div class="button">
<ul>
<li class="art"><a href="#"><img src="image/buttons1.png" alt=""
onmouseover="this.src = 'image/buttons1-after.png'"
onmouseout="this.src = 'image/buttons1.png'"></a></li>
<li class="cs"><a href="#"><img src="image/buttons2.png" alt=""
onmouseover="this.src = 'image/buttons2-after.png'"
onmouseout="this.src = 'image/buttons2.png'"></a></li>
<li><a href="#"><img src="image/buttons3.png" alt=""
onmouseover="this.src = 'image/buttons3-after.png'"
onmouseout="this.src = 'image/buttons3.png'"></a></li>
</ul>
</div>
<!-- <div class="hint w">
<img src="image/hint3.PNG" alt="">
</div> -->
<div class="bar-sec">
<div class="bar art">
<p class="list">watercolor <br> pencil sketching <br> oil pastels <br> art journaling <br> acrylic <br></p>
<p>i drew all the doodles on this website</p>
</div>
<div class="bar cs">
<p class="list">Java <br> HTML/CSS <br> Python <br> C <br> JavaScript<br></p>
<p>check out my projects on my github @elhuo</p>
</div>
<div class="bar vlog"><p>coming soon...</p></div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<section id="contact">
<div class="footer w3-container w3-padding-64 w3-center w3-xlarge">
<a href="https://www.facebook.com/ellie.huo.54" target="_blank"><i class="fa fa-facebook-square">
</i></a>
<a href="https://www.youtube.com/channel/UC1GXIYpqagKq8RZr6BGizzw?view_as=subscriber" target="_blank"><i
class="fa fa-youtube-play"></i></a>
<a href="https://github.com/elhuo" target="_blank"><i class="fa fa-github"></i></a>
<a href="https://www.instagram.com/ellie_huo/" target="_blank"><i class="fa fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/ellie-huo-646a67183/" target="_blank"><i
class="fa fa-linkedin"></i></a>
<p>hope you have a great day! God bless</p>
</div>
</section>
</footer>
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
</body>
</html>