Skip to main content

Documentation Index

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

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

This section of the docs covers everything under the hood of Full Stack Sorcery — the build tooling, dependencies, file organisation, route definitions, and the layout system that wires ambient effects and page transitions together across every view.

​
Tech Stack

TechnologyVersionRole
React18UI component framework
React Routerv6.30.4Client-side routing (BrowserRouter)
Framer MotionlatestPage transitions, drag, spring animations
Tailwind CSSlatestUtility-first styling with custom theme tokens
VitelatestBuild tool and dev server
lucide-react0.522.0Icon library (nav bar + jump scare icons)
Fonts are loaded from Google Fonts via main.css:
  • Bagel Fat One — display / heading font
  • DM Sans — body copy font

​
File Structure

full-stack-sorcerer/
├── index.html              # App entry point
├── pages/                  # Static HTML shells for direct URL access
│   ├── About.html
│   ├── Blog.html
│   ├── CaseStudies.html
│   ├── Contact.html
│   ├── Projects.html
│   ├── Skills.html
│   ├── Testimonials.html
│   └── Work.html
├── assets/
│   ├── main.js             # Compiled React bundle (all page components)
│   ├── jsx-runtime.js      # React JSX runtime
│   ├── ghost.js            # Framer Motion + lucide-react
│   └── main.css            # Compiled Tailwind output
└── components/
    ├── Layout.js            # Root layout wrapper + nav
    ├── FogBackground.js     # Animated fog overlay
    ├── CustomCursor.js      # Ghost cursor replacement
    └── JumpScareController.js  # Idle jump-scare trigger
The pages/ directory contains static pre-rendered HTML shells for each route. These allow direct URL access (e.g. navigating straight to /about) without requiring client-side JavaScript to bootstrap the route first. Once React hydrates, the full SPA takes over.

​
Routing

React Router v6 is set up with a BrowserRouter wrapping a Routes tree in assets/main.js. All routes are rendered inside the Layout component, which supplies the fog, custom cursor, jump-scare controller, and nav bar to every page. Unrecognised paths fall through to a wildcard * route that renders HomePage directly.
PathComponentSpooky Name
/HomePage— (no nav label)
/aboutAboutPageLurking Around
/projectsProjectsPageSkeletons
/skillsSkillsPageTricks
/workWorkPageHaunts
/case-studiesCaseStudiesPageCrypt Notes
/blogBlogPageBump in the Blog
/testimonialsTestimonialsPageThey Survived
/contactContactPageBoo at Me
*HomePageRenders HomePage (no redirect)

​
Layout Wrapper

components/Layout.js is the root wrapper rendered around every route. It composes four ambient components and the top navigation bar into a single <div> that forms the persistent shell of the app: 
function Layout({ children }) {
  const location = useLocation();

  return (
    <div className="min-h-screen bg-spooky-midnight text-spooky-cream relative ...">
      <FogBackground />
      <CustomCursor />
      <JumpScareController />

      {location.pathname !== "/" && (
        <nav className="fixed top-0 left-0 w-full p-4 z-50 ...">
          {/* SpookyDev logo link + scrollable icon+label nav links */}
        </nav>
      )}

      <AnimatePresence mode="wait">
        <motion.main key={location.pathname} ...>
          {children}
        </motion.main>
      </AnimatePresence>
    </div>
  );
}
FogBackground, CustomCursor, and JumpScareController are always mounted regardless of the current route. The nav bar is conditionally hidden on the home route (/) — detected via useLocation().pathname. All page content is wrapped in a Framer Motion motion.main element keyed to the current pathname, enabling route-level page transitions.

​
Page Transitions

Framer Motion’s AnimatePresence component manages the mount/unmount lifecycle of each page. The motion.main wrapper uses the pathname as its key so that React treats each route change as a full unmount and remount, triggering both exit and initial animations. The transition values extracted from Layout.js: 
initial: { opacity: 0, y: 20, filter: "blur(10px)" }
animate: { opacity: 1, y: 0,  filter: "blur(0px)"  }
exit:    { opacity: 0, y: -20, filter: "blur(10px)" }
transition: { duration: 0.4, ease: "easeOut" }
On enter, the new page blurs in and slides up from below. On exit, the outgoing page blurs out and slides up and away. This produces a layered blur-fade-slide feel that reinforces the spooky atmosphere without being distracting.

Ambient Components

Deep-dive into FogBackground, CustomCursor, and JumpScareController — how each works and how they’re composed inside Layout.

Theming

Explore the custom Tailwind theme tokens — spooky-midnight, spooky-turquoise, spooky-cream — and the Google Fonts setup.

Build docs developers (and LLMs) love

Get started for freeTalk to us