-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
240 lines (185 loc) · 9.63 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
<!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">
<title>Kallum Tolkien</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a class="nav__link active" href="./index.html">About</a></li>
<li class="nav__item"><a class="nav__link" href="pages/projects.html">Projects</a></li>
<li class="nav__item"><a class="nav__link" href="pages/contact.html">Contact</a></li>
</ul>
</nav>
<div class="main">
<section id="headline">
<div class="container">
<div class="container__half">
<div class="myDetails">
<h1 id="name">Kallum Tolkien</h1>
<h3>Aspiring Web Developer and Cleantech Expert</h2>
</div>
</div>
<div class="container__half">
<figure>
<img src="images/headshot-b&w.jpg" alt="Photograph of Kallum Tolkien" class="responsive">
</figure>
</div>
</div>
</section>
<div class="divider">
<hr />
</div>
<section id="about-me">
<div class="container">
<div class="container__half flex__container">
<figure class="flex__figure">
<img src="images/dev_setup_bw_lowres.jpg" alt="Image of A Software Development Station" class="responsive">
</figure>
</div>
<div class="container__half">
<h3>About Me</h3>
<p>Hi, I'm a husband and father who's been on a long and winding road to reach the point where I'm here typing this HTML for you to read.</p>
<p>The journey started during my time working as a sustainability consultant shortly after completing my Masters. As I sat there, writing environmental impact reports for the great and the good of the engineering world, I began to have this niggling feeling that I could and should be doing more to solve the issues I was writing about.</p>
<p>Feeling at odds with the 'consume less' narrative put forward by many environmentalists, I was looking for something different. The goal of stopping resource exploitation is of course a necessity on a planet of finite resources, but for me it always sounded unrealistic to expect people to go backwards in their habits in order to acheive it. The work of organisations such as the Elen McArthur Foundation and writings from authors such as Nick Srnicek and Alex Williams inspired my growing belief that instead we should be building a thriving future where consumption is not limited, but made circular through leveraging advanced. Essentially, with the right systems in place, I believe humanity can have their cake and eat it.</p>
<p>Let's jump back to me sitting there writing reports that no-one would ever read and wondering how I could contribute to this bright technology driven future I had envisioned... Learning to Code seemed a logical first step!</p>
</div>
</div>
</section>
<div class="divider">
<hr />
</div>
<section id="qualities">
<div class="container">
<div class="container__half container__qualities">
<h3>Qualities</h3>
<ul>
<li>Positive Attitude</li>
<li>Supreme Communication Skills</li>
<li>Quick Learning Ability</li>
<li>Time and Task Management</li>
</ul>
</div>
<div class="container__half">
<figure>
<img src="images/Pylon_B&W.jpg" alt="image of a pylon" class="responsive">
</figure>
</div>
</div>
</section>
<div class="divider">
<hr />
</div>
<section id="hobbies-interests">
<div class="container">
<div class="container__half">
<figure class=interests-image>
<img src="images/wine_naturalred.jpg" alt="Image of a Bottle of Wine" class="responsive">
</figure>
</div>
<div class="container__half">
<h3>Hobbies & Interests</h3>
<ul>
<li>Dev - Code and all aspects of tech</li>
<li>Cleantech - The kind of solutions that produce results without need for consumers to change their habits</li>
<li>Fine Wine - Mainly natural, low-intervention styles</li>
<li>Football - Season-ticket holder at one of the greatest clubs in world football</li>
<li>Music - Events and recorded varieties, the former is something I've sorely missed during the pandemic</li>
<li>Food - Cooking up a storm or eating up a feast</li>
<li>Mind & Body - Reading, Meditation, Callisthenics, Yoga, Running</li>
</ul>
</div>
</div>
</section>
<div class="divider">
<hr />
</div>
</div>
<div class="main">
<h1>Projects</h1>
<h2>A selection of my Coding Projects</h2>
<section class="projects">
<table class="projects__table">
<tr>
<th>Title</th>
<th>Image</th>
<th>Description</th>
</tr>
<tr>
<td>Project 1</td>
<td><img src="../images/Project-placeholder.png" alt="image of a crane" width="300px"></td>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem id modi eaque! Ipsa dolore ad, officia culpa repellat, ea delectus voluptatum quas tempore error reiciendis, laborum asperiores reprehenderit odit quam?</td>
</tr>
<tr>
<td>Project 2</td>
<td><img src="../images/Project-placeholder.png" alt="image of a crane" width="300px"></td>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate sint adipisci quam quisquam magni totam ab possimus atque eveniet dolorum numquam incidunt est, ea, deserunt animi distinctio, neque porro magnam.</td>
</tr>
<tr>
<td>Project 3</td>
<td><img src="../images/Project-placeholder.png" alt="image of a crane" width="300px"></td>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem nihil excepturi tempore eveniet sint deserunt, cum voluptates, aliquam culpa facilis animi esse aut ratione alias eligendi a blanditiis. Deleniti, dolorum.</td>
</tr>
</table>
</section>
</div>
<div class="divider">
<br />
<hr />
</div>
<div class="form text">
<h1>Contact</h1>
<h2>Want to get in touch with me?</h2>
<p>I'm always interested to hear from people about opportunities of software development and cleantech. Please don't hesitate to get in touch with these or anything else you think I should know about using the form below:</p>
</div>
<form action="http://www.example.com/kallumt" method="post">
<fieldset>
<Legend>Your Details:</Legend>
<section id="contact__name">
<label for="name">Name: </label>
<input id="name" type="text" name="name" value="name">
</section>
<br>
<section id="contact__email">
<label for="email">Email: </label>
<input id="email" type="email" name="email" value="email">
</section>
</fieldset>
<fieldset>
<Legend>Your Message:</Legend>
<section id="contact__message">
<section class="radio">
<p>Reason for Getting in Touch?:</p>
<label for="work">Work:</label>
<input type="radio" name="reason" value="work"/>
<label for="collaboration">Collaboration:</label>
<input type="radio" name="reason" value="collaboration">
<label for="conversation">Conversation:</label>
<input type="radio" name="reason" value="conversation">
</section>
<br>
<section id="messages">
<label for="message">Message:</label>
<textarea id="message" placeholder="Your message here"></textarea>
</section>
<br>
<section is="submit">
<input type="submit" value="Send Message">
</section>
</section>
</fieldset>
</form>
<div class="divider">
<hr />
</div>
<footer class="footer">
<p>2021</p>
<p>Created by Kallum Tolkien</p>
</footer>
</div>
</body>
</html>