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.

MoonPhaseNav is the celestial navigation bar that crowns every page of the Sorcerer portfolio. It renders a horizontal row of moon-phase icons paired with route labels, allowing visitors to move between all nine sections of the portfolio without a full page reload. Because it is mounted inside Layout — above the router outlet — it remains visible and interactive throughout the entire browsing session.

​
What It Renders

The nav bar spans the full width of the viewport and is fixed at the top of the page. Each navigation item combines a decorative moon-phase glyph with a text label styled in the portfolio’s serif typeface. Active routes are highlighted so visitors always know which section they are viewing. The component uses React Router’s <Link> (or <NavLink>) internally to perform client-side navigation, meaning the page never fully reloads when a user switches sections. All routing state is managed through the HashRouter that wraps the application — the hash-based strategy ensures the portfolio works when served from any static file host without server-side routing configuration.

​
Route Coverage

The following nine routes are represented in the navigation bar:
RouteNav Label
/Home
/aboutAbout
/projectsProjects
/skillsSkills
/workWork
/case-studiesCase Studies
/blogBlog
/contactContact
/testimonialsTestimonials

​
Integration

MoonPhaseNav is rendered unconditionally inside Layout, so it is always present regardless of which route is active. It does not accept props — all navigation items and their target paths are defined within the component itself. 
// Inside Layout.js
import MoonPhaseNav from './MoonPhaseNav';

function Layout({ children }) {
  return (
    <div className="relative min-h-screen w-full bg-midnight-base overflow-hidden">
      {/* ... gradient background ... */}
      <MoonPhaseNav />   {/* ← always rendered, above <main> */}
      <main className="relative z-10 ...">
        {children}
      </main>
    </div>
  );
}
Because React Router’s <Link> components live inside MoonPhaseNav, the component must be rendered within a router context. The HashRouter is provided at the application entry point (main.jsx), so no additional setup is needed when using the component in its default location.

​
Customizing Navigation

To add a new page to the nav bar, make two coordinated changes:
  1. Add the nav item inside MoonPhaseNav.js — append a new entry to the navigation items array with the desired label, path, and moon-phase icon.
  2. Add the corresponding <Route> in the router — register the new path and its page component so React Router knows what to render when the link is clicked.
To remove a page, reverse both steps: delete the nav item from MoonPhaseNav.js and remove its <Route> from the router. Leaving an orphaned route in the router is harmless but leaving an orphaned nav link will produce a link to a blank page. 
// Example: adding a /gallery route
// 1. In MoonPhaseNav.js — add to the nav items array:
{ label: 'Gallery', path: '/gallery', moonIcon: '🌙' }

// 2. In main.jsx — add to the Routes tree:
<Route path="/gallery" element={<GalleryPage />} />
MoonPhaseNav.js is a pre-built artifact that bundles React and React Router internally as part of the Vite production build process. This is why the file exports minified symbols (H for HashRouter, R for Routes, a for Route, r for render) rather than human-readable names. If you need to modify the component’s internals, edit the original source file before the build step rather than editing the bundled output directly.

Build docs developers (and LLMs) love

Get started for freeTalk to us