-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
352 lines (316 loc) · 19.7 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
349
350
351
352
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Santiago Gomez">
<meta name="description" content="Santiago Gomez is a self-motivated developer who actively seeks to expand his knowledge and gain valuable experience in the world of programming and software design.">
<meta name="keywords" content="Santiago Gomez, gomezsantiago, resume website, front end, frontend web developer, web designer, html css javascript, strong work ethic, self motivated, bilingual">
<base href="https://santiagoa58.github.io/portfolio/">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Megrim" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Santiago Gomez | Software Developer Resume | Portfolio</title>
</head>
<body>
<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="navi-toggle">
<label for="navi-toggle" class="navigation__button"><span class="navigation__icon"> </span></label>
<div class="navigation__background"> </div>
<nav class="navigation__nav">
<ul class="navigation__list">
<li class="navigation__item"><a href="#landing" class="navigation__link"><span class="fas fa-home"></span> Home</a></li>
<li class="navigation__item"><a href="#aboutMe" class="navigation__link"><span class="fas fa-address-card"></span> About Me</a></li>
<li class="navigation__item"><a href="#timeline" class="navigation__link"><span class="fas fa-clock"></span> Timeline</a></li>
<li class="navigation__item"><a href="#skills" class="navigation__link"><span class="fas fa-pencil-ruler"></span> Skills</a></li>
<li class="navigation__item"><a href="#portfolio" class="navigation__link"><span class="fas fa-folder-open"></span> Portfolio</a></li>
<li class="navigation__item"><a href="#contactMe" class="navigation__link"><span class="fas fa-envelope"></span> Contact Me</a></li>
<li class="navigation__item"><a href="#tictactoe" class="navigation__link"><span class="fas fa-gamepad"></span> Tic-Tac-Toe</a></li>
</ul>
</nav>
</div>
<header class="header" id="landing">
<div class="header__logo-box">
<img src="img/sg-logo-1x.png" alt="logo" class="header__logo">
</div>
<div class="header__text-box">
<!--text with partial borders on corners-->
<div class="text-box">
<div class="partial-box">
<h1 class="heading-primary">
<span class="heading-primary heading-primary--main partial-box__top"><span class="header-entry" value="Santiago Gomez">Santiago Gomez</span></span>
<span class="heading-primary heading-primary--sub partial-box__bottom"><span class="header-entry">software developer</span>
</span>
</h1>
</div>
<div id="action-call">
<a href="#contactMe" class="btn-partialbox partial-box__top--inverted partial-box__bottom--inverted heading-tertiary">
<span class="header-entry"><span class="glitch" value="Contact Me">Contact Me</span></span>
</a>
</div>
</div>
</div>
</header>
<main>
<!--ABOUT_ME-->
<section class="section-about" id="aboutMe">
<!--row-->
<div class="row section-row">
<!--column-->
<div class="col-1-of-2 section-row__heading">
<h2 class="heading-secondary glitch" value="About Me">About Me</h2>
</div>
<!--column-->
<div class="col-1-of-2">
<div class="section-row__contents">
<h3 class="u-margin-bottom-medium u-center-text heading-tertiary">Software Developer</h3>
<p class="paragraph">
My name is Santiago Gomez, I'm a Software Developer with a B.A. in Computer Science from CUNY Queens College. I'm self-motivated and enjoy learning about a variety of subjects on my own such as web development, psychology, art, and languages.
</p>
<p class="paragraph">
For the past 2 years I've worked for Adaptive Financial Consulting where I've helped develop bespoke real-time trading software using mainly React, RxJS, Redux, and Typescript.
</p>
<p class="paragraph">
in terms of career, my main interests lie in the financial industry. I believe the rise of financial technology and cryptocurrency makes this an exciting space to be in.
</p>
</div>
</div>
</div>
</section>
<!--TIMELINE-->
<section class="section-timeline" id="timeline">
<!--timeline heading-->
<div class="section-heading">
<h2 class="heading-secondary glitch" value="timeline">Timeline</h2>
</div>
<!--Timeline year selection-->
<div class=" section-timeline__container">
<!--2013 - 2019-->
<div class="section-timeline__radio-group">
<input type="radio" class="section-timeline__radio-input" id="2013" name="year" onclick="yearchange('2013-today',this)">
<label for="2013" class="section-timeline__radio-label heading-tertiary">
<span class="section-timeline__radio-button"></span>
<span class="">2013 - 2019</span>
</label>
</div>
<!--2014-2019-->
<div class="section-timeline__radio-group">
<input type="radio" class="section-timeline__radio-input" id="2014" name="year" onclick="yearchange('2014-2017',this)">
<label for="2014" class="section-timeline__radio-label heading-tertiary">
<span class="section-timeline__radio-button"></span>
<span class="">2014 - 2019</span>
</label>
</div>
<!--2019-Today-->
<div class="section-timeline__radio-group">
<input type="radio" class="section-timeline__radio-input" id="2017" name="year" onclick="yearchange('2017-2019',this)" checked="checked">
<label for="2017" class="section-timeline__radio-label heading-tertiary">
<span class="section-timeline__radio-button"></span>
<span class="partial-smallbox__top partial-smallbox__bottom">2019 - Today</span>
</label>
</div>
</div>
<!--Timeline content info-->
<div class="section-timeline__container">
<div class="row section-timeline__row circle-design">
<!--2017-2019-->
<div class="section-timeline__contents" id="first-shown">
<h3 class="section-timeline__contents-year 2017-2019 heading-tertiary">2019 - Today</h3>
<p class="section-timeline__contents-p 2017-2019">Started working for Adaptive Financial Consulting as a UI consultant developing a real-time trading platform on a client project. I was the main developer on their admin console which is used to onboard users and manage the application. I also helped mentor less experienced developers and presented demos and technical designs to various stakeholders.</p>
</div>
<!--2014-2019-->
<div class="section-timeline__contents">
<h3 class="section-timeline__contents-year 2014-2017 heading-tertiary">2014 - 2019</h3>
<p class="section-timeline__contents-p 2014-2017">Studied Mechanical Engineering for 3 years at CUNY City College of New York, but later decided to leave that behind and switch to Computer Sience. I graduated on 2019 from CUNY Queens College with a B.A. degree in Computer Science and a minor in Mathematics</p>
</div>
<!--2013-2019-->
<div class="section-timeline__contents">
<h3 class="section-timeline__contents-year 2013-today heading-tertiary">2013 - 2019</h3>
<p class="section-timeline__contents-p 2013-today">Started working at the Bowery Hotel as a Busser/Barback, where tasks included quickly and efficiently stocking the bar prior to and during special events with everything needed for the bartenders to cater to the customers' needs.</p>
</div>
</div>
</div>
</section>
<!--SKILLS-->
<section class="section-skills" id="skills">
<div class="section-heading">
<h2 class="heading-secondary glitch" value="skills">skills</h2>
</div>
<div class="section-skills__content">
<div class="row">
<div class="cube-design u-margin-bottom-huge">
<h3 class="cube-design__title"><span class="glitch" value="UI">UI</span></h3>
<ul class="cube-design__list">
<li class="cube-design__list-items">Typescript</li>
<li class="cube-design__list-items">
JavaScript</li>
<li class="cube-design__list-items">React</li>
</ul>
</div>
<div class="cube-design u-margin-bottom-huge">
<h3 class="cube-design__title"><span class="glitch" value="Other">Other</span></h3>
<ul class="cube-design__list">
<li class="cube-design__list-items">Git</li>
<li class="cube-design__list-items">REST</li>
<li class="cube-design__list-items">Websockets</li>
</ul>
</div>
</div>
<div class="row">
<div class="cube-design u-margin-bottom-huge">
<h3 class="cube-design__title"><span class="glitch" value="UI">UI</span></h3>
<ul class="cube-design__list">
<li class="cube-design__list-items">HTML</li>
<li class="cube-design__list-items">XML</li>
<li class="cube-design__list-items">CSS</li>
<li class="cube-design__list-items">Sass</li>
</ul>
</div>
<div class="cube-design u-margin-bottom-huge">
<h3 class="cube-design__title"><span class="glitch" value="UI">UI</span></h3>
<ul class="cube-design__list">
<li class="cube-design__list-items">Redux</li>
<li class="cube-design__list-items">RxJS</li>
<li class="cube-design__list-items">Jest</li>
</ul>
</div>
<div class="cube-design">
<h3 class="cube-design__title"><span class="glitch" value="Backend">Backend</span></h3>
<ul class="cube-design__list">
<li class="cube-design__list-items">JAVA</li>
<li class="cube-design__list-items">SQL</li>
<li class="cube-design__list-items">PHP</li>
</ul>
</div>
</div>
</div>
</section>
<!--PORTFOLIO-->
<section class="section-portfolio" id="portfolio">
<div class="section-heading">
<h2 class="heading-secondary glitch" value="Portfolio">Portfolio</h2>
</div>
<div class="section-portfolio__content">
<!--portfolio info-->
<div class="hive-row">
<div class="section-row__contents hive-row__info">
<p class="paragraph"><a class="highlight" href="http://how2bar.gomezsantiago.com" target="_blank">How2Bar:</a> Bartending website made using HTML, CSS, and JavaScript. All content was researched and written by me.</p>
<p class="paragraph"><a class="highlight" href="http://cryptotracker.gomezsantiago.com" target="_blank">CryptoTracker:</a> Cryptocurrency price tracking website. Built using Typescript, React, RxJS, and websocket connections and REST APIs</p>
<p class="paragraph"><a class="highlight" href="http://sg.gomezsantiago.com" target="_blank">GomezSantiago:</a> First web design project and first version of this resume website. It uses HTML, CSS, and JavaScript.</p>
<p class="paragraph"><a class="highlight" href="#tictactoe">Tic-Tac-Toe:</a> A simple tic-tac-toe game made using only JavaScript.</p>
<p class="paragraph"><a class="highlight" href="http://natours.gomezsantiago.com/" target="_blank">Natours:</a> A dummy outdoor tours website that utilizes advanced css and sass. It was made as part of an <a href="https://www.udemy.com/advanced-css-and-sass/learn/v4/overview" target="_blank" class="highlight-link">advanced css and sass</a> course on Udemy by Jonas Schmedtmann.</p>
</div>
</div>
<!--hive grid-->
<div class="hive-row">
<div class="hive">
<div class="hive-design">
<div class="hive-design__contents">
<a href="http://how2bar.gomezsantiago.com" target="_blank"><img src="./img/portfolio_bar.png" alt="Bartending Website"></a>
</div>
</div>
</div>
<div class="hive">
<div class="hive-design">
<div class="hive-design__contents">
<a href="http://cryptotracker.gomezsantiago.com" target="_blank"><img src="./img/portfolio_cryptotracker.png" alt="Cryptocurrency Price Tracking Website"></a>
</div>
</div>
</div>
<div class="hive">
<div class="hive-design">
<div class="hive-design__contents">
<a href="http://sg.gomezsantiago.com" target="_blank"><img src="./img/portfolio_resume-v1.png" alt="resume website version: 1"></a>
</div>
</div>
</div>
</div>
<div class="hive-row">
<div class="hive">
<div class="hive-design">
<div class="hive-design__contents">
<a href="#tictactoe"><img src="./img/portfolio_tictactoe.png" alt="tic-tac-toe javascript game"></a>
</div>
</div>
</div>
<div class="hive">
<div class="hive-design">
<div class="hive-design__contents">
<a href="http://natours.gomezsantiago.com/" target="_blank"><img src="./img/portfolio_natours.png" alt="Bartending Website"></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--CONTACT ME-->
<section class="section-contactme" id="contactMe">
<!--row-->
<div class="row">
<!--column-->
<div class="col-1-of-2 section-row__heading">
<h2 class="heading-secondary glitch" value="Contact Me">Contact Me</h2>
</div>
<!--column-->
<div class="col-1-of-2">
<form id="contactmeform" class="form" onsubmit="formsubmit(); return false;">
<h3 class="u-margin-bottom-medium u-center-text heading-tertiary"></h3>
<div class="form__group">
<input type="text" class="form__input" placeholder="Full Name" id="name" required>
<label for="name" class="form__label">Full Name</label>
</div>
<div class="form__group">
<input type="email" class="form__input" placeholder="Email Address" id="email" required>
<label for="email" class="form__label">Email Address</label>
<h4 class="submit-error"></h4>
</div>
<div class="form__group">
<textarea class="form__input form__textarea" placeholder="Message" id="message" required></textarea>
<label for="message" class="form__label">Message</label>
</div>
<div class="form__group u-margin-top-medium u-margin-bottom-small"><button type="submit" value="submit" class="btn" id="sendbtn">Send <i class="fas fa-envelope"></i></button></div>
</form>
</div>
</div>
</section>
<!--JAVASCRIPT GAME-->
<section class="section-game" id="tictactoe">
<div class="section-heading">
<h2 class="heading-secondary glitch" value="Tic-Tac-Toe">Tic-Tac-Toe</h2>
</div>
<div class="section-game__content" id="tictactoeContent">
<h3 class="section-game__results"></h3>
<canvas></canvas>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__logo-box">
<picture class="footer__logo">
<!--1x (<-density descriptor) for low res screen & 2x for high res-->
<img srcset="img/sg-logo-1x.png 1x, img/sg-logo-2x.png 2x" alt="Full logo" src="img/sg-logo-2x.png">
</picture>
</div>
<div class="row">
<div class="col-1-of-2">
<div class="footer__navigation">
<ul class="footer__list">
<li class="footer__item"><a href="https://www.instagram.com/santiarrubla" target="_blank" class="footer__link"><i class="fab fa-instagram"></i></a></li>
<li class="footer__item"><a href="#contactMe" class="footer__link"><i class="fas fa-envelope"></i></a></li>
<li class="footer__item"><a href="https://www.linkedin.com/in/santiago-gomez-13b4a9115/" target="_blank" class="footer__link"><i class="fab fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="col-1-of-2">
<p class="footer__copyright">
Designed and Developed by <span class="footer__link">Santiago Gomez</span> using sass, php, and javascript. Copyright <span class="footer__link">© GomezSantiago.com</span> 2018.
</p>
</div>
</div>
</footer>
<script src="scripts/zenscroll-min.js"></script>
<script src="scripts/script.js"></script>
<script src="scripts/gamescript.js"></script>
</body>
</html>