rohanimmanuel.github.io/index.html at master · RohanImmanuel/rohanimmanuel.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
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rohan Immanuel</title>
  <meta name="description" content="Portfolio for Rohan Immanuel." />
  <link rel="stylesheet" href="./css/style.css" />
</head>
<body>
  <div id="splashScreen" class="splash-screen">
    <div class="splash-backdrop">
      <div class="splash-bars">
        <span></span><span></span><span></span><span></span><span></span><span></span>
      </div>
      <div class="splash-grid"></div>
      <div class="splash-scan"></div>
    </div>

    <div class="splash-panel">
      <p class="splash-line">Hello I am</p>
      <div class="splash-logo">Rohan Immanuel</div>
      <button id="enterExperienceBtn" class="splash-enter-btn" type="button">Know More About Me</button>
    </div>
  </div>

  <div class="app-shell">
    <header class="topbar">
      <div class="logo-line">ROHAN IMMANUEL</div>

      <div class="scoreboard">
        <button id="audioToggle" class="score-box audio-toggle" type="button" aria-label="Mute audio" title="Mute audio">
          <span class="tiny">AUDIO</span>
          <strong id="audioLabel">SOUND ON</strong>
          <span id="audioIconWrap" class="audio-icon-wrap">
            <img src="./img/sound.png" alt="" width="18" height="18" />
          </span>
        </button>

        <div class="score-box">
          <span class="tiny">ROLE</span>
          <strong>SOFTWARE ENGINEER</strong>
        </div>

        <div class="score-box">
          <span class="tiny">STYLE</span>
          <strong>TOOLS / AUTOMATION / SYSTEMS</strong>
        </div>
      </div>
    </header>

    <main class="game-layout">
      <section class="left-column">
        <section class="playfield-wrap" id="boardSection">
          <canvas id="gameCanvas" width="420" height="630" aria-label="Arcade portfolio canvas"></canvas>

          <div class="mobile-controls">
            <button id="leftBtn" type="button">◀</button>
            <button id="rotateBtn" type="button">⟳</button>
            <button id="dropBtn" type="button">▼</button>
            <button id="rightBtn" type="button">▶</button>
          </div>

          <div class="mobile-mode-action">
            <button id="mobileAudioToggle" class="ghost-btn mobile-audio-btn" type="button" aria-label="Mute audio">
              <span id="mobileAudioLabel">SOUND ON</span>
              <span id="mobileAudioIconWrap" class="inline-audio-icon">
                <img src="./img/sound.png" alt="" width="18" height="18" />
              </span>
            </button>
          </div>

          <div class="mobile-mode-action">
            <button id="mobileModeBtn" class="ghost-btn ghost-btn-red" type="button">Play game</button>
          </div>
        </section>

        <section class="panel help-panel" id="desktopHelpPanel">
          <div class="tiny">HOW TO USE</div>
          <p>← → move, ↓ soft drop, ↑ rotate, space hard drop.</p>
        </section>
      </section>

      <aside class="side-ui">
        <section class="panel hero-panel">
          <h1>Building things that make messy systems easier to work with.</h1>
          <p>
            I like internal tools, automation, debugging workflows, CI/CD, and the kind of engineering
            that saves people time when things start going sideways.
          </p>
        </section>

        <section class="panel info-panel">
          <div class="panel-head">
            <span id="sectionIndex">01 / 05</span>
          </div>

          <h2 id="sectionTitle">INTRO</h2>
          <p id="sectionDesc">A quick overview of who I am and the kind of work I want to do more of.</p>
          <div class="chips" id="sectionChips"></div>

          <div class="panel-footer">
            <div class="progress-wrap">
              <span id="progressLabel">Level 1 / 5</span>
              <div class="progress-bar">
                <div id="progressFill"></div>
              </div>
            </div>

            <div class="action-buttons">
              <button id="enterBtn" class="ghost-btn" type="button">Pause tour</button>
              <button id="playBtn" class="ghost-btn ghost-btn-red" type="button">Play game</button>
            </div>
          </div>
        </section>

        <section class="panel queue-panel">
          <div class="tiny">LEVEL SELECT</div>
          <div class="level-list" id="levelList"></div>
        </section>

        <section class="panel links-panel">
          <div class="tiny">LINKS</div>
          <div class="link-grid">
            <a href="https://github.com/RohanImmanuel" target="_blank" rel="noreferrer">GITHUB</a>
            <a href="https://www.linkedin.com/in/rohanimmanuel/" target="_blank" rel="noreferrer">LINKEDIN</a>
          </div>
        </section>
      </aside>
    </main>
  </div>

  <script type="module" src="./js/app.js"></script>
</body>
</html>