-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·348 lines (327 loc) · 17.4 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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!DOCTYPE html>
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Front-End Dev</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="/coder-favicon.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" 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" href="https://cdnjs.cloudflare.com/ajax/libs/picnic/6.4.0/picnic.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" type="text/css" href="dist/css/main.css">
</head>
<body>
<header id="Header" class="header">
<div class="inner-full">
<ul>
<li>
<a data-scroll href="#Skills">Skills</a>
</li>
<li>
<a data-scroll href="#Work">Work</a>
</li>
<!--<li>Projects</li>-->
<li>
<a data-scroll href="#Contact">Contact</a>
</li>
</ul>
</div>
</header>
<main>
<section>
<div class="top-hero">
<div class="hero-overlay"></div>
<div class="hero-txt">
<p>Pete Arevalo</p>
<h1>Front-End Developer</h1>
</div>
<div class="hero-arrow bounce">
<a href="#Skills">
<i class="fa fa-caret-down" aria-hidden="true"></i>
</a>
</div>
</div>
</section>
<section id="Skills" class="skills">
<div class="inner-body section-top-padding">
<div class="flex one two-800 three-1200 skills-grid">
<div class="skill-point">
<div class="inner">
<i class="fa fa-codepen" aria-hidden="true"></i>
<h2>Project Tooling</h2>
<p>Using NPM scripts and Webpack allows me to cut my setup and delivery time in half - I use the
right tools for the job. Minifying assets, live reload and module bundling allow for speedy
delivery of ES6 code.</p>
</div>
</div>
<div class="skill-point">
<div class="inner">
<i class="fa fa-mobile" aria-hidden="true"></i>
<h2>Mobile First</h2>
<p>With more and more faces looking down at our devices, I beleive it is of utmost important to
design applications and websites with this in mind. I ensure that page size is small and
scripts are efficient, to deliver a clean and fast experience to your users. </p>
</div>
</div>
<div class="skill-point">
<div class="inner">
<i class="fa fa-github" aria-hidden="true"></i>
<h2>Push Pull Repeat</h2>
<p>Working with version control is a necessity when developing with teams, and is crucial to project
workflow. Commiting often and fixing merge confilicts from the command line is frequent in
my normal day.
</p>
</div>
</div>
<div class="skill-point">
<div class="inner">
<i class="fa fa-css3" aria-hidden="true"></i>
<h2>CSS Workflow</h2>
<p>A SASS preprocessor paired with Foundation speeds up my development time, while ensuring your
project is not filled with uneeded code and will be browser compatible.
</p>
</div>
</div>
<div class="skill-point">
<div class="inner">
<i class="fa fa-users" aria-hidden="true"></i>
<h2>Team Management</h2>
<p>While I enjoy playing the role as contributor, I have experience managing small teams and and
being the lead developer on extremely successful projects. I enjoy the challenge in making
sure deadlines are met, and my people are happy.
</p>
</div>
</div>
<div class="skill-point">
<div class="inner">
<i class="fa fa-line-chart" aria-hidden="true"></i>
<h2>SEO Minded</h2>
<p>I know that writing compliant HTML and making pages Google-friendly is important to any business,
and I create markup with the latest standards for web searches.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="Work">
<div class="tabs three">
<input id='tab-1' type='radio' name='tabgroupB' checked />
<input id='tab-2' type='radio' name='tabgroupB'>
<input id='tab-3' type='radio' name='tabgroupB'>
<div class="row slider-carousel">
<div>
<div clas="slider-quote">
<p>"Pete is an incredible asset to any team. His ability to work quickly, his sense of what works and what doesn't, his thoroughness and knowledge, his ability to learn and adapt, and his work ethic are among the best I've worked with. He wants to build you the best site in the world, and he's willing to do what it takes to make that possible. Give Pete a project, and he will exceed your expectations in every way."</p>
</div>
<div class="slide-author">
<p>Brian Genchur | Square Grove LLC - Marketing & PR Director</p>
</div>
</div>
<div>
<div class="slider-quote">
<p>"Pete is a talented developer, incredibly hardworking, a self-starter, super smart, creative,
totally focused on doing the job right to ensure clean code and mobile responsiveness/cross-browser
compatibility. He has corrected several clunky coding problems created by our initial outside
development team, and has come up with solutions in an afternoon that our contracted programmers
said were not possible. He is also a great communicator, a very funny guy, and an all-around
pleasure to work with."</p>
</div>
<div class="slide-author">
<p>Shannon Calderon | We Can Write That - Owner</p>
</div>
</div>
<div>
<div class="slider-quote">
<p>"The front end development work Peter did for our company has really taken our website to the
next level. As an e-commerce site, we are always looking for ways to improve the customer
experience, and Peter implemented interactive features that make the shopping experience
fun for our customers. He also had several great ideas for improving the overall design.
We continue to receive positive feedback about our site as a result of the work he's done!"</p>
</div>
<div class="slide-author">
<p>Angela Arnold | The Human Solution - Content Manager</p>
</div>
</div>
</div>
<div class="slider-buttons">
<label class="pseudo button toggle" for="tab-1">
<div class="slider-btn active"></div>
</label>
<label class="pseudo button toggle" for="tab-2">
<div class="slider-btn"></div>
</label>
<label class="pseudo button toggle" for="tab-3">
<div class="slider-btn"></div>
</label>
</div>
</div>
<div class="inner-body section-top-padding section-btm-padding work-cards flex one two-800 three-1200">
<article class="card">
<div class="inner">
<img src="src/img/ud-swatch.png" alt="">
<footer>
<h3>UPLIFT Desk</h3>
<p>I rebuilt their previous site as the sole developer in 5 month span - Only months after launch
did the conversion rate skyrocket from the previous numbers. Quick load times, and an emphasis
on UX created a comfortable buying experience for a robust product.
</p>
<a class="button-wrap" href="https://www.upliftdesk.com/" target="blank">
<button class="alt">View Site</button>
</a>
</footer>
</div>
</article>
<article class="card">
<div class="inner">
<img src="src/img/baby-swatch.png" alt="">
<footer>
<h3>Baby Riddle</h3>
<p>Baby Riddle needed a more modern site to attract customers, as well as a fun theme. I was able
to work with the client to implement their vision, as well as implement the needed plugins
they required.
</p>
<a class="button-wrap" href="https://www.babyriddle.com/" target="blank">
<button class="alt">View Site</button>
</a>
</footer>
</div>
</article>
<article class="card">
<div class="inner">
<img src="src/img/ths-swatch.png" alt="">
<footer>
<h3>The Human Solution</h3>
<p>The optimized re-design brought a much needed change to its customers, and is experiencing a
huge change in traffic and sales. It was also the recipient of the Bigcommerce
<a href="https://www.bigcommerce.com/press/releases/bigcommerce-announces-2017-design-award-winners/">
2017 Design Award Winners</a> for best customer experience.
</p>
<a class="button-wrap" href="https://www.upliftdesk.com/" target="blank">
<button class="alt">View Site</button>
</a>
</footer>
</div>
</article>
<article class="card">
<div class="inner">
<img src="src/img/dessert-swatch.png" alt="">
<footer>
<h3>Dessert'd</h3>
<p>Althouhg I was quite hungry while working on this site - I was able to ensure a smooth process
for updating this sites look, as well as add custom features to the search and blog. Dessert'd
also needed some custom javascript to ensure that their products shipped and arrived on time.
</p>
<a class="button-wrap" href="https://www.dessertd.com/" target="blank">
<button class="alt">View Site</button>
</a>
</footer>
</div>
</article>
<article class="card">
<div class="inner">
<img src="src/img/seekoutside-swatch.png" alt="">
<footer>
<h3>UPLIFT Desk</h3>
<p>I was tasked with diagnosing Seek Outsides' page speed, and by implementing the latest technologies
to limit browser requirements, they are able to deliver a fast and speedy experience for
their customers.
</p>
<a class="button-wrap" href="https://www.seekoutside.com/" target="blank">
<button class="alt">View Site</button>
</a>
</footer>
</div>
</article>
<article class="card">
<div class="inner">
<img src="src/img/sc-swatch.png" alt="">
<footer>
<h3>Shannon Calderon Writes</h3>
<p>Shannon needed a quick site to advertise her services, and I was able to complete this project
on Wordpress in record time on a slim budget.
</p>
<a class="button-wrap" href="https://www.shannoncalderonwrites.com/" target="blank">
<button class="alt">View Site</button>
</a>
</footer>
</div>
</article>
</div>
</section>
<section>
</section>
<section id="Contact">
<div class="three-fifth align-center contact-wrapper">
<h3>Hello,</h3>
<p>My name is Pete and I look forward to working with you on your next project. Please feel free to contact
me with any questions, thanks!</p>
<form action="https://formspree.io/pete.g.arevalo@gmail.com" method="POST">
<fieldset class="flex two">
<label>
<input type="name" name="name" placeholder="Name" required>
</label>
<label>
<input type="email" name="email" placeholder="Email" required>
</label>
</fieldset>
<textarea name="description" placeholder="Drop me a line..." style="height:245px"></textarea>
<input type="text" name="_gotcha" style="display:none" />
<input type="submit">
</form>
<div class="modal">
<input id="modal_1" type="checkbox" />
<label for="modal_1" class="overlay"></label>
<article class="modal-body">
<header>
<h3>Thanks!</h3>
<label for="modal_1" class="close">×</label>
</header>
<section class="content">
I will contact you shortly.
</section>
</article>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="inner-full">
<ul>
<li>
<a href="tel:512-736-4985">
<i class="fa fa-phone icon" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="mailto:pete.g.arevalo@gmail.com?Subject=Hello%20Pete" target="_top">
<i class="fa fa-envelope-o icon" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="resume.pdf" target="_blank">
<i class="fa fa-file-pdf-o icon" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="https://github.com/PeteyRev" target="_blank">
<i class="fa fa-github-alt icon" aria-hidden="true"></i>
</a>
</li>
<!-- <li>
<i class="fa fa-twitter icon" aria-hidden="true"></i>
</li> -->
</ul>
</div>
<p>Copyright ©2017 Peter Arevalo. All rights reserved.</p>
</footer>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/umbrella/2.9.0/umbrella.min.js"></script>
<script src="dist/js/app.min.js"></script>
</html>