-
Notifications
You must be signed in to change notification settings - Fork 0
/
software-engineer.html
402 lines (384 loc) · 13.7 KB
/
software-engineer.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
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
394
395
396
397
398
399
400
401
402
<!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" />
<meta
name="description"
content="Tim Goalen software engineer and tv composer website"
/>
<meta
name="keywords"
content="tim goalen, software engineer, tv composer, london, uk"
/>
<link rel="stylesheet" href="assets/css/style.css" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/images/favicons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/images/favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="assets/images/favicons/favicon-16x16.png"
/>
<title>Tim Goalen - Software Engineer & TV Composer</title>
</head>
<body>
<header>
<!-- Title and navigation -->
<nav class="navbar">
<div>
<a href="index.html">
<h1 id="logo">TIM GOALEN</h1>
</a>
</div>
<!-- Hamburger Icon -->
<button aria-label="toggle menu" id="nav-btn">
<i class="fa-solid fa-bars"></i>
</button>
<!-- Nav links -->
<div class="navbar-links">
<ul>
<li>
<a href="software-engineer.html" class="link" id="active-link"
>Software Engineer</a
>
</li>
<li>
<a href="tv-composer.html" class="link">TV Composer</a>
</li>
<li>
<a href="contact.html" class="link">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<main id="software-engineer-main">
<!-- About section-->
<section id="software-eng-about-section">
<div class="h2-container">
<h2 id="software-engineer-about">ABOUT</h2>
</div>
<p class="about-text opening-paragraphs">
Hi! I’m a Full-Stack Developer (React • JavaScript • Python • Django)
with a front-end focus and a love of great UX and design.
</p>
<br/>
<p class="about-text">
I have a background in the TV and Music industries as a TV Composer
(Netflix/BBC) and Recording Engineer (Mark Ronson/Ellie Goulding).
</p>
<br/>
</section>
<!-- Projects section -->
<section id="software-eng-projects-section">
<div class="h2-container">
<h2>PROJECTS</h2>
</div>
<div class="projects-all-container">
<div class="project-container">
<div>
<img
src="assets/images/transcriber-mobile-screenshot.jpg"
alt="Transcriber screenshot"
/>
</div>
<div class="project-info">
<h3>Transcriber</h3>
<p class="description-text">
A note-taking app featuring speech recognition and AI-powered
auto-formatting.
</p>
<div class="card-spacer"></div>
<div class="skills-container">
<span>React</span><span>JavaScript</span><span>Django</span
><span>Python</span> <span>REST API</span><span>OpenAI API</span
><span>PostgreSQL</span><span>Speech Recognition</span>
</div>
<div class="card-spacer"></div>
<div class="project-links-container">
<a
href="https://transcriber-frontend-9c6d6be53f14.herokuapp.com/"
target="_blank"
rel="noopener"
class="project-links"
>Live Site</a
>
<a
href="https://github.com/timgoalen/transcriber-frontend"
target="_blank"
rel="noopener"
class="project-links"
>Code</a
>
</div>
<div class="card-spacer"></div>
</div>
</div>
<div class="project-container">
<div>
<img
src="assets/images/magical-places-london-screenshot.jpg"
alt="Magical Places - London screenshot"
/>
</div>
<div class="project-info">
<h3>Magical Places - London</h3>
<p class="description-text">
A map-based blog site with CRUD functionality.
</p>
<div class="card-spacer"></div>
<div class="skills-container">
<span>JavaScript</span><span>Django</span><span>Python</span
><span>PostgreSQL</span><span>Google Maps API</span
><span>Heroku</span>
</div>
<div class="card-spacer"></div>
<div class="project-links-container">
<a
href="https://magical-places-london-7d2df0d61638.herokuapp.com/"
target="_blank"
rel="noopener"
class="project-links"
>Live Site</a
>
<a
href="https://github.com/timgoalen/magical-places-london"
target="_blank"
rel="noopener"
class="project-links"
>Code</a
>
</div>
<div class="card-spacer"></div>
</div>
</div>
<div class="project-container">
<div>
<img
src="assets/images/identify-this-chord-screenshot.jpg"
alt="Identify This Chord screenshot"
/>
</div>
<div class="project-info">
<h3>Identify This Chord</h3>
<p class="description-text">A Music Quiz Game</p>
<div class="card-spacer"></div>
<div class="skills-container">
<span>JavaScript</span><span>Web Audio API</span>
</div>
<div class="card-spacer"></div>
<div class="project-links-container">
<a
href="https://timgoalen.github.io/identify-this-chord/"
target="_blank"
rel="noopener"
class="project-links"
>Live Site</a
>
<a
href="https://github.com/timgoalen/identify-this-chord"
target="_blank"
rel="noopener"
class="project-links"
>Code</a
>
</div>
<div class="card-spacer"></div>
</div>
</div>
<div class="project-container">
<div>
<img
src="assets/images/yaras-drawing-mockup.jpg"
alt="Yara's Drawing App screenshot"
/>
</div>
<div class="project-info">
<h3>Yara's Drawing App</h3>
<p class="description-text">
JavaScript drawing app using HTML canvas. For mouse and
touchscreens.
</p>
<div class="card-spacer"></div>
<div class="skills-container">
<span>JavaScript</span><span>HTML Canvas</span>
</div>
<div class="card-spacer"></div>
<div class="project-links-container">
<a
href="https://timgoalen.github.io/yaras-drawing-app/"
target="_blank"
rel="noopener"
class="project-links"
>Live Site</a
>
<a
href="https://github.com/timgoalen/yaras-drawing-app"
target="_blank"
rel="noopener"
class="project-links"
>Code</a
>
</div>
<div class="card-spacer"></div>
</div>
</div>
<div class="project-container">
<div>
<img
src="assets/images/command-line-coffee-screenshot.jpg"
alt="Command Line Coffee screenshot"
/>
</div>
<div class="project-info">
<h3>Command Line Coffee</h3>
<p class="description-text">
Coffee ordering app with a command-line interface
</p>
<div class="card-spacer"></div>
<div class="skills-container">
<span>Python</span><span>gspread API</span
><span>Google Cloud Platform</span><span>Heroku</span>
</div>
<div class="card-spacer"></div>
<div class="project-links-container">
<a
href="https://command-line-coffee-c81dfcb828b5.herokuapp.com/"
target="_blank"
rel="noopener"
class="project-links"
>Desktop</a
>
<a
href="https://github.com/timgoalen/command-line-coffee"
target="_blank"
rel="noopener"
class="project-links"
>Code</a
>
</div>
<div class="card-spacer"></div>
</div>
</div>
</div>
</section>
<!-- Links section-->
<section id="software-eng-links-section">
<div class="h2-container">
<h2>GET IN TOUCH</h2>
</div>
<div class="contact-page-link-container">
<a href="contact.html" id="contact-link">Send me a message</a>
</div>
<div class="software-engineer-links">
<a
href="https://www.linkedin.com/in/tim-goalen"
aria-label="LinkedIn"
class="software-engineer-link-items"
target="_blank"
rel="noopener"
><i class="fa-brands fa-linkedin"></i
></a>
<a
href="https://github.com/timgoalen"
aria-label="GitHub"
class="software-engineer-link-items"
target="_blank"
rel="noopener"
><i class="fa-brands fa-github"></i
></a>
</div>
</section>
<!-- SVG Backgrounds -->
<div id="svg-background">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern
id="dots"
x="0"
y="0"
width="8"
height="8"
patternUnits="userSpaceOnUse"
>
<circle cx="5" cy="5" r="1" fill="rgba(16, 118, 177, 0.21)" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#dots)" />
</svg>
</div>
<div id="svg-top-mask">
<svg
viewBox="0 0 320 58"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M320 67.8024L309.333 71.5692C298.667 75.336 277.333 82.8696 256 73.4526C234.667 64.0356 213.333 37.668 192 35.7846C170.667 33.9012 149.333 56.502 128 58.3854C106.667 60.2688 85.3333 41.4348 64 33.9012C42.6667 26.3676 21.3333 30.1344 10.6667 32.0178L-3.43728e-05 33.9012L-3.73366e-05 2.79753e-05L10.6666 2.70428e-05C21.3333 2.61103e-05 42.6666 2.42453e-05 64 2.23802e-05C85.3333 2.05152e-05 106.667 1.86502e-05 128 1.67852e-05C149.333 1.49202e-05 170.667 1.30551e-05 192 1.11901e-05C213.333 9.3251e-06 234.667 7.46008e-06 256 5.59506e-06C277.333 3.73004e-06 298.667 1.86502e-06 309.333 9.3251e-07L320 0L320 67.8024Z"
fill="url(#paint0_linear_7931_575)"
/>
<defs>
<linearGradient
id="paint0_linear_7931_575"
x1="160"
y1="78"
x2="160"
y2="1.39876e-05"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#FAF9F6" stop-opacity="0" />
<stop offset="1" stop-color="#FAF9F6" />
</linearGradient>
</defs>
</svg>
</div>
<div id="svg-bottom-mask">
<svg
viewBox="0 0 320 78"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 10.1976L10.6667 6.43079C21.3333 2.66398 42.6667 -4.86962 64 4.54739C85.3333 13.9644 106.667 40.332 128 42.2154C149.333 44.0988 170.667 21.498 192 19.6146C213.333 17.7312 234.667 36.5652 256 44.0988C277.333 51.6324 298.667 47.8656 309.333 45.9822L320 44.0988V78H309.333C298.667 78 277.333 78 256 78C234.667 78 213.333 78 192 78C170.667 78 149.333 78 128 78C106.667 78 85.3333 78 64 78C42.6667 78 21.3333 78 10.6667 78H0V10.1976Z"
fill="url(#paint0_linear_7931_574)"
/>
<defs>
<linearGradient
id="paint0_linear_7931_574"
x1="160"
y1="0"
x2="160"
y2="78"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#FAF9F6" stop-opacity="0" />
<stop offset="1" stop-color="#FAF9F6" />
</linearGradient>
</defs>
</svg>
</div>
</main>
<!-- font awesome script -->
<script
src="https://kit.fontawesome.com/1898f2e833.js"
crossorigin="anonymous"
></script>
<!-- link to external javaScript file -->
<script src="assets/js/script.js"></script>
</body>
</html>