-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (207 loc) · 10.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Harry Johnston | Full-Stack Dev</title>
<link rel="stylesheet" href="portfolio_style.css" type="text/css">
<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@100;400;600&family=Roboto+Mono:wght@100&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/584be2f2ed.js" crossorigin="anonymous"></script>
<script src="script.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav class="nav_bar">
<a href="#aboutme_container" class="nav_button">
01. <span class="nav_button_text">About Me</span>
</a>
<a href="#portfolio_container" class="nav_button">
02. <span class="nav_button_text">Portfolio</span>
</a>
<a href="#git_container" class="nav_button">
03. <span class="nav_button_text">Get in Touch</span>
</a>
</nav>
<main>
<header class=splash_container>
<div class="intro_container">
<p class="initial_hi test">Hi, my name is</p>
<h1>Harry Johnston.</h1>
<p class="intro_short">I am a full-stack web developer and avid climber with a passion for solving technical
problems in the office and the mountains</p>
<a href="assets/Harry%20Johnston.pdf" download="HarryJohnston.pdf" class="intro_button">Check out my CV!</a>
</div>
<a class="arrow_container" href="#aboutme_container">
<div class="down_arrow"></div>
</a>
</header>
<section id="aboutme_container">
<h2 class="aboutme_title">
<span class="aboutme_title_number">01.</span> About Me
</h2>
<article class="aboutme_body js-scroll slide-right">
<div class="aboutme_text_container">
<p class="aboutme_text">
Hello again!
</p>
<p class="aboutme_text">
I'm an enthusiastic software developer due to graduate from iO Academy's Full-Stack track in
October. My engineering background - specifically in construction - has given me a love of solving
problems at all scales and a healthy fear of 3D modelling.
</p>
<p class="aboutme_text">
I completed my masters in 2017 and spent the next couple of years working as a supply chain
specialist, analysing data with VBA and building data visualisations. I then spent 2 years working
as a consultant engineer. After finding the regulated and restrictive environment limited my design
freedom, I decided to improve the programming skills I picked up in university.
</p>
<p class="aboutme_text">
When I'm not working, I am an avid climber (some would call me obsessed) and have a general love of
everything related to our wild spaces and the outdoors.
</p>
<p class="aboutme_text">
I'm excited to turn my problem-solving abilities to the world of tech.
</p>
</div>
<div class="aboutme_img_container">
<span class="aboutme_img_cover"></span>
<span class="aboutme_img_border"></span>
<img src="assets/headshot.jpg"
alt="picture of me"
class="aboutme_img">
</div>
</article>
</section>
<section id="portfolio_container">
<h2 class="portfolio_title">
<span class="portfolio_title_number">02.</span> Portfolio
</h2>
<div class="project_container js-scroll slide-right">
<h3 class="project_title">Project 01</h3>
<div class="project_content">
<img src="assets/Icepace.png" alt="project photo1"
class="project_image">
<div>
<p class="project_text">
A social media app built in OOP
</p>
<p class="project_text">
An Object-Oriented PHP project where we built out a full-stack track social media app within a scrum team. Using a MySQL database to feed the back-end, we applied SOLID principles, and I built an input a validator & sanitiser among other things. The site's front-end was constructed using SASS to enable mixins, nesting and CSS variables.
A login system was in progress but incomplete at the end of the sprint so is planned for a
future date.
</p>
<div class="project_link_container">
<a target="_blank" href="https://github.com/iO-Academy/2022-jul-icepace"
class="project_link">
<i class="fa-brands fa-github"></i>
</a>
<a target="_blank" href="https://dev.io-academy.uk/projects/2022-july/icepace/" class="project_link live">LIVE</a>
</div>
</div>
</div>
</div>
<div class="project_container js-scroll slide-left">
<h3 class="project_title">Project 02</h3>
<div class="project_content">
<img src="assets/SurfWaveFury.png" alt="project photo1"
class="project_image">
<div>
<p class="project_text">
A javascript penguin surf racing game, need I say more...
</p>
<p class="project_text">
A vanilla Javascript game which uses alternating left and right arrow keys to move the penguin
towards the finish. We made use of advanced CSS styling for an animated background and
implemented a leaderboard using LocalStorage. All the pixel art sprites were AI generated for
extra pizazz.
</p>
<div class="project_link_container">
<a target="_blank" href="https://github.com/iO-Academy/2022-july-keyboard-race"
class="project_link">
<i class="fa-brands fa-github"></i>
</a>
<a target="_blank" href="https://dev.io-academy.uk/projects/2022-july/surfwave-fury/"
class="project_link live">LIVE</a>
</div>
</div>
</div>
</div>
<div class="project_container js-scroll slide-right">
<h3 class="project_title">Project 03</h3>
<div class="project_content">
<img src="assets/PenguinMail.png" alt="project photo1"
class="project_image">
<div>
<p class="project_text">
A React email client with a frosty theme.
</p>
<p class="project_text">
Utilising React to consume a pre-built API, we built an email client based on a given wireframe. We used Bootstrap to ensure consistency with the wireframe and the app made use of AJAX to pull from the API. The app was built as part of an agile team where I took on Scrum Master responsibilities as well as being a developer.
</p>
<div class="project_link_container">
<a target="_blank" href="https://github.com/iO-Academy/2022-jul-penguin-mail"
class="project_link">
<i class="fa-brands fa-github"></i>
</a>
<a target="_blank" href="https://dev.io-academy.uk/projects/2022-july/igloo-inbox/" class="project_link live">LIVE</a>
</div>
</div>
</div>
</div>
<div class="project_container js-scroll slide-left">
<h3 class="project_title">Project 04</h3>
<div class="project_content">
<img src="assets/ChalkItUp.png" alt="project photo1"
class="project_image">
<div>
<p class="project_text">
A climbing training tracker built with a PHP & MySQL back-end.
</p>
<p class="project_text">
I built a training log, so I could see my strength improvements over time. The back-end groups
entries by date, since one day will often include multiple workouts. The ultimate ambition is to
turn this into a full CRUD application and implement profiles, so it can be shared with my
training buddies.
</p>
<div class="project_link_container">
<a target="_blank" href="https://github.com/Harry-Johnston/Training-Log" class="project_link">
<i class="fa-brands fa-github"></i>
</a>
<a target="_blank" href="https://2022-harryj.dev.io-academy.uk/Training-Log/"
class="project_link live">LIVE</a>
</div>
</div>
</div>
</div>
</section>
<section id="git_container">
<h2 class="git_title"><span class="git_title_number">03.</span> Get in Touch </h2>
<div class="git_content js-scroll slide-right">
<p class="git_text">I am currently looking for opportunities and my inbox is always open. Whether it's an
enquiry about a job or simply a question about anything on this site, please don't hesitate
to get in touch!</p>
<a href="mailto: [email protected]" class="git_button">Say hi!</a>
</div>
</section>
<a class="arrow_container" href="#">
<div class="up_arrow"></div>
</a>
<div class="contact_container">
<a target="_blank" href="https://www.linkedin.com/in/harry-johnston-462322105" class="contact_button"><i
class="fa-brands fa-linkedin"></i></a>
<a href="mailto: [email protected]" class="contact_button"><i class="fa-solid fa-envelope"></i></a>
<a target="_blank" href="https://github.com/Harry-Johnston" class="contact_button"><i
class="fa-brands fa-github"></i></a>
</div>
<footer>
<p class="footer">
Designed and built by Harry Johnston
</p>
<a target="_blank" href="https://github.com/Harry-Johnston/Portfolio-Repo" class="footer_ghub">
<i class="fa-brands fa-github"></i>
</a>
</footer>
</main>
</body>
</html>