Magical Portfolio is a fully animated personal developer portfolio site built with React 18, React Router, Framer Motion, and Tailwind CSS. It features a rich mystical aesthetic complete with animated SVG sigils, a spring-physics custom cursor, floating particle backgrounds, and immersive page transitions — all deployed as a static SPA with pre-rendered HTML entry points for each route.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.
Introduction
Learn what the Magical Portfolio is, its tech stack, and how it is structured.
Quickstart
Clone the repo, install dependencies, and run the dev server in minutes.
Architecture
Understand the routing model, component hierarchy, and build system.
Components
Explore every reusable component — Navigation, Sigil, CustomCursor, and more.
What’s Inside
The portfolio is organized around seven thematic routes, each named with its own arcane identity:Portal
The home page featuring 3D tarot-style navigation cards.
Chronicle
The About page with a scroll-progress timeline origin story.
Grimoire
The Projects page with 3D flip-card project showcase.
Affinities
The Skills page with an interactive orbital visualization.
Tomes
The Writing page with an animated bookshelf UI.
Rituals
Deep-dive case studies with structured problem/solution layouts.
Key Features
Animated Sigils
SVG sigil component with four variants — star, moon, alchemy, and eye — animated via Framer Motion path drawing.
Custom Cursor
Spring-physics cursor that responds to interactive elements with scale and glow effects.
Background Effects
40 randomly positioned floating particles with glow and drift animations.
Deployment Guide
Learn how to deploy the static output to GitHub Pages, Netlify, or Vercel.
Guides
Adding Projects
Add new project cards to the Grimoire page by editing the projects array.
Customization
Swap colors, fonts, sigil types, and content to make the portfolio your own.
Local Setup
Set up the full development environment with Vite and Tailwind.
Static Export
Build and preview the static output before deploying.