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.

Getting Magical Portfolio running on your local machine involves cloning the repository, installing its npm dependencies, and starting the Vite development server. The entire stack — React 18, Framer Motion, Tailwind CSS, and React Router v6 with hash routing — is wired up and ready to go out of the box.

​
Prerequisites

Before you begin, make sure the following tools are installed on your system:
  • Node.js ≥ 18 — Required for the Vite build toolchain and all npm scripts. Check with node -v.
  • npm ≥ 9 (or yarn / pnpm) — Used to install dependencies and run scripts. Check with npm -v.
  • Git — Used to clone the repository. Check with git --version.

​
Setup Steps

1

Clone the repository

Clone the Magical Portfolio repository from GitHub and navigate into the project directory:
git clone https://github.com/apursley2012/magical.git && cd magical
2

Install dependencies

Install all required packages. The project uses React 18, Framer Motion, Tailwind CSS, Lucide React, React Router v6, and Vite.
npm install
3

Start the development server

Launch the Vite development server with hot module replacement:
npm run dev
Vite will start and print output similar to:
  VITE  ready in 300 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
Open http://localhost:5173/ in your browser to see the portfolio.
4

Explore the app routes

Once the app is open, you’ll land on the animated home portal displaying six tarot-card-style navigation tiles. Click any card — or use the top navigation bar — to explore the pages:
RoutePage TitleDescription
/#/Home (Portal)Animated name reveal and navigation cards
/#/aboutThe ChronicleOrigins & biography sections
/#/projectsThe GrimoireFlip-card project gallery
/#/skillsAffinitiesRadial skill orbit diagram
/#/writingThe TomesAnimated bookshelf of writing entries
/#/case-studiesRitualsDeep-dive case study pages
/#/contactThe SummoningAnimated contact form
Magical Portfolio uses hash-based routing (React Router v6 HashRouter). All URLs will look like http://localhost:5173/#/about rather than http://localhost:5173/about. This is intentional — it allows the built dist/ folder to be deployed on any static file host (GitHub Pages, Netlify, etc.) without any server-side redirect configuration.

​
Folder Structure

After cloning, the project is a pre-built static bundle. The source is compiled — the key files are: 
magical/
├── index.html               # Entry HTML, mounts #root div, sets up hash routing
├── assets/
│   ├── main.js              # Compiled React app bundle (all pages + data)
│   ├── main.css             # Compiled Tailwind CSS (Google Fonts @import at top)
│   └── proxy.js             # Framer Motion & React vendor chunk
├── components/
│   ├── Navigation.js        # Top nav bar component (navItems array lives here)
│   ├── BackgroundEffects.js # Floating particle canvas & gradient orbs
│   ├── CustomCursor.js      # Custom magnetic cursor for pointer devices
│   └── Sigil.js             # Animated SVG sigil component (star/moon/alchemy/eye)
├── pages/
│   ├── Home.html            # Static page shell for hash route /
│   ├── About.html           # Static page shell for /#/about
│   ├── Projects.html        # Static page shell for /#/projects
│   ├── Skills.html          # Static page shell for /#/skills
│   ├── Writing.html         # Static page shell for /#/writing
│   ├── CaseStudies.html     # Static page shell for /#/case-studies
│   └── Contact.html         # Static page shell for /#/contact
├── useScreenInit.js         # React screen size utility hook
├── canvas.manifest.js       # Build manifest for static asset preloading
└── .nojekyll                # Prevents GitHub Pages from ignoring underscore files
Vite’s Hot Module Replacement (HMR) is active in development mode. When you edit JSX component logic or CSS utility classes in your source files, the browser updates the affected module in place — without a full page reload. This means animation states, scroll positions, and form inputs are preserved while you iterate on a component’s appearance.

Build docs developers (and LLMs) love

Get started for freeTalk to us