-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
327 lines (326 loc) · 33.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
<!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="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js" defer></script>
<script src="./index.js" defer></script>
<title>Jake Jones Developer</title>
</head>
<body id="top">
<header>
<h1>Jake Jones</h1>
<div class="nav">
<a href='#top' class="nav-button">Home</a>
<a href='#contact' class="nav-button">Contact</a>
<a href='#projects' class="nav-button">Projects</a>
<a href='#about-me' class="nav-button">About</a>
<a href="https://github.com/jakejones2"><img id='github-link' class="small-logo" src="./media/logos/github.png"></a>
<a href="https://www.linkedin.com/in/jake-jones-318330102/"><img id='github-link' class="small-logo" src="./media/logos/linkedin.png"></a>
</div>
</header>
<main>
<div class="star" id="star1"><div class="starInner"></div></div>
<div class="star" id="star2"><div class="starInner"></div></div>
<div class="star" id="star3"><div class="starInner"></div></div>
<div class="star" id="star4"><div class="starInner"></div></div>
<div class="star" id="star5"><div class="starInner"></div></div>
<div class="star" id="star6"><div class="starInner"></div></div>
<div class="star" id="star7"><div class="starInner"></div></div>
<div class="star" id="star8"><div class="starInner"></div></div>
<div class="star" id="star9"><div class="starInner"></div></div>
<div class="star" id="star10"><div class="starInner"></div></div>
<div id="home">
<section id="mini-bio">
<h2 id="welcome">Hello!</h2>
<img id="profile-pic" src="./media/pp1.jpeg">
<p id="intro">I'm a recent graduate of the <a href="https://northcoders.com/">Northcoders</a> bootcamp working with Python and Javascript/Typescript.<br><br><span class="extra-intro">Take a look at some of the things I've been building and check out the code on my <a href="https://github.com/jakejones2">GitHub</a>. I'm always looking to improve, so please get in touch with your suggestions!</span></p></section>
<div id="previous"></div>
<section id="portfolio">
<article id='mates-rate-proj-mini' class="project-mini">
<img class="project-img-mini" src="./media/matesrate.png">
<div class="project-mini-info">
<h3 class="project-title-mini"><i>Mates Rate</i><span class="date"> (Apr 23-)</span></h3>
<p class="project-mini-description">Online multiplayer game where you rate your friends and famous people in funny categories. <span class="extra">Built with <a href="https://channels.readthedocs.io/en/latest/">Django Channels</a> and deployed on AWS.<br><br></span> See more <a href="#mates-rate-proj">here.</a></p>
</div>
</article>
<article id='swim-wild-proj-mini' class="project-mini">
<img class="project-img-mini" src="./media/swim-wild.png">
<div class="project-mini-info">
<h3 class="project-title-mini"><i>Swim Wild</i><span class="date"> (Sep 23)</span></h3>
<p class="project-mini-description">Mobile app for tracking and gathering data on user-generated outdoor swimming spots.<span class="extra"> Built with React Native and node/express.js.<br><br></span> See more <a href="#swim-wild-proj">here.</a></p>
</div>
</article>
<article id='daily-express-proj-mini' class="project-mini">
<img class="project-img-mini" src="./media/daily-express.png">
<div class="project-mini-info">
<h3 class="project-title-mini"><i>Daily Express.js</i><span class="date"> (Sep 23)</span></h3>
<p class="project-mini-description">News/social media React app - the front end to my <b>Articles API</b>.<span class="extra"> UX features include infinite scrolling, optimistic rendering, url routing.<br><br></span> See more<a href="#daily-express-proj"> here.</a></p>
</div>
</article>
<article id='articles-api-proj-mini' class="project-mini">
<img class="project-img-mini" src="./media/articles-api.jpeg">
<div class="project-mini-info">
<h3 class="project-title-mini">Articles API <span class="date"> (Aug 23)</span></h3>
<p class="project-mini-description">RESTful API for a news/social media website built with Express.js. <span class="extra">Features include pagination, querying and custom JWT authentication.<br><br></span> See more <a href="#articles-api-proj">here.</a></p>
</div>
</article>
<article id='sc-scraper-proj-mini' class="project-mini">
<img class="project-img-mini" src="./media/sc_scraper.jpeg">
<div class="project-mini-info">
<h3 class="project-title-mini">SoundCloud Comment Scraper GUI<span class="date"> (Dec 23 - March 23)</span></h3></h3>
<p class="project-mini-description">Python Tkinter GUI for scraping SoundCloud comments. <span class='extra'><br><br></span> See more <a href="#sc-scraper-proj">here.</a></p>
</div>
</article>
</section>
<div id="next"></div>
</div>
<div id="game-text"><span id="stars-caught">0</span> of 10 stars caught <span id="winner">🏆</span>
<span id="game-hint"><br>Regret not going for the outer ones first?</span>
</div>
<label class="switch">
<input id="stars-off" type="checkbox">
<span class="slider"></span>
</label>
<div id="links-banner">
<img class="banner-logo del3" src="./media/logos/js.png">
<img class="banner-logo del4" src="./media/logos/express.png">
<img class="banner-logo" src="./media/logos/react.png">
<img class="banner-logo" src="./media/logos/channels.png">
<img class="banner-logo del2" src="./media/logos/python.png">
<img class="banner-logo del" src="./media/logos/postgres.png">
</div>
<section id="projects">
<div class="section-container" id="projects-container">
<h2 class="section-title" id="projects-title">Projects</h2>
<article id="art-shop-proj" class="project">
<img class="project-img" src="./media/wfms-site.png">
<div class="project-info" id="art-shop-proj-info">
<h2 class="project-title"><i>WFMS Website</i></h2>
<h3 class="project-subtitle">Typescript <b> · </b> Next.js <b> · </b> Storyblok | Dec 23 - </h3>
<p class="project-para headline">Currently working on a new website for Waltham Forest Music Service. Fully integrated with <b>Storyblok headless CMS</b>! Have a look at the demo <a class="project-anchor" href="https://wfmeh-website.vercel.app/" target="_blank">here...</a></p>
<div class="project-description">
<img src="./media/logos/question.png" class="question-logo">
<p class="project-para info">Check out the animated nav bar and (mostly) smooth UI features. Trying to get everything to look as slick as possible with no visual bumps! Lots of freedom with the design on this project, starting point being only the branding colours from the logo.</p>
</div>
<div class="project-tech">
<img class="cogs-logo" src="./media/logos/cogs.png">
<div>
<p class="project-para info">First project using a third-party headless CMS! Storyblok has been easy to use - would certainly recommend for most use cases. It works well with Next.js as you can use server side API endpoints to process forms built on the CMS, and take advantage of <b>getStaticPaths</b> and Storyblok <b>webhooks</b> to continually build all the content statically for great performance. Only limiting factors at the moment are document storage (free tier doesn't include pdfs) and compatability with <b>Next.js 13</b>. After a few weak integrations with the app router I downgraded to v12 and haven't had any problems since.</p>
<p class="project-para info">I've taken a <b>modular approach</b> to the content - my Storyblok components are generally as small as possible to improve flexibility and reuseability. Cautious use of the <b>tailwind.config safelist</b> has allowed things like colours, margins and visual effects to be controlled from the CMS, with changes appearing in real time thanks to the magic of Storyblok's visual editor which hooks into the application directly.</p>
</div>
</div>
</div>
</article>
<div class="divider"></div>
<article id="art-shop-proj" class="project">
<div class="project-info" id="art-shop-proj-info">
<h2 class="project-title"><i>Art shop</i></h2>
<h3 class="project-subtitle">Typescript <b> · </b> Next.js <b> · </b> Cypress | Oct 23 - Nov 23</h3>
<p class="project-para headline">This is an example implementation of an <b>e-commerce website</b> that I'm currently building for an artist. The business is pending, so for now you'll have to make do with <a class="project-anchor" href="https://www.jude-connolly.co.uk/" target="_blank">this demo</a> with fake products (don't worry - the stripe checkout isn't accepting live payments!)</p>
<div class="project-description">
<img src="./media/logos/question.png" class="question-logo">
<p class="project-para info">View products organised relationally as the intersection of formats (prints, postcards etc.) and art pieces. Visit <a class="project-anchor" href="https://www.jude-connolly.co.uk/admin">/admin</a> (and use the password 'admin') to see the <b>custom CMS.</b> Send messages and buy products, receiving automated receipts and acknowledgements via email.</p>
</div>
<div class="project-tech">
<img class="cogs-logo" src="./media/logos/cogs.png">
<div>
<p class="project-para info">Full-stack application built with Next.js and Typescript. <b>Prisma ORM</b> connects to a Planetscale database, although I found this set up a little restricting by the end. I couldn't join multiple tables and fetch all the data I needed in one api call - will probably use GraphQL in future. Payments are handled by <b>Stripe</b>, emails with <b>Nodemailer</b> and react-email for templating.</p>
<p class="project-para info">A massive step forward in this project was using <b>Tanstack Query</b> for fetching - this allowed me to cache data easily and mark it as stale when neccessary. <b>TailwindCSS</b> was also much appreciated on the front end, I never felt restricted and it was much neater than using SASS! Deployment was very easy with Vercel, although I'm currently working out how to optimise the images better. I'm using <b>imagekit.io</b> CDN at the moment but still not happy with load times!</p>
</div>
</div>
</div>
<img class="project-img" src="./media/art-shop.png">
</article>
<div class="divider"></div>
<article id="swim-wild-proj" class="project">
<img class="project-img" src="./media/swim-wild.png">
<div class="project-info" id="swil-wild-proj-info">
<h2 class="project-title"><i>Swim Wild</i></h2>
<h3 class="project-subtitle">Javascript <b> · </b> React Native <b> · </b> Express.js | Sep 23</h3>
<p class="project-para headline">Swim Wild is a mobile app for the emerging trend of wild swimming, planned and built in under two weeks as the culmination of the Northcoders Bootcamp. See a demo <a class='project-anchor' href="https://youtu.be/Ijmxn4ugKPQ">here!</a></p>
<div class="project-description">
<img src="./media/logos/question.png" class="question-logo">
<p class="project-para info">Swim Wild provides a blend of user generated and <b>web-scraped</b> content to inform users about nearby swimmings spots, their features, and safety considerations. Users can create new locations, track and see data about their swim history, upload pictures and reviews, see nearby locations on a map, and receive realtime updates on hydrology and weather information from our network of APIs.</p>
</div>
<div class="project-tech">
<img class="cogs-logo" src="./media/logos/cogs.png">
<p class="project-para info">Backend built with TDD using node/express.js and <b>MongoDB/mongoose.</b> Authentication and image storage handled with Firebase. ML polynomial regression algorithms analyse timeseries data to predict water temperatures based on date and location. Front end uses <b>React Native</b> with Expo Go, leveraging device location, gallery and camera.</p>
</div>
</div>
</article>
<div class="divider"></div>
<article id="mates-rate-proj" class="project">
<div class="project-info" id="mates-rate-proj-info">
<h2 class="project-title"><i>Mates Rate</i> Web Game</h2>
<h3 class="project-subtitle">Python <b> · </b> Django Channels <b> · </b> AWS | Apr 23 - Present</h3>
<p class="project-para headline">My most recent and developed Python project - an online multiplayer game built with <a class='project-anchor' href="https://channels.readthedocs.io/en/latest/">Django Channels</a>. Click <a class='project-anchor' href="https://matesrate.net">here</a> to play now!</p>
<div class="project-description">
<img src="./media/logos/question.png" class="question-logo">
<p class="project-para info">Join or host a game with friends, and then take turns submitting <b>characters</b> or a <b>category</b>. Players vote on each character's performance in the chosen category, and the player whose character scores the highest overall wins. Supposed to be a fun game encouraging debate and out-of-the-box thinking!</p>
</div>
<div class="project-tech">
<img class="cogs-logo" src="./media/logos/cogs.png">
<p class="project-para info">Code is available <a class='project-anchor' href="https://github.com/jakejones2/mates-rate">here</a> on GitHub. The app employs <b>websockets</b> for real-time interactivity; frontend using vanilla js/css, backend using python async/await, postgres, redis, Google Custom Search API, daphne/gunicorn servers. Unit testing with unittest, end-to-end testing with multiple instances of Selenium to simulate multiplayer gameplay. Type-checked with mypy, and deployed on <b>AWS</b> with Elastic Beanstalk, ElastiCache, RDS and Route 53. Logo and design the author's own.</p>
</div>
</div>
<img class="project-img" src="./media/matesrate.png">
</article>
<div class="divider"></div>
<article id="daily-express-proj" class="project">
<img class="project-img" src="./media/daily-express.png">
<div class="project-info" id="daily-express-proj-info">
<h2 class="project-title"><i>Daily Express.js</i></h2>
<h3 class="project-subtitle">Typescript <b> · </b> React | Sep 23 - Oct 23</h3>
<p class="project-para headline">This is the front-end website for my <a class="project-anchor" href="#articles-api-proj">Articles API</a> built with <b>React</b> and <b>Vite</b>.</a> Click <a class='project-anchor' href="https://nc-news-68e5d5.netlify.app/">here</a> to explore the site!</p>
<div class="project-description">
<img src="./media/logos/question.png" class="question-logo">
<p class="project-para info">Browse the main feed without logging in. Filter and scroll through <b>article preview cards</b>, clicking on the title or image to access the full article and its <b>comments</b>. You can also click on users to view their <b>profile</b> and see what they have been up to! To vote, post comments, create articles and more, <b>log in</b> or <b>sign up</b>.</p>
</div>
<div class="project-tech">
<img class="cogs-logo" src="./media/logos/cogs.png">
<p class="project-para info">Code is available <a class='project-anchor' href="https://github.com/jakejones2/nc-news-app">here</a> on GitHub. The app is written using custom and composed <b>functional</b> components, <b>JSX templating</b> and <b>SASS</b> CSS following BEM standards. State, effect and context <b>hooks</b> achieve UI interactivity, modular loading, optimistic rendering, and a hybrid pagination/infinite scrolling system. Routing, navigation and URL search params are implemented with <b>React Router v6</b>, and responsive CSS via flex and media queries.</p>
</div>
</div>
</article>
<div class="divider"></div>
<article id="articles-api-proj" class="project">
<div class="project-info" id="articles-api-proj-info">
<h2 class="project-title">Articles API</h2>
<h3 class="project-subtitle">Javascript <b> · </b> Express.js <b> · </b> Postgres | Aug 23 </h3>
<p class="project-para headline"><b>RESTful API</b> that lets you store and retrieve json data for a news/social media website. Visit the <a href="https://github.com/jakejones2/articles-api" class="project-anchor">GitHub readme</a>, and then have a go <a href="https://articles-api-zepx.onrender.com/api" class="project-anchor">here</a>!</p>
<div class="project-description">
<img src="./media/logos/question.png" class="question-logo">
<p class="project-para info">Read through articles, categories and users, and then log in to create, delete or vote for content. Filter results with queries and sorting.</p>
</div>
<div class="project-tech">
<img class="cogs-logo" src="./media/logos/cogs.png">
<p class="project-para info">Uses Express.js and postgres, with pg-format + raw SQL for seeding and interacting with db. Implemented <b>authorisation middleware</b> with refresh/access JWTs and password hashing/salting. Built using <b>TDD</b> with <a href="https://jestjs.io/docs/" class="project-anchor">jest</a>. Deployed with Render and ElephantSQL, implemented <b>CI/CD</b> with GitHub Actions and pre-commit testing with Husky.</p>
</div>
</div>
<img class="project-img" src="./media/articles-api.jpeg">
</article>
<div class="divider"></div>
<article id="coup-proj" class="project">
<img class="project-img" src="./media/coup.png">
<div class="project-info" id="coup-proj-info">
<h2 class="project-title">In progress: Reinforcement Learning with <i>Coup</i></h2>
<h3 class="project-subtitle">Python <b> · </b> PettingZoo <b> · </b> TensorFlow | Oct 23 </h3>
<p class="project-para headline">First attempt at Machine Learning! Training a Keras model to play the card game <a href="https://www.ultraboardgames.com/coup/game-rules.php" class="project-anchor">Coup</a>. See the work-in-progress repo <a href="https://github.com/jakejones2/coup-RL" class="project-anchor">here.</a></p>
<div class="project-description">
<img src="./media/logos/question.png" class="question-logo">
<p class="project-para info">Watch the computer play the game with random actions by running the file <code>random_policy.py</code>.<br><br> The main challenge when building the environment was figuring out how to enable the correct turn-based play; the PettingZoo AEC api was unsuitable because players can 'interrupt' at any moment and block or counter certain actions. My solution utilises the Parallel API (where players make moves simultaneously) along with <b>action masking</b> to force players into a move order that can change depending on game events.</p>
</div>
<div class="project-tech">
<img class="cogs-logo" src="./media/logos/cogs.png">
<p class="project-para info">Check out <a href="https://pettingzoo.farama.org/" class="project-anchor">PettingZoo</a> for more information on multi-agent Gymnasium environments, and <a href="https://docs.ray.io/en/latest/rllib/index.html" class="project-anchor">RLlib</a> for training. Best policy so far performs about twice as well as a random agent, winning 55.1% of games (n = 4000) against 3 other players making random decisions (would normally expect 25% win rate).</p>
</div>
</div>
</article>
<div class="divider"></div>
<article id='baby-names-proj' class="project">
<div class="project-info" id="baby-names-proj-info">
<h2 class="project-title"><i>Historical UK Baby Names</i></h2>
<h3 class="project-subtitle">Javascript <b> · </b> React <b> · </b> CSS | Aug 23 </h3>
<p class="project-para headline">My first react project! <a href="https://github.com/jakejones2/name-generator" class="project-anchor">Very simple code</a> but taught me a lot about components/state etc. Watch this space for bigger React builds!</p>
<div class="project-description">
<img src="./media/logos/question.png" class="question-logo">
<p class="project-para info">View the <a class='project-anchor' href="https://name-generator-i5r3.onrender.com/">site</a>, and choose baby names from throughout the twentieth century. Even has <b>twins</b> mode and <b>sound effects</b>....</p>
</div>
<div class="project-tech">
<img class="cogs-logo" src="./media/logos/cogs.png">
<p class="project-para info">Built with JS, <b>React</b> and vanilla CSS. Deployed on the free tier of Render which spins sites down after periods of inactivity. Apologies if the initial load takes a minute!</p>
</div>
</div>
<img class="project-img" src="./media/name-generator.png">
</article>
<div class="divider"></div>
<article id='animals-proj' class="project">
<img class="project-img" src="./media/animals.png">
<div class="project-info" id="animals-proj-info">
<h2 class="project-title"><i>Do You Know Your Animals?</i></h2>
<h3 class="project-subtitle">Javascript <b> · </b> Express.js | Aug 23 </h3>
<p class="project-para headline">I was practicing DOM manipulation and using <b>audio</b> in js, and ended up with <a href="https://animal-game.onrender.com/" class="project-anchor">this game</a> which turned out to be surprisingly hard.</p>
<div class="project-description">
<img src="./media/logos/question.png" class="question-logo">
<p class="project-para info">Listen to the sounds and then try to click the animals in the right order. Even the smallest thought causes you to fail. A challenge for those with an obtrusive inner monologue.</p>
</div>
<div class="project-tech">
<img class="cogs-logo" src="./media/logos/cogs.png">
<p class="project-para info">There's nothing unusual or impressive in the code, but feel free to <a href="https://github.com/jakejones2/animal-game" class="project-anchor">have a look</a> anyway. It's another free-tier Render deployment, so apologies if the initial load takes a while...</p>
</div>
</div>
</article>
<div class="divider"></div>
<article id='problem-solving-proj' class="project">
<div class="project-info" id="problem-solving-proj-info">
<h2 class="project-title">Misc Problem Solving</h2>
<h3 class="project-subtitle">Javascript <b> · </b> Jest | Jul 23</h3>
<p class="project-para headline">Just a collection of problems I've enjoyed solving over the last few months. Have a look at the <a href="https://github.com/jakejones2/problem-solving" class="project-anchor">repo</a>!</p>
<div class="project-description">
<img src="./media/logos/question.png" class="question-logo">
<p class="project-para info">Personal highlight was the <b>Boggle</b> problem - write a function that evaluates whether a word is valid on a given boggle board.</p>
</div>
<div class="project-tech">
<img class="cogs-logo" src="./media/logos/cogs.png">
<p class="project-para info">Topics include recursion, closure, and working with primitives vs objects.</p>
</div>
</div>
<img class="project-img" src="./media/problem-solving.png">
</article>
<div class="divider"></div>
<article id='sc-scraper-proj' class="project">
<img class="project-img" src="./media/sc_scraper.jpeg">
<div class="project-info" id="sc-scraper-proj-info">
<h2 class="project-title">SoundCloud Comment Scraper</h2>
<h3 class="project-subtitle">Python <b> · </b> Tkinter <b> · </b> Selenium | Jan 23 - Mar 23 </h3>
<p class="project-para headline">Scrape and download comments from SoundCloud.com - see what people are saying about the music you like!</p>
<div class="project-description">
<img src="./media/logos/question.png" class="question-logo">
<p class="project-para info">This <b>python package</b> scrapes SoundCloud comments with a selection of built in and customisable filters. Data is exported to <b>CSV</b>, and can be scraped from individual track URLs, or parent URLs such as <b>playlists</b> or <b>artist pages</b>.</p>
</div>
<div class="project-tech">
<img class="cogs-logo" src="./media/logos/cogs.png">
<p class="project-para info">See the <a class='project-anchor' href="https://github.com/jakejones2/sc-comment-scraper">code</a>! This project was intended initially for use in music scholarship, so I designed a <b>Tkinter GUI</b> as the main interface. However, the modules could be imported and used independently as in the example at the bottom of <code>/src/app/backend/scraper.py</code>.<br><br>This was my first ever coding project - excuse some poor design choices here and there! I've made some notes in the GitHub readme about things that need improving. At some point I might revisit the code and refactor it for a simple web app. It might also be a good starting point to practice some data analysis or ML, e.g. finding themes in an artist's discourse, or filtering spam comments.</p>
</div>
</div>
</article>
</div>
</section>
<section id="about-me">
<div id="blob1">
<h2 class="section-title projects-title" id="about-me-title">About Me</h2>
<article class="about-me-content">
<p class="about-me-para">As a student of <b>musical analysis</b> I became confident learning syntax and working creatively in technical environments. Coding puts these skills to use in a new context, and aligns my interests in design, communication and problem-solving.</p>
<p class="about-me-para">Aside from programming, I’m a keen swimmer, sci-fi reader and Subbuteo enthusiast (1950s players only). I’m drawn towards hobbies that involve building or making things, and probably get too invested in logic puzzles and strategy games.</p>
<p class="about-me-para">Writing and listening to music remains a big part of my life, and my favourite pieces usually involve some sort of creative negotiation with a musical form. There’s a parallel with coding there somewhere!</p>
<iframe id="sound-cloud-player" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1363004998&color=%233a4549&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false"></iframe>
</article>
</div>
</section>
<section id="contact">
<div id="blob2">
<h2 class="section-title" id="contact-title">Contact</h2>
<ul id="contact-list">
<li ><img class="contact-img" id="phone-logo" src="./media/logos/phone.png"><span class="contact">07887396271</span></li>
<li ><img class="contact-img" src="./media/logos/email.png"><span class="contact">jakejones1998@hotmail.co.uk</span></li>
<li ><img class="contact-img" src="./media/logos/github-black.png"><span class="contact">https://github.com/jakejones2</span></li>
<li ><img class="contact-img" src="./media/logos/linkedin-black.png"><span class="contact">https://www.linkedin.com/in/jake-jones-318330102/</span></li>
<a class="contact-anchor" target="_blank" href="./Jake Jones CV.pdf"><li ><img class="contact-img" src="./media/logos/cv.png"><span class="contact">Click to download CV</span></li></a>
</ul>
</div>
</section>
</main>
<footer>
<div class="nav-bottom">
<h2 class="footer-header">Jake Jones</h2>
<p class="vertical-bar">|</p>
<a href='#top' class="nav-button footer-button">Home</a>
<a href="https://github.com/jakejones2"><img class="small-logo footer-logo" src="./media/logos/github.png"></a>
<a href="https://www.linkedin.com/in/jake-jones-318330102/"><img class="small-logo footer-logo" src="./media/logos/linkedin.png"></a>
</div>
</footer>
</body>
</html>