Skip to main content

Documentation Index

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

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

Systems Witch ships with seven routes out of the box (/, /about, /projects, /skills, /testimonials, /articles, /contact), but the React Router + hash-based routing architecture makes extending it with new pages straightforward. Each new route needs a page component, a route registration, and — if you want direct deep-link access — a corresponding HTML shell file. Follow the steps below to add a new page end-to-end.
1

Create the page component

Add a new React component to your source file. All existing page components follow the same structural pattern: a PageTransition wrapper (for Framer Motion enter/exit animations), a page <header> with a SectionSigil icon and a GlitchHeading title, and a <div> containing the page body.
const GalleryView = () => (
  <PageTransition>
    <div className="space-y-12">
      <header className="flex items-center gap-4 border-b border-graphite pb-6">
        <SectionSigil />
        <GlitchHeading text="~/gallery" as="h1" className="text-3xl" />
      </header>
      {/* your content here */}
    </div>
  </PageTransition>
);
The ~/route path convention in text="~/gallery" is purely cosmetic — it matches the filesystem-browser aesthetic used across all existing page titles.
2

Register the route

Open assets/main.js in your source project and find the <Route path="/"> parent element inside the App component. Add a new <Route> entry as a child, alongside the existing routes:
<Route path="gallery" element={<GalleryView />} />
The full router structure after adding the new route will look like:
<Route path="/" element={<AppShell />}>
  <Route index element={<HomeView />} />
  <Route path="about" element={<AboutView />} />
  <Route path="projects" element={<ProjectsView />} />
  <Route path="skills" element={<SkillsView />} />
  <Route path="testimonials" element={<TestimonialsView />} />
  <Route path="articles" element={<ArticlesView />} />
  <Route path="contact" element={<ContactView />} />
  <Route path="gallery" element={<GalleryView />} />
</Route>
3

Create the HTML shell

Copy an existing shell file — pages/About.html is a good template — and save it as pages/Gallery.html. Update two values inside it:
  1. The <title> tag: change About | systems-witch to Gallery | systems-witch.
  2. The window.__STATIC_PAGE_ROUTE__ value and the hash redirect target: change /about to /gallery.
The complete <script> block should read:
pages/Gallery.html
<script>
  window.__STATIC_PAGE_ROUTE__ = "/gallery";
  (function () {
    if (!window.location.hash || window.location.hash === "#") {
      window.location.replace(
        window.location.pathname +
        window.location.search +
        "#/gallery"
      );
    }
  })();
</script>
This script fires before React mounts and ensures that anyone landing directly on yoursite.com/pages/Gallery.html is immediately redirected to the correct hash route (#/gallery) so React Router picks up the right page.Also update the asset paths in the shell’s <head>: pages/About.html references ../assets/main.js (one directory up), so pages/Gallery.html should use the same relative paths.
4

Add to FilesystemNav

The FilesystemNav component renders the left-hand sidebar navigation. Open your source file and find the FilesystemNav component — it contains a list of navigation links styled as filesystem paths. Add your new route to the list, following the ~/route naming convention used by the existing entries:
<NavLink to="/gallery">~/gallery</NavLink>
Place it in whatever position in the list makes sense for your information architecture. After rebuilding, the new link will appear in the sidebar on all pages.
5

Rebuild

Once all four changes above are in place, compile the updated source into the dist/ output:
npm run build
This regenerates assets/main.js (with your new component and route) and assets/main.css. Copy the updated dist/ contents and your new pages/Gallery.html shell to your deployment target.
Keep new page components defined in the same source file as the existing ones (or imported into it) so the single assets/main.js bundle remains self-contained. The static deployment model has no dynamic module loading — everything must be present in the bundle at build time.
The pages/*.html shell files are only required if you want direct deep-link access — for example, if a user navigates straight to yoursite.com/pages/Gallery.html or if your hosting platform serves sub-paths directly. If all users enter the site through index.html (the root) and navigate from there, the HTML shell is entirely optional.

Build docs developers (and LLMs) love

Get started for freeTalk to us