-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
393 lines (361 loc) · 26.5 KB
/
index.html
File metadata and controls
393 lines (361 loc) · 26.5 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Founders and Coders Application: Neville Keemer</title>
<meta charset="UTF-8">
<!--Preload local copy of google fonts-->
<link rel="preload" href="fonts/major-mono-display-v5-latin-regular.woff2" as="font" crossorigin>
<link rel="preload" href="fonts/nova-mono-v11-latin-regular.woff2" as="font" crossorigin>
<link rel="preload" href="fonts/open-sans-v18-latin-regular.woff2" as="font" crossorigin>
<link rel="preload" href="fonts/orbitron-v16-latin-800.woff2" as="font" crossorigin>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header id="header">
<h1>Neville Keemer</h1>
<h2>A Story in Development...</h2>
</header>
<!-- ******** HORIZONTAL NAVIGATION BAR ******** -->
<nav>
<h2 id="mobile">
<a href="#header" class="contents">Home</a> |
<a href="#coding" class="contents">Coding</a> |
<a href="#fandc" class="contents">FAC</a> |
<a href="#me" class="contents">Me</a> |
<a href="#prereqs" class="contents">Prereqs</a> |
<a href="#bytesized" class="contents">ByteSized</a> |
<a href="#robot" class="contents">MyRobot</a>
</h2>
<h2 id="desktop">
<a href="#header" class="contents">Home</a> |
<a href="#coding" class="contents">Why Coding?</a> |
<a href="#fandc" class="contents">Why FAC?</a> |
<a href="#me" class="contents">Why Me?</a> |
<a href="#prereqs" class="contents">Course Prereqs</a> |
<a href="#bytesized" class="contents">ByteSizedIT</a> |
<a href="#robot" class="contents">My Robot Prototype</a>
</h2>
</nav>
<main>
<!-- ******** HOME SECTION OF WEBPAGE (CAROUSEL) ******** -->
<section id="home">
<!--Carousel div, including arrow buttons and carousel viewer-->
<div id="carousel">
<button id="carouselPrevArrow" class="carousel__arrows hidden">❮</button>
<!--Viewing space in which the 'current' slide in the carousel deck can be viewed-->
<div id="carousel__viewer">
<!--Lanscape deck (list) of carousel slides-->
<ul id="carousel__deck-landscape" class="carousel__deck">
<!--Individual carousel slides and the images contained-->
<li class="carousel__slide current-slide">
<img class="image" src="slides/Slide1.png" alt="Text reading 'Like all good scripts it began with a blank page...'. Text also represented by an image and in computer code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/Slide2.png" alt="Text reading '...the start of something new'. Text also represented by an image and in computer code.">
</li>
<li class="carousel__slide">
<img class="image" id="slide3" src="slides/Slide3.png" alt="Text reading 'Inheriting properties and attributes...'. Text also represented by an image and in code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/Slide4.png" alt="Text reading '...and adding new ones too'. Text also represented by an image and in code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/Slide5.png" alt="Text reading 'Connecting with the wider world...'. Text also represented by an image and in code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/Slide6.png" alt="Text reading '...and developing a unique style'. Text also represented by an image and in code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/Slide7.png" alt="Text reading 'Sharing methods and values'. Text also represented by an image and in code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/Slide8.png" alt="Text reading 'Overcoming challenges and resolving promises'. Text also represented by an image and in code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/Slide9.png" alt="Text reading 'Mixin with others to learn and support'. Text also represented by an image and in code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/Slide10.png" alt="Text reading 'Looking ahead to what the next page holds'. Text also represented by an image and in code.">
</li>
</ul>
<!--Portrait deck (list) of carousel slides-->
<ul id="carousel__deck-portrait" class="carousel__deck">
<!--Individual carousel slides and the images contained-->
<li class="carousel__slide current-slide">
<img class="image" src="slides/SlideP1.png" alt="Text reading 'Like all good scripts it began with a blank page...'. Text also represented by an image and in computer code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/SlideP2.png" alt="Text reading '...the start of something new'. Text also represented by an image and in computer code.">
</li>
<li class="carousel__slide">
<img id="slideP3" class="image" src="slides/SlideP3a.png" alt="Text reading 'Inheriting properties and attributes...'. Text also represented by an image and in code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/SlideP4.png" alt="Text reading '...and adding new ones too'. Text also represented by an image and in code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/SlideP5.png" alt="Text reading 'Connecting with the wider world...'. Text also represented by an image and in code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/SlideP6.png" alt="Text reading '...and developing a unique style'. Text also represented by an image and in code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/SlideP7.png" alt="Text reading 'Sharing methods and values'. Text also represented by an image and in code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/SlideP8.png" alt="Text reading 'Overcoming challenges and resolving promises'. Text also represented by an image and in code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/SlideP9.png" alt="Text reading 'Mixin with others to learn and support'. Text also represented by an image and in code.">
</li>
<li class="carousel__slide">
<img class="image" src="slides/SlideP10.png" alt="Text reading 'Looking ahead to what the next page holds'. Text also represented by an image and in code.">
</li>
</ul>
</div>
<!--Next arrow button-->
<button id="carouselNextArrow" class="carousel__arrows">❯</button>
</div>
<!--Carousel play/pause button (and slide 3 popup to use as parent for positioning-->
<div id="play-panel">
<button id="popup">Click here to add 'class' to slide 3!</button>
<button id="play-pause" class="pause">Play</button>
</div>
<!--Carousel navigation dots-->
<div id="dots">
<span class="dot current-dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</section>
<!-- ******** 'WHY CODING?' - SECTION OF WEBPAGE ******** -->
<section id="coding" class="sect">
<h2>Why Coding?</h2>
<p>My first steps in to coding came as a volunteer, setting up and running coding clubs at my son's primary school a couple of years ago. Whilst I initially had no coding experience, I had the confidence and experience of working in IT project management and decided to share and build on this to fill a void in a school where I had already developed relationships as a volunteer and reading mentor.</p>
<p>The club quickly evolved to target disadvantaged children that face extra challenges in reaching their potential. The enthusiasm it created among children, teachers and parents led me to other schools in East London ... and so <a href="#bytesized">ByteSizedIT</a> was born!</p>
<p>The experience has been a revelation for me. During this time I have found a ‘fit’ with coding as well as a passion for mentoring and learning to a level that I haven’t had before. As with the children, the more I have learnt, the more I have wanted to learn. I have found coding to be fun but also empowering, offering the opportunity for logical thinking as well as creativity; encouraging you to question things and seek out answers…
</p>
<form id="googleSearch" action="https://google.com/search">
<input id="googleSearchTxt" type="text" name="q" required>
<button id="emptyGoogleBtn" type="button">╳</button>
<div id="googleSubmit">
<input type="submit" value="Google Search">
<input type="submit" value="I'm Feeling Lucky" name="btnI">
</div>
</form>
</section>
<!-- ******** 'WHY FOUNDERS AND CODERS?' SECTION OF WEBPAGE ******** -->
<section id="fandc" class="sect">
<h2>Why Founders and Coders?</h2>
<p>Around the time I started volunteering with schools, I also came across an interview with Dan Sofer of Founders and Coders. Inspired by the underlying messages of inclusivity, diversity, community and helping others, the ethos resonated with me and what I was trying to do (in a small way) with children.</p>
<p>It also helped me to garner the confidence that software development could be a viable career path for me: even now at the heady age of 45.</p>
<p>The peer-led learning and collaborative approach fostered at Founders and Coders is key to this, and has already been brought alive through the application process. Once again, I have really enjoyed the opportunity to support and be supported, as many of us have learnt together during this period.</p>
<p>As well collaborating to complete prerequisites, we’ve also shared useful resources to help explain programming terms and concepts. This led me to having a go at building my own search tool, linking to the sites that have been recommended with the idea that others could use it too.</p>
<form id="glossSearch">
<input id="glossSearchTxt" class="searchTxt" type="text" placeholder="Enter Programming Term">
<button id="emptyGlossBtn" type="button">╳</button>
<ul id="glossSuggestions">
</ul>
</form>
<p>Looking forward, as well as the opportunity to do more peer learning, I am excited by the prospect of working on team projects and, ultimately, ‘real-life’ ones that engender a sense of community and social impact. The Tech for Better scheme also represents the opportunity to extend my learning beyond the code alone, bridging the transition to professional web-developer.</p>
<p>Beyond graduation, I am excited by the role of near peer mentor, not only as a way of ‘passing it on’ but also to cement my own learning. I have loved working with the people I’ve met with so far and am keen to maintain the community and the relationships forged both now and in the future.</p>
</section>
<!-- ******** 'WHY ME?' SECTION OF WEBPAGE ******** -->
<section id="me" class="sect">
<h2>Why me?</h2>
<p>I am white, male and university educated. But that’s not how I define myself. Throughout life my values have led me to try to educate myself about the different barriers people face and, where I can, help transfer the benefits of my privilege to others.</p>
<p>Through the organisations that I’ve worked with (such as the NHS), as well as those that I’ve volunteered for (such as Save the Children), I’ve shared the value that Founders and Coders places on community and helping others.</p>
<p>I also thrive when working in teams that represent a diversity of experiences and perspectives. My three years as part of the Japanese Exchange and Teaching Programme while living in Osaka are an example of this, highlighting the benefits that come from people learning new ways of thinking together.</p>
<p>Having begun working on the Founders and Coders prerequisites 18 months ago, life threw me a curve ball, unexpectedly leading me to take on the challenge of becoming a carer. During this time I have proven myself to be self-motivated, prepared to do long hours, and stubborn in the face of repeated set backs. Attributes that make me well suited to the FAC style of learning.</p>
<p>Throughout I have remained committed to Founders and Coders. Since re-engaging in March I have attended all available meet ups and used the time I’ve had to connect with others in the community directly through the slack channels. I have regularly offered to set up and join in online meetings, keeping up each other’s motivation and momentum as we have all battled through a difficult year. </p>
<p>Above all, I would be grateful for the chance to contribute to something that inspires and has impact - as part of a cohort, an alumni, a mentor and beyond. In my dream situation I’d love to come full circle and take what I’ve learnt to work with young people and children in community projects.</p>
<p>If you are still not sure that this all adds up, click <button id="openCalc">here</button> and you can do the math😉!</p>
<!--Calculator modal-->
<div id="cModal" class="modal">
<div id="calculator">
<div id="closeCalc" class="closeModal">close ×</div>
<div id="display">
<div id="calculation__value">Neville + FAC =</div>
<div id="output__value">😍</div>
</div>
<div id="keyboard">
<button class="operator" id="clear">C</button>
<button class="operator" id="CE">CE</button>
<button class="operator" id="%">%</button>
<button class="operator" id="/">÷</button>
<button class="number" id="7">7</button>
<button class="number" id="8">8</button>
<button class="number" id="9">9</button>
<button class="operator" id="*">×</button>
<button class="number" id="4">4</button>
<button class="number" id="5">5</button>
<button class="number" id="6">6</button>
<button class="operator" id="-">-</button>
<button class="number" id="1">1</button>
<button class="number" id="2">2</button>
<button class="number" id="3">3</button>
<button class="operator" id="+">+</button>
<button class="blank"></button>
<button class="number" id="0">0</button>
<button class="blank"></button>
<button class="operator" id="=">=</button>
</div>
</div>
</div>
</section>
<!-- ******** 'COURSE PREREQUISITES' SECTION OF WEBPAGE ******** -->
<section id="prereqs" class="sect">
<h2>Course Prerequisites+</h2>
<div id="prereqs__grid-container">
<!--Text content-->
<div id="prereqs__intro">
<p>You can click on the links below to see my freeCodeCamp and CodeWars profile pages, as well as Codecademy courses that I have used to solidify and extend my learning in areas including Git. I have also found HarvardX to be awesome in helping me to understand many concepts.<br>Together, these sites have given me the building blocks to get creative with code - literally! Please click the lego brick <img id="lego" src="images/noun_lego_1722097.svg"> to see an example!</p>
<ul>
<li>450+ points earned on <a href="https://www.freecodecamp.org/bytesizedit" target="_blank">freeCodeCamp</a></li>
<li>4 kyu reached & 700+ honour points earned on <a href="https://www.codewars.com/users/bytesizedit" target="_blank">Codewars</a></li>
<li>300+ badges & 2000+ points earned on <a href="https://www.codecademy.com/profiles/ByteSizedIT" target="_blank">Codecademy</a></li>
<li>HarvardX's CS50 <a href="https://www.edx.org/course/cs50s-introduction-to-computer-science" target="_blank">Intro to Computer Science</a> &
<a href="https://www.edx.org/course/cs50s-web-programming-with-python-and-javascript" target="_blank">Web Programming with Python and JavaScript</a></li>
</ul>
<p>Click <a href="https://github.com/ByteSizedIT/ByteSizedIT.github.io" target="_blank">here</a> for this site's GitHub repo.<br></p>
<p id="credit">*lego brick by <a href="https://thenounproject.com/search/?q=lego%20brick&i=847021" target="_blank">Lluisa Iborra</a> from the <a href="https://thenounproject.com" target="_blank">Noun Project</a></p>
</div>
<!--Linked logos-->
<figure id="prereqs__item1">
<a href="https://www.freecodecamp.org" target="_blank"><img class="prereqs__item" src="images/CodeCamp.png" alt="Code Camp logo"></a>
</figure>
<figure id="prereqs__item2">
<a href="https://www.freecodecamp.org" target="_blank"><img class="prereqs__item" src="images/CodeCampSquare.png" alt="Free Code Camp logo"></a>
</figure>
<figure id="prereqs__item3">
<a href="https://www.codewars.com" target="_blank"><img class="prereqs__item" src="images/CodeWarsSquare.jpg" alt="Code Wars logo"></a>
</figure>
<figure id="prereqs__item4">
<a href="https://www.codecademy.com" target="_blank"><img class="prereqs__item" src="images/Codecademy.png" alt="Codecademy logo"></a>
</figure>
<figure id="prereqs__item5">
<a href="https://www.codecademy.com" target="_blank"><img class="prereqs__item" src="images/CodecademySquare.png" alt="Codecademy logo"></a>
</figure>
<figure id="prereqs__item6">
<a href="https://www.edx.org/course/cs50s-introduction-to-computer-science" target="_blank"><img class="prereqs__item" src="images/cs50.png" alt="C S 50 logo"></a>
</figure>
<figure id="prereqs__item7">
<a href="https://github.com" target="_blank"><img class="prereqs__item" src="images/github-octocat.png" alt="Codecademy logo"></a>
</figure>
<figure id="prereqs__item8">
<a href="https://github.com" target="_blank"><img class="prereqs__item" src="images/GitSquare.jpg" alt="Git Hub logo"></a>
</figure>
<figure id="prereqs__item9">
<a href="https://www.foundersandcoders.com" target="_blank"><img class="prereqs__item" src="images/Founders.png" alt="Founders and Coders logo"></a>
</figure>
<figure id="prereqs__item10">
<a href="https://www.foundersandcoders.com" target="_blank"><img class="prereqs__item" src="images/FoundersSquare.png" alt="Founders and Coders logo"></a>
</figure>
<figure id="prereqs__item11">
<a href="https://www.codewars.com" target="_blank"><img class="prereqs__item" src="images/CodeWars.png" alt="Code Wars logo"></a>
</figure>
</div>
<!--Tetris modal and game-->
<div id="tModal" class="modal">
<div id="tetris-container">
<!--'Dashboard containg score, start button and mini grid for next 'tetrimino'-->
<div id="dash">
<span id="closeTet" class="closeModal">close ×</span>
<h3 id="score-display">Score: <span id="score">0</span></h3>
<h3 id="high-display">Highest: <span id="high-score">0</span></h3>
<button id="start-button">Start</button>
<div id="next-grid">
</div>
</div>
<!--Main grid for the Tetris game-->
<div id="grid">
<p id="tetHead">Welcome to Tetris!</p>
<p id="tetPara">Move left: left arrow on keyboard OR <span class="fauxBtn">◀</span> button on touch screen;<br>Move right: right arrow key OR <span class="fauxBtn">▶</span> button;<br>
Move down: down arrow key OR <span class="fauxBtn">▼</span> button;<br>Spin: up arrow key OR <span class="fauxBtn"></span>꩜</span> button.<br></p>
<p id="tetFoot">Click the Start button to begin. Good Luck!</p>
</div>
<!--Row at the base of the main grid-->
<div id="grid-base">
</div>
</div>
<!--Buttons to control the 'tetriminoes' in play-->
<button id="tetrisLeftArrow" class="tetris__arrows">◀</button>
<button id="tetrisRightArrow" class="tetris__arrows">▶</button>
<button id="tetrisDownArrow" class="tetris__arrows">▼</button>
<button id="tetrisSpin" class="tetris__arrows">꩜</button>
</div>
</section>
<!-- ******** 'ByteSizedIT' SECTION OF WEBPAGE ******** -->
<section id="bytesized" class="sect">
<h2>ByteSizedIT</h2>
<p>While addressing key learning objectives from the new computing curriculum, ByteSizedIT programmes give children the opportunity to apply problem solving, math and creative thinking skills, producing projects that allow their ideas and personalities to shine.</p>
<p><strong>Sample projects by year 6 children:</strong></p>
<div id="projects">
<button class="scratch"><a href="https://scratch.mit.edu/projects/265126033/" target="_blank">Rudolph the fat reindeer,<br>by Hania</a></button>
<button class="scratch"><a href="https://scratch.mit.edu/projects/251017243/" target="_blank">'The Red Terror',<br>by Matthew</a></button>
<button class="scratch"><a href="https://scratch.mit.edu/projects/222851239/" target="_blank">'What animals do when you're not around', by Alayna</a></button>
<button class="scratch"><a href="https://scratch.mit.edu/projects/334480503/" target="_blank">Messi V Ronaldo,<br>by Daniel</a></button>
</div>
<p><strong>Feedback for ByteSizedIT:</strong></p>
<div id="feedback">
<button class="review">Assistant Head</button>
<div class="content">
<p>“I have just had the chance to look at the children’s projects in detail I wanted to say how impressed I am with what they have produced ... Thanks for your passion and hard work."<br></p>
</div>
<button class="review">Parent</button>
<div class="content">
<p>“Computer coding club made a huge difference on my son’s thinking ... He is not just playing games on the computer any more but ‘making’ them himself... He is proudly talking about how he directs characters, backgrounds and music ... he is not just playing his own game quietly in his room but presenting it to us, even explaining details, so we can communicate more often.”<br></p>
</div>
<button class="review">Teaching Assistant</button>
<div class="content">
<p>“... it built confidence in some children whilst others excelled in their IT knowledge. The children’s ability just grew and grew and they really enjoyed making their own games ... Some children have gone home and shown siblings how to code.”<br></p>
</div>
<button class="review">Child</button>
<div class="content">
<p>“I love coding club because it’s fun. Now I know all the different techniques I can make my own games at home and code them to work however I want."</p>
</div>
</div>
</section>
<!--MY ROBOT PROTOTYPE' SECTION OF WEBPAGE-->
<section id="robot" class="sect">
<h2>My Robot Prototype<sup>TM</sup></h2>
<p>Years in the making and inspired by Toy Story, click <button class="buzz-butts">here</button> to see a sneak preview of My Robot Prototype<sup>TM</sup>. <span id="request">Please watch to the end for the credits 😊<span></p>
<div id="buzz">
<button id="buzz-icon" class="buzz-butts"><img src="images/noun_buzz lightyear_1975668.svg"></button>
<div id="credit">*buzz by <a href="https://thenounproject.com/term/buzz-lightyear/1975668/" target="_blank">Soy Galem </a> from the <a href="https://thenounproject.com" target="_blank">Noun Project</a></div>
</div>
<div id="robot__player">
<iframe src="https://player.vimeo.com/video/482994080" id="robot__vid" frameborder="0" allow="autoplay; fullscreen" allowfullscreen title="My Robot Prototype"></iframe>
</div>
<div id="finalWord">
<p>Ok, so some poetic licence. But like a computer, My Robot Prototype<sup>TM</sup> uses input, a processor, memory and output ... and just like working towards becoming a Full Stack Developer, it's been a huge learning curve for me. For each, the road to development has involved many a late night, some grey hairs, plenty of ups ... and a few downs! There's been lots of challenges, talking to myself, repetition (oh, the repetition!), team work, and the support of a fantastic community; It's been awesome. The potential is endless, the future exciting!</p>
</div>
<div id="countdown">
<p id = "preTimer"></p>
<p id = "timer"></p>
<p id = "postTimer">Click <a href="https://github.com/ByteSizedIT">here</a> to see what happened next!</p>
</div>
</section>
</main>
<footer>
<h5>© 2021 N.Keemer</h5>
</footer>
<script src="https://player.vimeo.com/api/player.js"></script>
<!-- Link to JavaScript file -->
<script src="home.js"></script>
<script src="whyCoding.js"></script>
<script src="whyFAC.js"></script>
<script src="whyMe.js"></script>
<script src="prereqs.js"></script>
<script src="byteSized.js"></script>
<script src="robot.js"></script>
</body>
</html>