-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
231 lines (230 loc) · 11.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Nick Esparza</title>
</head>
<body>
<div class="container" style="padding: 40px;">
<div class="row justify-content-around align-items-center">
<div class="col-lg" style="text-align: center;">
<img class="headshot img-fluid" title="Yup, that's me." src="images/profile_small1.jpg"/>
</div>
<div class="col-lg">
<h1>Nick Esparza</h1>
<h5>Hi, I'm Nick. I'm a US-based developer specializing in building front-to-back web applications.</h5>
<p>Check out some of my projects below.</p>
<a href="https://www.linkedin.com/in/nickesparza/" target="_blank">
<button class="btn btn-outline-dark">LinkedIn</button>
</a>
<a href="/files/nickesparza_resume.pdf" target="_blank">
<button class="btn btn-outline-dark">Resume</button>
</a>
<a href="https://github.com/nickesparza" target="_blank">
<button class="btn btn-outline-dark">GitHub</button>
</a>
</div>
</div>
<div class="row">
<div class="row" style="text-align: center;">
<h2>Proficiencies</h2>
</div>
<div class="row justify-content-around">
<div class="col-3">
<h5>Frontend</h5>
<p>
<ul>
<li>JavaScript</li>
<li>React</li>
<li>HTML/CSS</li>
</ul>
</p>
</div>
<div class="col-3">
<h5>Backend</h5>
<p>
<ul>
<li>Node</li>
<li>Django</li>
<li>MongoDB/Mongoose</li>
<li>Express</li>
<li>SQL/Postgres</li>
</ul>
</p>
</div>
<div class="col-3">
<h5>General</h5>
<ul>
<li>Python</li>
<li>Ruby</li>
<li>Agile/Scrum Methodology</li>
<li>User Experience/Learning Tech</li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md sticky-top bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="navbarNav">
<a class="nav-link active" href="#my-junimo">MyJunimo</a>
<a class="nav-link active" href="#watchparty">WatchParty</a>
<a class="nav-link active" href="#burger">Burger Rush</a>
<a class="nav-link active" href="#sentai">Super SentAPI</a>
<a class="nav-link active" href="#medic">MedicApp</a>
</div>
</div>
</nav>
<div class="section" id="my-junimo">
<div class="container">
<div class="row justify-content-around align-items-center">
<div class="col-lg-4 my-2 headline">
<h2>MyJunimo Helper</h2>
<img class="img-fluid" src="/images/myjunimo-splash.png">
<a href="https://my-junimo-helper.herokuapp.com/" target="_blank">
<button class="btn btn-info my-2">Go to site</button>
</a>
<a href="https://github.com/nickesparza/my-Junimo-Client" target="_blank">
<button class="btn btn-outline-primary my-2">GitHub Page</button>
</a>
</div>
<div class="col-lg-4 my-2 content">
<p>
This project was designed as a companion application for the video game Stardew Valley.
Users can log their character details and manage their inventory of resources.
Also includes a full list of craftable recipes and ingredient lists for each one.
</p>
<p>
I was responsible for the full React frontend, user experience, and styling.
I built a three-branch component hierarchy that used hooks in the parent component
to conditionally render the user's information depending on their input.
</p>
</div>
</div>
</div>
</div>
<div class="section" id="watchparty">
<div class="container">
<div class="row justify-content-around align-items-center">
<div class="col-lg-4 my-2 headline">
<h2>WatchParty</h2>
<img class="img-fluid" src="/images/watchparty-splash.jpg">
<a href="https://ga-2-watchparty.herokuapp.com/parties" target="_blank">
<button class="btn btn-info my-2">Go to site</button>
</a>
<a href="https://github.com/nickesparza/ga-2" target="_blank">
<button class="btn btn-outline-primary my-2">GitHub Page</button>
</a>
</div>
<div class="col-lg-4 my-2 content">
<p>
WatchParty was an idea thought up based on the many movie nights I have with friends.
The app allows you to set dates, organize watchlists, and build a menu for snacks.
</p>
<p>
This is a full-stack application build with Express, Mongoose, and a Liquid frontend.
It leverages the imdb-api to deliver movie search results. Each party document has full CRUD
functionality, leveraging a non-relational MongoDB database.
</p>
</div>
</div>
</div>
</div>
<div class="section" id="burger">
<div class="container">
<div class="row justify-content-around align-items-center">
<div class="col-lg-4 my-2 headline">
<h2>Burger Rush</h2>
<img class="img-fluid" src="/images/burger-title.png">
<a href="https://nickesparza.github.io/ga-1-project-burger/" target="_blank">
<button class="btn btn-info my-2">Go to site</button>
</a>
<a href="https://github.com/nickesparza/ga-1-project-burger" target="_blank">
<button class="btn btn-outline-primary my-2">GitHub Page</button>
</a>
</div>
<div class="col-lg-4 my-2 content">
<p>
A small game I built as a first ever project. Race against the clock
to build and deliver burgers for hungry customers.
</p>
<p>
The game is built in vanilla JavaScript, with some light HTML and CSS elements.
I built a game state manager that cycled through the title screen, actual gameplay,
and results screens, as well as designed the gameplay loop, scoring, and all the artwork.
It was a lot of fun to make, and I hope it's fun to play!
</p>
</div>
</div>
</div>
</div>
<div class="section" id="sentai">
<div class="container">
<div class="row justify-content-around align-items-center">
<div class="col-lg-4 my-2 headline">
<h2>Super SentAPI</h2>
<img class="img-fluid" src="/images/kyuranger.jpg">
<a href="https://supersentapi.herokuapp.com/" target="_blank">
<button class="btn btn-info my-2">Go to site</button>
</a>
<a href="https://github.com/nickesparza/sentai-api-client" target="_blank">
<button class="btn btn-outline-primary my-2">GitHub Page</button>
</a>
</div>
<div class="col-lg-4 my-2 content">
<p>
An API designed to deliver information on the various Super Sentai (Power Ranger)
teams that have existed over the decades. Information on each show is available via RESTful
API routes, as well as a simple React frontend.
</p>
<p>
This is another application that leverages a non-relational MongoDB database. I designed the
schemas and plan to continue adding more information over time, as well as smoothing out the
user experience and possibly migrating to a Django backend using SQL.
</p>
</div>
</div>
</div>
</div>
<div class="section" id="medic">
<div class="container">
<div class="row justify-content-around align-items-center">
<div class="col-lg-4 my-2 headline">
<h2>MedicApp</h2>
<img class="img-fluid" src="/images/medic-app-icon.png">
<a href="https://themedicapp.herokuapp.com/" target="_blank">
<br>
<button class="btn btn-info my-2">Go to site</button>
</a>
<a href="https://github.com/nickesparza/ga-project-3-client" target="_blank">
<button class="btn btn-outline-primary my-2">GitHub Page</button>
</a>
</div>
<div class="col-lg-4 my-2 content">
<p>
A MERN application built as an exercise in imagining an internal tool for hospital staff to
manage patient information.
</p>
<p>
I took the role of project manager for this application, supporting two developers as they built
the frontend and backend. I managed merge conflicts and assisted in troubleshooting as they came to grips
with the React frontend and MongoDB backend. I also fixed plenty of bugs and added some light functionality
and style where it was needed.
</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>