Skip to main content

Documentation Index

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

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

Sorcerer is a mystical-themed single-page portfolio application built on React 18 and powered by Vite. The entire application ships as a handful of pre-built static assets — no server, no database, no API. The browser loads index.html, which bootstraps the React runtime and hands control to React Router, which then renders the appropriate page component inside a shared Layout wrapper. Framer Motion drives every entrance animation, hover effect, and page transition, while Tailwind CSS (compiled via PostCSS) handles all visual styling through a custom set of mystical color tokens.

​
Rendering Pipeline

1

index.html is served

The browser receives index.html — the single entry point for the entire application. It contains a <div id="root"> mount target and a <script type="module"> tag that loads assets/main.js.
2

main.js mounts the React app

assets/main.js is the fully bundled React application. It calls ReactDOM.createRoot(document.getElementById('root')).render(...), attaching the React component tree to the DOM.
3

BrowserRouter initialises client-side routing

At the top of the component tree sits BrowserRouter, which reads the current URL and makes it available to all descendant route-aware components without triggering a server round-trip.
4

Layout wraps all content

Every page is rendered inside the Layout component, which provides the radial gradient background, the CursorTrail particle effect, the MoonPhaseNav navigation bar, a <main> content region, and the site footer.
5

Page component renders

React Router matches the current path against its nine Route entries and renders the corresponding page component — HomePage, AboutPage, ProjectsPage, and so on — inside the Layout’s <main> slot.

​
File Structure

sorcerer/
├── index.html          # SPA entry point — mounts React at <div id="root">
├── assets/
│   ├── main.js         # Bundled React app (all pages + logic + data)
│   ├── main.css        # Compiled Tailwind CSS
│   ├── jsx-runtime.js  # React JSX runtime
│   └── proxy.js        # Framer Motion + React Router bundle
├── components/
│   ├── Layout.js       # Shared layout wrapper
│   ├── MoonPhaseNav.js # Navigation component
│   ├── CursorTrail.js  # Custom cursor particle effect
│   └── CandleDivider.js# Decorative section divider
└── pages/              # Static HTML page stubs (not used by the React app)

​
Build System

Sorcerer uses Vite as its build tool and development server. Vite leverages native ES modules in the browser during development, giving near-instant hot module replacement. For production, it bundles the entire application — components, pages, data arrays, and third-party libraries — into the optimised static files under assets/.
CommandEffect
npm run devStarts Vite’s dev server with HMR at http://localhost:5173
npm run buildCompiles and tree-shakes everything into assets/main.js and assets/main.css
npm run previewServes the production build locally for final verification
Tailwind CSS is processed by PostCSS during both dev and build. Custom color tokens (midnight-base, midnight-dark, moonlight-silver, turquoise-glow, turquoise-light, velvet-purple) are defined in tailwind.config.js and compiled into assets/main.css — only the utility classes actually used in the source are included in the final bundle.

​
Data Flow

Sorcerer contains no API calls and no database. All content — portfolio projects, skill nodes, work history roles, blog posts, testimonials, and case studies — is defined as JavaScript const arrays inside the source files and compiled into assets/main.js at build time. In the compiled bundle these arrays appear under their minified names (gt for projects, wt for work history, qt for blog posts, Ct for case studies, B and bt for skill nodes and edges, and C for testimonials). Editing the minified bundle directly is strongly discouraged — see the note below. Because everything is inlined at build time, the deployed site is purely static and can be hosted on any CDN or static host without a backend.

​
Key Dependencies

DependencyVersionRole
React18UI component model and rendering engine
React Routerv6Client-side routing via BrowserRouter and Routes
Framer MotionlatestPage transitions, scroll animations, hover effects
Tailwind CSSv3Utility-first styling with custom mystical color tokens
VitelatestDev server, HMR, and production bundler
The file assets/main.js is a compiled, minified bundle — it is not human-readable source code. Editing it directly is strongly discouraged, as any manual changes will be overwritten the next time npm run build is run and the minified format makes precise edits error-prone. To make changes, clone the development repository, edit the source files, and run npm run dev or npm run build.

Build docs developers (and LLMs) love

Get started for freeTalk to us