Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/digital-alchemy/llms.txt

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

Digital Alchemy is a client-side Single Page Application that uses React Router v6 with HashRouter for navigation. All route definitions live in assets/main.js, where the router is bootstrapped and the entire component tree is mounted into #root.

​
Why HashRouter?

GitHub Pages serves static files only — there is no server to intercept requests and rewrite URLs to index.html. If the app used BrowserRouter, navigating directly to https://example.github.io/digital-alchemy/about would return a 404 because no about/index.html file exists on disk. HashRouter sidesteps this entirely by appending all paths to the URL fragment (the # portion), which is never sent to the server:
Browser address barWhat the server sees
https://user.github.io/#/abouthttps://user.github.io/ → serves index.html ✅
https://user.github.io/abouthttps://user.github.io/about → 404 ❌
The HashRouter is imported as H from Layout.js and wraps the entire app in main.js.
For direct URL navigation (e.g. bookmarks and sharing links) a complementary strategy using per-route static HTML files is used. See Static Pages for details.

​
Route table

PathPage nameComponent
/The Sanctum (Home)HomeView
/aboutThe WitchAboutView
/projectsSummoningsProjectsView
/skillsFamiliar LanguagesSkillsView
/workLineageWorkView
/case-studiesGrimoireCaseStudiesView
/case-studies/:slugGrimoire (detail)CaseStudiesView
/articlesForbidden KnowledgeArticlesView
/articles/:slugForbidden Knowledge (detail)ArticlesView
/testimonialsThe CovenTestimonialsView
/contactCast a MessageContactView

​
Dynamic routes

Two routes accept a :slug parameter for individual detail pages:
  • /case-studies/:slug — renders a specific case study. The CaseStudiesView component reads the slug from useParams() and conditionally renders the matching content.
  • /articles/:slug — renders a specific article. The ArticlesView component follows the same pattern.
Both detail routes reuse their respective list-view component rather than a separate component, keeping the component tree lean.

​
Route definitions (JSX)

import { HashRouter as H, Routes, Route } from 'react-router-dom';

<H>
  <Layout>
    <Routes>
      <Route path="/"                    element={<HomeView />}         />
      <Route path="/about"               element={<AboutView />}        />
      <Route path="/projects"            element={<ProjectsView />}     />
      <Route path="/skills"              element={<SkillsView />}       />
      <Route path="/work"                element={<WorkView />}         />
      <Route path="/case-studies"        element={<CaseStudiesView />}  />
      <Route path="/case-studies/:slug"  element={<CaseStudiesView />}  />
      <Route path="/articles"            element={<ArticlesView />}     />
      <Route path="/articles/:slug"      element={<ArticlesView />}     />
      <Route path="/testimonials"        element={<TestimonialsView />} />
      <Route path="/contact"             element={<ContactView />}      />
    </Routes>
  </Layout>
</H>
Because Layout wraps <Routes>, the persistent header, footer, and CursorWisp are rendered on every route without any per-route setup required.

​
Adding a new route

1

Create the view component

Add a new view file under components/ or inline in main.js. Follow the existing pattern of exporting a default React component.
2

Register the route

Import your component in assets/main.js and add a <Route> element inside <Routes>:
<Route path="/new-page" element={<NewPageView />} />
3

Add a nav item

Add an entry to the navItems array in components/Layout.js so the new route appears in the header navigation.
4

Create a static HTML page

Add a corresponding file in pages/ so the route works when navigated to directly. See Static Pages for the exact template to use.

Build docs developers (and LLMs) love

Get started for freeTalk to us