DevHaunt is a fully animated, single-page React portfolio template dressed for Halloween night. Every page, color, font choice, and micro-interaction leans into a haunted-house narrative — from the fog that drifts along the bottom of every screen to the custom cursor trail that replaces the system pointer. It ships ready to deploy on any static host and is designed to be personalized in minutes by editing the plain JavaScript arrays that hold your content.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-haunt/llms.txt
Use this file to discover all available pages before exploring further.
Tech stack
DevHaunt is built on a modern, well-supported toolchain that you may already know:| Layer | Technology |
|---|---|
| UI library | React 18 |
| Build tool | Vite |
| Client-side routing | React Router v6 |
| Animation | Framer Motion |
| Utility CSS | Tailwind CSS |
| Icon set | Lucide React |
Design tokens
All colors are defined as named Tailwind tokens so you reference them by feel, not by hex code.| Token | Hex | Use |
|---|---|---|
night | #0b3a44 | Page background, nav backdrop |
pumpkin | #ff7a1a | Primary accent, headings, CTA buttons |
ghost | #f4f1ea | Body text, borders, fog layer |
tombstone | #5a6268 | Card borders, muted UI chrome |
tombstone-dark | #3a4044 | Deeper card backgrounds |
tombstone-light | #7a8288 | Subtle separators |
wood | #3e2723 | Blog shelf, decorative surfaces |
Custom fonts
Three typefaces work together to reinforce the theme without sacrificing readability:- Caveat Brush (
font-spooky) — spooky, hand-lettered display font used for all page headings and the navigation labels. - Inter (default body) — clean sans-serif for all paragraph text and UI labels, keeping the content legible.
- JetBrains Mono (
font-code) — monospaced font used for code snippets and small metadata labels throughout the UI.
@import declaration at the top of assets/main.css.
The nine pages
DevHaunt ships with nine themed pages, each named after a Halloween concept rather than a generic portfolio label:| Route | Label | Halloween concept |
|---|---|---|
/ | The Porch | Landing / hero |
/about | Trick or Treat | Developer bio |
/projects | Graveyard | Project showcase |
/skills | Pumpkin Patch | Skills grid |
/work | Hall of Doors | Work history |
/case-studies | Evidence | Case studies |
/blog | Tales | Blog / writing |
/testimonials | Spirits Speak | Testimonials |
/contact | Ring Doorbell | Contact form |
Ambient effects
Three always-on ambient components layer atmospheric detail behind every page:FogLayer— a pair of SVG path layers fixed to the bottom of the viewport that drift horizontally on an infinite CSS animation, creating rolling ground-fog.BatSwarm— a cluster of animated bats that scatter across the background.CursorTrail— replaces the system cursor entirely (the globalcursor: nonerule inmain.css) with a glowing pumpkin-orange trail that follows the pointer.
All three ambient components are rendered inside the
Layout wrapper, so they appear on every route automatically. You can disable any of them by removing the corresponding <ComponentName /> line from components/Layout.js.Where to go next
Quickstart
Clone the repo, serve the pre-built static files, and start customizing your portfolio in minutes.
Architecture
Understand how the SPA, static page files, and component hierarchy fit together.
Routing
A full route table and step-by-step guide to adding new pages.
Styling
Tailwind design tokens, custom fonts, and every CSS animation explained.