Spooky is a Halloween-themed static developer portfolio template created by Alysha Pursley. It is designed for developers and creatives who want a portfolio with a bold, defined visual personality rather than a generic layout. The template ships as pre-built static files that can be published directly to GitHub Pages with no additional build step required. Under the hood, Spooky is powered by React 18, React Router DOM 6 for client-side routing, Tailwind CSS for styling, and Framer Motion for page transition animations. The project is compiled with Vite and output as self-contained static HTML, CSS, and JavaScript files — meaning deployment is as simple as pointing GitHub Pages at the repository root.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/spooky/llms.txt
Use this file to discover all available pages before exploring further.
Key features
Atmospheric personality
Every page shares a cohesive Halloween visual identity: a deep charcoal background, pumpkin-orange accents, bat-purple highlights, Creepster and Special Elite Google Fonts, and a suite of interactive atmospheric decorations that run across the entire site.
Zero-config GitHub Pages deployment
Upload the theme folder contents so
index.html sits at the repository root, enable GitHub Pages from Settings → Pages → Branch: main / Folder: root, and the site is live at https://<username>.github.io/<repo>/ with no build pipeline to configure.Nine portfolio pages
Spooky ships with nine fully structured portfolio pages covering home, biography, projects, skills, work history, case studies, writing, testimonials, and contact — plus a utility placeholder preview page. Every page shares the same Layout wrapper and Navigation component.
Halloween interactive components
The template includes a custom candle cursor, flickering light effects, cobweb corner decorations, a ghost mascot, a jump-scare spider with a toggle switch, and a swinging lantern — each woven into the pages that call for them alongside site-wide cursor and navigation behavior.
Design philosophy
Spooky is built around the idea that a portfolio site should have a recognizable visual identity — one that persists even after the placeholder content has been replaced with real biographical copy, projects, and experience. The Halloween theme is not a novelty overlay; it is the structural DNA of the layout, spacing, contrast ratios, color palette, and typography choices. To reinforce that identity, every page in the navigation carries a spooky alias instead of a plain label. Visitors do not see links called “Home” or “About” — they see:- The Porch — the homepage
- Meet the Resident — biography and background
- Rooms in the House — featured projects
- The Toolshed — skills and technologies
- The Family Tree — professional work history
- Ghost Stories — case studies and technical breakdowns
- Notes from the Attic — articles and long-form writing
- Whispers in the Hall — testimonials and feedback
- Leave a Note — contact details
components/Navigation.js and appear in the slide-in navigation menu that opens from the top-right corner of every page.
Technology stack
| Technology | Role |
|---|---|
| React 18 | UI component rendering and state management |
| React Router DOM 6 | Client-side routing between portfolio pages |
| Framer Motion | Page transition animations (fade-to-black between routes) |
| Tailwind CSS | Utility-first styling, responsive layout, and custom theme tokens |
| Lucide React | Icon set used throughout the navigation and UI components |
| Creepster (Google Fonts) | Display font for headings and spooky labels (font-spooky) |
| Special Elite (Google Fonts) | Typewriter-style body font for content (font-typewriter) |
| Vite | Build tool that compiles the React source into static output files |
Repository structure
The repository is organized into a small number of top-level directories alongside the HTML entry files:assets/— The compiled JavaScript bundle (main.js), main stylesheet (main.css), and shared utility scripts includingJumpScareContext.js,createLucideIcon.js,index.js, andproxy.js.components/— Individual React component files:Layout.js,Navigation.js,CandleCursor.js,FlickeringLights.js,CobwebCorner.js,GhostMascot.js,JumpScareSpider.js,JumpScareToggle.js, andSwingingLantern.js.images/— Static image assets, including ascreenshots/sub-folder for preview images.- HTML entry files — One
.htmlfile per portfolio page (index.html,about.html,projects.html, etc.), each referencing the shared compiled assets.
Ready to get started? Head to the Quickstart page for step-by-step instructions on cloning the repository, personalizing the placeholder content, and deploying to GitHub Pages.