The Home page is the first impression of the Full Moon portfolio — a dark, atmospheric landing experience built entirely with React, Framer Motion, and Tailwind CSS. Visitors arrive to an immersive scene dominated by a softly glowing moon, a dramatic developer title, and a single call-to-action that invites them to “Cross the Threshold” into the rest of the portfolio.Documentation 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.
Route & Static Shell
The Home page is served from the rootindex.html file. Unlike the other page shells, index.html does not set window.__STATIC_PAGE_ROUTE__ — the React app defaults to the / (home) route when that global is absent. It loads assets/main.js as the app entry point and includes <link rel="modulepreload"> hints for all component chunks.
All other pages in this portfolio (under
pages/) do set window.__STATIC_PAGE_ROUTE__ and update window.location.hash via an inline script before React mounts. The root index.html is the only shell that skips this step and relies on the React app’s default route.Visual Design
The page uses amidnight-base (#0a0e1a) background — a near-black deep navy — with all accent elements rendered in the witch-teal palette. The layout is vertically centered and occupies the full viewport height.
The Moon SVG
A customMoonSVG component renders a full-moon shape at 600 × 600 px. It is decorative rather than interactive, sitting behind the headline content at reduced opacity.
| Property | Value |
|---|---|
| Component | MoonSVG (full mode) |
| Dimensions | 600 × 600 px |
| Opacity | 20% (opacity-20) |
| Color | witch-teal-dark (#0e3a3a) |
| Animation | Rises from y: 100 → y: 0 on mount |
| Z-index | Behind all text content |
Entrance Animation Sequence
All visible elements animate in sequentially using Framer Motion’sinitial / animate / transition props with staggered delays.
Moon Rises
The
MoonSVG begins at y: 100, opacity: 0 and transitions to y: 0, opacity: 0.2 over approximately 1.2 seconds using an ease-out curve. It renders behind the text layer.Heading Appears Letter by Letter
The heading
"The Developer" is split into individual characters. Each letter animates in from opacity: 0, y: 20 to opacity: 1, y: 0 with a small staggered delay between each character, producing a typewriter-like reveal effect.Tagline Fades In
The tagline
"I cast \useEffect()` under the full moon.”fades in as a single block after the heading animation completes. The inline code element ``useEffect()`` is styled distinctly using thewitch-teal-bright` color.UI Text
| Element | Text |
|---|---|
| Page heading | "The Developer" |
| Tagline | "I cast \useEffect()` under the full moon.”` |
| CTA button (idle) | "Cross the Threshold" |
| CTA button (loading) | "Casting..." |
CTA Button Behavior
The"Cross the Threshold" button is the primary call-to-action on the page. Clicking it triggers a short transition state before navigating to the /about route.
| State | Label | Behavior |
|---|---|---|
| Idle | "Cross the Threshold" | Awaiting user interaction |
| Loading | "Casting..." | Brief animation plays; routing to /about in progress |
| Complete | — | Hash updates to #/about; About page renders |
Typography
All heading text uses thefont-heading class, which maps to Cinzel Decorative — a high-contrast serif with a gothic, inscribed feel. Body and tagline text uses font-body, mapped to Cormorant Garamond, an elegant old-style serif that reinforces the arcane atmosphere.
Color Reference
| Token | Hex | Usage |
|---|---|---|
midnight-base | #0a0e1a | Page background |
witch-teal-dark | #0e3a3a | Moon SVG fill |
witch-teal-glow | #2dd4bf | CTA border and text |
witch-teal-bright | #5eead4 | Inline code highlight in tagline |