-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (148 loc) · 6.67 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
<!-- TODO: Update Project section. -->
<!-- This is heavily commented to help others learn and to remind myself whatsup -->
<!-- defines document type as a html type, specifically HTML5-->
<!DOCTYPE html>
<!-- html tag describes the HTML document while lang attrubute is important for accessibility applications & search engines -->
<html lang="en-US">
<!-- head tag describes information about the document -->
<head>
<!-- provides title for document - like what you see on the tab -->
<title>Home - Jennifer Dai</title>
<!-- machine parsable data for search engines and things -->
<meta charset="UTF-8">
<!-- defines author of page -->
<meta name="author" content="Jennifer Dai">
<!-- defines keywords that search engines will pull up your page with -->
<meta name="keywords" content="fitness, 'computer science', 'women in cs', 'jennifer dai'">
<!-- Description of page -->
<meta name="description" content="Jennifer Dai's Personal Portfolio">
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Automatic resizing for your webpage on tablets & such -->
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- every html elem has a box around it, and border displays it
padding = space inside border
margin = space outside border-->
<!-- ids use #, used for single elems; classes use . (h1.name)-->
<!-- alt puts some text there if pic can't be loaded
float will float to left of paragraph
text-align: justify gives every line equal width
visibility: hidden still takes up space but invis
display: none doesn't take up space
relative(to its orig pos) vs. absolute(from top & bottom of page)
z-index -1 if you want overlapping behind
clear:both stops the elements around the floating elems from flowing around it
display: block and width: 60px is the way to make all the links same size -->
<style>
* {
font-family:'Poiret One', Verdana;
font-size: 100%;
}
.header {
text-align:center;
}
#contact, #categories a:link, a:hover, a:visited, a:active {
text-decoration: none;
}
u1#categories a{
display: block;
width: 30px;
}
ul#categories li{
list-style-type: none;
text-align: justify;
background-color: transparent;
color: grey;
padding: 0px 20px;
border-radius: 10px 10px 0 0;
margin: 20px;
text-decoration: none;
float:left;
font-size: 150%;
}
ul#contact {
text-align: center;
padding: 0;
}
ul#contact li{
display: inline-block;
padding:10px;
}
#picture {
clear: both;
margin-left: 35px;
}
#about-data, #project-data{
position: relative;
bottom: 200px;
width: 50%;
left: 400px;
}
</style>
<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-57928550-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<!-- body is visible portion of doc -->
<body>
<!-- for those users whose browsers don't support javascript -->
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<script>
$(document).ready(function() {
$("#project-data").hide();
$("#projects").click(function() {
$("#about-data").hide();
$("#project-data").fadeIn(1000);
})
$("#about").click(function() {
$("#project-data").hide();
$("#about-data").fadeIn(1000);
})
})
</script>
<!--Search engines use your headings to index the structure and content of your web pages.
Users skim your pages by its headings. It is important to use headings to show the document structure.
h1 headings should be main headings, followed by h2 headings, then the less important h3. Till h6.-->
<!-- br is for line break, and since it is an empty tag, can be closed with a space and a slash -->
<!-- title attribute will show when you hover over the thing -->
<!-- style with css property:value -->
<div class="header">
<h1 title="name">
<b>Jennifer Dai</b>
<!-- <a href="#contact">Contact me</a>
--> </h1>
</div>
<div class="header">
<h2 title="description"><b>Bridging Health and Technology</b></h2><hr/>
</div>
<ul id="categories">
<li><div id="about">About</div></li>
<li><div id="projects">Projects</div></li>
</ul>
<div id="picture">
<img src="solopic.jpg" alt="Supposed to be a picture of me; sorry it didn't work." style="width:300px;height:200px;">
</div>
<!-- links defined through "a," address specified in href attribute
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be effective.
_blank specifies that it be opened in a new tab-->
<div id="about-data">
Welcome to my website! I graduated from UC Berkeley in 2015 with a B.A. in Computer Science. Currently, I work as a software engineer on a wonderful team of people building a system that aims to answer questions in data science.
</div>
<div id="project-data">
<img src="ioetposter.png" target="_blank" alt="Supposed to load my project poster!" style="width:600px;height:450px">
</div><hr/>
<ul id="contact">
<li><a href=http://www.linkedin.com/pub/jennifer-dai/87/713/149 target="_blank">LinkedIn</a></li>
<li><a href=http://www.github.com/jenniferdai target="_blank">Github</a></li>
<li><a href=mailto:[email protected] target="_blank">Email</a></li>
</ul>
</body>
</html>