-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
463 lines (442 loc) · 16.2 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
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta
name="description"
content="A portfolio website displaying the software development work of Josh Peachey."
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="icon" href="media/logos/favicon.ico" />
<title>Josh Peachey | Software Developer</title>
<!--GOOGLE FONTS-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&family=Libre+Baskerville:ital@0;1&family=Work+Sans:wght@200;300;500&display=swap');
</style>
<!--- FONT AWESOME & ICONS-->
<script
src="https://kit.fontawesome.com/62a7de5551.js"
crossorigin="anonymous"
></script>
<!--AOS-->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
</head>
<body>
<!---HERO SECTION-->
<section id="hero">
<div id="introduction">
<div id="hero-block">
<div id="hero-left">
<img
src="./media/images/jp-cartoon.png"
alt="josh-headshot"
id="main-img"
/>
</div>
<div id="hero-right">
<h1 id="name">Josh Peachey</h1>
<!-- <h2 id="subhead"><em>Software Developer</em></h2> -->
<p id="subhead" class="line anim-typewriter">Software Developer</p>
</div>
</div>
<div id="hero-icons-box">
<a
href="https://github.com/Peach-24"
target="_blank"
rel="noreferrer"
alt="Github-profile"
><i id="hero-icon" class="fab fa-github"></i
></a>
<a
href="https://twitter.com/peach_dev"
target="_blank"
rel="noreferrer"
alt="twitter-profile"
>
<i id="hero-icon" class="fab social fa-twitter"></i
></a>
<a
href="https://www.linkedin.com/in/josh-peachey-profile/"
target="_blank"
rel="noreferrer"
alt="linkedIn-profile"
><i id="hero-icon" class="fab fa-linkedin"></i
></a>
</div>
</div>
</section>
<!-- ABOUT ME SECTION -->
<section id="about-me">
<div class="container" id="about-cont">
<img
class="story-img"
id="smiley-me"
src="media/images/josh_peachey.jpg"
alt="josh-developer"
/>
<div id="about-container">
<div class="about-pars" data-aos="fade-up" data-aos-delay="500">
<h3>Hello world!</h3>
<p id="about-body">
I’m a Manchester-based former tech reporter who has swapped
writing stories for writing code.
</p>
<p id="about-body">
Inspired by interviewing digital leaders and working as part of
the Digital City Festival team, I decided to retrain as a software
developer and transition towards a tech career.
</p>
<p id="about-body">
I’m passionate about harnessing new technologies to improve
processes, sales, and empower learning through interaction. As new
problems arise, for any business or body, I believe tech will be a
fundamental part of the right solution.
</p>
<p id="about-body">
The same desire that drew me towards reporting - the ability to
make a real difference - has now taken me towards wanting to build
useful software and web apps. On this site, I will profile the
different projects I’ve worked on and share anything else of note.
</p>
<p id="about-body">
Outside of the text editor, I’m an avid basketball fan, vinyl
enthusiast, and have been fortunate enough to travel all over the
United States and elsewhere. My most exciting journey still lies
ahead of me - continuous learning and development in the tech
space…
</p>
</div>
<div id="lang-outer-box">
<h4 id="technologies">Technologies</h4>
<img
class="lang-logo"
src="media/logos/480px-JavaScript-logo.png"
alt="javascript-logo"
/>
<img
class="lang-logo"
alt="html-logo"
src="media/logos/HTML5_Logo_512.png"
/>
<img
class="lang-logo"
src="media/logos/CSS3_logo_and_wordmark.svg.png"
alt="css-logo"
/>
<img
class="lang-logo"
alt="react-logo"
src="media/logos/react-logo.png"
/>
<img
class="lang-logo"
alt="postgres-logo"
src="media/logos/postgres-logo.png"
/>
<img
class="lang-logo"
alt="nodeJS-logo"
src="media/logos/node_js.png"
/>
<img
class="lang-logo"
src="media/logos/jest-logo-F9901EBBF7-seeklogo.com.png"
alt="jest-logo"
/>
<img
class="lang-logo"
src="media/logos/cypress_logo.png"
alt="cypress-logo"
/>
</div>
</div>
</div>
</section>
<!---PORTFOLIO SECTION-->
<section id="portfolio">
<h3 id="projects-title" data-aos="zoom">My Projects</h3>
<div class="grid-container">
<div class="projectBox project-1">
<img
id="project-image"
src="media/images/Zeal_imagery.png"
alt="zeal-thumbnail"
/>
<a
class="portfolio-link"
href="https://github.com/Peach-24/zeal_app"
rel="noreferrer"
>
<h4 class="proj-name">Zeal</h4></a
>
<p class="proj-desc">
For a final group project on my coding bootcamp, three others and I
collaborated on a mobile app that allows friends to form digital
activity clubs where they can share and discuss their work. It's an
online, pandemic-proof, version of a photography club where people
can partake in a variety of photography challenges as a group.
</p>
</div>
<div class="projectBox project-2">
<img
id="project-image"
src="media/images/album_club_thumb.jpeg"
alt="album-club-thumbnail"
/>
<a
class="portfolio-link"
href="https://github.com/Peach-24/album-club"
rel="noreferrer"
><h4 class="proj-name">Album Club</h4></a
>
<p class="proj-desc">
A
<a href="https://album-club.netlify.app/" rel="noreferrer"
>password-protected web app
</a>
for my friends and I to use for our weekly album listening club.
Built with React, the platform uses Firebase for a database and
password auth, and Cypress for testing. This app is in use by my
friends who take turns suggesting albums that we all listen to, and
then submit reviews for. Further developments planned.
</p>
</div>
<div class="projectBox project-3">
<img
id="project-image"
src="./media/images/portfoli-NBA-GM-sim.png"
alt="nba-general-manager-thumbnail"
rel="noreferrer"
/>
<a
class="portfolio-link"
href="https://github.com/Peach-24/react-app"
rel="noreferrer"
>
<h4 class="proj-name">NBA GM Simulator</h4></a
>
<p class="proj-desc">
A shared passion for the NBA led myself and one other Northcoders
student to create a working NBA General Manager game which requires
the user to sign a certain number of players to a roster without
breaching the salary cap. Built using React, every in-game decision
automatically updates the user's financial statistics. Many more
improvements planned.
</p>
</div>
<div class="projectBox project-4">
<img
id="project-image"
src="media/images/cli-pokemon-battle-thumb.png"
alt="pokemon-battle-thumbnail"
/>
<a
class="portfolio-link"
href="https://github.com/Peach-24/pokemon-battle-game"
rel="noreferrer"
><h4 class="proj-name">CLI - Pokemon Battle Game</h4></a
>
<p class="proj-desc">
Focusing on Object-Oriented Programming, I recreated the beginning
of one of my childhood's most epic adventures. This homage to the
first Pokemon Games can be run through the command line
(Inquirer.js) and allows the user to personalise their game
experience in various ways.
</p>
</div>
</div>
</section>
<!-- BLOG -->
<section id="blog">
<h3 data-aos="zoom">Written Work</h3>
<div class="container" id="blog-posts-cont">
<div id="written-intro">
<p>
Here you can find interviews that I've conducted with icons of
Manchester's tech scene. Some were written when promoting
Manchester's first ever
<a href="https://www.digitalcityfestival.com/" rel="noreferrer"
><strong>Digital City Festival</strong></a
>
- a week-long gathering of tech, e-commerce, marketing and media
businesses.
</p>
<p>
I plan to continue creating written content to compliment my
technical development learning, and hopefully to help others. Please
feel free to give any feedback in the
<a href="#contact"><strong>form</strong></a> at the bottom of this
page.
</p>
</div>
<div class="story-card" data-aos="fade-up">
<img
class="story-img"
src="media/images/jon-corner.jpg"
alt="john-corner"
/>
<div id="blog-preview">
<h5 class="story-title">
<a
href="https://www.prolificnorth.co.uk/digital-city-festival/2020/02/jon-corner-cdo-city-salford-his-smart-city-ambitions-and-role-citizens"
target="_blank"
rel="noreferrer"
>Salford City Region's CEO on what digital citizenship and his
smart-city ambitions</a
>
</h5>
<p class="story-desc">
MediaCityUK rose to fame as a content-production complex when the
BBC moved staff and programmes up North in order to diversify back
in 2011. But now, as a cornerstone for the tech-focused Salford
region, it’s emerging as the country’s exemplar smart city.
</p>
</div>
</div>
<div class="story-card" data-aos="fade-up">
<img
class="story-img"
src="media/images/katy-social-chain.jpeg"
alt="katy-leeson"
/>
<div id="blog-preview">
<h5 class="story-title">
<a
href="https://www.prolificnorth.co.uk/news/advertising-news/2019/12/social-chains-katy-leeson-company-culture-and-staying-ahead-todays"
target="_blank"
rel="noreferrer"
>Social Chain's Managing Director on staying ahead in today’s
ever-changing social media landscape</a
>
</h5>
<p class="story-desc">
Social Chain is one of the biggest social-tech companies in the
country, joining the likes of Unilad and LADbible as the country’s
online media giants. “It’s amazing to see that these companies
started here in Manchester,” according to Katy Leeson.
</p>
</div>
</div>
<div class="story-card" data-aos="fade-up">
<img
class="story-img"
src="media/images/aine-featured-dcf.jpeg"
alt="aine-mctiernan"
/>
<div id="blog-preview">
<h5 class="story-title">
<a
href="https://www.prolificnorth.co.uk/features/2019/11/pwcs-scale-programme-lead-aine-mctiernan-scaling-founders-mentality-and-startup"
target="_blank"
rel="noreferrer"
>PWC's Scale Programme lead on a founder's mentality and the
startup ecosystem in the North</a
>
</h5>
<p class="story-desc">
Growing a company can be tricky business. Áine McTiernan, who
heads up PwC’s Scale programmes in the North of England, talks
about her love for fast-moving startup culture, working with
founders, and the right conditions needed for startups to thrive…
</p>
</div>
</div>
<div class="story-card" data-aos="fade-up">
<img
class="story-img"
src="media/images/stuart-clarke-hi-res.jpg"
alt="stuart-clarke"
/>
<div id="blog-preview">
<h5 class="story-title">
<a
href="https://www.prolificnorth.co.uk/digital-city-festival/2019/09/stuart-clarke-leeds-digital-cross-city-collaboration-lets-talk-about"
target="_blank"
rel="noreferrer"
>Leeds Digital Festival Director on cross-city collaboration and
improved connectivity</a
>
</h5>
<p class="story-desc">
Northern cities are growing in confidence and what we need now is
a concerted effort to collaborate effectively, says Stuart Clarke,
Director of Leeds Digital. He talks about the beauty of community
events, and why ‘Northern exiles’ living in London should consider
moving back.
</p>
</div>
</div>
</div>
</section>
<!---CONTACT ME--->
<hr />
<section id="contact">
<h3 data-aos="zoom">Contact</h3>
<p id="form-text">
<strong>But what about you?</strong> Feel free to reach out for whatever
reason by filling out the form below.
</p>
<br />
<form
id="contact-form"
action="https://formspree.io/f/xbjppokp"
method="POST"
>
<div class="form-group">
<label for="email">Email:</label>
<input
type="text"
id="email"
name="_replyto"
placeholder="steve-jobs@apple.com"
/>
</div>
<br />
<div class="form-group">
<label for="name">Name:</label>
<input
type="text"
id="yourname"
name="name"
placeholder="Steve Jobs"
/>
</div>
<br />
<div class="form-group">
<label for="message"> Your message:</label>
<textarea
name="message"
id="message"
rows="8"
placeholder="Hi Josh..."
></textarea>
</div>
<button id="contact-button" type="submit" aria-label="send-message">
<i class="fas fa-paper-plane"></i>
</button>
<div id="status"></div>
</form>
</section>
<!---footer-->
<footer>
<p id="footer-text">Josh Peachey - 2021</p>
</footer>
<!---SCRIPTS-->
<script src="./JS/main.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({ duration: 1300 });
</script>
</body>
</html>