v-doom is a fully animated, single-page React portfolio template wrapped in an arcane aesthetic. Built on React 18, Vite, and Framer Motion, it pairs silky page transitions and a custom particle canvas with a deep midnight color scheme and occult-inspired typography. Every element — from the animated custom cursor to the rotating SVG rune decorations — is designed to make your portfolio stand out. Fork it, swap out the placeholder persona, and ship a site that people actually remember.Documentation 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.
Tech Stack
v-doom is assembled from a modern, production-ready toolchain. Each dependency earns its place:| Library | Version | Role |
|---|---|---|
| React | 18 | Component model, hooks, concurrent rendering |
| React Router | v6 | Client-side routing across all six pages |
| Framer Motion | 11 | Page transitions, scroll animations, spring physics |
| Tailwind CSS | 3 | Utility-first styling and responsive layout |
| Lucide React | latest | Crisp SVG icon set used in the navigation and cards |
| Vite | 5 | Dev server, HMR, and Rollup-based production build |
AnimatePresence wraps the page outlet so that every route change fades and blurs smoothly in and out. Tailwind drives layout and spacing, while the custom design tokens (midnight, violet, amber, bone) are defined as Tailwind theme extensions so you can reference them anywhere as class names.
Design Philosophy
v-doom commits fully to a dark occult aesthetic without being kitschy. The design language is built around four intentional choices: Color palette — The background ismidnight (#0B0A1F), a near-black deep indigo. Accent colors are violet (#6B3FA0) for interactive elements and glows, amber (#F5B25B) for highlights and the custom cursor, and bone (#EDE6D3) for body text — warm enough to read comfortably against dark backgrounds.
Typography — Three typefaces layer the hierarchy:
- Cormorant Garamond (serif) — headings and display text, lending an archaic, grimoire-like gravitas
- Inter (sans-serif) — body copy and UI labels, keeping legibility high
- Caveat (handwriting) — accent labels and decorative callouts, suggesting marginalia
ParticleBackground component renders an animated canvas of drifting particles behind every page. A RuneCircle SVG decoration rotates slowly on the home page. The Cursor component replaces the system cursor entirely with an amber dot that trails sparkles and bursts into a rune sigil on click.
Persona: Valerius Doom — The template ships with a fictional developer persona — Valerius Doom, Arcane Engineer of the Digital Realm — complete with placeholder projects, skills, and a dramatic bio. This persona is entirely placeholder content. It exists to demonstrate the template’s layout and tone, not to be shipped as-is.
What’s Inside
v-doom ships with six fully-built pages, each pre-connected to the router and animated:The Circle
Home page with the animated RuneCircle, hero text, and an introduction to the persona.
Practitioner
About page featuring a bio, portrait placeholder, and background lore.
Spells Cast
Projects gallery with TarotCard-style animated project cards.
Cauldron
Skills page with categorized technology icons and proficiency indicators.
Pacts
Experience timeline displaying work history in a vertical scroll layout.
Summoning
Contact page with a form and social links for visitor outreach.
This is a template — all content is placeholder. Every name, bio, project title, skill, and experience entry shown in the live demo represents the fictional Valerius Doom persona. Before deploying, replace all placeholder content in the page components with your own information. See the Persona Customization guide for a step-by-step walkthrough.