-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
229 lines (226 loc) · 13.2 KB
/
Copy pathindex.html
File metadata and controls
229 lines (226 loc) · 13.2 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jon McCallum | Web Developer</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:Light|Merriweather|Noto+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div id="sidebar">
<div id="site-title">
<h1>Jon McCallum</h1>
<p id="subtitle">Junior Web Developer</p>
</div>
<div id="social-links">
<a target="_blank" href="https://github.com/playwithbear" class="fab fa-github social" title="GitHub" alt="GitHub Link"></a>
<a target="_blank" href="https://twitter.com/mccallum_jon" class="fab fa-twitter social" title="Twitter" alt="Twitter Link"></a>
<a target="_blank" href="https://www.youtube.com/channel/UCbj4rPPZouVAOI6n39wtflg" class="fab fa-youtube social" title="YouTube" alt="YouTube Link"></a>
<a target="_blank" href="https://www.linkedin.com/in/jsmccallum" class="fab fa-linkedin social" title="LinkedIn" alt="LinkedIn Link"></a>
<a target="_blank" href="https://www.freecodecamp.org/playwithbear" class="fab fa-free-code-camp social" title="freeCodeCamp" alt="freeCodeCamp Link"></a>
<a target="_blank" href="https://codepen.io/playwithbear/" class="fab fa-codepen social" title="CodePen" alt="CodePen Link"></a>
</div>
<img src="http://jon.wdan.uk/wp-content/uploads/2019/02/cropped-canva-photo-editor.png" id="profile-photo" alt="Jon McCallum profile photo">
<!-- <div id="contact">
<h2>Contact</h2>
<p class="contact-link"><i class="fas fa-envelope"></i> <a href="mailto:jonathan.s.mccallum@gmail.com">jonathan.s.mccallum@gmail.com</a></p>
<p class="contact-link"><i class="fas fa-phone"></i> 07538 988393</p>
</div>-->
</div>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div id="navbarNav" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item jm-nav-item"><a href="#top" class="nav-link">Home</a></li>
<li class="nav-item jm-nav-item"><a href="#about" class="nav-link">About</a></li>
<li class="nav-item jm-nav-item"><a href="#projects" class="nav-link">Projects</a></li>
<li class="nav-item jm-nav-item"><a href="#education" class="nav-link">Education</a></li>
<li class="nav-item jm-nav-item"><a href="#work-experience" class="nav-link">Work Experience</a></li>
<li class="nav-item jm-nav-item"><a href="https://jon.wdan.uk/" target="_blank" class="nav-link">Blog</a></li>
<li class="nav-item jm-nav-item"><a href="#contact-form" class="nav-link">Contact</a></li>
</ul>
</div>
</nav>
<main>
<div id="content">
<section id="about">
<h2>About</h2>
<p class="section-subtitle">Former hobbyist web tinkerer, now full-time trainee web developer!</p>
<p>
Currently refining HTML, CSS, and vanilla JS; with additional experience in Python.
I love problem-solving, so the appeal of working with coding is greatly appealing, and thus far very enjoyable.
When not at a terminal, I enjoy board games so a great focus for self-development is to take board games, and create digital versions of this.
</p>
<p>
Additionally, I'm an analytical person by nature, so when there is free RAM in my brain, I'm working through the Data Scientist track on DataCamp, learning Python.
</p>
<p class="section-subtitle">Skills/Exposure:</p>
<p>
<i class="fab fa-html5"></i>
<i class="fab fa-css3-alt"></i>
<i class="fab fa-js"></i>
<i class="fab fa-github"></i>
<i class="fab fa-python"></i>
</p>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="projects-container">
<div class="project-item project-main">
<a href="http://jonmccallum.co.uk/pharaoh-idle"><img src="/img/pharaoh-mask.jpg" alt="pharaoh death mask" width="100%" class="project-image">
<div class="project-overlay">
<div class="project-content">
<h2>Pharaoh Idle</h2>
<p>An idle game, built in the shadows of Adventure Capitalist, Cookie Clicker and many, many others...</p>
</div>
</div></a>
</div>
<div class="project-item project-secondary">
<a href="http://jonmccallum.co.uk/codes-and-ciphers"><img src="/img/Enigma-rotors.jpg" alt="Enigma machine rotors" width="100%">
<div class="project-overlay">
<div class="project-content">
<h2>Codes and Ciphers</h2>
<p>A collection of scripts to encrypt and decrypt messages using different types of codes and ciphers.</p>
</div>
</div></a>
</div>
<div class="project-item project-secondary">
<a href="http://jonmccallum.co.uk/to-do-list/"><img src="img/checklist.jpg" alt="checklist image" width="100%"></a>
<div class="project-overlay">
<div class="project-content">
<h2>To-do List</h2>
<p>Interactive to-do list, playing will arrays.</p>
</div>
</div>
</div>
<div class="project-item project-secondary project-bottom-right">
<a href="https://codepen.io/playwithbear/"><img src="img/codepen 2-1.png" alt="codepen logo" width="100%"></a>
<div class="project-overlay">
<div class="project-content">
<h2>Codepen</h2>
<p>Check out everything else that I'm tinkering with on Codepen</p>
</div>
</div>
</div>
<!-- <div class="project-item project-secondary">
<img src="https://picsum.photos/200?random" alt="" width="100%">
<div class="project-overlay">
<div class="project-content">
<h2>Project 5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus quidem rerum rem dolore eos. Enim quas deserunt harum nemo eos?</p>
</div>
</div>
</div>-->
</div>
<!-- <div class="temp-center">
<button class="btn btn-dark">More projects...</button>
</div> -->
</section>
<section id="education">
<h2>Education</h2><br>
<div class="school">
<i class="fas fa-graduation-cap"></i>
<h2>2017 - MA Sociology and Social Policy</h2>
<h3>Merit</h3>
</div><br>
<div class="school">
<i class="fas fa-graduation-cap"></i>
<h2>2007 - BA (Hons) Accounting and Finance</h2>
<h3>2:1 - Upper Second Class</h3>
</div><br>
<div class="school">
<i class="fas fa-graduation-cap"></i>
<h2>2004 - A/AS-Level</h2>
<h3>Greenhead College</h3>
<p>A-Level: Business Studies (A), Chemistry (B), Maths (B)</p>
<p>AS-Level: ICT (B)</p>
</div><br>
<div class="school">
<i class="fas fa-graduation-cap"></i>
<h2>2002 - GCSE</h2>
<h3>Honley High School</h3>
<p>10x A*-C</p>
<p>Including: ICT (A*), Maths (A*), English (BB)</p>
</div>
</section>
<section id="work-experience">
<h2>Work Experience</h2>
<p class="section-subtitle">Most recent; please see <a href="https://www.linkedin.com/in/jsmccallum" target="_blank">LinkedIn</a> if you want more details.</p>
<br><br>
<!-- TODO: Change to flip cards with job description -->
<div class="timeline">
<div class="container-timeline right">
<div class="content-timeline">
<h2>2019 - Demonstrator</h2>
<p class="workplace">Asmodee UK</p>
<p class="job-description">Working across the UK within stores and at major conventions
and expos, demonstrating a variety of board games to the
public.</p>
</div>
</div>
<div class="container-timeline left">
<div class="content-timeline">
<h2>2018 - Rescue Consultant</h2>
<p class="workplace">Green Flag, Leeds</p>
<p class="job-description">Working within a busy inbound call-centre, I was part of
a team which provided sales and retention services to
the customers of Green Flag</p>
</div>
</div>
<div class="container-timeline right">
<div class="content-timeline">
<h2>2016/17 - Race Controller</h2>
<p class="workplace">The Race Center, Halifax</p>
<p class="job-description">Customer service across family entertainment
venue; running events ranging from children’s parties
to corporate events.</p>
</div>
</div>
<div class="container-timeline left">
<div class="content-timeline">
<h2>2016 - Volunteer Centre Co-ordinator</h2>
<p class="workplace">Buddha Land Kadampa Buddhist Centre, Keighley</p>
<p class="job-description">Working within a charity environment coordinating
volunteers; Adherence to food safety controls; Website
development skills and online advertising (Google
Ads).
</p>
</div>
</div>
<div class="container-timeline right">
<div class="content-timeline">
<h2>2015/16 - Self-Employed</h2>
<p class="workplace">The Natural Oil Company, Huddersfield</p>
<p class="job-description">Manufacture and selling of handmade toiletries and
cosmetics; Marketing and design of a strong brand
image; Developed personally, learning as I went all
the demands of a small business</p>
</div>
</div>
<div class="container-timeline left">
<div class="content-timeline">
<h2>2014/15 - Crew Trainer</h2>
<p class="workplace">McDonalds, Huddersfield</p>
<p class="job-description">Responsible for ensuring staff on shift were
adequately trained to meet the demands of the
business.
</p>
</div>
</div>
</div>
</section>
<section id="contact-form">
<div>
<div class="cognito">
<script src="https://services.cognitoforms.com/s/WrDiDR1AaUic5e1qFKudlw"></script>
<script>Cognito.load("forms", { id: "1" });</script>
</div>
</div>
</section>
</div>
</main>
</body>
</html>