Skip to main content

Documentation Index

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

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

The Layout component is the invisible scaffolding that holds every page of The Craft together. It establishes the full-screen dark viewport, mounts the shared navigation and cursor effect, and provides the <Outlet /> slot where every routed page renders. Because it lives at the top of the React Router hierarchy, any element placed inside Layout is guaranteed to appear on every page of the portfolio — making it the right home for chrome that must never flicker or re-mount during route transitions.

​
What Layout Renders

Layout returns a single root div that fills the screen and layers several elements on top of each other using z-index stacking.

Ambient Blur Blobs

Two fixed, pointer-events-none circles sit at z-0 behind all content. The first is a teal (bg-spell/5) blob at the top-left, animated with animate-pulse-glow. The second is a bg-midnight-lighter blob at the bottom-right. Both are blurred with blur-[120px] / blur-[100px] to create the soft, supernatural atmosphere of the grimoire.

CursorTrail

The <CursorTrail /> component is rendered above the blobs but below all page content at z-[9999]. It attaches to window mouse events and renders glowing motion.div particles inside a fixed, pointer-events-none overlay so it never interferes with clicks.

MoonPhaseNav

The <MoonPhaseNav /> sidebar renders as a fixed bottom bar on mobile and a fixed left-side vertical bar on desktop. It appears above the blobs but below the <main> content area.

Main Content Area

A <main> element at relative z-10 hosts the React Router <Outlet />, which renders whichever page component matches the current URL. It spans the full min-h-screen and receives responsive padding to clear the navigation bar.

​
Fixed Footer

A fixed <footer> sits in the bottom-right corner at z-40 and is hidden on mobile (hidden md:block). It renders the flavour text: “Brewed with React, bitterness, and bay leaves.” in the cursive grimoire font at 40% parchment opacity. Because the footer has pointer-events-none, it never accidentally captures clicks from page content beneath it.

​
Responsive Behavior

The <main> element uses responsive padding to ensure page content is never obscured by the navigation bar, regardless of screen size.
BreakpointPadding AppliedWhy
Mobile (default)pb-24Clears the bottom nav bar that floats above the page
Desktop (md and up)pb-0 pl-24Clears the left-side vertical nav bar; removes bottom padding
The pb-24 / pl-24 values match the physical footprint of the MoonPhaseNav bar at each breakpoint. If you resize the nav, update these padding values in Layout to match.

​
Usage in Routing

Layout is designed to be used as the element prop of a parent <Route> in React Router v6. All page routes are nested inside it as children, ensuring every page is wrapped in the shared shell automatically. 
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { L as Layout } from './components/Layout';
import { Home } from './pages/Home';
import { About } from './pages/About';

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          {/* ... other routes */}
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
When React Router matches a nested route, it renders the matched page component in place of the <Outlet /> inside Layout. The ambient blobs, cursor trail, and nav bar remain mounted and unchanged — only the page content swaps.

​
Props

Layout accepts no props. It is a self-contained, fixed shell that reads nothing from the outside world. All configuration (nav items, cursor behavior, footer text) is defined internally.
Because Layout has no props, it is safe to use directly as a JSX element in the element prop of a <Route>: element={<Layout />}. No additional configuration is needed.

Build docs developers (and LLMs) love

Get started for freeTalk to us