-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
356 lines (308 loc) · 17.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dominic Simpson - Application Website to Founders & Coders</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.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=Almarai&family=Archivo+Black&family=Cormorant+SC:wght@600&family=Libre+Bodoni&family=Playfair+Display:wght@500&family=Roboto+Mono:wght@200&display=swap" rel="stylesheet">
<body>
<div id="page">
<!-- Header Section -->
<header id="pageheader">
<a href="#homepagemainsection" class="skiplink">Skip to main content</a> <!-- for accessibility purposes -->
<h1>DOMINIC SIMPSON</h1>
<!-- <p id="date"></p> -->
</header>
<!-- End of Header Section -->
<!-- Main Homepage Section -->
<section id="mainsection" role="main">
<div>
<h2>Application for Founders & Coders</h2>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 6</div>
<img src="images/fac1_tributepage.jpg" alt="Photo of tribute page as project number one for Founders & Coders application">
<div class="caption">Project One: Tribute Page to Buckminster Fuller</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 6</div>
<img src="images/fac2_projectgallery.jpg" alt="Photo of Project Gallery as project number two for Founders & Coders application">
<div class="caption">Project Two: Project Gallery</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 6</div>
<img src="images/fac3_commentbox.jpg" alt="Photo of comment box as project number three for Founders & Coders application">
<div class="caption">Project Three: Comment Box</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 6</div>
<img src="images/fac4_fruitshop.jpg" alt="Photo of fruit shop as project number four for Founders & Coders application">
<div class="caption">Project Four: Fruit Shop</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 6</div>
<img src="images/fac5_website.jpg" alt="Photo of application website as project number five for Founders & Coders application">
<div class="caption">Project Five: Website</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 6</div>
<img src="images/fac6_feature.jpg" alt="Photo of Theseus & The Minotaur feature as project number six for Founders & Coders application">
<div class="caption">Project Six: Feature - Theseus & The Minotaur</div>
</div>
<a class="prev" id="prevSlider">❮</a>
<a class="next" id="nextSlider">❯</a>
</div>
<div class="dots">
<span class="dot" id="dotOne"></span>
<span class="dot" id="dotTwo"></span>
<span class="dot" id="dotThree"></span>
<span class="dot" id="dotFour"></span>
<span class="dot" id="dotFive"></span>
<span class="dot" id="dotSix"></span>
</div>
<h2>Hello!</h2>
<p>My name is Dominic Simpson and this is my application website for Founders &
Coders' Skills Bootcamp.</p>
<p>I grew up not far from Founders & Coders' offices, and have been learning coding on and off
for the last ten years. I genuinely enjoy designing websites and learning coding, and am ambitious
to be a full-time software developer. I have enjoyed my experience working with other applicants
during F&C's meet-ups, both online and in person, and want to take my experience further
by enrolling on F&C's Skills Bootcamp, with a view to completing a Software Apprenticeship
at the end, for which I am fully comitted. I am ambitous to be a Software Developer
full-time. But more than that, I am also able to work as part of a student community, and apply
non-judgemental respect and empathy to fellow cohorts.</p>
<p>My love of coding comes from the creativity and experience of continually learning.
When I was a kid, I programmed simple computer games on
an <a href="https://en.wikipedia.org/wiki/Amstrad_CPC_464" target='_blank'>Amstrad CPC-464</a>,
using <a href="https://en.wikipedia.org/wiki/BASIC" target='_blank'>BASIC language</a> -
so with my final feature, the Theseus & The Minotaur Project, it feels like I've come full circle.</p>
<p>This portfolio contains my work on the six projects that are
required as part of the application process, as well as some of my other work.
Mouse over each card for the name of the project, and then click each
Show Description button twice for a subsequent description, including a link to
the project's GitHub repository.</p>
<br>
<div class="cards">
<div class="imagewrapper">
<div class="cardcontainer">
<img src="images/fac1_tributepage_card.jpg" alt="Photo of tribute page card as project number one for Founders & Coders application" class="image">
<div class="overlay">
<div class="text">Project One: Tribute Page to Buckminster Fuller</div>
</div>
</div>
<button id="showDescription">Show Description</button>
</div>
<div class="imagewrapper">
<div class="cardcontainer">
<img src="images/fac2_projectgallery_card.jpg" alt="Photo of project gallery card as project number two for Founders & Coders application" class="image">
<div class="overlay">
<div class="text">Project Two: Project Gallery</div>
</div>
</div>
<button id="showSecondDescription">Show Description</button>
</div>
<div class="imagewrapper">
<div class="cardcontainer">
<img src="images/fac3_commentbox_card.jpg" alt="Photo of comment box card as project number three for Founders & Coders application" class="image">
<div class="overlay">
<div class="text">Project Three: Comment Box</div>
</div>
</div>
<button id="showThirdDescription">Show Description</button>
</div>
</div>
<div class="cardtext" id="cardText">
<p>For the first project, I constructed a
tribute page to Buckminster "Bucky" Fuller, the legendary American architect,
systems theorist, futurist, writer, designer, inventor, and philosopher.
Fuller is something of a hero of mine, having overcome the odds to be a true visionary
whose ideas are still with us today.</p>
<p>I used Google Fonts to make the headings looks professional and employed Flex Box.
I also decided to keep the main section with a white background, because some of the
images – particularly the Dymaxion car replica and the Dymaxion map projection
of the World – had white edges, and they blended well with each other.
There would've been a jarring effect if there had been a physical image border.</p>
<p>Initially, the time and date were at the top, but this did not look quite right,
so it put it in the footer section.</p>
<p>The links are in blue for accessibility purposes: blue is generally held up as the
best colour to have links in, for those who have sight access requirements.</p>
<p><a href="https://github.com/DominicSimpson/facprojectone" target='_blank'>GitHub repository</a></p>
</div>
<div class="cardtext" id="cardTwoText">
<p>This project gallery is made up of screenshot cards of each of the six projects that make up the Founders & Coders application.
I have used media queries to try and make the cards scale correctly, and
at a max-width of 600px, the images stack on top of each other.</p>
<p><a href="https://github.com/DominicSimpson/facprojecttwo" target='_blank'>GitHub repository</a></p>
</div>
<div class="cardtext" id="cardThirdText">
<p>For the third project, I constructed a
Comment Box, which employed the same logic as when Tweeting: only a maximum of 140 characters
allowed.</p>
<p>This meant setting up a system on JavaScript where a constant variable with the number 140 was invoked
as comparison when the user started typing in characters. This logic was tricky to comprehend at first
given that the counter was counting down from 140 to 0 rather than up, as well as having to account
for what would happen to the counter if the user backspaced.</p>
<p>I constructed an if else statement to account for if the user had reached the
limit of 140 characters, with not only the text highlighted in red, but also the walls
via the outline property in CSS, which I had not encountered before.</p>
<p>Finally, I also constructed a print function, which not only printed out what the user
had typed in the textarea field before hitting Submit, but also forced them to fill in
the Name field, which was printed out too.</p>
<p><a href="https://github.com/DominicSimpson/facprojectthree" target='_blank'>GitHub repository</a></p>
</div>
<div class="cards">
<div class="imagewrapper">
<div class="cardcontainer">
<img src="images/fac4_fruitshop_card.jpg" alt="Photo of fruit shop card as project number four for Founders & Coders application" class="image">
<div class="overlay">
<div class="text">Project Four: Fruit Shop</div>
</div>
</div>
<button id="showFourthDescription">Show Description</button>
</div>
<div class="imagewrapper">
<div class="cardcontainer">
<img src="images/fac5_website_card.jpg" alt="Photo of application portfolio website as project number five for Founders & Coders application" class="image">
<div class="overlay">
<div class="text">Project Five: Application Portfolio Website</div>
</div>
</div>
<button id="showFifthDescription">Show Description</button>
</div>
<div class="imagewrapper">
<div class="cardcontainer">
<img src="images/fac6_feature_card.jpg" alt="Photo of Theseus & the Minotaur feature as project number six for Founders & Coders application" class="image">
<div class="overlay">
<div class="text">Project Six: Feature - Theseus & The Minotaur</div>
</div>
</div>
<button id="showSixthDescription">Show Description</button>
</div>
</div>
<div class="cardtext" id="cardFourthText">
<p>For the fourth project, I constructed a Fruit Shop, with each fruit added to a Cart
that displayed on a separate, linked Cart page. </p>
<p>Each fruit item was linked to a specific object in a Products array in the JavaScript,
with an inCart element as one the elements in the object that incremented every time.</p>
<p>A function called displayCart printed out the products on the Cart page,
generating the items and price, and calculating a basket total.</p>
<p><a href="https://github.com/DominicSimpson/facprojectfour" target='_blank'>GitHub repository</a></p>
</div>
<div class="cardtext" id="cardFifthText">
<p>For this website, which contains a portfolio of my work, I wanted bright,
welcoming colours, and settled accordingly on yellow as a background colour,
rather than the more forbidding black of my
<a href="http://www.dominicsimpson.co.uk" target='_blank'>existing website</a> that
I've had for the last few years.</p>
<p>I've also seen other websites use Roboto Mono font successfully,
so I employed this as a paragraph font.</p>
<p><a href="https://github.com/DominicSimpson/facprojectfive" target='_blank'>GitHub repository</a></p>
</div>
<div class="cardtext" id="cardSixthText">
<p>For my in-depth feature, based around a more substantial, complicated piece of work, I used the Greek
legend of <a href="https://mythsandlegend.com/theseus-and-the-minotaur/" target='_blank'>Theseus
and The Minotaur</a>.
I had been thinking for a while about how to represent
the Greek legend in a simple game, and how it would work.</p>
<p>Using an <a href="https://medium.com/codex/build-a-maze-game-with-vanilla-javascript-part-1-of-2-ddfd35e84e93" target='_blank'>online template</a>,
which I very much eventually transformed into my own vision, I jotted down some pseudocode
and constructed two identical maze levels to represent
the Labyrinth after experimenting first with wireframes on Google Sheets.
The two levels were there in order to have one Theseus sprite for each.
Each Theseus sprite traverses the Labyrinth, via the user's use of keyboard or
onscreen buttons, in order to reach the Minotaur at the very centre of the Labyrinth,
who Theseus slays. My idea, which I managed to realise after extensive work
redesigning the original template, was that the two Theseuses would then be
compared to see who reached the Minotaur the quickest.
An on-screen statement would state the winner.</p>
<p>The project was complex to realise and took much redesign of coding. I constructed a Game prototype object,
something that I wasn't aware of before, which contained all subsequent functions.
These included a Start button and Timer, so that each Theseus could be timed.
An additional consideration had to be made on each Theseus having an equidistant route to the Minotaur,
which influenced the mirrored pattern of the Labyrinth. The process of transforming from
the first level to the second was complex, particularly when trying to restart the timer.</p>
<p><a href="https://github.com/DominicSimpson/facprojectsix" target='_blank'>GitHub repository</a></p>
</div>
<h2>Other Work</h2>
<div class="cards">
<div class="imagewrapper">
<div class="cardcontainer">
<img src="images/solarsystem_card.jpg" alt="Photo of solar system page on Dominic Simpson website" class="image">
<div class="overlay">
<div class="text">Solar System animation</div>
</div>
</div>
<button id="showSeventhDescription">Show Description</button>
</div>
<div class="imagewrapper">
<div class="cardcontainer">
<img src="images/webdevelopment_card.jpg" alt="Photo of web development page on Dominic Simpson website" class="image">
<div class="overlay">
<div class="text">Web Development portfolio page</div>
</div>
</div>
<button id="showEighthDescription">Show Description</button>
</div>
</div>
<div class="cardtext" id="cardSeventhText">
<p>On my website, I have constructed some animation based on
the solar system. This includes all of the planets and some of the main moons.
I have used CSS animations to do so, including setting the timing duration at different
levels for each planet, so that they rotate around the animated Sun at different speeds.</p>
<p><a href="https://dominicsimpson.co.uk/animation.html" target='_blank'>Link</a></p>
</div>
<div class="cardtext" id="cardEighthText">
<p>I completed a Certificate in Continuing Education in Web Developement at Birkbeck College a few years
ago, comprising several modules that gave me a good grounding in advanced HTML and basic object-orientated
programming concepts and logic. This work collects some of the coursework that I completed for these modules.
</p>
<p><a href="https://dominicsimpson.co.uk/webdevelopment.html" target='_blank'>Link</a></p>
</div>
<div class="cards">
<div class="imagewrapper">
<div class="cardcontainer">
<img src="images/arraytest_card.jpg" alt="Photo of array test on StackBlitz" class="image">
<div class="overlay">
<div class="text">Array Test</div>
</div>
</div>
<button id="showNinthDescription">Show Description</button>
</div>
<div class="imagewrapper">
<div class="cardcontainer">
<img src="images/photography_card.jpg" alt="Photography page on Dominic Simpson website" class="image">
<div class="overlay">
<div class="text">Photography</div>
</div>
</div>
<button id="showTenthDescription">Show Description</button>
</div>
</div>
<div class="cardtext" id="cardNinthText">
<p>This was a previous prompt by Founders & Coders as part of the application process,
which involved having a form that prompted the user to enter a sequence of numbers divided
by commas. If the user clicked on the Filter button and then clicked Submit, the form would
then state which of those buttons were divisible by two.</p>
<p>By contrast, if the user clicked on the Reduce function and then clicked Submit, the form would
then state the total of the numbers inputted.</p>
<p><a href="https://stackblitz.com/edit/web-platform-wulaoi?file=script.js,index.html" target='_blank'>Link</a></p>
</div>
<div class="cardtext" id="cardTenthText">
<p>Photos that I have taken around the world and here in the UK
(warning: contains Bootstrap frameworks).</p>
<p><a href="https://dominicsimpson.co.uk/photography.html" target='_blank'>Link</a></p>
</div>
</section>
<!-- End of Main Section -->
<footer id="footer">
<h2>© Site design by Dominic Simpson 2022</h2>
<p class="date"></p>
</footer>
</div>
<script src="scripts/script.js"></script>
</body>
</html>