-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
315 lines (288 loc) · 13.3 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Javier Ruiz</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/assets/css/main.css">
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="assets/js/myjs.js"></script>
<!-- Typekit font load-->
<script src="//use.typekit.net/mxz4qjh.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> -->
<script src="https://use.fontawesome.com/85f6cf8370.js"></script>
<div class="home-wrap">
<script src="../assets/js/test.js"></script>
<div class="mobile-nav">
<!--NAV BAR!-->
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li><a class='test' href="#Home">Home</a></li>
<li><a class='test' href="#About">About</a></li>
<li><a class='test' href="#Work">Work</a></li>
<!-- <li><a href="#Skills">Skills</a></li> -->
<li><a class='test' href="#Projects">Projects</a></li>
<!-- <li><a href="#Blog">Blog</a></li> -->
<!-- <li><a href="#Life">Life</a></li> -->
<li><a class='test' href="#Contact">Contact</a></li>
</ul>
</nav>
</div>
<!--Hamburger-->
<div class="button_container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</div>
<a id="section" name='Home'>
<header>
<div class="logo"></div>
<nav class="site-nav">
<a href="#About">About</a>
<a href="#Work">Work</a>
<!-- <a href="#Skills">Skills</a> -->
<a href="#Projects">Projects</a>
<!-- <a href="#Blog">Blog</a> -->
<!-- <a href="#Life">Life</a> -->
<a href="#Contact">Contact</a>
</nav>
<div class = 'content'>
<p id="javier">javier <span style="color: #ad9365">ruiz</span></p>
<p id="role">Software <span style="color: white">Developer</span></p>
</div>
<!--Optional
<a href="mailto:[email protected]" class="email-link">+emailme</a>-->
</header>
<div class="home-sections">
<a id="section" name='About'>
<section class="About">
<div class="flex flex--center">
<div class="col-2">
<h2>A <span class="gold">brief</span> background</h2>
<hr class="line-break">
<p class="common">
Hey there, I see you've stumbled upon my website! I'm <span style="color: red">Javier</span>. A 22 year old Software Engineer currently working at Square. My interest in <span class="gold">Software</span> development stemmed from my
fascination with computers and video games from a very early age. I have a strong passion for
developing innovative software and creating unforgettable user experiences. I also like to mingle with Graphic Design from time to time.
</p>
<a href="/assets/Resume_2017.pdf" target="_blank">Resume</a>
</div>
</div>
</section>
<a id="section" name='Work'>
<section name='Work' class="Work">
<div class="flex flex--center">
<div class="col-2">
<!-- The Modal -->
<div id="thescore-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close-5" class='close'>x</span>
<h2>theScore</h2>
<div class="modal-body">
<p>Software Engineer Intern<span style="margin: 0 7px; color: #ad9365">||</span> May 2017 - Aug 2017</p>
<ul>
<li>Added real-time tracking and visualization for Youtube, Instagram and Twitter content ingestion providing product reliability and insights for directors</li>
<li>Created and maintained a third party content management system automating over 50% of the content team’s manual work</li>
<li>Paired on the redesign of the API and model architecture across 3 repositories</li>
<li>Built a fully customizable content alert notification system to be able to manually send out custom push notifications to end-users</li>
<li>Worked with React, Redux, and Ruby on Rails</li>
</ul>
</div>
</div>
</div>
<div id="px-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close-4" class='close'>x</span>
<h2>500px</h2>
<div class="modal-body">
<p>Full-Stack Software Developer<span style="margin: 0 7px; color: #ad9365">||</span> Sep 2016 - Dec 2016</p>
<ul>
<li>Built and documented multiple APIs, including a highly-scalable photographer search API with object-based searching to be used by over 9 million users</li>
<li>Took lead on reducing security vulnerabilities by creating new two-factor authentication flows</li>
<li>Integrated the rescheduling component to a new calendar system after analyzing several best practices</li>
<li>Improved the error handling system for failed Paypal payments on Marketplace</li>
<li>Implemented tracking and analytics functionalities to feature launches using the Google Analytics API</li>
</ul>
</div>
</div>
</div>
<div id="joist-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close-1" class='close'>x</span>
<h2>Joist</h2>
<div class="modal-body">
<p>Full-Stack Software Engineer <span style="margin: 0 7px; color: #ad9365">||</span> Jan 2016 - April 2016</p>
<ul>
<li>Created a Web service as a Rails Engine to import, validate, manage, and export leads to a CRM platform in real-time; Improved lead to customer conversion by 20%</li>
<li>Implemented PDF localization for Invoices and Estimates on all platforms (iOS, Web, Android)</li>
<li>Created the help center component of the Android app using Kotlin</li>
</div>
</div>
</div>
<!-- The Modal -->
<div id="davis-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close-2" class='close'>x</span>
<h2>Davis <span class="plus">+</span> Henderson</h2>
<div class="modal-body">
<p>Software Developer <span style="margin: 0 7px; color: #ad9365">||</span> May 2015 - Aug 2015</p>
<ul>
<li>Developed a database automation build and deployment system with support for continuous integration and incremental deployment; reduced deployment time by 70%</li>
<li>Restructured 60% of the company's databases and integrated them into Team Foundation Server</li>
<li>Created multiple Python, Batch, and SQL scripts to be used for text, data, and file manipulation during automation builds</li>
</ul>
</div>
</div>
</div>
<!-- The Modal -->
<div id="freelance-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close-3" class='close'>x</span>
<h2>Freelance</h2>
<div class="modal-body">
<p>Motion Graphic Designer <span style="margin: 0 7px; color: #ad9365">||</span> Feb 2011 - Aug 2013</p>
<ul>
<li>Designed and animated custom 5-30 second animations matching client specifications using Cinema 4D, Photoshop, and Adobe After Effects</li>
<li>Analyzed and discussed product specifications with clients to achieve optimum quality and full customer satisfaction</li>
</ul>
</div>
</div>
</div>
<h2><span class="gold">Work</span> Experience</h2>
<!-- line-break -->
<!-- <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="177" height="37" viewBox="0 0 177 37">
<image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAALEAAAAlCAMAAAA6APiiAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAbFBMVEUAAACtk2Wtk2Wtk2Wtk2Wtk2VXSjMAAABQRC8AAAAAAAAAAAAAAAAAAAAAAAAAAACtk2Wtk2Wtk2VtXUAAAACTfVajil8hHBMAAABnWDyljGBoWD2PelStk2Wtk2Wfh10AAACfh10AAAAAAADSMSMbAAAAI3RSTlMAIawikAwMCg0UHBobEAgE1cyrEwEomB8GOZYKKY8GJQckGb1TezYAAAABYktHRACIBR1IAAAACXBIWXMAAAsSAAALEgHS3X78AAABCklEQVRYw9XS2Q6CQAwFUFAWYQQVEYYd/f+PdATcgD4YmdB7X5u0J801DD0xN1tNm3WBLduCIpuW4zpIZNPaeb63wyE/wELsFdlcm/IDOAgDgULuwQfjgEJ+gg0U8hsMQv4EQ5C/wQDkMZg9eQpmTp4DsybPgxmTKfDy5OPpvxyHPdGZAPfkc7Twvb8TX5KUAD/IaXKJF3vyMpFelhfktMgzT65NHMX1RVnVxLCuSuG7axNHkarFDUGuq0Y1mduP45Yk9+CWW49pMlcwSeYLJsicwbNk3uAZMnfwhMwfPCIjgAfytSNjgD/IKOAX2YYBd+RbcI1wwAM5BAL3xRBI4I7sQ4EVWbpSE/gOTJslOhDMC2AAAAAASUVORK5CYII=" width="177" height="37"/>
</svg> -->
<hr class="line-break"></hr>
<div class="jobs">
<div class="individual-job">
<button id="thescore-btn" class="link-effect">
<span class="border">
<h3>theScore</h3>
<h4>Software Engineer Intern</h4>
</span>
</button>
</div>
<div class="individual-job">
<button id="500px-btn" class="link-effect">
<span class="border">
<h3>500px</h3>
<h4>Full-Stack Software Developer Intern</h4>
</span>
</button>
</div>
<div class="individual-job">
<button id="joist-btn" class="link-effect">
<span class="border">
<h3>Joist</h3>
<h4>Full-Stack Software Engineer Intern</h4>
</span>
</button>
</div>
<div class="individual-job">
<button id="davis-btn" class="link-effect">
<span class="border">
<h3>Davis <span style="position: relative;top:6px">+</span> Henderson</h3>
<h4>Software Developer Intern</h4>
</span>
</button>
</div>
<div id="freelance-btn" class="individual-job">
<button class="link-effect">
<span class="border">
<h3>Freelance</h3>
<h4>Motion Graphic Designer</h4>
</span>
</button>
</div>
</div>
</div>
</div>
</section>
<section class="Testimonial">
<div class="flex flex--center">
<div class="col-2">
<p>"Javier worked with our team to define the needed outcomes, did research, and tried different approaches to find solutions. He contributed significantly to the end product. He is driven, enthusiastic, adaptive, and an excellent team player. He is welcome to return should he desire."
<br>
<span class="position">Steve D'Agostinelli
<br>
CMS Dev Delivery Manager of D+H
</span>
</p>
</div>
</div>
</section>
<a id="section" name='Projects'>
<section class="Projects">
<h2><span class="gold">Some</span> Projects</h2>
<hr class="line-break"></hr>
<div class="project-one">
<a href="https://github.com/jitindodd/nym-in" target="_blank">
<div class="content">
<h2>nym-in</h2>
<h4>Winner for top Nymi Hack at UofTHacks</h4>
<h4>C++ , Qt , SQL</h4>
<p>Nym-In makes the ticket-purchasing process effortless by using Bluetooth/NFC biometric authentication when purchasing and authenticating tickets.</p>
</div>
</a>
</div>
<div class="flex flex--center">
<div class="col-50 project-two">
<a href="https://github.com/JavierR14/gamedeals-messenger-bot" target="_blank">
<div class="content square mandel">
<h2>Gaming Deals Messenger Bot</h2>
<h4>Python, Flask, SQLAlchemy, PRAW</h4>
<p>A Facebook Messenger bot that notifies users of new gaming related deals in real-time according to their preferences</p>
</div>
</a>
</div>
<div class="col-50 project-three">
<a href="https://github.com/JavierR14/SimulCast" target="_blank">
<div class="content square web">
<h2>SimulCast (In Progress)</h2>
<h4>Ruby on Rails, Coffeescript, HTML + SASS</h4>
<p>A social media platform where users can explore, share, and discuss podcasts with others</p>
</div>
</a>
</div>
</div>
<div class="github">
<a href="https://github.com/JavierR14" target="_blank">GitHub</a>
</div>
</section>
<a id="section" name='Contact'>
<section class="Contact">
<div class="flex flex--center">
<div class="col-2">
<h2><span class="gold">Contact</span> Me</h2>
<hr class="line-break">
<a href="http://www.linkedin.com/in/jruizard" target="_blank"><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></a>
<a href="http://www.github.com/JavierR14" target="_blank"><i class="fa fa-github fa-3x" aria-hidden="true"></i></a>
<a href="http://www.twitter.com/Javier_Ruiz14" target="_blank"><i class="fa fa-twitter fa-3x" aria-hidden="true"></i></a>
<h3>Feel Free to <span style='color: #ad9365'>Say Hello!</span></h3>
<form id='contactform' method="POST">
<input type="text" name="name" placeholder="Name">
<input type="text" name="email" placeholder="Email">
<textarea class="message" name="message" placeholder="Your Message"></textarea>
<input type="submit" class="send" value="Send">
<input type="hidden" name="_next" value="//javierruiz.ca" />
<input type="text" name="_gotcha" style="display:none" />
</form>
</div>
</div>
</section>
</div>
</div>
</body>
</html>