Get Started with Magical Portfolio

In this guide you will clone the Magical Portfolio repository, install its dependencies, and launch the Vite development server. By the end you will have a fully animated, dark-themed React portfolio running locally at http://localhost:5173 — ready to explore all seven arcane routes and begin customising the content for your own identity.

Clone the repository

Clone the Magical Portfolio source to your local machine and navigate into the project directory.

git clone https://github.com/apursley2012/magical.git
cd magical

Install dependencies

Install all required packages. Choose whichever package manager you prefer — all three produce an equivalent node_modules tree.

npm install

The key dependencies that will be installed include:

react and react-dom (v18)
react-router-dom (v6)
framer-motion
lucide-react
tailwindcss, autoprefixer, postcss
vite and @vitejs/plugin-react

Start the dev server

Launch the Vite development server with the standard dev script.

npm run dev

Alternatively, if you have Vite installed globally or via npx:

npx vite

Vite will print output similar to the following:

  VITE v4.x.x  ready in 300ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Open your browser and visit http://localhost:5173 to see The Portal — Elara Nightshade’s animated hero page — come to life.

Vite ships with Hot Module Replacement (HMR) enabled by default. Any change you save to a component, stylesheet, or configuration file is reflected in the browser instantly — no full page reload needed. This makes it fast to iterate on animations, color tokens, and layout without losing your scroll position or component state.

Explore the routes

The app uses hash-based routing, so every route is accessible from the same running dev server. Navigate directly to any of the seven arcane sections by appending the hash fragment to http://localhost:5173:

Hash URL	Arcane Name	Section
`http://localhost:5173/#/`	The Portal	Hero / landing
`http://localhost:5173/#/about`	The Chronicle	About & biography
`http://localhost:5173/#/projects`	The Grimoire	Projects showcase
`http://localhost:5173/#/skills`	Affinities	Skills grid
`http://localhost:5173/#/writing`	Tomes	Writing & articles
`http://localhost:5173/#/case-studies`	Rituals	Case studies
`http://localhost:5173/#/contact`	The Summoning	Contact form

Because Magical Portfolio uses hash routing, the #/ fragment is what tells React Router which view to render — not the path before the #. This means the app works correctly when deployed to any static file host (GitHub Pages, Netlify, Vercel, S3, etc.) with zero server-side redirect configuration. When you refresh the browser on any route, the host serves the same index.html and the hash fragment drives the navigation.

Build for production

When you are ready to deploy, run the Vite production build:

npm run build

Vite compiles and bundles the application into the dist/ directory:

dist/
├── index.html          # Root HTML shell
├── assets/
│   ├── main.js         # Minified JS bundle
│   ├── main.css        # Minified Tailwind CSS
│   └── proxy.js        # Module proxy shim
└── pages/
    ├── Home.html
    ├── About.html
    ├── Projects.html
    ├── Skills.html
    ├── Writing.html
    ├── CaseStudies.html
    └── Contact.html

To preview the production build locally before deploying:

npm run preview

This serves the dist/ output at http://localhost:4173 so you can verify the build behaves exactly as expected before pushing to your host.

Get Started

Architecture

Get Started with Magical Portfolio

Build docs developers (and LLMs) love

Get Started

Architecture

Documentation Index

Build docs developers (and LLMs) love