Fix contact typo and add theme e2e coverage

Author: Bikram Gole

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+test-results/
+playwright-report/

README.md

@@ -20,7 +20,7 @@ I conceived this project to create a personal website that authentically represe
 My website incorporates a variety of interactive and engaging features: ✨
 
 -   **Multi-Page Navigation:** Seamless navigation across `Home`, `About`, and `Contact` sections.
--   **Dynamic Theme Engine:** A robust theme system offering multiple visual styles, including 'Liquid Glass' and 'Chaos' modes, with theme persistence across page transitions.
+-   **Dynamic Theme Engine:** A robust theme system offering multiple visual styles, including `Liquid Glass` and `Black Flag Uprising`, with theme persistence across page transitions.
 -   **Interactive Mini Terminal:** A functional command-line interface for enhanced user engagement.
 -   **Persona Quiz Game:** An integrated game designed to interactively explore user personas.
 -   **Live GitHub Repository Cards:** Displays real-time project information fetched from `github.com/DevXtechnic` via the GitHub API.
@@ -52,8 +52,8 @@ To set up and run my project on your local machine, follow these steps 👇:
 
 1.  **Clone the repository:**
     ```bash
-    git clone https://github.com/DevXtechnic/bikram-site.git
-    cd bikram-site
+    git clone https://github.com/DevXtechnic/DevXtechnic.github.io.git
+    cd DevXtechnic.github.io
     ```
 2.  **Serve the files:**
     You can use a simple Python HTTP server 🐍:
@@ -66,7 +66,7 @@ To set up and run my project on your local machine, follow these steps 👇:
 ## Developer Notes
 
 -   I included a `.nojekyll` file to ensure GitHub Pages serves files directly, bypassing Jekyll processing.
--   I manage theme state using `localStorage` to maintain your selected themes across sessions.
+-   I manage theme state with URL `theme` parameters and `localStorage`, with explicit URL themes taking precedence.
 -   I intentionally included over-engineered elements for demonstrative and exploratory purposes, reflecting my commitment to creative and technical experimentation. No regrets!
 
 ## Contributing

contact.html

@@ -133,7 +133,7 @@ <h3 class="contact-title">
           </h3>
           <p>Bikramgole.genius@keemail.me</p>
         </a>
-        <a class="contact-item tilt" href="mailto:Develope.genius@gmail.com">
+        <a class="contact-item tilt" href="mailto:Developer.genius@gmail.com">
           <h3 class="contact-title">
             <span class="contact-logo" aria-hidden="true">
               <svg class="mono-icon" viewBox="0 0 24 24" role="img" focusable="false">
@@ -142,7 +142,7 @@ <h3 class="contact-title">
             </span>
             Backup Email
           </h3>
-          <p>Develope.genius@gmail.com</p>
+          <p>Developer.genius@gmail.com</p>
         </a>
         <a class="contact-item tilt" href="https://github.com/DevXtechnic" target="_blank" rel="noopener noreferrer">
           <h3 class="contact-title">

package-lock.json

@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "test:e2e": "playwright test"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.54.0"
+  }
+}

package.json

@@ -0,0 +1,13 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  webServer: {
+    command: "python -m http.server 4173",
+    url: "http://127.0.0.1:4173",
+    reuseExistingServer: !process.env.CI,
+  },
+  use: {
+    baseURL: "http://127.0.0.1:4173",
+  },
+});

playwright.config.mjs

@@ -721,7 +721,7 @@ const personaQuizQuestions = [
   { question: "In Black Flag theme, the hero gun appears on which side of title?", options: ["Left", "Right", "Both sides", "It is hidden"], answer: 0 },
   { question: "Which mode label replaced the old Libertarian theme?", options: ["Paper Link", "Neo Blue", "Black Flag Uprising", "Blood Moon"], answer: 2 },
   { question: "What vibe best matches this site?", options: ["Corporate dashboard", "Chaotic fun", "News portal", "Minimal blog"], answer: 1 },
-  { question: "Which email is marked as Primary in Contact?", options: ["Develope.genius@gmail.com", "Bikramgole.genius@keemail.me", "neo@matrix.com", "devx@proton.me"], answer: 1 },
+  { question: "Which email is marked as Primary in Contact?", options: ["Developer.genius@gmail.com", "Bikramgole.genius@keemail.me", "neo@matrix.com", "devx@proton.me"], answer: 1 },
   { question: "What does the quiz do when current pool runs out?", options: ["Auto-download more", "Stops and asks reset/refresh", "Repeats previous 10", "Crashes intentionally"], answer: 1 },
   { question: "Which page describes Identity Snapshot?", options: ["Home", "Contact", "About", "All pages"], answer: 2 },
   { question: "Which section title includes the word Console?", options: ["Mission Console", "Open Channel", "Identity Snapshot", "Live GitHub"], answer: 0 },

script.js

@@ -0,0 +1,20 @@
+import { expect, test } from "@playwright/test";
+
+const THEME_STORAGE_KEY = "neoThemeVariant.v1";
+
+test("URL theme overrides stored theme and persists across navigation", async ({ page }) => {
+  await page.goto("/index.html");
+  await page.evaluate((key) => {
+    window.localStorage.setItem(key, "paper");
+  }, THEME_STORAGE_KEY);
+
+  await page.goto("/index.html?theme=blackflag");
+
+  await expect(page.locator("html")).toHaveAttribute("data-theme", "blackflag");
+  await expect.poll(() => page.evaluate((key) => window.localStorage.getItem(key), THEME_STORAGE_KEY)).toBe("blackflag");
+
+  await page.getByRole("link", { name: "About" }).first().click();
+
+  await expect(page.locator("html")).toHaveAttribute("data-theme", "blackflag");
+  await expect(page).toHaveURL(/about\.html\?theme=blackflag$/);
+});