-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
232 lines (231 loc) · 9.41 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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gary Zhao - Front End Web Developer</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
href="https://fonts.googleapis.com/css?family=Lobster+Two"
rel="stylesheet"
/>
</head>
<body>
<section class="intro">
<div class="intro-wrapper">
<div class="copy">
<h1>I'm Gary Zhao</h1>
<h2>I am a front-end web developer</h2>
</div>
<a
href="mailto:gary.j.zhao@gmail.com?subject=Hello%20there"
class="button yellow"
>
Let's Chat
</a>
</div>
</section>
<section class="description">
<div class="description-wrapper">
<div class="copy">
<h3>Who am I?</h3>
<p>
I am a web developer who loves crafting code into beautiful
experiences on the web. I work tightly with designers, project
managers, and clients to transform their ideas into fully functional
web experiences.<br /><br />HTML, CSS, and JS are my bread and
butter, but I am not afraid to dive into new and exciting
technologies.
</p>
</div>
<div class="skills">
<h3>Skills</h3>
<div class="skill-bars">
<div>
<div class="skill-title">HTML5</div>
<div class="skill-bar" data-years="5">Legit</div>
</div>
<div>
<div class="skill-title">Bootstrap</div>
<div class="skill-bar" data-years="4">Awesome</div>
</div>
<div>
<div class="skill-title">Photoshop</div>
<div class="skill-bar" data-years="3">Aight</div>
</div>
<div>
<div class="skill-title">SASS/LESS</div>
<div class="skill-bar" data-years="5">Legit</div>
</div>
<div>
<div class="skill-title">GIT</div>
<div class="skill-bar" data-years="5">Legit</div>
</div>
<div>
<div class="skill-title">React</div>
<div class="skill-bar" data-years="4">Awesome</div>
</div>
<div>
<div class="skill-title">CSS3</div>
<div class="skill-bar" data-years="5">Legit</div>
</div>
<div>
<div class="skill-title">FOUNDATION</div>
<div class="skill-bar" data-years="5">Legit</div>
</div>
<div>
<div class="skill-title">Javascript</div>
<div class="skill-bar" data-years="5">Legit</div>
</div>
<div>
<div class="skill-title">AngularJS</div>
<div class="skill-bar" data-years="4">Awesome</div>
</div>
<div>
<div class="skill-title">Optimizely</div>
<div class="skill-bar" data-years="4">Awesome</div>
</div>
<div>
<div class="skill-title">Sketch</div>
<div class="skill-bar" data-years="3">Aight</div>
</div>
<div>
<div class="skill-title">RESPONSIVE</div>
<div class="skill-bar" data-years="5">Legit</div>
</div>
</div>
</div>
</div>
</section>
<section class="work">
<div class="work-item">
<div class="work-item-wrapper">
<div class="image">
<img
src="img/art.jpg"
srcset="img/art@2x.jpg 2x"
alt="Gary Zhao - Screenshot of Past Work"
/>
</div>
<div class="copy">
<h4>Art.com Homepage Revamp</h4>
<h5>"Rock Star" Web Developer since 2014</h5>
<p>
Applied hand-written JavaScript, CSS3 and HTML5 with an emphasis
on performance, scalability, search engine optimization (SEO) and
a positive user experience. Continually innovate new user
experiences in promotional landing pages to support marketing
campaigns.
</p>
<a href="http://www.art.com" class="button" target="_blank"
>Visit Site</a
>
</div>
</div>
</div>
<div class="work-item">
<div class="work-item-wrapper">
<div class="image">
<img
src="img/apc.jpg"
srcset="img/apc@2x.jpg 2x"
alt="Gary Zhao - Screenshot of Past Work"
/>
</div>
<div class="copy">
<h4>Allposters Homepage Revamp</h4>
<h5>Crushing it since 2014</h5>
<p>
Worked with designers to update and maintain the Allposters brand
and its 20+ affiliated websites for the past 3 years. Projects
ranged from complete responsive design overhaul of many existing
web pages to creating A/B tests to optimize for conversion.
</p>
<a href="http://www.allposters.com" class="button" target="_blank"
>Visit Site</a
>
</div>
</div>
</div>
<div class="work-item">
<div class="work-item-wrapper">
<div class="image">
<img src="img/ussf.jpg" alt="Gary Zhao - Screenshot of Past Work" />
</div>
<div class="copy">
<h4>USS Foundation Revamp</h4>
<h5>"That's Magic" Web Master from 2012 to 2014</h5>
<p>
Completely revamped the company's charity website with new design
to be more appealing and welcoming and with modern and semantic
code to streamline future updates.
</p>
<a
href="http://www.ussfoundation.org/"
class="button"
target="_blank"
>View Site</a
>
<a
href="https://github.com/garyjzhao/USSF"
class="button"
target="_blank"
>View Code</a
>
</div>
</div>
</div>
<div class="work-item">
<div class="work-item-wrapper">
<div class="image">
<img src="img/uss.jpg" alt="Gary Zhao - Screenshot of Past Work" />
</div>
<div class="copy">
<h4>Universal Surveillance Systems</h4>
<h5>"Awesome" Web Master from 2012 to 2014</h5>
<p>
Wordpress-based website that housed client's 50+ products. My
responsibilities were to create landing pages for new products, to
update existing products, and to perform updates and maintain
website uptime.
</p>
<a
href="http://www.universaleas.com/"
class="button"
target="_blank"
>Visit Site</a
>
</div>
</div>
</div>
</section>
<footer>
<div class="wrapper">
<div>Gary Zhao © 2014-20 <small>omgosh ive been doing this for 6 years?!</small></div>
<div class="social">
<a id="github" href="https://github.com/garyjzhao/" target="_blank">
<svg
width="19"
height="19"
viewBox="0 0 19 19"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19 9.987c-.05.354-.086.712-.15 1.064-.427 2.333-1.625 4.21-3.475 5.698-.837.673-1.785 1.15-2.802 1.5-.422.145-.71-.056-.713-.503-.005-.77-.003-1.538 0-2.307 0-.7-.062-1.38-.627-1.916.385-.07.75-.118 1.105-.206.977-.24 1.85-.662 2.445-1.502.445-.628.663-1.35.72-2.105.04-.52.032-1.05-.026-1.565-.07-.625-.37-1.17-.79-1.644-.083-.094-.096-.17-.055-.29.266-.765.158-1.514-.127-2.25-.017-.043-.098-.084-.154-.09-.322-.04-.63.042-.915.175-.467.218-.926.456-1.38.7-.128.068-.234.096-.38.06-1.446-.363-2.896-.362-4.343-.003-.15.038-.265.02-.394-.065-.585-.383-1.215-.675-1.9-.84-.458-.113-.537-.06-.665.375-.198.673-.225 1.342.01 2.013.017.05-.014.14-.054.186-.43.493-.73 1.052-.817 1.694-.184 1.33-.013 2.605.772 3.74.408.59 1.007.96 1.674 1.19.484.168 1 .252 1.5.37.09.022.183.03.25.04-.14.25-.283.5-.417.756-.04.08-.07.173-.074.262-.008.215-.135.306-.324.354-.507.13-1.015.224-1.525.02-.398-.16-.69-.447-.903-.807-.283-.478-.668-.836-1.208-.994-.188-.054-.4-.043-.6-.032-.13.007-.185.103-.088.22.085.1.17.218.282.282.493.28.773.727 1 1.214.14.298.256.605.513.836.396.357.88.492 1.392.517.447.02.898-.005 1.373-.01-.015-.03 0-.013 0 .002.008.567.027 1.135.018 1.702-.006.368-.328.564-.704.424-.466-.174-.936-.35-1.377-.58C3.055 16.626 1.63 15.034.72 12.992c-.387-.87-.598-1.79-.684-2.736C.03 10.178.013 10.1 0 10.023V8.705c.012-.046.03-.092.036-.14.064-.42.1-.846.194-1.26.452-1.997 1.473-3.672 3.034-5.01C4.758 1.018 6.494.26 8.474.056c1.205-.122 2.396-.046 3.56.276 1.928.533 3.54 1.563 4.81 3.092 1.097 1.318 1.793 2.817 2.045 4.51.038.257.073.515.11.773v1.282z"
fill="#FFF"
fill-rule="evenodd"
/>
</svg>
</a>
<a
id="linkedin"
href="https://www.linkedin.com/in/garyjzhao/"
target="_blank"
>
<img src="img/linkedin.png" alt="Gary Zhao Linkedin" />
</a>
</div>
</div>
</footer>
</body>
</html>