-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
489 lines (445 loc) · 22.3 KB
/
index.html
File metadata and controls
489 lines (445 loc) · 22.3 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
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio of FicticiousDev (Connor Patrick) - Game developer specializing in 2D indie games using Godot Engine. Explore my completed games, tools, and projects.">
<meta name="keywords" content="game development, portfolio, Godot, indie games, 2D platformer, tower defense">
<meta name="author" content="FicticiousDev">
<title>Ficticious - Game Developer Portfolio</title>
<!-- SEO & Social Meta Tags -->
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://ficticiousdev.github.io/">
<!-- Open Graph -->
<meta property="og:site_name" content="FicticiousDev">
<meta property="og:title" content="FicticiousDev - Game Developer Portfolio">
<meta property="og:description" content="Portfolio of FicticiousDev (Connor Patrick) - Game developer specializing in 2D indie games using Godot Engine.">
<meta property="og:image" content="https://ficticiousdev.github.io/images/therebespikes-screenshot.png">
<meta property="og:url" content="https://ficticiousdev.github.io/">
<meta property="og:type" content="website">
<!-- Schema.org JSON-LD -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "FicticiousDev",
"url": "https://ficticiousdev.github.io",
"jobTitle": "Game Developer",
"knowsAbout": ["Game Development", "Godot", "C#", "C++", "JavaScript", "TypeScript"],
"sameAs": [
"https://ficticious.itch.io",
"https://github.com/FicticiousDev"
]
}
</script>
<link href="style.css" rel="stylesheet" />
<link rel="icon" href="favicon.ico" />
</head>
<body class="preload">
<!-- Header -->
<header class="header">
<div class="header-content">
<div class="logo">FicticiousDev</div>
<div class="header-actions">
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
<span>Theme</span>
</button>
<button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle menu">☰</button>
</div>
</div>
</header>
<!-- Navigation -->
<nav class="nav" id="nav">
<div class="nav-section">
<div class="nav-title">Navigation</div>
<div class="nav-links">
<a href="#about" class="nav-link">About</a>
</div>
</div>
<div class="nav-section">
<div class="nav-title">Games</div>
<div class="nav-links">
<a href="#nightwave" class="nav-link">Night Wave TD</a>
<a href="#therebespikes" class="nav-link">There Be Spikes</a>
<a href="#dice" class="nav-link">Dice Rogue-lite</a>
<a href="#hoverracer" class="nav-link">Hover Racer</a>
<a href="#soulsvania" class="nav-link">Soulsvania</a>
</div>
</div>
<div class="nav-section">
<div class="nav-title">Game Jams</div>
<div class="nav-links">
<a href="#lastlight" class="nav-link">Last Light</a>
</div>
</div>
<div class="nav-section">
<div class="nav-title">Tools</div>
<div class="nav-links">
<a href="#listbuilder8e" class="nav-link">40K List Builder 8th</a>
<a href="#codepen" class="nav-link">CodePen</a>
</div>
</div>
<div class="nav-section">
<div class="nav-title">Archive</div>
<div class="nav-links">
<a href="#shelved" class="nav-link">Shelved Projects</a>
</div>
</div>
<div class="nav-section">
<div class="nav-title">Resume</div>
<div class="nav-links">
<a href="#cv" class="nav-link">CV / Resume</a>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="main-content">
<!-- Hero Section -->
<section class="hero content-section">
<div class="anchor" id="about"></div>
<div class="hero-content">
<h1>Game Developer & Creative Technologist</h1>
<p class="hero-subtitle">
Passionate about creating engaging game experiences and innovative tools.
</p>
<p class="hero-description">
This portfolio showcases my journey in game development, primarily using the Godot engine.
My focus is on creating polished, enjoyable experiences across various genres - from precision
platformers to tower defense games. I believe in learning by doing, which is why you'll find
a mix of completed projects, ongoing work, and experimental prototypes here.
</p>
<p class="hero-description">
After experimenting with building game engines from scratch in JavaScript, TypeScript, C#, and C++,
I realized that my true passion lies in designing and creating games rather than engines. This led me to Godot,
where I can focus on what matters most: crafting memorable gameplay experiences.
</p>
<div style="text-align: right; margin-top: 20px;">
<a href="#cv" class="project-link" style="display: inline-block;">View CV / Resume →</a>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- Games Section -->
<section class="content-section">
<div class="category-header">
<span class="category-icon">🎮</span>
<h2>Games</h2>
</div>
<div class="projects-grid">
<!-- Night Wave TD -->
<div class="project-card">
<div class="anchor" id="nightwave"></div>
<div class="project-header">
<h3 class="project-title">Night Wave Tower Defence</h3>
<span class="project-status status-complete">Complete</span>
</div>
<p class="project-description">
A tower defence game inspired by Kingdom Rush, with a unique twist: monsters are obscured by
darkness, requiring players to build illumination towers before defensive towers can target enemies.
Strategic light placement is key to victory.
</p>
<img src="images/nightwave-screenshot.png" alt="Night Wave Tower Defence gameplay" class="project-image">
<div class="project-embed">
<iframe src="https://itch.io/embed/3023851?linkback=true&border_width=0&bg_color=0a0a0f&fg_color=e8e8f0&link_color=00d4ff&border_color=363636" width="100%" height="167"></iframe>
</div>
</div>
<!-- There Be Spikes -->
<div class="project-card">
<div class="anchor" id="therebespikes"></div>
<div class="project-header">
<h3 class="project-title">There Be Spikes</h3>
<span class="project-status status-complete">Complete</span>
</div>
<p class="project-description">
A 2D precision platformer focused on platforming puzzles and speedrunning. This project served
as a testing ground for refining movement mechanics intended for my upcoming soulsvania project.
I created nearly all assets myself, including art and animations (with the only exceptions being the
fonts and icons for all the button prompts).
</p>
<img src="images/therebespikes-screenshot.png" alt="There Be Spikes gameplay" class="project-image">
<div class="project-embed">
<iframe src="https://itch.io/embed/4213428?linkback=true&border_width=0&bg_color=0a0a0f&fg_color=e8e8f0&link_color=00d4ff&border_color=363636" width="100%" height="167"></iframe>
</div>
</div>
<!-- Unamed Dice Rogue-lite -->
<div class="project-card">
<div class="anchor" id="dice"></div>
<div class="project-header">
<h3 class="project-title">Unnamed Dice Rogue-lite</h3>
<span class="project-status status-progress">Ongoing</span>
</div>
<p class="project-description">
A mix of both 2D and 3D elements, this project is currently in the design phase.
The player plays on a 2D hexagonal grid controlling a character with simplified Warhammer-model-esq
stats. Each room is a new encounter and progress routes are procedural, similar to Hades. Along the
way the player will collect dice which serve as the primary mechanic. The dice are the 3D element -
the player has a collection of them that is grown and refined as the game progresses. Dice are assigned
at the start of each turn to movement, defense, or attack. Then rolled to determine the outcome.
</p>
<img src="images/dicepoc.jpg" alt="Dice simulation POC" class="project-image">
</div>
<!-- Unamed Hover Racer -->
<div class="project-card">
<div class="anchor" id="hoverracer"></div>
<div class="project-header">
<h3 class="project-title">Unnamed Hover Racer</h3>
<span class="project-status status-progress">Ongoing</span>
</div>
<p class="project-description">
A 3D racing game, this project is still in the proof-of-concept phase.
Originally inspired by a curiosity about the complexity of the physics involved in a Star Wars-styled
pod-racer. These physics were implemented and found to not feel all that great for a game due to the drag
caused by the pod's weight. So I pivoted the idea into a more traditional hover-racer styled game with
less realistic physics.
The idea now being focused on futuristic chariot racing where the engines are more traditionally attached
to the chariot and the chariot itself not really having much impact on the physics.
Ultimately this is intended to be a single-player focused game with a narrative campaign. Casual
multiplayer is also planned as an alternative mode.
</p>
<img src="images/racerpoc.jpg" alt="Chariot physics POC" class="project-image">
</div>
<!-- Soulsvania -->
<div class="project-card">
<div class="anchor" id="soulsvania"></div>
<div class="project-header">
<h3 class="project-title">Unnamed Soulsvania Platformer</h3>
<span class="project-status status-hold">Design Phase</span>
</div>
<p class="project-description">
A 2D souls-like metroidvania set in a dark fantasy world, inspired by Hollow Knight and
Salt & Sanctuary. This ambitious project combines challenging combat, exploration, and
atmospheric storytelling. Currently on hold while I complete other projects and refine
the core mechanics.
</p>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- Game Jams Section -->
<section class="content-section">
<div class="category-header">
<span class="category-icon">⚡</span>
<h2>Game Jams</h2>
</div>
<div class="projects-grid">
<!-- Last Light -->
<div class="project-card">
<div class="anchor" id="lastlight"></div>
<div class="project-header">
<h3 class="project-title">Last Light</h3>
<span class="project-status status-complete">Complete</span>
</div>
<p class="project-description">
My first game jam entry! A 3D first-person horror game where players must escape a maze
inhabited by an angry ghost. Created for the Hawktober Horrors Game Jam in 2025, this
project pushed me to work in 3D and explore atmospheric horror mechanics under tight time constraints.
</p>
<img src="images/lastlight-screenshot.jpg" alt="Last Light gameplay" class="project-image">
<div class="project-embed">
<iframe src="https://itch.io/embed/3907764?border_width=0&bg_color=0a0a0f&fg_color=e8e8f0&link_color=00d4ff&border_color=363636" width="100%" height="167"></iframe>
</div>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- Tools Section -->
<section class="content-section">
<div class="category-header">
<span class="category-icon">🛠️</span>
<h2>Tools & Experiments</h2>
</div>
<div class="projects-grid">
<!-- 40K List Builder -->
<div class="project-card">
<div class="anchor" id="listbuilder"></div>
<div class="project-header">
<h3 class="project-title">Warhammer 40K 8th Edition List Builder</h3>
<span class="project-status status-hold">Not Active</span>
</div>
<p class="project-description">
A web-based army list builder for Warhammer 40K 8th Edition. Born from frustration with
existing tools, this application streamlines the army building process. Currently supports
Craftworlds, Harlequins, and Ynnari factions. Not active while I'm not actively playing 40K.
<br/><br/>
I intend to replace this with a more feature-rich and up-to-date version, but I'm not sure
when I'll have the time to do so.
</p>
<div>
<img class="scalingImage" src="images/lb-screen1.jpg" alt="40K List Builder Screenshot" />
</div>
<a href="https://ficticiousdev.github.io/40kListBuilder/" class="project-link" target="_blank" rel="noopener">
Try it on GitHub Pages →
</a>
</div>
<!-- CodePen -->
<div class="project-card">
<div class="anchor" id="codepen"></div>
<div class="project-header">
<h3 class="project-title">CodePen Experiments</h3>
<span class="project-status status-hold">Not Active</span>
</div>
<p class="project-description">
A collection of physics simulations and 2D game mechanics experiments. These pens explore
collision detection, physics resolution, and various game programming challenges. Updated
whenever I'm experimenting with new concepts or techniques within the JavaScript domain.
</p>
<p data-height="535" data-theme-id="dark" data-slug-hash="JeGWJm" data-default-tab="js,result"
data-user="cp-pens" data-pen-title="2D Physics Module" class="codepen">
See the Pen <a href="https://codepen.io/cp-pens/pen/JeGWJm/">2D Physics Module</a> by Connor
(<a href="https://codepen.io/cp-pens">cp-pens</a>) on <a href="https://codepen.io">CodePen</a>.
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<a href="https://codepen.io/cp-pens/" class="project-link" target="_blank" rel="noopener">
View CodePen Profile →
</a>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- Shelved Projects Section -->
<section class="content-section">
<div class="anchor" id="shelved"></div>
<div class="category-header">
<span class="category-icon">📦</span>
<h2>Shelved Projects</h2>
</div>
<p style="margin-bottom: var(--spacing-lg);">
Every developer has a graveyard of projects that taught valuable lessons. Here are some of mine:
</p>
<div class="projects-grid">
<!-- 2D Game Engine -->
<div class="project-card">
<div class="project-header">
<h3 class="project-title">2D Game Engine (JavaScript/TypeScript/WebGL2)</h3>
<span class="project-status status-shelved">Shelved</span>
</div>
<p class="project-description">
Over 3 different variations of this project I built complete ECS architectures,
asset management systems, audio managers, and scene managers from scratch.
Started with JavaScript, then migrated to TypeScript. Began developing a custom
WebGL2 renderer but realized I was enjoying engine development enough to warrant trying
it in a more game-appropriate language - C++.
</p>
</div>
<!-- 2D Game Engine -->
<div class="project-card">
<div class="project-header">
<h3 class="project-title">2D Game Engine (C++/OpenGL)</h3>
<span class="project-status status-shelved">Shelved</span>
</div>
<p class="project-description">
Following The Cherno's excellent YouTube series, I built a 2D game engine using C++ and OpenGL.
While incredibly educational, the scope became too large. I realized that if I wanted to actually
create games before retiring, I should use existing engines rather than building my own from scratch.
</p>
</div>
<!-- 3D Arena Shooter -->
<div class="project-card">
<div class="project-header">
<h3 class="project-title">3D Parkour Arena Shooter</h3>
<span class="project-status status-shelved">Shelved</span>
</div>
<p class="project-description">
A parkour-based multiplayer shooter concept developed in Godot. Had some interesting movement
mechanics, but other projects took priority. May revisit the core movement system in future projects.
</p>
</div>
</div>
</section>
<div class="section-divider"></div>
<!-- CV Section -->
<section class="content-section">
<div class="anchor" id="cv"></div>
<div class="category-header">
<span class="category-icon">📄</span>
<h2>Curriculum Vitae</h2>
</div>
<div class="projects-grid">
<!-- Experience -->
<div class="project-card">
<div class="project-header">
<h3 class="project-title">Professional Experience</h3>
</div>
<div style="margin-bottom: 20px;">
<h4 style="margin-bottom: 5px; color: var(--accent-primary);">Senior Software Developer - Game Development</h4>
<p style="margin-bottom: 5px; font-weight: 600;">Stormcraft Studios • 2024 - Present</p>
<ul style="padding-left: 20px; color: var(--text-secondary);">
<li>Front end web-game development with JavaScript</li>
<li>Extended and maintained internal engine and tools.</li>
</ul>
</div>
<div style="margin-bottom: 20px;">
<h4 style="margin-bottom: 5px; color: var(--accent-primary);">Software Developer - Game Development</h4>
<p style="margin-bottom: 5px; font-weight: 600;">Stormcraft Studios • 2017 - 2024</p>
<ul style="padding-left: 20px; color: var(--text-secondary);">
<li>Front end web-game development with JavaScript</li>
<li>Extended and maintained internal engine and tools.</li>
<li>Explored back-end service development with C# and .NET</li>
</ul>
</div>
<div>
<h4 style="margin-bottom: 5px; color: var(--accent-primary);">Software Developer - Game Development</h4>
<p style="margin-bottom: 5px; font-weight: 600;">Derivco • 2015 - 2016</p>
<ul style="padding-left: 20px; color: var(--text-secondary);">
<li>Front end web-game development with Flash and ActionScript 3.0.</li>
<li>Extended and maintained internal engine and tools.</li>
</ul>
</div>
</div>
<!-- Skills -->
<div class="project-card">
<div class="project-header">
<h3 class="project-title">Technical Skills / Experience</h3>
</div>
<h4 style="margin-bottom: 10px; color: var(--accent-primary);">Game Engines & Frameworks</h4>
<div style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;">
<span class="project-status status-progress">Godot</span>
<span class="project-status status-progress">Unity</span>
<span class="project-status status-progress">OpenGL</span>
</div>
<h4 style="margin-bottom: 10px; color: var(--accent-primary);">Languages</h4>
<div style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;">
<span class="project-status status-progress">C#</span>
<span class="project-status status-progress">GDScript</span>
<span class="project-status status-progress">C++</span>
<span class="project-status status-progress">JavaScript / TS</span>
<span class="project-status status-progress">Python</span>
<span class="project-status status-progress">ActionScript 3.0</span>
<span class="project-status status-progress">Java</span>
</div>
<h4 style="margin-bottom: 10px; color: var(--accent-primary);">Tools</h4>
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<span class="project-status status-progress">Git</span>
<span class="project-status status-progress">Visual Studio Code</span>
<span class="project-status status-progress">Antigravity</span>
<span class="project-status status-progress">Visual Studio</span>
<span class="project-status status-progress">Webstorm</span>
<span class="project-status status-progress">Krita</span>
<span class="project-status status-progress">Audacity</span>
<span class="project-status status-progress">LMMS</span>
</div>
</div>
<!-- Education -->
<div class="project-card">
<div class="project-header">
<h3 class="project-title">Education</h3>
</div>
<div>
<h4 style="margin-bottom: 5px; color: var(--accent-primary);">BSc Computer Science</h4>
<p style="margin-bottom: 5px; font-weight: 600;">University of Cape Town • 2011 - 2014</p>
<p class="project-description">
Graduated with Honors. Co-majored in Computer Games Design.
<br/>
<strong>Relevant Coursework:</strong> Data Structures, Algorithms, Game Design Principles and Techniques.
</p>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 40px;">
<a href="#" class="project-link" style="display: inline-block;">Download Full Resume (PDF) (Comming Soon)</a>
</div>
</section>
</main>
<script src="theme-toggle.js"></script>
</body>
</html>