⚔️ THE CITADEL: GAME OF THRONES CINEMATIC PORTFOLIO

"A developer always pays their technical debt."

An epic, award-winning Game of Thrones inspired portfolio website engineered with Three.js 3D WebGL, procedural Web Audio API Orchestral Synthesis (the iconic cello theme without needing any external MP3 files!), real-time Atmospheric Particle Shaders (dragon embers, Winterfell snow, and wildfire), and Interactive Westeros Lore.

---

🌟 Majestic Features

1. The Grand Astrolabe 3D Opening Sequence (WebGL):

   • Authentic rotating concentric brass & gold astrolabe bands with engraved relief gears.
   • Blazing central sun with lens flares and solar corona.
   • Mechanical citadel keeps and rotating cogwheel platforms rising from below.
   • Cinematic camera fly-through dive upon clicking "CLAIM THE THRONE & ENTER".

2. Procedural Web Audio Orchestral Engine:

   • Synthesizes the haunting Game of Thrones D-minor cello theme, taiko war drums, violins, and clockwork cogs entirely in real time using the browser's Web Audio API (zero audio file dependencies!).
   • Sound FX: Valyrian steel sword clangs, dragon flame breaths, winter blizzard wind, and raven caws.
   • Floating antique audio widget with real-time frequency visualizer bars and volume slider.

3. The Four Great Houses Theme Switcher:

   • House Targaryen ("Fire and Blood"): Fiery crimson, molten gold, and rising fire embers.
   • House Stark ("Winter is Coming"): Arctic ice cyan, falling snowflakes, and silver blade tones.
   • House Lannister ("Hear Me Roar"): 24k imperial gold, deep crimson, and shimmering gold dust.
   • The Night's Watch ("Shield of the Realm"): Obsidian black and emerald wildfire embers.

4. The Four Houses of Code (Tech Stack):

   • House of the Iron Interface (Frontend)
   • House of the Iron Citadel (Backend)
   • House of the Grand Vaults (Database)
   • House of the High Watchtower (DevOps & Cloud)
   • Runic mastery bars styled as forged Valyrian steel blades.

5. Chronicles of Conquest (Projects):

   • Ancient battle map cards with 3D cursor tilt effects.
   • Royal wax seals stamped on each victory.
   • "View Battle Lore" modal popup detailing system architecture and benchmarks.

6. Send a Raven (Interactive Contact Section):

   • Royal parchment desk with wax seal stamp.
   • When dispatched, a silhouette raven swoops across the starry sky with authentic wing-flap audio!

7. The Citadel Scribe (In-Browser Live Editor):

   • Click "Edit Scribe" in the top navigation to update your Name, Royal Titles, Bio, Email, and GitHub link directly in the browser with instant local saving (localStorage).

---

🚀 How to Run

Option 1: Instant Direct Launch

Double click or open index.html in any modern web browser (Google Chrome, Microsoft Edge, Brave, Firefox):

start index.html

Option 2: Run with Local Development Server

From this directory:

npm start

or:

npx serve . -l 3000

Then visit: http://localhost:3000

---

🛠️ Personalization

To modify the default content permanently, edit realm-config.js:

• lord.name: Your name
• lord.title: Your professional subtitle
• lord.stats: Years in realm, projects completed, etc.
• housesOfTech: Your technical skills and mastery percentages
• campaigns: Your portfolio projects, battle reports, and URLs
• annals: Your work timeline and milestones
• endorsements: Client testimonials and recommendations