Skip to main content

Documentation Index

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

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

Fortune Seeker uses React Router v6 with a <Routes> and <Route> setup rendered inside a top-level <BrowserRouter>. Every page in the portfolio is a discrete React component mapped to a URL path, and all route definitions live together in assets/main.js (the compiled bundle). In the source repository you will find the router configuration in the app’s entry point, typically src/main.jsx or src/App.jsx.

​
Current Routes

The template ships with nine routes covering the full portfolio experience:
PathComponentThematic Name
/HomeThe Reading
/aboutAboutThe Reader
/projectsProjectsMajor Arcana
/skillsSkillsCast Spells
/workWorkHistoryPendulum Swing
/case-studiesCaseStudiesDeep Reading
/blogBlogScribe’s Pages
/testimonialsTestimonialsChanneled Reviews
/contactContactSend a Sigil
Each route’s “Thematic Name” is the label shown in the navigation menu. See the Content guide to rename those labels without changing the paths.

​
Route Structure

The router wraps the entire app in a <BrowserRouter>, passes every page through the shared <Layout> component (which renders the navigation sidebar and ambient background effects), and maps paths to page components with <Route>: 
<BrowserRouter>
  <Layout>
    <Routes>
      <Route path="/"             element={<Home />} />
      <Route path="/about"        element={<About />} />
      <Route path="/projects"     element={<Projects />} />
      <Route path="/skills"       element={<Skills />} />
      <Route path="/work"         element={<WorkHistory />} />
      <Route path="/case-studies" element={<CaseStudies />} />
      <Route path="/blog"         element={<Blog />} />
      <Route path="/testimonials" element={<Testimonials />} />
      <Route path="/contact"      element={<Contact />} />
    </Routes>
  </Layout>
</BrowserRouter>
All page transitions — the Framer Motion fade and slide animations — are initiated inside <Layout>, so any new page component you add will inherit them automatically.

​
Adding a New Page

1

Create the page component

Add a new file in src/pages/, for example src/pages/Gallery.jsx. Export a default React component from it:
// src/pages/Gallery.jsx
export default function Gallery() {
  return (
    <section>
      <h1>The Gallery</h1>
      {/* Your content here */}
    </section>
  );
}
2

Add a Route entry

Import the component in your router file and register the path inside the <Routes> block:
import Gallery from "./pages/Gallery";

// Inside <Routes>:
<Route path="/gallery" element={<Gallery />} />
3

Add a navigation link

Open the navLinks array in Navigation.jsx (or wherever it is defined in your source) and append a new entry so the page appears in the sidebar:
const navLinks = [
  // ...existing entries...
  { path: "/gallery", label: "The Gallery" },
];
4

Add a static HTML file for GitHub Pages

Create gallery.html at the project root, copying the contents of any existing per-route HTML file (e.g. about.html). The file just needs to load the same Vite app shell — GitHub Pages will serve it when someone navigates directly to /gallery:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fortune Seeker</title>
    <script type="module" src="/assets/main.js"></script>
    <link rel="stylesheet" href="/assets/main.css" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

​
Removing a Page

1

Delete the Route entry

Remove the relevant <Route> line from the <Routes> block. The component file can be deleted or kept for reference.
2

Remove the navigation link

Delete the matching object from the navLinks array so the dead link no longer appears in the sidebar.
3

Delete the static HTML file

Remove the corresponding .html file from the project root (e.g. work.html) to avoid serving a stale page shell on GitHub Pages.

​
GitHub Pages and Client-Side Routing

GitHub Pages is a static file host — it serves files by path and has no knowledge of React Router. When a user visits https://yourname.github.io/fortune-seeker/about directly (or refreshes the page), GitHub Pages looks for a real file at that path. Without a matching file it returns a 404. Fortune Seeker handles this by shipping a dedicated HTML file for each route at the project root:
FileServes route
index.html/
home.html/home
about.html/about
casestudies.html/case-studies
contact.html/contact
Each of these files is an identical app shell that loads the same compiled JS and CSS. React Router takes over client-side once the JavaScript boots, rendering the correct page component for the URL. The .nojekyll file at the project root is also required — it tells GitHub Pages to skip Jekyll processing, which would otherwise ignore files and folders whose names begin with an underscore (including Vite’s _assets output directory in some configurations).
If you add a new route and deploy to GitHub Pages, you must also create a corresponding .html file at the matching path (e.g. gallery.html for /gallery). Without it, direct navigation or page refreshes on that route will return a 404, even though the React Router link works fine from within the app.

Build docs developers (and LLMs) love

Get started for freeTalk to us