CodeKokeshi.github.io/timeline.html at main · CodeKokeshi/CodeKokeshi.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script defer src="https://cloud.umami.is/script.js" data-website-id="84641eae-f0c5-468b-8b48-f9226d664d2f"></script>
  <title>Game Dev Timeline - CodeKokeshi</title>
  <meta name="description" content="CodeKokeshi's full game development timeline - from ROM Hacking in 2017 through RPG Maker, Unity, and into Godot in 2025. Every project, every milestone." />
  <meta name="keywords" content="CodeKokeshi, game development timeline, Godot, Unity, RPG Maker, ROM hacking, game dev journey, pixel art, indie game developer" />
  <meta name="author" content="CodeKokeshi" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://codekokeshi.github.io/timeline.html" />
  <meta property="og:title" content="Game Dev Timeline - CodeKokeshi" />
  <meta property="og:description" content="CodeKokeshi's full game development timeline - from ROM Hacking in 2017 through RPG Maker, Unity, and into Godot in 2025." />

  <!-- Twitter -->
  <meta property="twitter:card" content="summary" />
  <meta property="twitter:url" content="https://codekokeshi.github.io/timeline.html" />
  <meta property="twitter:title" content="Game Dev Timeline - CodeKokeshi" />
  <meta property="twitter:description" content="CodeKokeshi's full game development timeline - from ROM Hacking in 2017 through RPG Maker, Unity, and into Godot in 2025." />

  <!-- Canonical -->
  <link rel="canonical" href="https://codekokeshi.github.io/timeline.html" />

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />

  <link rel="stylesheet" href="assets/css/timeline.css" />
</head>
<body>
  <div class="timeline-page">

    <!-- Header -->
    <header class="timeline-header">
      <a href="index.html" class="timeline-back">&larr; Back to Portfolio</a>
      <h1>Game Dev Timeline</h1>
      <p class="timeline-subtitle" id="subtitleText">Drag to scroll through my journey</p>
    </header>

    <!-- Era Legend -->
    <div class="timeline-legend">
      <span class="legend-item"><span class="legend-dot" style="background:#ef4444"></span>ROM Hacking (2017)</span>
      <span class="legend-item"><span class="legend-dot" style="background:#f59e0b"></span>RPG Maker (2022)</span>
      <span class="legend-item"><span class="legend-dot" style="background:#ffffff"></span>Unity (2023-2024)</span>
      <span class="legend-item"><span class="legend-dot" style="background:#478cbf"></span>Godot (2025)</span>
      <span class="legend-item"><span class="legend-dot" style="background:#10b981"></span>Current</span>
    </div>

    <!-- Desktop: Horizontal Timeline -->
    <div class="timeline-container" id="timelineContainer">
      <div class="timeline-track" id="timelineTrack">
        <div class="timeline-line"></div>
        <!-- Items injected by JS -->
      </div>
    </div>

    <!-- Mobile: Vertical Timeline -->
    <div class="timeline-vertical" id="timelineVertical">
      <!-- Items injected by JS -->
    </div>

    <!-- Detail Modal / Panel -->
    <div class="timeline-detail" id="detailPanel" style="display:none;">
      <div class="timeline-detail__content" id="detailContent">
        <!-- Filled by JS -->
      </div>
    </div>

  </div>

  <script src="assets/js/timeline.js"></script>
</body>
</html>