-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
407 lines (384 loc) · 13.9 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
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
<!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" />
<!-- Script -->
<script src="scripts/script.js" charset="utf-8"></script>
<!-- CSS -->
<link rel="stylesheet" href="styles/style.css" />
<!-- Google fonts -->
<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=Montserrat:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
<!-- -->
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌱</text></svg>"
/>
<title>Eliott McKenzie | Full Stack Software Engineer</title>
</head>
<body>
<!-- ! Project Popup Boxes -->
<div id="popup-container">
<!-- Project 4 -->
<div id="project-4" class="popup">
<div class="img-container">
<img
src="assets/aesthetic-thumbnail.png"
alt="Project Four Thumbnail"
/>
</div>
<div class="popup-text">
<h4><span>Aesthetic Catalogue</span></h4>
<p>
Full-stack application with CRUD functionality. I created a Postgres
database which used a Python Django API with the Django REST
framework to serve its data. The front-end is built with React and
uses CSS and Bootstrap for styling. The database utilised many to
one and many to many relationships.
</p>
<p>
The app is a catalogue of design aesthetics that have influenced
mainstream culture and consumer ephemera from the middle of the 20th
century - based on Consumer Aesthetics Research Institute (CARI) and
Pinterest. Users can register and log in to enable them to add,
delete and edit posts through a secure route. These posts can be
categorised under chosen aesthetics and tags. They are also able to
comment on individual posts.
</p>
<div class="popup-link">
<a href="https://github.com/eli099/Aesthetic-Catalogue" target="_blank">Project</a>
<a href="https://github.com/eli099/Aesthetic-Catalogue" target="_blank"
>ReadMe</a
>
</div>
</div>
</div>
<!-- Project 2 -->
<div id="project-2" class="popup">
<div class="img-container">
<img src="assets/aic-thumbnail.png" alt="Project Two Thumbnail" />
</div>
<div class="popup-text">
<h4><span>Art Institute of Chicago</span></h4>
<p>
React app that consumes the Art Institute of Chicago's open-source
API. The app allows users to navigate the AIC's regularly updated
collection of art through filters and a search bar. I took charge of
the UX/UI design of the app, using a mixture of React Bootstrap and
Sass.
</p>
<div class="popup-link">
<a href="https://aic-eliott.netlify.app/" title="" target="_blank"
>Project</a
>
<a
href="https://github.com/eli099/Art-Institute-of-Chicago"
title=""
target="_blank"
>ReadMe</a
>
</div>
</div>
</div>
<!-- Project 3 -->
<div id="project-3" class="popup">
<div class="img-container">
<img
src="assets/natural-beauty-thumbnail-2.png"
alt="Project Three Thumbnail"
/>
</div>
<div class="popup-text">
<h4><span>Natural Beauty</span></h4>
<p>
MERN stack application with CRUD functionality using Mongoose ORM,
Bootstrap and Sass. The app is focused around National Parks in the
UK and users can navigate through national park related information
through an interactive map (implementing MapBox GL JS).
</p>
<p>
I contributed backend functionality - database schema, middleware,
database requests (get, post, delete) & endpoints, seeding & seed
data, routing and part of the authentication process. I created
frontend requests for logging in, registering and showing a logged
in user's information, the ability for a user to add/remove
favourites and display this on their profile page. I led the UI/UX
design of the Nav bar and login/register pages, styling mostly with
Sass.
</p>
<div class="popup-link">
<a href="https://github.com/eli099/Natural-Beauty" target="_blank">Project</a>
<a
href="https://github.com/eli099/Natural-Beauty"
target="_blank"
>ReadMe</a
>
</div>
</div>
</div>
<!-- Project 1 -->
<div id="project-1" class="popup">
<div class="img-container">
<img src="assets/homepage.png" alt="Project One Thumbnail" />
</div>
<div class="popup-text">
<h4><span>Snake</span></h4>
<p>
Classic snake game styled with CSS and using JavaScript to
manipulate the DOM, and design logic to check if the user loses.
Grid movement is controlled by the user pressing the keyboard arrow
keys.
</p>
<div class="popup-link">
<a href="https://eli099.github.io/Snake-Game/" target="_blank"
>Project</a
>
<a href="https://github.com/eli099/SEI-Project-One" target="_blank"
>ReadMe</a
>
</div>
</div>
</div>
</div>
<!-- -->
<!-- ! Nav bar -->
<nav>
<div class="nav-top">
<span class="title"><a href="/">Eliott McKenzie</a></span>
<a href="javascript:void(0)" class="burger"><img src="assets/icons8-menu-rounded-90.png" width="20" alt="expand"></a>
</div>
<div id="nav-links">
<a href="#stack">Technologies</a>
<a href="#projects">Projects</a>
<a href="#bottom">More</a>
</div>
</nav>
<!-- ! -->
<!-- ! About Section -->
<section class="top" id="top">
<div id="about">
<img
src="assets/profile-pic.PNG"
alt="Profile Pic"
class="profile-pic"
/>
<div class="about-text">
<h2 class="norm">
<span>Hi, I'm</span> <span class="emp">Eliott</span>
</h2>
<br />
<h3 class="norm">
I'm a software engineer with a background in
<span class="emp-2"> <a href="#bottom">design</a> </span> and
<span class="emp-2"><a href="#bottom">photography</a></span
>.
</h3>
<hr class="about" />
<div class="icons">
<address>
<a href="https://github.com/eli099" target="_blank"
><img src="assets/icons8-github-100.png" alt=""
/></a>
<a
href="https://www.linkedin.com/in/eliottmckenzie/"
target="_blank"
><img src="assets/icons8-linkedin-circled-100.png" alt=""
/></a>
<a href="mailto:[email protected]" target="_blank"
><img src="assets/icons8-circled-envelope-96.png" alt=""
/></a>
</address>
</div>
</div>
</div>
<div id="headline">
<div class="label">About me</div>
<div class="headline-text">
I started coding for fun (with HTML and CSS) after admiring the work
of web developers on Tumblr. Through trial, error and pattern
recognition I tried to emulate different aspects in my own blog. I
became obsessed with using code that could express messages visually
and functionally through user interaction. I eventually took the step
to further my learning in General Assembly's Software Engineering
Immersive course where I learnt the fundamentals of languages and
frameworks such as JavaScript, Python, Node.js, MongoDB, PostgreSQL,
Django, Express and Mongoose.
</div>
</div>
</section>
<!-- ! Stack -->
<section class="stack" id="stack">
<div id="about" class="stack-class">
<h1>Stack</h1>
<ul class="grid" class="languages">
<li>
<img
src="assets/stack/icons8-javascript-240.png"
alt="JavaScript"
/>
<p><span>JavaScript</span></p>
</li>
<li>
<img src="assets/stack/icons8-react-240.png" alt="React" />
<p><span>React</span></p>
</li>
<li>
<img src="assets/stack/icons8-html-5-240.png" alt="" />
<p><span>HTML</span></p>
</li>
<li>
<img src="assets/stack/icons8-css3-240.png" alt="" />
<p><span>CSS</span></p>
</li>
<li>
<img src="assets/stack/bootstrap-logo-shadow.png" alt="" />
<p><span>Bootstrap</span></p>
</li>
<li>
<img src="assets/stack/react-bootstrap.svg" alt="" />
<p><span>
React Bootstrap
</span></p>
</li>
<li>
<img src="assets/stack/icons8-python-240.png" alt="" />
<p><span>Python</span></p>
</li>
<li>
<img src="assets/stack/icons8-django-240.png" alt="" />
<p><span>Django</span></p>
</li>
<li>
<img src="assets/stack/mongodb-logo.png" alt="" />
<p><span>MongoDB</span></p>
</li>
<li>
<img src="assets/stack/mongoose-logo.png" alt="" />
<p><span>Mongoose</span></p>
</li>
<li>
<img src="assets/stack/django-rest-framework.png" alt="" />
<p><span>
Django <br />
REST <br />
Framework <br />
</span></p>
</li>
<li>
<img src="assets/stack/express-js.png" alt="" />
<p><span>Express</span></p>
</li>
<li>
<img src="assets/stack/icons8-node-js-240.png" alt="" />
<p><span>Node.js</span></p>
</li>
<li>
<img src="assets/stack/icons8-git-240.png" alt="" />
<p><span>Git</span></p>
</li>
</ul>
</div>
</section>
<!-- ! Projects -->
<section class="projects" id="projects">
<div class="project-container">
<h1>
Projects
</h1>
<div class="projects-col-one">
<div class="proj" id="four">
<img
src="assets/aesthetic-thumbnail.png"
alt="Project Four Thumbnail"
id="four"
/>
<h4><span>Aesthetic Catalogue</span></h4>
</div>
<div class="proj" id="three">
<img
src="assets/natural-beauty-thumbnail-2.png"
alt="Project Three Thumbnail"
id="three"
/>
<h4><span>Natural Beauty</span></h4>
</div>
</div>
<div class="projects-col-two">
<div class="proj" id="two">
<img
src="assets/aic-thumbnail.png"
alt="Project Two Thumbnail"
id="two"
/>
<h4><span>Art Institute of Chicago</span></h4>
</div>
<div class="proj" id="one">
<img src="assets/homepage.png" alt="Project One Thumbnail" id="one" />
<h4><span>Snake</span></h4>
</div>
</div>
</div>
</section>
<!-- ! Bottom -->
<section class="bottom" id="bottom">
<div id="more">
<div class="label">
More
</div>
<div class="more-text">
<p style="margin-bottom: 5px;">
In my spare time I like to
<a href="https://eliottmckenzie.com" alt="Visual Art Porfolio"
>create things</a
>.
</p>
<img src="assets/art.png" alt="Visual Art Porfolio Thumbnail" />
</div>
</div>
<div id="more">
<div class="label">
Interests
</div>
<div class="more-text">
<h4>Japanese language and culture</h4>
<p>
I have been learning on and off since a teenager and have had the
opportunity to visit. 日本語がちょっと喋れます。
</p>
<hr>
<h4>Photography</h4>
<p>
I enjoy both digital and film and have recently gotten into portrait
photography. Some of my work can be viewed
<a href="https://eliottmckenzie.com/photography">here</a>.
</p>
<hr>
<h4>Videography and video editing</h4>
<p>
I like to capture and edit footage from holidays. I also enjoy
starting my own <a href="https://eliottmckenzie.com/3d">mini projects</a> that often mix phone
video, 3D renders (from Blender) and motion graphics. Some of my
work can also be viewed
<a href="https://eliottmckenzie.com/video">here</a>.
</p>
<hr>
<h4>Nutrition</h4>
<p>
After transitioning to a plant-based diet I started to read, watch
and listen to a lot of nutrition or food related media
</p>
</div>
</div>
</section>
<footer>
<p>Icons by <a target="_blank" href="https://icons8.com">Icons8</a></p>
<p>© Eliott McKenzie ♥ 2022</p>
</footer>
</body>
</html>