Fix cross-page theme persistence and refresh repo profile

Author: Bikram Gole

README.md

@@ -1,44 +1,57 @@
-# Bikram Personal Website
+# Bikram Gole - Personal Website
 
-Playful dark-themed personal website for **Bikram Gole**.
+This is my personal website.
+I built it as a chaotic-fun, space-themed profile to show my personality, interests, and coding vibe.
 
-## Stack
+Live URL: `https://devxtechnic.github.io/bikram-site/`
+
+## What I put in this site
+
+- Multi-page setup: Home, About, Contact
+- Theme engine with multiple visual modes
+- Persistent theme across all pages
+- Mini terminal with commands
+- Persona quiz game
+- Live GitHub repo cards from `github.com/DevXtechnic`
+- Custom interactions, pulse effects, and easter eggs
+
+## Tech stack
 
 - HTML
 - CSS
-- JavaScript
-- GitHub API (to show latest repos)
+- Vanilla JavaScript
+- GitHub Pages for hosting
+- GitHub API for repo fetch
 
-## Pages
+## Project structure
 
-- `index.html` - Home + live GitHub repos
-- `about.html` - Personal story and profile
-- `contact.html` - Email and GitHub links
+- `index.html` -> home page
+- `about.html` -> profile + identity snapshot
+- `contact.html` -> contact links
+- `styles.css` -> all styling and themes
+- `script.js` -> interactions, effects, terminal, quiz, and theme logic
 
 ## Run locally
 
-Open `index.html` directly, or run a local server:
-
 ```bash
 cd bikram-site
 python -m http.server 8000
 ```
 
-Then open `http://localhost:8000`.
+Open `http://localhost:8000`.
 
 ## Deploy to GitHub Pages
 
-1. Create a GitHub repo (recommended name: `DevXtechnic.github.io` for user site).
-2. Upload all files from this folder to the repo root.
-3. On GitHub, go to `Settings -> Pages`.
-4. Under `Build and deployment`, set:
-   - `Source`: `Deploy from a branch`
-   - `Branch`: `main` and `/ (root)`
-5. Save and wait 1-2 minutes.
-6. Visit your site URL shown in Pages settings.
+1. Push this repo to GitHub.
+2. Open repository `Settings -> Pages`.
+3. Set `Source` to `Deploy from a branch`.
+4. Select branch `main` and folder `/ (root)`.
+5. Save and wait for deployment.
 
-If repo name is `DevXtechnic.github.io`, URL will be:
-`https://devxtechnic.github.io/`
-
-If repo name is something else (example `bikram-site`), URL will be:
+My deployed path is:
 `https://devxtechnic.github.io/bikram-site/`
+
+## Notes
+
+- `.nojekyll` is included so GitHub Pages serves files directly without Jekyll processing.
+- Theme selection is saved in `localStorage` and synced through URL params for page-to-page consistency.

about.html

