Skip to content

Commit db711d1

Browse files
Bikram GoleBikram Gole
Bikram Gole
authored and
Bikram Gole
committed
Add zen mascot and ambient animations
1 parent 7c656c5 commit db711d1

5 files changed

Lines changed: 1132 additions & 46 deletions

File tree

‎about.html‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@
3636
<script>
3737
(() => {
3838
try {
39-
const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "liquidglass", "material3", "paper", "blackflag"]);
39+
const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "zen", "liquidglass", "material3", "paper", "blackflag"]);
4040
const themeKey = "neoThemeVariant.v1";
4141
const params = new URLSearchParams(window.location.search);
4242
const urlTheme = params.get("theme");
4343
const savedTheme = window.localStorage.getItem(themeKey);
44-
const selected = validThemes.has(savedTheme) ? savedTheme : (validThemes.has(urlTheme) ? urlTheme : null);
44+
const selected = validThemes.has(savedTheme) ? savedTheme : (validThemes.has(urlTheme) ? urlTheme : "mint");
4545
if (selected) {
4646
document.documentElement.dataset.theme = selected;
4747
document.body.dataset.theme = selected;
@@ -72,8 +72,8 @@
7272
<div class="header-tools">
7373
<label for="header-theme-select" class="theme-top-label">Theme</label>
7474
<select id="header-theme-select" class="theme-top-select" aria-label="Theme switcher">
75-
<option value="neo">Neo Blue</option>
7675
<option value="mint">Mint Matrix</option>
76+
<option value="neo">Neo Blue</option>
7777
<option value="sunset">Sunset Warp</option>
7878
<option value="midnight">Midnight Ice</option>
7979
<option value="ember">Ember Core</option>
@@ -82,16 +82,29 @@
8282
<option value="toxic">Toxic Lime</option>
8383
<option value="ocean">Ocean Drift</option>
8484
<option value="bloodmoon">Blood Moon</option>
85+
<option value="zen">Zen Temple</option>
8586
<option value="liquidglass">Liquid Glass</option>
8687
<option value="material3">Material 3</option>
8788
<option value="paper">Paper Link</option>
8889
<option value="blackflag">Black Flag Uprising</option>
8990
</select>
9091
</div>
9192
</header>
93+
<div class="scroll-progress" aria-hidden="true">
94+
<span class="scroll-progress-bar"></span>
95+
</div>
96+
<nav class="section-rail" aria-label="Section navigator">
97+
<a href="#hero-zone" data-section="hero-zone"><span class="rail-label">Hero</span></a>
98+
<a href="#identity-snapshot" data-section="identity-snapshot"><span class="rail-label">Identity</span></a>
99+
<a href="#strengths" data-section="strengths"><span class="rail-label">Strengths</span></a>
100+
<a href="#influence-stack" data-section="influence-stack"><span class="rail-label">Influence</span></a>
101+
</nav>
102+
<button id="back-to-top" class="back-to-top" type="button" aria-label="Back to top">
103+
<span aria-hidden="true">↑</span>
104+
</button>
92105

93106
<main id="main-content">
94-
<section class="hero compact reveal skew-left">
107+
<section id="hero-zone" class="hero compact reveal skew-left">
95108
<span class="hero-pulse" aria-hidden="true"></span>
96109
<svg class="hero-motif" viewBox="0 0 220 140" aria-hidden="true">
97110
<path class="motif-line" d="M10 110 L60 40 L120 70 L170 25 L210 60" />
@@ -113,7 +126,7 @@ <h1 id="hero-name" data-name="Aura Farmer Profile">Aura Farmer Profile</h1>
113126
<p class="status-line">Shivapuri Secondary School | Grade 10 | ISTJ-A</p>
114127
</section>
115128

116-
<section class="panel reveal delay-1 skew-right">
129+
<section id="identity-snapshot" class="panel reveal delay-1 skew-right">
117130
<h2>Identity Snapshot 🧬</h2>
118131
<div class="about-grid tilt-zone">
119132
<article class="glass-card tilt"><h3>Name</h3><p>Bikram Gole</p></article>
@@ -126,7 +139,7 @@ <h2>Identity Snapshot 🧬</h2>
126139
</div>
127140
</section>
128141

129-
<section class="panel reveal delay-2 skew-left">
142+
<section id="strengths" class="panel reveal delay-2 skew-left">
130143
<h2>Strengths ⚡</h2>
131144
<div class="fact-grid tilt-zone">
132145
<article class="fact-card tilt"><h3>Communication</h3><p>Great English speaker.</p></article>
@@ -136,7 +149,7 @@ <h2>Strengths ⚡</h2>
136149
</div>
137150
</section>
138151

139-
<section class="panel reveal delay-3 skew-right">
152+
<section id="influence-stack" class="panel reveal delay-3 skew-right">
140153
<h2>AI + Influence Stack 🤖</h2>
141154
<div class="favorite-grid tilt-zone">
142155
<article class="favorite-card tilt"><h3>YouTube</h3><p>AI Explained, Matt Wolfe, Luke Smith, Mental Outlaw, Linus Tech Tips, IN-Depth Story, HowToMen, The Linux Experiment, Fireship</p></article>

‎contact.html‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@
3636
<script>
3737
(() => {
3838
try {
39-
const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "liquidglass", "material3", "paper", "blackflag"]);
39+
const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "zen", "liquidglass", "material3", "paper", "blackflag"]);
4040
const themeKey = "neoThemeVariant.v1";
4141
const params = new URLSearchParams(window.location.search);
4242
const urlTheme = params.get("theme");
4343
const savedTheme = window.localStorage.getItem(themeKey);
44-
const selected = validThemes.has(savedTheme) ? savedTheme : (validThemes.has(urlTheme) ? urlTheme : null);
44+
const selected = validThemes.has(savedTheme) ? savedTheme : (validThemes.has(urlTheme) ? urlTheme : "mint");
4545
if (selected) {
4646
document.documentElement.dataset.theme = selected;
4747
document.body.dataset.theme = selected;
@@ -72,8 +72,8 @@
7272
<div class="header-tools">
7373
<label for="header-theme-select" class="theme-top-label">Theme</label>
7474
<select id="header-theme-select" class="theme-top-select" aria-label="Theme switcher">
75-
<option value="neo">Neo Blue</option>
7675
<option value="mint">Mint Matrix</option>
76+
<option value="neo">Neo Blue</option>
7777
<option value="sunset">Sunset Warp</option>
7878
<option value="midnight">Midnight Ice</option>
7979
<option value="ember">Ember Core</option>
@@ -82,16 +82,27 @@
8282
<option value="toxic">Toxic Lime</option>
8383
<option value="ocean">Ocean Drift</option>
8484
<option value="bloodmoon">Blood Moon</option>
85+
<option value="zen">Zen Temple</option>
8586
<option value="liquidglass">Liquid Glass</option>
8687
<option value="material3">Material 3</option>
8788
<option value="paper">Paper Link</option>
8889
<option value="blackflag">Black Flag Uprising</option>
8990
</select>
9091
</div>
9192
</header>
93+
<div class="scroll-progress" aria-hidden="true">
94+
<span class="scroll-progress-bar"></span>
95+
</div>
96+
<nav class="section-rail" aria-label="Section navigator">
97+
<a href="#hero-zone" data-section="hero-zone"><span class="rail-label">Hero</span></a>
98+
<a href="#direct-links" data-section="direct-links"><span class="rail-label">Links</span></a>
99+
</nav>
100+
<button id="back-to-top" class="back-to-top" type="button" aria-label="Back to top">
101+
<span aria-hidden="true">↑</span>
102+
</button>
92103

93104
<main id="main-content">
94-
<section class="hero compact reveal skew-left">
105+
<section id="hero-zone" class="hero compact reveal skew-left">
95106
<span class="hero-pulse" aria-hidden="true"></span>
96107
<svg class="hero-motif" viewBox="0 0 220 140" aria-hidden="true">
97108
<path class="motif-line" d="M10 110 L60 40 L120 70 L170 25 L210 60" />
@@ -112,7 +123,7 @@ <h1 id="hero-name" data-name="Open Channel ✉️">Open Channel ✉️</h1>
112123
<p class="subtitle">For AI ideas, open source builds, Linux setup talk, and serious debates.</p>
113124
</section>
114125

115-
<section class="panel reveal delay-1 skew-right">
126+
<section id="direct-links" class="panel reveal delay-1 skew-right">
116127
<h2>Direct Links 🔗</h2>
117128
<div class="contact-list tilt-zone">
118129
<a class="contact-item tilt" href="mailto:Bikramgole.genius@keemail.me">

‎index.html‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,12 @@
5454
<script>
5555
(() => {
5656
try {
57-
const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "liquidglass", "material3", "paper", "blackflag"]);
57+
const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "zen", "liquidglass", "material3", "paper", "blackflag"]);
5858
const themeKey = "neoThemeVariant.v1";
5959
const params = new URLSearchParams(window.location.search);
6060
const urlTheme = params.get("theme");
6161
const savedTheme = window.localStorage.getItem(themeKey);
62-
const selected = validThemes.has(savedTheme) ? savedTheme : (validThemes.has(urlTheme) ? urlTheme : null);
62+
const selected = validThemes.has(savedTheme) ? savedTheme : (validThemes.has(urlTheme) ? urlTheme : "mint");
6363
if (selected) {
6464
document.documentElement.dataset.theme = selected;
6565
document.body.dataset.theme = selected;
@@ -90,8 +90,8 @@
9090
<div class="header-tools">
9191
<label for="header-theme-select" class="theme-top-label">Theme</label>
9292
<select id="header-theme-select" class="theme-top-select" aria-label="Theme switcher">
93-
<option value="neo">Neo Blue</option>
9493
<option value="mint">Mint Matrix</option>
94+
<option value="neo">Neo Blue</option>
9595
<option value="sunset">Sunset Warp</option>
9696
<option value="midnight">Midnight Ice</option>
9797
<option value="ember">Ember Core</option>
@@ -100,6 +100,7 @@
100100
<option value="toxic">Toxic Lime</option>
101101
<option value="ocean">Ocean Drift</option>
102102
<option value="bloodmoon">Blood Moon</option>
103+
<option value="zen">Zen Temple</option>
103104
<option value="liquidglass">Liquid Glass</option>
104105
<option value="material3">Material 3</option>
105106
<option value="paper">Paper Link</option>
@@ -108,6 +109,23 @@
108109
<button id="theme-cycle-btn" class="theme-cycle-btn" type="button" aria-label="Cycle theme">↻</button>
109110
</div>
110111
</header>
112+
<div class="scroll-progress" aria-hidden="true">
113+
<span class="scroll-progress-bar"></span>
114+
</div>
115+
<nav class="section-rail" aria-label="Section navigator">
116+
<a href="#hero-zone" data-section="hero-zone"><span class="rail-label">Hero</span></a>
117+
<a href="#cli-snapshot" data-section="cli-snapshot"><span class="rail-label">Snapshot</span></a>
118+
<a href="#mission-console" data-section="mission-console"><span class="rail-label">Console</span></a>
119+
<a href="#project-spotlight" data-section="project-spotlight"><span class="rail-label">Spotlight</span></a>
120+
<a href="#ai-constellation" data-section="ai-constellation"><span class="rail-label">AI Stack</span></a>
121+
<a href="#culture-brain" data-section="culture-brain"><span class="rail-label">Culture</span></a>
122+
<a href="#neo-terminal" data-section="neo-terminal"><span class="rail-label">Terminal</span></a>
123+
<a href="#persona-quiz" data-section="persona-quiz"><span class="rail-label">Quiz</span></a>
124+
<a href="#github-live" data-section="github-live"><span class="rail-label">GitHub</span></a>
125+
</nav>
126+
<button id="back-to-top" class="back-to-top" type="button" aria-label="Back to top">
127+
<span aria-hidden="true">↑</span>
128+
</button>
111129

112130
<main id="main-content">
113131
<section id="hero-zone" class="hero reveal skew-left">
@@ -180,6 +198,20 @@ <h1 id="hero-name" data-name="Bikram Gole">Bikram Gole</h1>
180198
<span class="android-leg left"></span>
181199
<span class="android-leg right"></span>
182200
</div>
201+
<div class="zen-avatar" aria-hidden="true">
202+
<div class="zen-head">
203+
<span class="zen-bun"></span>
204+
<span class="zen-eye left"></span>
205+
<span class="zen-eye right"></span>
206+
<span class="zen-mouth"></span>
207+
</div>
208+
<div class="zen-body">
209+
<span class="zen-robe"></span>
210+
<span class="zen-hands"></span>
211+
<span class="zen-book"></span>
212+
</div>
213+
<span class="zen-base"></span>
214+
</div>
183215
</aside>
184216
</div>
185217
</section>
@@ -223,6 +255,7 @@ <h2>Project Spotlight</h2>
223255
</div>
224256
<div class="spotlight-grid tilt-zone">
225257
<article class="spotlight-card tilt">
258+
<div class="spotlight-swatch" aria-hidden="true"></div>
226259
<h3>DevXTechnic</h3>
227260
<p>Personal dev hub and experiments powering this portfolio.</p>
228261
<div class="chips">
@@ -233,6 +266,7 @@ <h3>DevXTechnic</h3>
233266
<a class="spotlight-link" href="https://github.com/DevXtechnic" target="_blank" rel="noopener noreferrer">Open profile →</a>
234267
</article>
235268
<article class="spotlight-card tilt">
269+
<div class="spotlight-swatch" aria-hidden="true"></div>
236270
<h3>Arch Ricing Setup</h3>
237271
<p>My Arch + Hyprland setup tuned for speed and visuals.</p>
238272
<div class="chips">
@@ -243,6 +277,7 @@ <h3>Arch Ricing Setup</h3>
243277
<a class="spotlight-link" href="https://github.com/DevXtechnic" target="_blank" rel="noopener noreferrer">See configs →</a>
244278
</article>
245279
<article class="spotlight-card tilt">
280+
<div class="spotlight-swatch" aria-hidden="true"></div>
246281
<h3>AI Tools Experiments</h3>
247282
<p>Rapid prototypes exploring LLM workflows and automations.</p>
248283
<div class="chips">
@@ -321,7 +356,9 @@ <h3 id="quiz-question" class="quiz-question">Hit start and prove your Neo-level
321356
<section id="github-live" class="panel reveal delay-3 skew-right">
322357
<h2>Live GitHub 💻</h2>
323358
<p>Auto-fetched from <a href="https://github.com/DevXtechnic" target="_blank" rel="noopener noreferrer">github.com/DevXtechnic</a>.</p>
359+
<p id="repo-meta-line" class="repo-meta-line">Loading repo stats...</p>
324360
<div id="repo-grid" class="repo-grid tilt-zone" aria-live="polite"></div>
361+
<button id="repo-toggle" class="btn ghost repo-toggle" type="button" aria-expanded="false">Show more repos</button>
325362
</section>
326363
</main>
327364

0 commit comments

Comments
 (0)