Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/magical/llms.txt

Use this file to discover all available pages before exploring further.

Magical Portfolio is a production-ready, single-page application template for developers who refuse to blend in. Built for Elara Nightshade — Software Alchemist & Digital Weaver — it transforms a personal developer site into an immersive experience wrapped in a deep-violet, arcane aesthetic. Every page transition, hover state, and background element is animated via Framer Motion, while a custom cursor, floating sigil components, and a particle-laced canvas background reinforce the mystical identity. If you want a portfolio that feels like stepping into a spellbook rather than scrolling a résumé, Magical Portfolio is your incantation.

​
Tech Stack

React 18

Component-based UI with concurrent rendering. All pages are functional components using hooks throughout.

React Router v6

Hash-based client-side routing (#/) so the entire SPA is served from a single HTML file, with no server-side routing required.

Framer Motion

Powers every entrance animation, page transition, stagger effect, and interactive hover state across all seven routes.

Tailwind CSS

Utility-first styling extended with a custom mystic-* color palette — violet, teal, mint, and near-black tokens — defined in tailwind.config.js.

Lucide React

Consistent icon set used throughout the navigation, skills grid, project cards, and contact form.

Vite

Lightning-fast build tool and dev server. Builds produce a dist/ output including per-route HTML shims for static hosting.

​
Site Structure

Magical Portfolio maps each standard portfolio section to an arcane alias, giving the navigation its distinctive character.
RouteArcane NamePurpose
/The PortalHero landing page — introduces Elara Nightshade with animated title and call-to-action
/aboutThe ChronicleBiography, background, and the story behind the “Software Alchemist” persona
/projectsThe GrimoireShowcase of featured projects with animated cards, tags, and live/repo links
/skillsAffinitiesVisual skills grid organized by discipline, rendered with glowing proficiency indicators
/writingTomesBlog-style writing index — articles, essays, and technical deep-dives
/case-studiesRitualsLong-form case studies walking through problem, process, and outcome for key projects
/contactThe SummoningContact form and social links, styled as a ritual invocation panel
Each route has a corresponding static HTML shim in the pages/ directory (e.g. pages/About.html, pages/Projects.html). These shims set window.__STATIC_PAGE_ROUTE__ and redirect to the correct hash fragment, so the app can be deployed on any static host without server-side routing configuration.

​
Key Design Decisions

Hash-based routing for zero-config static hosting React Router is configured to use HashRouter, meaning all navigation lives in the URL fragment (#/about, #/projects, etc.). This means the app can be deployed to GitHub Pages, Netlify, Vercel, or any CDN that serves static files without any redirect rules. Per-route HTML shims The pages/ directory contains one .html file per route. Each shim preloads the same JS/CSS bundle and injects the correct __STATIC_PAGE_ROUTE__ value so deep links and page refreshes resolve correctly when visitors land on a specific URL. Tailwind mystic-* custom tokens Rather than scattering raw hex values throughout the codebase, the design system is anchored to semantic tokens:
TokenHexUsage
mystic-violet#a855f7Primary accent — glows, borders, active states
mystic-teal#2dd4bfSecondary accent — code highlights, hover states
mystic-mint#a7f3d0Tertiary accent — selected text, subtle glows
mystic-950#0a0612Page background — deepest near-black
mystic-900#14091fCard and surface backgrounds
mystic-800#2d1b4eBorders, dividers, elevated surfaces
Framer Motion for all animations There are no raw CSS keyframe animations driving content — all entrance sequences, stagger groups, scroll reveals, and interactive micro-animations run through Framer Motion’s motion.* components and AnimatePresence. This keeps animation logic co-located with component markup and makes timing easy to tune. Three-font typographic hierarchy
  • Cormorant Garamond (serif) — headings and display text; reinforces the arcane editorial feel
  • Inter (sans-serif) — body copy and UI labels; keeps readable at small sizes
  • JetBrains Mono (monospace) — code snippets and technical labels

​
Project Layout

magical/
├── index.html                  # Root HTML shell (serves the / route)
├── useScreenInit.js            # Screen/viewport initialization hook
├── canvas.manifest.js          # Vite asset manifest
│
├── assets/
│   ├── main.js                 # Compiled JS bundle entry point
│   ├── main.css                # Compiled Tailwind CSS (includes mystic-* tokens)
│   └── proxy.js                # Vite module proxy shim
│
├── components/
│   ├── Navigation.js           # Top navigation bar with all seven route links
│   ├── BackgroundEffects.js    # Animated canvas particle / glow background
│   ├── CustomCursor.js         # Branded custom mouse cursor
│   └── Sigil.js                # Decorative SVG sigil — variants: star, moon, alchemy, eye
│
└── pages/
    ├── Home.html               # Static shim → #/
    ├── About.html              # Static shim → #/about
    ├── Projects.html           # Static shim → #/projects
    ├── Skills.html             # Static shim → #/skills
    ├── Writing.html            # Static shim → #/writing
    ├── CaseStudies.html        # Static shim → #/case-studies
    └── Contact.html            # Static shim → #/contact
The Sigil component accepts a type prop with four choices — star, moon, alchemy, and eye — making it easy to scatter thematic decorative elements across different pages without duplicating SVG markup.

Build docs developers (and LLMs) love

Get started for freeTalk to us