-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (74 loc) · 3.58 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
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8">
<title>Louise Hsu</title>
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<header>
<div id="headerbar" class="sticky">
<div id="name">
<h2><a id="title" href="#intro">Louise Hsu</a></h2>
</div>
<h2 id="navbar">
<nav>
<a id="aboutnav" href="#about">About</a> |
<a id="projectsnav" href="#projects">Projects</a> |
<a href="https://github.com/LouiseHsu">GitHub </a>
</nav>
</h2>
</div>
</header>
<div id ="intro">
<div id="intro-inner">
<div id="intro-words">
<p>Hey.</p>
<p>I'm Louise.</p>
<p style="margin-bottom: 20px;">I'm a third year CS student.</p>
</div>
<div><a href="#about"><i id="introarrow" class="fa fa-angle-down arrow"></i></a></div>
</div>
</div>
<div id="about">
<div id="about-inner">
<div id="about-words">
<p>About</p>
<p>My interest in coding started when I was 7, when I thought if-statements in Microsoft Basic was the height of technology.
Now, not only am I a coffee, dog, and food aficionado, I'm also trying my hand at various personal projects - in fact, you're looking at one
right now! When I'm not working on projects, I'm looking for new restaraunts, playing Overwatch, writing poetry, and dabbling in pixel art.
</p>
</div>
<div><a href="#projects"><i id="aboutarrow" class="fa fa-angle-down arrow"></i></a></div>
</div>
</div>
<div id="projects">
<!--<p id="project-title">Projects</p>-->
<div id="project1" class="project-display">
<a id= "project1link" href= "https://github.com/LouiseHsu/Meteorite-Mapper">
<img class ="project-cover" src="images/MeteorCover.png" alt="project 1">
<div class = "project-description-layer">
<p class = "project-description">A meteorite mapper that shows the location and names of all fallen meteorites int
the last 300 years. Uses NASA's WorldWind SDK. Click me to see the source code on GitHub!</p>
</div>
</a>
</div>
<div id="project2" class="project-display">
<a id="project2link" href= "https://github.com/LouiseHsu/LouiseHsu.github.io">
<img class ="project-cover" src="images/SiteCover.png" alt="project 2">
<div class = "project-description-layer">
<p class = "project-description">You're looking at it! A personal website I'm using as way to learn basic web
development. I hope you like it! Click me to see the source code on GitHub!
</p>
</div>
</a>
</div>
</div>
<!--Scripts-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>