-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
415 lines (415 loc) · 20 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
408
409
410
411
412
413
414
415
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="portfolio, Web Developer">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/styles.css">
<link rel="icon" type="image/png" href="img/favicon-16x16.png"/> <!--Superman logo?-->
<title> Nathan Duncan Web Developer </title>
</head>
<body>
<div id="home" class="site_wrapper_div">
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#home" onclick="closeNav()">HOME</a>
<a href="#about" onclick="closeNav()">ABOUT</a>
<a href="#projects" onclick="closeNav()">PORTFOLIO</a>
<a href="#contact" onclick="closeNav()">CONTACT</a>
</div>
</div>
<span class="mobile_menu_burger" onclick="openNav()">☰</span>
<!--Home-->
<div class="home_wrapper_div">
<!-- Particles Animation -->
<div id="particle_box" class="particle_box">
</div>
<section class="home">
<div class="home_message">
<h3 class="hello">Hello!</h3>
<br/>
<p>I'm Nathan, a full-stack web developer.<br/>It's good to see you!<p>
<div class="projects_button_link" onclick="location.href='#projects'">
<p class="projects_button_child">Things I've Made</p><p class="projects_button_arrow">→</p>
</div>
</div>
</section>
</div>
<ul id="nav_bar" class="nav_bar">
<a href="#home"><li>Home</li></a>
<a href="#about"><li>About</li></a>
<a href="#projects"><li>Portfolio</li></a>
<a href="#contact"><li>Contact</li></a>
</ul>
<!--About Me-->
<div class="about_wrapper_div">
<section id="about" class="about">
<h2 class="heading colour_one">ABOUT</h2>
<div class="about_row">
<article class="about_me">
<h3>Hello,</h3>
<p>I'm Nathan, I'm a full stack web developer who is currently available for fulltime work or freelance projects.</p>
<hr class="about_line">
<p>I love UI/UX website design, building fun web apps and coffee.</p>
<hr class="about_line">
<p>I hate bad UI, buttons that don't click and cous cous.</p>
<br/>
<a class="awesome_link" href="#contact">Lets do something awesome!</a>
</article>
<div class="img_container">
<img class="about_img" src="img/just_me.png" alt="it's only me, dark hair, dark eyes and a big smile">
</div>
</div>
<h3 class="sub_heading">SKILLSET</h3>
<div class="logos">
<img src="img/html.png" alt="html5 logo">
<img src="img/css.png" alt="css3 logo">
<img src="img/js.png" alt="js logo">
<img src="img/react.png" alt="react logo">
<img src="img/git.png" alt="git logo">
<img src="img/php.png" alt="php logo">
<img src="img/mysql.png" alt="mysql logo">
<!--HTML5 CSS3 JavaScript React PHP MySQL Github Terminal-->
</div>
</section>
</div>
<!--Projects-->
<div class="wrapper_div">
<section id="projects" class="projects">
<h2 class="heading colour_two">PROJECTS</h2>
<div class="gallery">
<div class="project">
<div class="slides1">
<img class="project_img" onclick="openModal1();currentSlide1(1)" src="img/wbh1.jpg" alt="landing page of luxury candle website">
</div>
<h4>Luxury Interiors Website</h4>
<p class="project_text">Webpage designed using dark colours and bold large images to convey luxury.<br/>
Features parralax image scrolling and inbuilt shop. <br/><br/>CMS site built with PHP/JS</p>
</div>
<!--Modal Text Start-->
<!--Modal Box-->
<div id="myModal1" class="modal">
<!--close X-->
<span class="close cursor" onclick="closeModal1()">×</span>
<div class="modal-content">
<!--Main Images-->
<div class="mySlides1">
<div class="numbertext">1 / 4</div>
<img class="modal_img" src="img/wbh1x.jpg" alt="project img 1">
</div>
<div class="mySlides1">
<div class="numbertext">2 / 4</div>
<img class="modal_img" src="img/wbh2.jpg" alt="project img 2">
</div>
<div class="mySlides1">
<div class="numbertext">3 / 4</div>
<img class="modal_img" src="img/wbh3.jpg" alt="project img 3">
</div>
<div class="mySlides1">
<div class="numbertext">4 / 4</div>
<img class="modal_img" src="img/wbh4.jpg" alt="project img 4">
</div>
<!--Next/back buttons-->
<a class="prev" onclick="plusSlides1(-1)">❮</a>
<a class="next" onclick="plusSlides1(1)">❯</a>
<div class="caption-container">
<p id="caption1"></p>
</div>
<!--bottom thumbnails-->
<div class="modal_column">
<img class="demo1 cursor modal_thumb" src="img/wbh1.jpg" onclick="currentSlide1(1)" alt="Luxury Interiors Landing Page">
</div>
<div class="modal_column">
<img class="demo1 cursor modal_thumb" src="img/wbh2.jpg" onclick="currentSlide1(2)" alt="Article Links And Custom Background Print">
</div>
<div class="modal_column">
<img class="demo1 cursor modal_thumb" src="img/wbh3.jpg" onclick="currentSlide1(3)" alt="Parralax Scrolling">
</div>
<div class="modal_column">
<img class="demo1 cursor modal_thumb" src="img/wbh4.jpg" onclick="currentSlide1(4)" alt="Article Page">
</div>
</div>
</div>
<!--Modal Text End-->
<div class="project">
<div class="slides2">
<img class="project_img" onclick="openModal2();currentSlide2(1)" src="img/ea1.jpg" alt="landing page of expensify app with google authenticate.">
</div>
<h4>Expense Tracker Web App</h4>
<p class="project_text">Expenses tracker app built with React/Redux and advanced state management.<br/>
Hosted <a href="https://naths-react-expensify-app.herokuapp.com/">Here</a><br/><br/>
React/Redux</p>
</div>
<!--Modal Text Start-->
<!--Modal Box-->
<div id="myModal2" class="modal">
<!--close X-->
<span class="close cursor" onclick="closeModal2()">×</span>
<div class="modal-content">
<!--Main Images-->
<div class="mySlides2">
<div class="numbertext">1 / 4</div>
<img class="modal_img" src="img/ea1.jpg" alt="project img 1">
</div>
<div class="mySlides2">
<div class="numbertext">2 / 4</div>
<img class="modal_img" src="img/ea2.jpg" alt="project img 2">
</div>
<div class="mySlides2">
<div class="numbertext">3 / 4</div>
<img class="modal_img" src="img/ea3.jpg" alt="project img 3">
</div>
<div class="mySlides2">
<div class="numbertext">4 / 4</div>
<img class="modal_img" src="img/ea4.jpg" alt="project img 4">
</div>
<!--Next/back buttons-->
<a class="prev" onclick="plusSlides2(-1)">❮</a>
<a class="next" onclick="plusSlides2(1)">❯</a>
<div class="caption-container">
<p id="caption2"></p>
</div>
<!--bottom thumbnails-->
<div class="modal_column">
<img class="demo2 cursor modal_thumb" src="img/ea1.jpg" onclick="currentSlide2(1)" alt="Landing Page With Google Authentiction">
</div>
<div class="modal_column">
<img class="demo2 cursor modal_thumb" src="img/ea2.jpg" onclick="currentSlide2(2)" alt="Add Expense Page">
</div>
<div class="modal_column">
<img class="demo2 cursor modal_thumb" src="img/ea3.jpg" onclick="currentSlide2(3)" alt="View All Expenses Page">
</div>
<div class="modal_column">
<img class="demo2 cursor modal_thumb" src="img/ea4.jpg" onclick="currentSlide2(4)" alt="Filter Expenses Page">
</div>
</div>
</div>
<!--Modal Text End-->
<div class="project">
<div class="slides6">
<img class="project_img" onclick="openModal6();currentSlide6(1)" src="img/pa1.png" alt="landing page of decision app">
</div>
<h4>Say Something Web App</h4>
<p class="project_text">App that allows team members
to post updates and like other team members posts. Data dynamically processed and held
in MySQL database.<br/>
<br/><br/>
PHP/Laravel</p>
</div>
<!--Modal Text Start-->
<!--Modal Box-->
<div id="myModal6" class="modal">
<!--close X-->
<span class="close cursor" onclick="closeModal6()">×</span>
<div class="modal-content">
<!--Main Images-->
<div class="mySlides6">
<div class="numbertext">1 / 4</div>
<img class="modal_img" src="img/pa1.png" alt="project img 1">
</div>
<div class="mySlides6">
<div class="numbertext">2 / 4</div>
<img class="modal_img" src="img/pa2.png" alt="project img 2">
</div>
<div class="mySlides6">
<div class="numbertext">3 / 4</div>
<img class="modal_img" src="img/pa3.png" alt="project img 3">
</div>
<div class="mySlides6">
<div class="numbertext">4 / 4</div>
<img class="modal_img" src="img/pa4.png" alt="project img 4">
</div>
<!--Next/back buttons-->
<a class="prev" onclick="plusSlides6(-1)">❮</a>
<a class="next" onclick="plusSlides6(1)">❯</a>
<div class="caption-container">
<p id="caption6"></p>
</div>
<!--bottom thumbnails-->
<div class="modal_column">
<img class="demo6 cursor modal_thumb" src="img/pa1.png" onclick="currentSlide6(1)" alt="View/Write Posts Page">
</div>
<div class="modal_column">
<img class="demo6 cursor modal_thumb" src="img/pa2.png" onclick="currentSlide6(2)" alt="Login Page">
</div>
<div class="modal_column">
<img class="demo6 cursor modal_thumb" src="img/pa3.png" onclick="currentSlide6(3)" alt="Register Page">
</div>
<div class="modal_column">
<img class="demo6 cursor modal_thumb" src="img/pa4.png" onclick="currentSlide6(4)" alt="User Page">
</div>
</div>
</div>
<!--Modal Text End-->
<div class="project">
<div class="slides3">
<img class="project_img" onclick="openModal3();currentSlide3(1)" src="img/wsid1.jpg" alt="landing page of decision app">
</div>
<h4>Make A Decision Web App</h4>
<p class="project_text">Fun web app built with React that makes a randomised choice from a series of options.<br/>
Hosted <a href="https://naths-make-a-decision-app.herokuapp.com/">Here</a><br/><br/>
React</p>
</div>
<!--Modal Text Start-->
<!--Modal Box-->
<div id="myModal3" class="modal">
<!--close X-->
<span class="close cursor" onclick="closeModal3()">×</span>
<div class="modal-content">
<!--Main Images-->
<div class="mySlides3">
<div class="numbertext">1 / 4</div>
<img class="modal_img" src="img/wsid1.jpg" alt="project img 1">
</div>
<div class="mySlides3">
<div class="numbertext">2 / 4</div>
<img class="modal_img" src="img/wsid2.jpg" alt="project img 2">
</div>
<div class="mySlides3">
<div class="numbertext">3 / 4</div>
<img class="modal_img" src="img/wsid3.jpg" alt="project img 3">
</div>
<div class="mySlides3">
<div class="numbertext">4 / 4</div>
<img class="modal_img" src="img/wsid4.jpg" alt="project img 4">
</div>
<!--Next/back buttons-->
<a class="prev" onclick="plusSlides3(-1)">❮</a>
<a class="next" onclick="plusSlides3(1)">❯</a>
<div class="caption-container">
<p id="caption3"></p>
</div>
<!--bottom thumbnails-->
<div class="modal_column">
<img class="demo3 cursor modal_thumb" src="img/wsid1.jpg" onclick="currentSlide3(1)" alt="Add Options Page">
</div>
<div class="modal_column">
<img class="demo3 cursor modal_thumb" src="img/wsid2.jpg" onclick="currentSlide3(2)" alt="Example Input">
</div>
<div class="modal_column">
<img class="demo3 cursor modal_thumb" src="img/wsid3.jpg" onclick="currentSlide3(3)" alt="Example Input">
</div>
<div class="modal_column">
<img class="demo3 cursor modal_thumb" src="img/wsid4.jpg" onclick="currentSlide3(4)" alt="Selected Choice Page">
</div>
</div>
</div>
<!--Modal Text End-->
<div class="project">
<div class="slides4">
<img class="project_img" onclick="openModal4();currentSlide4(1)" src="img/wow1.jpg" alt="landing page of wine website">
</div>
<h4>Guide To Wine Website</h4>
<p class="project_text">Website built with pure HTML/CSS/JS.<br/>
Features a JavaScript quiz and interactive map.<br/>
Source code availible on Github <a href="https://github.com/Zooglon">Here</a><br/><br/>
HTML/CSS/Javascript</p>
</div>
<!--Modal Text Start-->
<!--Modal Box-->
<div id="myModal4" class="modal">
<!--close X-->
<span class="close cursor" onclick="closeModal4()">×</span>
<div class="modal-content">
<!--Main Images-->
<div class="mySlides4">
<div class="numbertext">1 / 4</div>
<img class="modal_img" src="img/wow1.jpg" alt="project img 1">
</div>
<div class="mySlides4">
<div class="numbertext">2 / 4</div>
<img class="modal_img" src="img/wow2.jpg" alt="project img 2">
</div>
<div class="mySlides4">
<div class="numbertext">3 / 4</div>
<img class="modal_img" src="img/wow3.jpg" alt="project img 3">
</div>
<div class="mySlides4">
<div class="numbertext">4 / 4</div>
<img class="modal_img" src="img/wow4.jpg" alt="project img 4">
</div>
<!--Next/back buttons-->
<a class="prev" onclick="plusSlides4(-1)">❮</a>
<a class="next" onclick="plusSlides4(1)">❯</a>
<div class="caption-container">
<p id="caption4"></p>
</div>
<!--bottom thumbnails-->
<div class="modal_column">
<img class="demo4 cursor modal_thumb" src="img/wow1.jpg" onclick="currentSlide4(1)" alt="Landing Page">
</div>
<div class="modal_column">
<img class="demo4 cursor modal_thumb" src="img/wow2.jpg" onclick="currentSlide4(2)" alt="Nav Bar And Background Texture">
</div>
<div class="modal_column">
<img class="demo4 cursor modal_thumb" src="img/wow3.jpg" onclick="currentSlide4(3)" alt="Interactive Map of Wine Regions In France">
</div>
<div class="modal_column">
<img class="demo4 cursor modal_thumb" src="img/wow4.jpg" onclick="currentSlide4(4)" alt="JS Powered Wine Taste Profiler">
</div>
</div>
</div>
<!--Modal Text End-->
<div class="project">
<div class="slides5">
<img class="project_img" onclick="openModal5();currentSlide5(1)" src="img/pgif.gif" alt="Animated JS landing page">
</div>
<h4>Landing Page Animation</h4>
<p class="project_text">Animated landing page that uses dynamically rendered purple squares that fade in,
change shade and chase the cursor before gradually fading away after a few seconds. <br/>
View <a href="#home">Here</a><br/><br/>
Javascript</p>
</div>
<!--Modal Text Start-->
<!--Modal Box-->
<div id="myModal5" class="modal">
<!--close X-->
<span class="close cursor" onclick="closeModal5()">×</span>
<div class="modal-content">
<!--Main Images-->
<div class="mySlides5">
<img class="modal_img" src="img/pgif.gif" alt="gif from landing page animation">
</div>
<div class="caption-container">
<p>Animated Landing Page Utilising Dynamically Rendered Squares</p>
</div>
</div>
</div>
<!--Modal Text End-->
</div>
</section>
</div>
<!--Contact-->
<div class="contact_wrapper_div">
<section id="contact" class="contact">
<h2 class="heading colour_three">CONTACT</h2>
<div class="form_wrapper">
<p>Want to work together? Just fancy a chat?</p>
<hr class="about_line"/>
<!-- Contact form -->
<form action="https://formspree.io/f/xoqpbewe" method="POST">
<label>
<input class="form_child" type="text" name="_name" placeholder="Name" required>
</label>
<label>
<input class="form_child" type="text" name="_replyto" placeholder="Email" required>
</label>
<label>
<textarea class="form_child form_textarea" name="message" placeholder="Message" required></textarea>
</label>
<button class="form_submit" type="submit">Send</button>
</form>
</div>
<div class="contact_logo_wrapper">
<div class="logos">
<a href="https://www.linkedin.com/in/nathan-duncan-wd/"><img class="logo" src="img/li.png" alt="LinkedIn Logo"></a>
<a href="https://github.com/Zooglon"><img class="logo" src="img/github.png" alt="Github Logo"></a>
</div>
</div>
</section>
</div>
</div>
<script src="script.js"></script>
</body>
</html>