-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
165 lines (161 loc) · 6.97 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
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="./css/style.css">
<title>Chelsea's Portfolio</title>
</head>
<body>
<div id="header">
<div id="container-nav" class="group prtf">
<section id="nav">
<nav id="menu">
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label>
<div class="box">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div id="vertical-menu">
<ul>
<li><a href="#">•</a></li>
<li><a href="#portfolio">•</a></li>
<li><a href="#about">•</a></li>
<li><a href="#contact">•</a></li>
</ul>
</div>
</nav>
</section>
</div>
<div id="container-header">
<header id="masthead">
<h1>Hi, I'm <br>Chelsea</h1>
<h3>A San Francisco-based<br>
designer/front-end developer<br>
hybrid with a passion for user<br>
experience and the web</h3>
</header>
</div>
</div>
<!--main body-->
<div id="container-content">
<article id="content">
<!--portfolio-->
<section id="portfolio" class="group">
<header>
<h3>Portfolio</h3>
</header>
<article class="view">
<figure>
<img src="./img/capPhone.png">
<div class="mask">
<h3>SnapTrip</h3>
<p>A traveler-driven trip planning app</p>
<img src="./img/open.png">
<a href="prtf1.html" class="info"></a>
</div>
</figure>
</article>
<article class="view">
<figure>
<img src="./img/capPad.png">
<div class="mask">
<h3>e-Magazine</h3>
<p>Mobile publishing magazine</p>
<img src="./img/open.png">
<a href="prtf2.html" class="info"></a>
</div>
</figure>
</article>
<article class="view">
<figure>
<img src="./img/p1.png">
<div class="mask">
<h3>MeanShop</h3>
<p>MEAN stack based eCommerce website</p>
<img src="./img/open.png">
<a href="prtf3.html" class="info"></a>
</div>
</figure>
</article>
</section>
<!--about me-->
<section id="about" class="group">
<header>
<h2 class="center">About Me</h2>
<p class="center"><img src="img/thumbnail.jpg"></p>
<div class="group">
<p>Hi there! I'm Chelsea Li, a web developer madly in love with illustration and design! I graduated from Cornell University with a Master in Systems Engineering in 2011. Since then, I have been exposed to the rich world of web development, and I've fallen in love with it, both on the front-end and the back-end. I'm also enamored with new technologies that have changed or will change people's lives. <a href="http://www.ted.com">TED</a> conferences, <a href="https://news.ycombinator.com">Hacker News</a> and <a href="http://www.style.com">style.com</a> are my favorite sources of inspiration. Stay Calm and Design On!</p>
</div>
</header>
<div class="col-3 group">
<article>
<div class="box wrapper">
<h4>Currently</h4>
<p>I recently moved to SF from NYC and has been working on developing responsive website/WordPress theme. As a full stack developer, I’m also exploring the MEAN stack- MongoDB, ExpressJS, AngularJS and Node.js and I have a strong faith in Full-stack JavaScript development.</p>
</div>
</article>
<article>
<div class="box wrapper">
<h4>Skills</h4>
<ul>
<li>MEAN stack: MongoDB, Express.js, Angular.js, Node.js</li>
<li>HTML5 & CSS3</li>
<li>Adobe PhotoShop/Edge Inpect</li>
<li>Autodesk Sketchbook Pro</li>
<li>Responsive Web Design</li>
<li>Mobile App (Native and Web) Design</li>
</ul>
</div>
</article>
<article>
<div class="box wrapper">
<h4>Strengths</h4>
<p>I love designing stuff. I'm also into tweaking and coding up WEB applications and exploring exciting new technologies. (NEVER stop learning!) I embrace and solve real world problems with my aesthetic eye and strong engineering principles. Connecting LEFT and RIGHT brain and having them work together, there’s never a limit.</p>
</div>
</article>
</div>
</section>
<section id="contact" class="group">
<article>
<form method='post' action='mailform.php'>
<input type="text" name="name" id="name" placeholder="name" required="required">
<input type="text" name="email" id="email" placeholder="email" required="required">
<textarea name="message" id="message" placeholder="message" required="required"></textarea>
<input type="submit" id="sendMessage" name="sendMessage" value="Contact Me!">
</form>
<div id="loading">
Sending your message....
</div>
<div id="success">
</div>
</article>
<article>
<header>
<h2>Contact</h2>
<p><img src="./img/email.png">   Email:</p>
<p>info@chelseali.me</p>
<p><a href="https://www.facebook.com/chenyao.li.5"><img src="./img/facebook.png" class="social-icon"></a><a href="https://www.linkedin.com/in/chenyaoli"><img src="./img/linkedin.png" class="social-icon"></a><a href="https://twitter.com/cylimomo"><img src="./img/twitter.png" class="social-icon"></a></p>
</header>
</article>
</section>
</article>
</div>
<div id="container-footer">
<footer id="colophon">
<p class="small">©2014 all rights reserved</p>
</footer>
</div>
<!--make media query work on IE 8 and less-->
<script src="js/respond.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</body>
</html>