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.

The Layout component is the structural backbone of Sorcerer’s single-page portfolio. It composes the fixed radial-gradient backdrop, the persistent CursorTrail, the MoonPhaseNav bar, and a mystical footer into a single cohesive shell that wraps every page of the application. Because it lives above the router, all globally visible chrome is mounted once and never unmounts during client-side navigation.

​
Usage

Layout is applied internally by the app’s root render — individual page components do not import or invoke it themselves. The router passes each page as children, and Layout renders it inside the <main> element. 
// main.jsx (app entry point)
import Layout from './components/Layout';

ReactDOM.render(
  <HashRouter>
    <Layout>
      <Routes>
        <Route path="/" element={<HomePage />} />
        {/* …remaining routes */}
      </Routes>
    </Layout>
  </HashRouter>,
  document.getElementById('root')
);

​
Props

​
children
ReactNode
required
The page content to render inside the <main> element. Children are elevated to z-10 so they always appear above the fixed gradient background layer. Any valid React node is accepted — typically a <Routes> tree.

​
Structure

The component builds a layered stacking context so that decorative elements never obscure page content:
LayerElementz-indexDescription
0Fixed radial gradient <div>z-0Full-viewport overlay; pointer-events-none so it never blocks clicks. Radiates velvet-purple/20 from the top, fading to midnight-base.
—<CursorTrail />z-50Fixed cat cursor follower; rendered outside <main> so it overlays everything.
—<MoonPhaseNav />inheritsTop navigation bar; also rendered outside <main> at document flow position.
10<main>z-10Flex column containing all page content and the footer.
The outermost wrapper carries bg-midnight-base (#0a1f2e), min-h-screen, and overflow-hidden so the gradient never produces a scrollbar. 
<div className="relative min-h-screen w-full bg-midnight-base overflow-hidden">
  {/* Fixed radial gradient background — z-0 */}
  <div className="fixed inset-0 pointer-events-none
    bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))]
    from-velvet-purple/20 via-midnight-base to-midnight-base z-0" />

  <CursorTrail />
  <MoonPhaseNav />

  <main className="relative z-10 w-full min-h-screen flex flex-col">
    {children}
    {/* footer rendered here */}
  </main>
</div>

​
Footer

The footer is rendered at the bottom of <main> via mt-auto, ensuring it always sits at the viewport floor even on short pages. It uses font-serif and text-moonlight-silver/50 for a faded, arcane appearance. 
<footer className="mt-auto py-8 text-center text-moonlight-silver/50 font-serif text-sm">
  <p>Conjured with React and a bit of dark magic.</p>
  <p className="mt-2">© {new Date().getFullYear()} — All rites reserved.</p>
</footer>
The copyright year is computed at render time with new Date().getFullYear(), so it never needs a manual update.

​
Customizing the Footer

To change the footer copy, edit the two <p> strings directly in components/Layout.js: 
<footer className="mt-auto py-8 text-center text-moonlight-silver/50 font-serif text-sm">
  {/* ✏️ Change the tagline below */}
  <p>Conjured with React and a bit of dark magic.</p>

  {/* ✏️ Change the rights notice below */}
  <p className="mt-2">© {new Date().getFullYear()} — All rites reserved.</p>
</footer>
Replace either string with your own text. The year expression can be swapped for a static value (2025) or a date range (2023–{new Date().getFullYear()}) as preferred.
To add globally visible UI — such as a cookie consent banner, a toast notification container, or an analytics script — mount it inside Layout.js alongside CursorTrail and MoonPhaseNav. Because Layout wraps the entire router, the element will be present on every page without needing to import it into each page component.

Build docs developers (and LLMs) love

Get started for freeTalk to us