Skip to main content

Documentation Index

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

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

The Navigation component is Full Moon’s persistent site-wide header. It renders a navigation bar containing links to all nine pages of the portfolio and remains mounted across every route transition because it lives inside <Layout> rather than inside any individual page. Beyond the UI, Navigation.js plays a special role in the build output: it is the chunk that carries the full React DOM production runtime, making it the heaviest — and most important — file the browser loads on first visit.

​
Exports

Navigation.js exports two symbols that Layout consumes directly:
ExportSymbolDescription
NNavigationThe navigation bar component rendered in the site header
OOutletReact Router’s <Outlet /> for rendering the matched child route
Bundling Outlet alongside the navigation component keeps the React Router dependency co-located with the file that already owns the React DOM runtime, avoiding a second chunk fetch for a tiny re-export.

​
Routes Covered

The navigation bar includes a link to each of the nine pages in the Full Moon portfolio:
RoutePage
/Home
/aboutAbout
/skillsSkills
/workWork
/projectsProjects
/case-studiesCase Studies
/blogBlog
/testimonialsTestimonials
/contactContact
All routes use hash-based navigation (#/about, #/skills, etc.) so the SPA can be deployed to any static file host without server-side URL rewriting.

​
Bundled Runtime

Navigation.js includes the full React DOM production bundle — this encompasses the scheduler, the reconciler, the fiber architecture, and the synthetic event system. As a result, the browser only needs to load this one file to acquire both the navigation UI and all React internals required to render the rest of the application. This bundling strategy is a deliberate Vite code-split decision: rather than emitting a separate react-dom vendor chunk, the build co-locates the runtime with the first component that depends on it at the root of the render tree. Every other component chunk in the build can then assume React DOM is already available in the module graph once Navigation.js has executed.

​
Usage

Navigation is imported and rendered once inside <Layout>. It requires no props: 
import { N as Navigation, O as Outlet } from "./Navigation.js";

// Inside Layout:
// <Navigation /> renders the persistent nav bar at the top of every page.
// <Outlet />    renders the current route's page component below it.

function Layout() {
  return (
    <div className="min-h-screen bg-midnight-base text-witch-teal-glow relative overflow-hidden">
      {/* ... atmospheric layers and cursor ... */}
      <Navigation />
      <motion.main /* ... */>
        <Outlet />
      </motion.main>
    </div>
  );
}
Because Navigation.js bundles React DOM, it is the heaviest component chunk in the entire build. Each static HTML shell in the project includes a <link rel="modulepreload"> tag pointing at this file so the browser begins fetching and parsing it during HTML parsing — before any JavaScript has executed — eliminating a full round-trip of latency on first load.

Build docs developers (and LLMs) love

Get started for freeTalk to us