-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
569 lines (498 loc) · 39.5 KB
/
about.html
File metadata and controls
569 lines (498 loc) · 39.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
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
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About | Devcrow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="About Christoforos Papachristoforou â game developer, Unity engineer, game designer, and gamer.">
<link rel="icon" href="assets/obsidian_moon.png" type="image/png">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/about.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap">
<link rel="preload" as="image" href="assets/08yome-removebg-preview.png">
</head>
<body class="portfolio-page">
<!-- Navigation Bar (Identical to Home Page) -->
<nav>
<ul>
<li><a href="portfolio.html">Home</a></li>
<li><a href="about.html" class="active">About</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="skills.html">Skills</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- About Section -->
<section id="about" class="about-section reveal">
<div class="flex-layout-row">
<div class="side-tabs">
<ul>
<li class="active" onclick="showAboutContent(0)">Who am I?</li>
<li onclick="showAboutContent(1)">Career (so far)</li>
<li onclick="showAboutContent(2)">Game Development</li>
<li onclick="showAboutContent(3)">Game Design</li>
<li onclick="showAboutContent(4)">Unity Core Engineer</li>
<li onclick="showAboutContent(5)">Gamer</li>
<!--<li onclick="showAboutContent(6)">Ethics</li> -->
</ul>
</div>
<div class="glass-panel about-container" style="flex: 1;">
<div class="about-content">
<div class="content active" id="content-whoami">
<h3 class="mobile-section-header">Who am I?</h3>
<div class="whoami-layout">
<div class="whoami-text">
<p><strong>Hi, I'm Christoforos.</strong></p>
<p>
I'm a <strong>game developer</strong>, but you'll figure that out as you browse this
site.
What matters more to me is the <em>mindset</em> behind it: I enjoy building
things
with
<strong>meaning, originality, and purpose</strong>. Things that feel good to use and
show
care, heart, and thought. I'm not in this for fame or quick wins. I'm here because I
<strong>love the process</strong>.
</p>
<p>
I’m also a <strong>dad of twin girls</strong>, which means life is full, loud, and
beautiful.
I find peace in the forest, joy in music, and a kind of calm focus in
<em>anime</em>,
<em>video games</em>, and <em>animation</em>. I love a good idea, a better
conversation,
and people who genuinely try to make things better.
</p>
<p>
I'm not money-driven, but I believe in <strong>fair pay for good work</strong>.
I see <strong>AI</strong> as a tool, helpful and powerful, but never a replacement
for
<strong>originality</strong> or <strong>respect</strong> for other people's effort.
I'm not into shortcuts. I like figuring things out.
</p>
<p>
I care about <strong>ethics</strong>. I care about <strong>people</strong>.
And I care about doing things the <em>right way</em>, even when it takes more time,
energy, or effort.
</p>
<blockquote>
<p><em>"If you're not part of the solution, you're probably part of the
problem."</em>
</p>
</blockquote>
</div>
</div>
<div class="about-image-row">
<img decoding="async" src="assets/IMG_1256.jpg" alt="Christoforos Papachristoforou" class="about-image">
<img decoding="async" src="assets/IMG_0837.jpg" alt="Christoforos Papachristoforou" class="about-image">
<img decoding="async" src="assets/IMG_1412.jpg" alt="Christoforos Papachristoforou" class="about-image">
</div>
</div>
<div class="content" id="content-career">
<h3 class="mobile-section-header">Career (so far)</h3>
<div class="whoami-layout">
<div class="whoami-text">
<p><strong>Before I stepped into tech</strong>, I had a few jobs that shaped my work
ethic
and taught me the value of showing up and doing your best. Things really took off in
<strong>2014</strong> when I earned my <strong>Cisco certification</strong> and
joined
<strong>Printec</strong> as an intern, working at the <strong>Athens International
Airport IT helpdesk</strong>. Not long after, I became part of a dedicated team
working exclusively with the <strong>Common Use Terminal Equipment (CUTE)</strong>
systems inside the airport. It was a serious operation, and I learned fast. I stayed
in
that role until I left for my mandatory <strong>military service</strong> in
<strong>November 2016</strong>.
</p>
<p>In <strong>2017</strong>, I returned to the airport with <strong>Netsquare</strong>,
taking on the role of <strong>Site Administrator</strong> for <strong>SITA</strong>,
a
company delivering essential communication and system infrastructure to airports and
airlines across the globe. I was later promoted to <strong>Team Leader</strong> and
<strong>Trainer</strong>.
</p>
<p>That was also when I first started exploring <strong>game development</strong> in my
own
time. It clicked immediately, and I knew this was the direction I wanted to grow in.
Eventually, I shifted my focus to <strong>Unity</strong>. I spent thousands of hours
learning the engine, building things from scratch, breaking them, fixing them, and
repeating that cycle again and again.</p>
<p>In <strong>2021</strong>, I joined <strong>Renderapp (UK)</strong> as a <strong>Unity
Developer</strong>. Renderapp's product was one of the most high-end, web-based
automotive configurators out there, built for brands like <strong>Ford</strong>,
<strong>Subaru</strong>, <strong>Hyundai</strong>, <strong>Genesis</strong>, and
<strong>Caterham</strong>. It involved tools like <strong>Unity</strong>,
<strong>3DS
Max</strong>, and <strong>Node.js</strong>, and the standards were sky high.<br>
Working at that level pushed me in all the right ways. I had to level up fast, both
technically and professionally. My understanding of <strong>Unity</strong>,
<strong>real-time 3D rendering</strong>, and <strong>C#</strong> grew a lot. I also
played a big part in keeping the team moving, leading during heavy production
phases,
solving tough problems, and developing custom tools to streamline our workflow.
</p>
<p>If you're curious about the more technical side, you can check out my resume <a
href="https://d3vcrow.github.io/resume.html"
target="_blank"><strong>here</strong></a>.</p>
<p>In <strong>December 2024</strong>, just after becoming a father, Renderapp shut down.
I
used that time to slow down, take care of my twin baby daughters, and realign a few
things in my life.</p>
<p>But I didn’t stop. I kept building, kept learning, and went deeper into
<strong>Python</strong>, especially in <strong>automation</strong> and <strong>AI
tools</strong>. I also built this portfolio site from scratch, piece by piece.
</p>
<p>Now, I'm ready to bring everything I've learned, my <strong>skills</strong>,
<strong>mindset</strong>, and <strong>experience</strong>, into the world of
<strong>video games</strong> or <strong>Unity-based projects</strong>.
</p>
</div>
</div>
</div>
<div class="content" id="content-gamedev">
<h3 class="mobile-section-header">Game Development</h3>
<div class="whoami-layout">
<div class="whoami-text">
<p>When I was a kid playing <strong>Warcraft 3</strong>, I discovered its editor and
built a
path through the forest for my orcs to escape an Alliance attack. That moment stuck
with
me. It was the first time I realized I could create something digital that others
could
experience. Back then in early 2000s Greece, saying you wanted to make games felt
unrealistic. I never said it out loud, but it quietly shaped every step I took.
Choosing
<strong>computer science</strong> wasn't just because I liked tech and coding. Deep
down, I knew I was chasing games, even if the path wasn’t clear yet.
</p>
<p>In <strong>2017</strong>, I saw an ad for a cheap online course on making video
games. I
didn’t hesitate. I just knew I had to go for it. The tool was <strong>Game
Salad</strong>, a simple visual scripting engine, but I was hooked. A few months
and
2D projects later, someone with professional experience in the video game industry,
told
me, <em>"If you’re serious, switch to Unity."</em> So I did. And I’ve never looked
back.
</p>
<p>By <strong>2018</strong>, I was watching every Unity tutorial I could find and
creating
small games using free assets and wild ideas. They weren’t always polished or
finished,
but they were mine and I was proud of them.</p>
<p>In <strong>2019</strong>, I dedicated myself to a mobile quiz game called
<strong>Greater
Game</strong>, my first attempt at a commercial release. But the promised
funding
fell through. I was hurt and disappointed, and even though I could have published it
on
my own, I chose to leave it behind.
</p>
<p>In <strong>2020</strong>, my good friend <strong>Dimitris</strong> (now also my best
man)
saw his sculpting work disappear due to COVID. He pivoted into <strong>3D
art</strong>.
Since we both loved games, we teamed up to learn, grow, and build something from
scratch.That’s how <strong>Pyles Studio</strong> was born. I had a small turn-based
arena prototype, and he brought in beautiful environments and original models.
Before
long, others started joining us, some looking for experience, others for fun, all
brought together by a shared passion for game development. A few of them now work at
<strong>Blizzard</strong> and <strong>Creative Assembly</strong>.<br>That project
became
<strong>Thrion Tactics</strong>. It was never designed to be a success, just a
collective effort and creative sandbox. But over <strong>3.5 years</strong> and more
than <strong>5000 hours</strong>, it became our foundation. We learned by building,
breaking, fixing, and most of all, having fun during the process.
</p>
<p>In <strong>2024</strong>, Dimitris created a gorgeous <strong>Greek island
environment</strong> inspired by stories from our grandparents. I used it as a
space
to dive deep into <strong>HDRP</strong>, <strong>optimization</strong>, and
<strong>third-person controller design</strong>. The result was something smooth,
heartfelt, and full of potential. We’re still slowly shaping it, and maybe one day
we’ll
actually publish it.
</p>
<p>In <strong>January 2025</strong>, I challenged myself to build and release a full
game in
just <strong>17 days</strong>. Our twin daughters were only 3 months old, and life
was,
at best, chaotic. But I made it happen. The game is now live on
<strong>itch.io</strong>. Although short, it reflects my creativity and the personal
touch I try to bring into everything I build, regardless of its size.
</p>
<p>It might sound childish, but I’m still following that dream, and I’ll follow it
wherever
it leads.</p>
</div>
</div>
</div>
<div class="content" id="content-gamedesign">
<h3 class="mobile-section-header">Game Design</h3>
<div class="whoami-layout">
<div class="whoami-text" style="flex: 1;">
<p>When I talk about game design, I mean it in the broadest sense : concepts, mechanics,
systems, structure. The ideas that take shape before a single line of code is
written.
For me, it usually starts with pen and paper, a whiteboard marker, or whatever’s
nearby
to help shape the experience.</p>
<p>My first real experience with design came over 20 years ago. My friends and I had
finished every quest in our favorite board game, <strong>Hero Quest</strong>. So I
asked
if they wanted me to make a new one. They said yes. I spent a few days drawing maps,
writing the story, adding puzzles, traps, side quests, anything I could think of.
</p>
<p>We played it in one sitting. No one wanted to stop. They told me it was their
favorite
quest. That moment stuck with me. It was the first time something I created made
others
genuinely excited and engaged.</p>
</div>
<div class="about-image"
style="flex: 1; display: flex; justify-content: center; align-items: center;">
<img decoding="async" loading="lazy" src="assets/IMG_2081.jpg" alt="Designing Games"
style="max-width: 75%; height: auto; border-radius: 10px;">
</div>
<div class="whoami-layout" style="margin-top: 40px;">
<div class="about-image-column hover-reveal-wrap"
style="flex: 1; display: flex; flex-direction: column; gap: 10px; align-items: center;">
<img decoding="async" loading="lazy" src="assets/IMG_2104.jpg" alt="Game Concept Sketch"
class="hover-reveal-img"
style="max-width: 75%; border-radius: 10px;"
onmouseover="this.src='assets/IMG_2100.jpg';"
onmouseout="this.src='assets/IMG_2104.jpg';">
</div>
<div class="whoami-text" style="flex: 1;">
<p>Since then, design has always been the foundation of my creative process. After
working on <strong>Greater Game</strong>, my mobile quiz project, I stopped
seeing
design as just a step. It became the core. I don't rush into engines. I sketch,
plan, think. What is the purpose of this mechanic? Where does it lead? What else
does it touch?</p>
<p>I try to create systems that make sense together, not just a collection of fun
ideas,
but ones that support each other and feel intentional. I want experiences to
feel
smooth, connected, and clear. The kind of design that never draws attention to
itself, but keeps everything running seamlessly.</p>
<p>That’s what game design is to me. It’s where every great game begins. And it’s
the
part I always enjoy the most.</p>
</div>
</div>
</div>
</div>
<div class="content" id="unity-core-section">
<h3 class="mobile-section-header">Unity Core Engineer</h3>
<div class="unity-core-chat">
<!-- QUESTION -->
<div id="unity-question" class="chat-box chat-question">
<div class="user-label">I asked ChatGPT:</div>
<div class="user-question">Can you tell me the top 5 things a Unity Core Engineer does
or is
responsible for?</div>
</div>
<!-- TYPING DOTS -->
<div id="typing-dots" class="chat-box typing-dots"
style="display: none; border:none;box-shadow:none;background:none; text-align :left;">
<span>.</span><span>.</span><span>.</span>
</div>
<!-- CHATGPT INTRO REPLY -->
<div id="chatgpt-response" class="chat-box chatgpt-response"
style="display: none;border:none; box-shadow:none;background:none;">
<div class="gpt-label">ChatGPT:</div>
<div class="gpt-message">
Absolutely! A Unity Core Engineer is often a highly technical role focused on the
deeper
systems of a Unity project. While the exact responsibilities can vary depending on
the
team size and the type of project, here are the top 5 things a Unity Core Engineer
is
usually responsible for:
</div>
</div>
<!-- RESPONSIBILITY BLOCKS (unchanged from previous) -->
<div id="unity-responsibilities" style="display: none;">
<!-- Responsibility Blocks -->
<div id="category-1" class="responsibility-block">
<h4>1. Project Architecture & Systems Design <span
class="main-check-symbol">☐</span></h4>
<ul class="sub-responsibilities">
<li><span>Setting up the foundation of the codebase: custom architecture using
singletons, scriptable objects, and clean event systems</span><span
class="check">☐</span></li>
<li><span>Ensuring the game is scalable, maintainable, and modular</span><span
class="check">☐</span></li>
<li><span>Designing reusable systems like save/load, input handling, audio
managers,
UI navigation, etc.</span><span class="check">☐</span></li>
</ul>
</div>
<div id="category-2" class="responsibility-block" style="display: none;">
<h4>2. Performance Optimization <span class="main-check-symbol">☐</span></h4>
<ul class="sub-responsibilities">
<li><span>Profiling CPU/GPU performance using Unity Profiler, Frame Debugger,
etc.</span><span class="check">☐</span></li>
<li><span>Optimizing rendering, physics, memory, and garbage
collection</span><span class="check">☐</span></li>
<li><span>Writing highly performant C# code and knowing when to use structs,
jobs,
or native containers</span><span class="check">☐</span></li>
</ul>
</div>
<div id="category-3" class="responsibility-block" style="display: none;">
<h4>3. Tooling & Editor Extensions <span class="main-check-symbol">☐</span>
</h4>
<ul class="sub-responsibilities">
<li><span>Creating custom tools and inspectors to improve workflow for
designers,
artists, and other devs</span><span class="check">☐</span></li>
<li><span>Extending the Unity Editor to make content creation easier and less
error-prone</span><span class="check">☐</span></li>
<li><span>Automating repetitive tasks or complex configurations</span><span
class="check">☐</span></li>
</ul>
</div>
<div id="category-4" class="responsibility-block" style="display: none;">
<h4>4. Build Systems & Deployment<span class="main-check-symbol">☐</span>
</h4>
<ul class="sub-responsibilities">
<li><span>Setting up and maintaining build pipelines (local and
CI/CD)</span><span class="check">☐</span></li>
<li><span>Managing platform-specific settings and code (e.g. PC, consoles,
mobile,
VR)</span><span class="check">☐</span></li>
<li><span>Ensuring smooth builds across different environments and
configurations</span><span class="check">☐</span></li>
</ul>
</div>
<div id="category-5" class="responsibility-block" style="display: none;">
<h4>5. Debugging & Technical Problem Solving <span
class="main-check-symbol">☐</span></h4>
<ul class="sub-responsibilities">
<li><span>Investigating and resolving hard bugs that require deep engine
understanding</span><span class="check">☐</span></li>
<li><span>Bridging the gap between Unity’s high-level tools and low-level system
behavior</span><span class="check">☐</span></li>
<li><span>Troubleshooting crashes, memory leaks, unexpected behavior in
runtime</span><span class="check">☐</span></li>
</ul>
</div>
<div id="category-6" class="responsibility-block" style="display: none;">
<h4>Bonus <span class="main-check-symbol">☐</span></h4>
<ul class="sub-responsibilities">
<li><span>A Unity Core Engineer is often the go-to person when something breaks
and
no one knows why.<br> They dig deep into the project’s guts and make
sure
everything “just works” under the hood.</span><span
class="check">☐</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="content" id="content-gamer">
<h3 class="mobile-section-header">Gamer</h3>
<div class="gamer-timeline-wrap">
<!-- Character underlay — large background element behind everything -->
<div class="gamer-char-underlay" id="gamer-char-underlay">
<img decoding="async" class="gamer-char-img active" id="gamer-char-a" src="assets/08yome-removebg-preview.png" alt="Chris age 5">
<img decoding="async" class="gamer-char-img" id="gamer-char-b" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Character">
</div>
<!-- Heading — changes per decade with a story -->
<h3 class="gamer-heading" id="gamer-heading">
<span class="gamer-heading-text active">Where it all began... pixelated dreams on a tiny screen</span>
</h3>
<!-- All 54 games in one flat scrollable row -->
<div class="gamer-cards-row" id="gamer-cards-row">
<div class="game-card" tabindex="0" data-title="Super Mario Bros" data-year="1985" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_mario.jpg" alt="Super Mario Bros"><span class="card-info"><span class="card-title">Super Mario Bros</span><span class="card-year">1985</span></span></div>
<div class="game-card" tabindex="0" data-title="Prince of Persia" data-year="1989" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_persia.jpg" alt="Prince of Persia"><span class="card-info"><span class="card-title">Prince of Persia</span><span class="card-year">1989</span></span></div>
<div class="game-card" tabindex="0" data-title="Lemmings" data-year="1991" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_lemmings.jpg" alt="Lemmings"><span class="card-info"><span class="card-title">Lemmings</span><span class="card-year">1991</span></span></div>
<div class="game-card" tabindex="0" data-title="TMNT IV" data-year="1991" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_TMNT.jpg" alt="Teenage Mutant Ninja Turtles IV"><span class="card-info"><span class="card-title">TMNT IV</span><span class="card-year">1991</span></span></div>
<div class="game-card" tabindex="0" data-title="Street Fighter II" data-year="1991" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_sf2.png" alt="Street Fighter II"><span class="card-info"><span class="card-title">Street Fighter II</span><span class="card-year">1991</span></span></div>
<div class="game-card" tabindex="0" data-title="Fate of Atlantis" data-year="1992" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_atlantis.png" alt="Indiana Jones and the Fate of Atlantis"><span class="card-info"><span class="card-title">Fate of Atlantis</span><span class="card-year">1992</span></span></div>
<div class="game-card" tabindex="0" data-title="Super Mario Kart" data-year="1992" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_mariokart.jpg" alt="Super Mario Kart"><span class="card-info"><span class="card-title">Super Mario Kart</span><span class="card-year">1992</span></span></div>
<div class="game-card" tabindex="0" data-title="Wolfenstein 3D" data-year="1992" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_wolf.jpg" alt="Wolfenstein 3D"><span class="card-info"><span class="card-title">Wolfenstein 3D</span><span class="card-year">1992</span></span></div>
<div class="game-card" tabindex="0" data-title="Cadillacs & Dinosaurs" data-year="1993" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_candilacs.jpg" alt="Cadillacs and Dinosaurs"><span class="card-info"><span class="card-title">Cadillacs & Dinosaurs</span><span class="card-year">1993</span></span></div>
<div class="game-card" tabindex="0" data-title="Gabriel Knight" data-year="1993" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_gabriel.jpg" alt="Gabriel Knight"><span class="card-info"><span class="card-title">Gabriel Knight</span><span class="card-year">1993</span></span></div>
<div class="game-card" tabindex="0" data-title="Link's Awakening" data-year="1993" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_zelda.jpg" alt="Link's Awakening"><span class="card-info"><span class="card-title">Link's Awakening</span><span class="card-year">1993</span></span></div>
<div class="game-card" tabindex="0" data-title="Pokémon Red/Blue" data-year="1996" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_pokemon.jpg" alt="Pokémon Red/Blue"><span class="card-info"><span class="card-title">Pokémon Red/Blue</span><span class="card-year">1996</span></span></div>
<div class="game-card" tabindex="0" data-title="Broken Sword" data-year="1996" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_broken.png" alt="Broken Sword"><span class="card-info"><span class="card-title">Broken Sword</span><span class="card-year">1996</span></span></div>
<div class="game-card" tabindex="0" data-title="Curse of Monkey Island" data-year="1997" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_monkey.jpg" alt="The Curse of Monkey Island"><span class="card-info"><span class="card-title">Curse of Monkey Island</span><span class="card-year">1997</span></span></div>
<div class="game-card" tabindex="0" data-title="Theme Hospital" data-year="1997" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_hospital.jpg" alt="Theme Hospital"><span class="card-info"><span class="card-title">Theme Hospital</span><span class="card-year">1997</span></span></div>
<div class="game-card" tabindex="0" data-title="Disney's Hercules" data-year="1997" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_hercules.jpg" alt="Disney's Hercules"><span class="card-info"><span class="card-title">Disney's Hercules</span><span class="card-year">1997</span></span></div>
<div class="game-card" tabindex="0" data-title="Tomba!" data-year="1997" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_tomba.png" alt="Tomba!"><span class="card-info"><span class="card-title">Tomba!</span><span class="card-year">1997</span></span></div>
<div class="game-card" tabindex="0" data-title="Tekken 3" data-year="1997" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_tekken3.png" alt="Tekken 3"><span class="card-info"><span class="card-title">Tekken 3</span><span class="card-year">1997</span></span></div>
<div class="game-card" tabindex="0" data-title="Oddworld: Abe's Oddysee" data-year="1997" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_abes.jpg" alt="Oddworld: Abe's Oddysee"><span class="card-info"><span class="card-title">Abe's Oddysee</span><span class="card-year">1997</span></span></div>
<div class="game-card" tabindex="0" data-title="Riven" data-year="1997" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_riven.png" alt="Riven"><span class="card-info"><span class="card-title">Riven</span><span class="card-year">1997</span></span></div>
<div class="game-card" tabindex="0" data-title="The X-Files Game" data-year="1998" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_xfiles.jpg" alt="The X-Files Game"><span class="card-info"><span class="card-title">The X-Files Game</span><span class="card-year">1998</span></span></div>
<div class="game-card" tabindex="0" data-title="Silent Hill" data-year="1999" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_silent.jpg" alt="Silent Hill"><span class="card-info"><span class="card-title">Silent Hill</span><span class="card-year">1999</span></span></div>
<div class="game-card" tabindex="0" data-title="Age of Empires II" data-year="1999" data-era="0"><img decoding="async" loading="lazy" src="assets/1990_aoe2.png" alt="Age of Empires II"><span class="card-info"><span class="card-title">Age of Empires II</span><span class="card-year">1999</span></span></div>
<div class="game-card" tabindex="0" data-title="Silver" data-year="1999" data-era="0"><img decoding="async" loading="lazy" src="assets/Silver.png" alt="Silver"><span class="card-info"><span class="card-title">Silver</span><span class="card-year">1999</span></span></div>
<div class="game-card" tabindex="0" data-title="Worms Armageddon" data-year="1999" data-era="0"><img decoding="async" loading="lazy" src="assets/worms.jpg" alt="Worms Armageddon"><span class="card-info"><span class="card-title">Worms Armageddon</span><span class="card-year">1999</span></span></div>
<div class="game-card" tabindex="0" data-title="Lineage II" data-year="2000" data-era="1"><img decoding="async" loading="lazy" src="assets/LineageII.jpg" alt="Lineage II"><span class="card-info"><span class="card-title">Lineage II</span><span class="card-year">2000</span></span></div>
<div class="game-card" tabindex="0" data-title="Mafia" data-year="2000" data-era="1"><img decoding="async" loading="lazy" src="assets/mafia.jpg" alt="Mafia"><span class="card-info"><span class="card-title">Mafia</span><span class="card-year">2000</span></span></div>
<div class="game-card" tabindex="0" data-title="WWF SmackDown! 2" data-year="2000" data-era="1"><img decoding="async" loading="lazy" src="assets/smackdown.png" alt="WWF SmackDown! 2"><span class="card-info"><span class="card-title">WWF SmackDown! 2</span><span class="card-year">2000</span></span></div>
<div class="game-card" tabindex="0" data-title="Tony Hawk's Pro Skater 2" data-year="2000" data-era="1"><img decoding="async" loading="lazy" src="assets/tonyhawk.jpg" alt="Tony Hawk's Pro Skater 2"><span class="card-info"><span class="card-title">Tony Hawk's PS2</span><span class="card-year">2000</span></span></div>
<div class="game-card" tabindex="0" data-title="Commandos 2" data-year="2001" data-era="1"><img decoding="async" loading="lazy" src="assets/Commandos2.jpg" alt="Commandos 2"><span class="card-info"><span class="card-title">Commandos 2</span><span class="card-year">2001</span></span></div>
<div class="game-card" tabindex="0" data-title="Counter-Strike 1.6" data-year="2001" data-era="1"><img decoding="async" loading="lazy" src="assets/cs.jpg" alt="Counter-Strike 1.6"><span class="card-info"><span class="card-title">Counter-Strike 1.6</span><span class="card-year">2001</span></span></div>
<div class="game-card" tabindex="0" data-title="Alone in the Dark" data-year="2001" data-era="1"><img decoding="async" loading="lazy" src="assets/alone.jpg" alt="Alone in the Dark"><span class="card-info"><span class="card-title">Alone in the Dark</span><span class="card-year">2001</span></span></div>
<div class="game-card" tabindex="0" data-title="Max Payne" data-year="2001" data-era="1"><img decoding="async" loading="lazy" src="assets/maxpayne.jpg" alt="Max Payne"><span class="card-info"><span class="card-title">Max Payne</span><span class="card-year">2001</span></span></div>
<div class="game-card" tabindex="0" data-title="Battle for Middle Earth" data-year="2002" data-era="1"><img decoding="async" loading="lazy" src="assets/bftme1.jpg" alt="Battle for Middle Earth"><span class="card-info"><span class="card-title">Battle for Middle Earth</span><span class="card-year">2002</span></span></div>
<div class="game-card" tabindex="0" data-title="Warcraft III: Frozen Throne" data-year="2003" data-era="1"><img decoding="async" loading="lazy" src="assets/frozenthrone.jpg" alt="Warcraft III: The Frozen Throne"><span class="card-info"><span class="card-title">WC3: Frozen Throne</span><span class="card-year">2003</span></span></div>
<div class="game-card" tabindex="0" data-title="Puzzle Pirates" data-year="2003" data-era="1"><img decoding="async" loading="lazy" src="assets/puzzlepirates.jpg" alt="Puzzle Pirates"><span class="card-info"><span class="card-title">Puzzle Pirates</span><span class="card-year">2003</span></span></div>
<div class="game-card" tabindex="0" data-title="DotA" data-year="2005" data-era="1"><img decoding="async" loading="lazy" src="assets/dota.jpeg" alt="DotA"><span class="card-info"><span class="card-title">DotA</span><span class="card-year">2005</span></span></div>
<div class="game-card" tabindex="0" data-title="Grim Fandango Remastered" data-year="2006" data-era="1"><img decoding="async" loading="lazy" src="assets/grim.jpg" alt="Grim Fandango Remastered"><span class="card-info"><span class="card-title">Grim Fandango</span><span class="card-year">2006</span></span></div>
<div class="game-card" tabindex="0" data-title="League of Legends" data-year="2009" data-era="2"><img decoding="async" loading="lazy" src="assets/lol.jpg" alt="League of Legends"><span class="card-info"><span class="card-title">League of Legends</span><span class="card-year">2009</span></span></div>
<div class="game-card" tabindex="0" data-title="God of War III" data-year="2010" data-era="2"><img decoding="async" loading="lazy" src="assets/gow3.jpg" alt="God of War III"><span class="card-info"><span class="card-title">God of War III</span><span class="card-year">2010</span></span></div>
<div class="game-card" tabindex="0" data-title="LIMBO" data-year="2010" data-era="2"><img decoding="async" loading="lazy" src="assets/limbo.jpg" alt="LIMBO"><span class="card-info"><span class="card-title">LIMBO</span><span class="card-year">2010</span></span></div>
<div class="game-card" tabindex="0" data-title="Dead Nation" data-year="2010" data-era="2"><img decoding="async" loading="lazy" src="assets/DeadNation.jpg" alt="Dead Nation"><span class="card-info"><span class="card-title">Dead Nation</span><span class="card-year">2010</span></span></div>
<div class="game-card" tabindex="0" data-title="LOTR: War in the North" data-year="2011" data-era="2"><img decoding="async" loading="lazy" src="assets/witn.jpg" alt="War in the North"><span class="card-info"><span class="card-title">War in the North</span><span class="card-year">2011</span></span></div>
<div class="game-card" tabindex="0" data-title="Diablo III" data-year="2012" data-era="2"><img decoding="async" loading="lazy" src="assets/diablo-iii.jpg" alt="Diablo III"><span class="card-info"><span class="card-title">Diablo III</span><span class="card-year">2012</span></span></div>
<div class="game-card" tabindex="0" data-title="The Last of Us" data-year="2013" data-era="2"><img decoding="async" loading="lazy" src="assets/lastofus.jpg" alt="The Last of Us"><span class="card-info"><span class="card-title">The Last of Us</span><span class="card-year">2013</span></span></div>
<div class="game-card" tabindex="0" data-title="AC IV: Black Flag" data-year="2013" data-era="2"><img decoding="async" loading="lazy" src="assets/blackflag.jpg" alt="Assassin's Creed IV: Black Flag"><span class="card-info"><span class="card-title">AC IV: Black Flag</span><span class="card-year">2013</span></span></div>
<div class="game-card" tabindex="0" data-title="Gauntlet" data-year="2014" data-era="2"><img decoding="async" loading="lazy" src="assets/gauntlet.jpg" alt="Gauntlet"><span class="card-info"><span class="card-title">Gauntlet</span><span class="card-year">2014</span></span></div>
<div class="game-card" tabindex="0" data-title="The Witcher 3" data-year="2015" data-era="2"><img decoding="async" loading="lazy" src="assets/Witcher3.jpg" alt="The Witcher 3"><span class="card-info"><span class="card-title">The Witcher 3</span><span class="card-year">2015</span></span></div>
<div class="game-card" tabindex="0" data-title="Bloodborne" data-year="2015" data-era="2"><img decoding="async" loading="lazy" src="assets/bloodborne.jpg" alt="Bloodborne"><span class="card-info"><span class="card-title">Bloodborne</span><span class="card-year">2015</span></span></div>
<div class="game-card" tabindex="0" data-title="Hunt: Showdown" data-year="2016" data-era="2"><img decoding="async" loading="lazy" src="assets/hunt.jpg" alt="Hunt: Showdown"><span class="card-info"><span class="card-title">Hunt: Showdown</span><span class="card-year">2016</span></span></div>
<div class="game-card" tabindex="0" data-title="Uncharted 4" data-year="2016" data-era="2"><img decoding="async" loading="lazy" src="assets/Uncharted.jpg" alt="Uncharted 4"><span class="card-info"><span class="card-title">Uncharted 4</span><span class="card-year">2016</span></span></div>
<div class="game-card" tabindex="0" data-title="Little Nightmares" data-year="2017" data-era="3"><img decoding="async" loading="lazy" src="assets/littlenightmares.jpg" alt="Little Nightmares"><span class="card-info"><span class="card-title">Little Nightmares</span><span class="card-year">2017</span></span></div>
<div class="game-card" tabindex="0" data-title="Detroit: Become Human" data-year="2018" data-era="3"><img decoding="async" loading="lazy" src="assets/detroit.jpg" alt="Detroit: Become Human"><span class="card-info"><span class="card-title">Detroit: Become Human</span><span class="card-year">2018</span></span></div>
<div class="game-card" tabindex="0" data-title="WoW: WotLK Classic" data-year="2022" data-era="3"><img decoding="async" loading="lazy" src="assets/WoW.jpg" alt="World of Warcraft: Wrath of the Lich King Classic"><span class="card-info"><span class="card-title">WoW: WotLK Classic</span><span class="card-year">2022</span></span></div>
<div class="game-card" tabindex="0" data-title="The Drifter" data-year="2025" data-era="3"><img decoding="async" loading="lazy" src="assets/the_drifter.jpg" alt="The Drifter"><span class="card-info"><span class="card-title">The Drifter</span><span class="card-year">2025</span></span></div>
</div><!-- /.gamer-cards-row -->
<!-- Scrubber — anchored at bottom -->
<div class="gamer-scrubber-wrap">
<span class="gamer-year-display" id="gamer-year-display">1990</span>
<input
type="range"
class="gamer-slider"
id="gamer-slider"
min="1990"
max="2025"
value="1990"
aria-label="Timeline scrubber, drag to explore eras"
>
<div class="gamer-ticks" aria-hidden="true">
<div class="gamer-tick" style="left: 0%"><span>1990</span></div>
<div class="gamer-tick" style="left: 28.6%"><span>2000</span></div>
<div class="gamer-tick" style="left: 57.1%"><span>2010</span></div>
<div class="gamer-tick" style="left: 85.7%"><span>2020</span></div>
</div>
</div><!-- /.gamer-scrubber-wrap -->
</div><!-- /.gamer-timeline-wrap -->
</div>
</div>
</div>
</div>
</section>
<script src="js/main.js"></script>
<script src="js/about.js"></script>
</body>
</html>