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 handles all navigation entirely in the browser using React Router v6. When a visitor clicks a link or types a URL directly, React Router intercepts the navigation, reads the path, and swaps the rendered page component without ever making a new HTTP request for an HTML document. This means transitions are instantaneous and Framer Motion’s exit and entrance animations play smoothly between pages. The router is initialised once at the application root, wrapped around the shared Layout component so that chrome elements like the navigation bar and cursor trail remain mounted and stable throughout every route change.

​
Route Table

PathComponentDescription
/HomePageAnimated hero landing
/aboutAboutPagePersonal bio and philosophy
/projectsProjectsPagePortfolio project cards
/skillsSkillsPageSkill constellation graph
/workWorkHistoryPageCareer timeline
/case-studiesCaseStudiesPageDeep-dive technical case studies
/blogBlogPageBlog post cards
/testimonialsTestimonialsPageTestimonial carousel
/contactContactPageContact form

​
Router Setup

The router is declared at the application root. BrowserRouter provides the routing context, Layout renders the persistent chrome, and the Routes block contains all nine Route declarations. React Router v6 matches routes exclusively by default, so only the first matching Route renders its element. 
<BrowserRouter>
  <Layout>
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
      <Route path="/projects" element={<ProjectsPage />} />
      <Route path="/skills" element={<SkillsPage />} />
      <Route path="/work" element={<WorkHistoryPage />} />
      <Route path="/case-studies" element={<CaseStudiesPage />} />
      <Route path="/blog" element={<BlogPage />} />
      <Route path="/contact" element={<ContactPage />} />
      <Route path="/testimonials" element={<TestimonialsPage />} />
    </Routes>
  </Layout>
</BrowserRouter>

​
Navigation

MoonPhaseNav is the primary navigation component rendered by Layout. It uses React Router’s built-in navigation primitives — either <Link> elements or the useNavigate hook — to trigger client-side route transitions. Because these are React Router navigations rather than native anchor tags pointing to separate HTML files, the browser never performs a full page reload. The current Layout stays mounted, CursorTrail and MoonPhaseNav remain visible and interactive, and only the content inside the <main> region is swapped out as Framer Motion plays the outgoing page’s exit animation and the incoming page’s entrance animation.

​
Adding a New Route

1

Create a new page component

Write a new React component — for example, GalleryPage — with its own layout, data arrays, and Framer Motion animations. Because all page data lives as const arrays in the source, define your content at the top of the file alongside the component.
2

Add a Route entry in the Routes block

Import your new component and add a <Route> entry inside the <Routes> block in the application root, choosing a URL path that follows the existing lowercase, hyphenated convention:
<Route path="/gallery" element={<GalleryPage />} />
3

Add a link in MoonPhaseNav

Open components/MoonPhaseNav.js and add a new navigation entry for the route. Follow the existing pattern — assign a moon-phase icon and a label — so the new page is reachable from the navigation bar on every page of the site.
BrowserRouter relies on the server delivering index.html for every URL path, not just /. Without this configuration, a visitor who navigates directly to https://your-site.com/projects (or refreshes on that page) will receive a 404 from the host instead of the React app. When deploying to Netlify, add a _redirects file containing /* /index.html 200. On Vercel, add a vercel.json with a rewrite rule that maps all paths to /index.html. Most other static hosts have an equivalent “SPA fallback” or “custom 404” setting that achieves the same result.

Build docs developers (and LLMs) love

Get started for freeTalk to us