Full Moon is a developer portfolio built with React 18 and Vite, styled around a witch and dark-fantasy aesthetic. Every visual detail — from theDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/full-moon/llms.txt
Use this file to discover all available pages before exploring further.
midnight-base (#0a0e1a) background and witch-teal-glow (#2dd4bf) accents to the animated full-moon SVG, drifting fog overlay, and twinkling starfield — is designed to create an atmospheric, immersive experience. The landing page greets visitors with the tagline “I cast useEffect() under the full moon.” and a call-to-action button labelled “Cross the Threshold” that navigates to the About page. The site ships as a fully pre-built Vite output ready for static hosting, including GitHub Pages.
Key Features
Custom Theme
A hand-crafted Tailwind CSS palette built around
midnight-base, witch-teal-glow, witch-teal-bright, and witch-teal-dark. Headings use Cinzel Decorative for a ceremonial serif weight; body text uses Cormorant Garamond for an elegant, literary feel. Both fonts load from Google Fonts via main.css.Animated Components
Framer Motion powers page-level transitions (opacity fade with a 0.5 s duration defined in
Layout.js) as well as individual component animations throughout the site. The custom cursor (Cursor.js) and the full-moon SVG (SVGs.js) also carry their own motion behaviour.Hash Routing
The site uses hash-based client-side routing so that every page is a static HTML shell. Each shell sets
window.__STATIC_PAGE_ROUTE__ and redirects window.location.hash before React mounts, allowing the app to render the correct route without a server-side router.Atmospheric Effects
A fixed starfield layer (
starfield CSS class) and a fog overlay (bg-fog CSS class) sit beneath all content at z-index: 0. The starfield is built entirely from radial-gradient CSS; the fog pulses with a 30-second fog-drift keyframe animation. Neither layer captures pointer events.Who Is This For?
Full Moon is intended for developers who want to fork a portfolio that stands apart visually. If you are comfortable with React and Tailwind and want a starting point with dramatic styling already baked in — custom colour tokens, atmospheric backgrounds, component-level Framer Motion animations, and a typography system built around display fonts — this project gives you a deployable baseline. Designers and creative-technologists who work with dark or fantastical aesthetics will also find the colour palette and SVG library (SVGs.js contains Moon, Sigil, and Candle SVGs) directly useful.
Because the repo is pre-built, you can serve it immediately without installing any dependencies. Deeper customisation — changing routes, editing component logic, or modifying the Tailwind config — requires access to the original Vite source, which is not included.
Tech Stack
| Technology | Role |
|---|---|
| React 18 | UI framework; rendered into <div id="root"> on each HTML shell |
| Vite | Build tool; produces main.js, proxy.js (vendor chunk), and main.css |
| Framer Motion | Page transition and component animation (bundled in proxy.js) |
| Tailwind CSS | Utility-class styling with custom tokens compiled into main.css |
| Cinzel Decorative | font-heading — display font for all h1–h6 elements |
| Cormorant Garamond | font-body — body serif loaded at weights 400 and 600 (normal and italic) and weight 700 (normal only) |
| Hash-based routing | window.location.hash + window.__STATIC_PAGE_ROUTE__ replace a server router |
| Static deployment | Zero-server hosting; compatible with GitHub Pages, Netlify, Vercel, and any CDN |
The repository ships as pre-built Vite output only — there is no
src/ directory, no tailwind.config.js, and no vite.config.js included. The JavaScript files in components/ and assets/ are minified bundles. To modify component logic, routing, or the Tailwind configuration you will need access to the original source project and a Node.js development environment.