v-doom is a deliberately lean repository. There is noDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/v-doom/llms.txt
Use this file to discover all available pages before exploring further.
src/ directory, no complex monorepo scaffolding, and no generated boilerplate beyond what Vite produces. Components live at the root in a /components directory, static route HTML files live in /pages, and compiled assets land in /assets. This flat layout makes it easy to find any file quickly and understand how the pieces connect.
Entry Point
index.html is the single HTML document that Vite uses as the application root. It does three things:
- Declares a
<div id="root">where React mounts the entire application. - Loads
./assets/main.jsas an ES module — the Rollup-bundled React app. - Links
./assets/main.css— the Tailwind CSS output — as a stylesheet.
<link rel="modulepreload"> hints for each component module, telling the browser to fetch them in parallel before the main bundle needs them. This preloading strategy keeps first-paint fast even though the components are split into separate files.
index.html
The
<title> in index.html reads Developer Portfolio Site - Fork. This is intentional placeholder text — update it to your own name as part of persona customization. Each pages/*.html file also carries its own <title> tag (e.g. About | v-doom) which you should update to match your brand.Route HTML Files
GitHub Pages serves static files. It has no server-side routing — when a visitor navigates directly toyourdomain.com/about, Pages looks for a physical file at that path and returns a 404 if it doesn’t find one.
v-doom solves this with pre-generated static HTML files in the /pages directory. Each file corresponds to one React Router route and does two things before the main bundle loads:
- Sets
window.__STATIC_PAGE_ROUTE__to the correct path string (e.g."/about"). - Checks whether the URL hash is already pointing to the right route — if not, it redirects the hash to the correct value so React Router’s hash-based routing picks up the correct page on mount.
pages/About.html
yourdomain.com/pages/About.html will boot the React app and land on the /about route — exactly the same experience as clicking the Practitioner nav link from the home page. No server configuration, no 404 redirects, no _redirects file required.
Assets
The/assets directory holds the three compiled output files that the HTML entry points load:
main.js — The Vite/Rollup production bundle containing the complete React application: all page components, React Router configuration, every page’s JSX, utility functions, and the full Framer Motion runtime. In development this file is replaced by Vite’s module-graph HMR system, but in the deployed build it is a single optimized ES module.
main.css — The Tailwind CSS output. Tailwind scans the component source files for class names and emits only the CSS rules that are actually used, keeping the stylesheet small. The custom color tokens (midnight, violet, amber, bone) and font families (Cormorant Garamond, Inter, Caveat) are defined in the Tailwind config and appear here as CSS custom properties.
proxy.js — A thin re-export module that makes Framer Motion’s m (the optimized motion component factory) and AnimatePresence available to component files as a named import. Splitting Framer Motion out into its own module allows the browser to cache it independently from the page components, which change more frequently during development.
Components
Each file in/components is a self-contained ES module that the main bundle imports. They are pre-loaded by the <link rel="modulepreload"> hints in index.html.
Candle.js
Re-exports React 18 and ReactDOM as named exports (
R, r, j). Acts as the single shared React instance across all component modules, preventing duplicate React copies in the module graph.Cursor.js
Renders the custom animated cursor: an amber spring-physics dot, a 15-point particle trail, and an SVG rune sigil that bursts on click. Also re-exports
AnimatePresence from Framer Motion for use by Layout.js.Layout.js
The root shell component rendered by React Router’s outlet. Composes
Cursor, ParticleBackground, and Navigation as persistent background layers, then wraps the active page in an AnimatePresence-powered motion.main with blur and opacity transitions.Navigation.js
The fixed top navigation bar. Renders links for all six routes using their in-universe nav labels: The Circle, Practitioner, Spells Cast, Cauldron, Pacts, and Summoning. Integrates React Router’s
useLocation for active-link highlighting.ParticleBackground.js
A
<canvas>-based animated background that renders dozens of slowly drifting particles. Runs inside a requestAnimationFrame loop and responds to viewport resize events. Purely decorative — rendered behind all page content via CSS z-index.RuneCircle.js
An SVG decoration featuring a slowly rotating outer ring of rune-like glyphs. Used on the home page as a visual anchor behind the hero text. Animated with a Framer Motion
animate loop at a constant rotation speed.TarotCard.js
An animated card component used in the Projects page. Each card flips or rises on hover using Framer Motion spring transitions, revealing project details on the reverse face in a tarot-card visual metaphor.