@@ -14,13 +14,17 @@
   <script>
     (() => {
       try {
+        const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "liquidglass", "paper", "blackflag"]);
+        const themeKey = "neoThemeVariant.v1";
         const params = new URLSearchParams(window.location.search);
         const urlTheme = params.get("theme");
-        const savedTheme = window.localStorage.getItem("neoThemeVariant.v1");
-        if (savedTheme) {
-          document.body.dataset.theme = savedTheme;
-        } else if (urlTheme) {
-          document.body.dataset.theme = urlTheme;
+        const savedTheme = window.localStorage.getItem(themeKey);
+        const selected = validThemes.has(urlTheme) ? urlTheme : (validThemes.has(savedTheme) ? savedTheme : null);
+        if (selected) {
+          document.body.dataset.theme = selected;
+          if (selected !== savedTheme) {
+            window.localStorage.setItem(themeKey, selected);
+          }
         }
       } catch (error) {
         // ignore

contact.html

@@ -14,13 +14,17 @@
   <script>
     (() => {
       try {
+        const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "liquidglass", "paper", "blackflag"]);
+        const themeKey = "neoThemeVariant.v1";
         const params = new URLSearchParams(window.location.search);
         const urlTheme = params.get("theme");
-        const savedTheme = window.localStorage.getItem("neoThemeVariant.v1");
-        if (savedTheme) {
-          document.body.dataset.theme = savedTheme;
-        } else if (urlTheme) {
-          document.body.dataset.theme = urlTheme;
+        const savedTheme = window.localStorage.getItem(themeKey);
+        const selected = validThemes.has(urlTheme) ? urlTheme : (validThemes.has(savedTheme) ? savedTheme : null);
+        if (selected) {
+          document.body.dataset.theme = selected;
+          if (selected !== savedTheme) {
+            window.localStorage.setItem(themeKey, selected);
+          }
         }
       } catch (error) {
         // ignore

index.html

@@ -14,13 +14,17 @@
   <script>
     (() => {
       try {
+        const validThemes = new Set(["neo", "mint", "sunset", "midnight", "ember", "arctic", "grape", "toxic", "ocean", "bloodmoon", "liquidglass", "paper", "blackflag"]);
+        const themeKey = "neoThemeVariant.v1";
         const params = new URLSearchParams(window.location.search);
         const urlTheme = params.get("theme");
-        const savedTheme = window.localStorage.getItem("neoThemeVariant.v1");
-        if (savedTheme) {
-          document.body.dataset.theme = savedTheme;
-        } else if (urlTheme) {
-          document.body.dataset.theme = urlTheme;
+        const savedTheme = window.localStorage.getItem(themeKey);
+        const selected = validThemes.has(urlTheme) ? urlTheme : (validThemes.has(savedTheme) ? savedTheme : null);
+        if (selected) {
+          document.body.dataset.theme = selected;
+          if (selected !== savedTheme) {
+            window.localStorage.setItem(themeKey, selected);
+          }
         }
       } catch (error) {
         // ignore

script.js

@@ -621,8 +621,14 @@ function applyTheme(theme, notify = false) {
 
 function initThemeSwitcher() {
   let savedTheme = "neo";
+  let urlTheme = null;
   try {
-    savedTheme = getThemeFromUrl() || window.localStorage.getItem(THEME_STORAGE_KEY) || "neo";
+    urlTheme = getThemeFromUrl();
+    const storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
+    savedTheme = urlTheme || storedTheme || "neo";
+    if (urlTheme && storedTheme !== urlTheme) {
+      window.localStorage.setItem(THEME_STORAGE_KEY, urlTheme);
+    }
   } catch (error) {
     savedTheme = "neo";
   }
@@ -631,14 +637,21 @@ function initThemeSwitcher() {
   window.addEventListener("pageshow", () => {
     let latestTheme = "neo";
     try {
-      latestTheme = window.localStorage.getItem(THEME_STORAGE_KEY) || "neo";
+      latestTheme = getThemeFromUrl() || window.localStorage.getItem(THEME_STORAGE_KEY) || "neo";
     } catch (error) {
       latestTheme = "neo";
     }
     if (latestTheme !== currentTheme) {
       applyTheme(latestTheme, false);
     }
   });
+  window.addEventListener("storage", (event) => {
+    if (event.key !== THEME_STORAGE_KEY || !event.newValue) return;
+    if (!THEME_OPTIONS.includes(event.newValue)) return;
+    if (event.newValue !== currentTheme) {
+      applyTheme(event.newValue, false);
+    }
+  });
   headerThemeSelect?.addEventListener("change", (event) => {
     applyTheme(event.target.value, true);
   });
@@ -914,9 +927,9 @@ function runTerminalCommand(rawCommand) {
     scrollToSection("hero-zone");
     appendTerminalLine("Jumped to home.");
   } else if (action === "about") {
-    window.location.href = "about.html";
+    navigateToPage("about.html");
   } else if (action === "contact") {
-    window.location.href = "contact.html";
+    navigateToPage("contact.html");
   } else if (action === "github") {
     window.open("https://github.com/DevXtechnic", "_blank", "noopener,noreferrer");
     appendTerminalLine("Opened GitHub profile.");
@@ -1227,6 +1240,11 @@ function runOrNavigate(sectionId, actionKey = "") {
   window.location.href = targetUrl;
 }
 
+function navigateToPage(path) {
+  const nextUrl = applyThemeToUrl(path, currentTheme);
+  window.location.href = nextUrl;
+}
+
 function initAiConstellationTagline() {
   if (page !== "home") return;
   const tagEl = document.querySelector("#ai-constellation .chaos-card.c4 p");
@@ -1297,8 +1315,8 @@ function initCommandPalette() {
     { label: "Mode: Toggle Chill Music", keywords: "music chill funk mode", run: () => toggleFunkAudio() },
     { label: "Mode: Toggle Elon Warp", keywords: "elon warp mode", run: () => toggleElonMode() },
     { label: "Open: GitHub Profile", keywords: "github profile devxtechnic", run: () => window.open("https://github.com/DevXtechnic", "_blank", "noopener,noreferrer") },
-    { label: "Open: About Page", keywords: "about page profile", run: () => { window.location.href = "about.html"; } },
-    { label: "Open: Contact Page", keywords: "contact email", run: () => { window.location.href = "contact.html"; } },
+    { label: "Open: About Page", keywords: "about page profile", run: () => navigateToPage("about.html") },
+    { label: "Open: Contact Page", keywords: "contact email", run: () => navigateToPage("contact.html") },
   ];
 
   let visibleCommands = commands.slice();