Skip to main content

Documentation Index

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

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

Dev Nexus ships as a pre-built static export — you can serve the repo as-is from any static host — but it is also a standard Vite + React project at heart, so the typical clone → install → dev workflow applies when you want to make changes. This guide walks through every step from cloning the repository to a running local server, then maps out every file and directory you’ll need to know.

​
Setup

1

Clone the repository

Pull the project down from GitHub:
git clone https://github.com/apursley2012/dev-nexus.git
cd dev-nexus
2

Install dependencies

Install the project’s Node dependencies with your package manager of choice:
npm install
This pulls in React 18, React Router v6, Framer Motion, Tailwind CSS, Lucide React, and the Vite build toolchain.
3

Start the development server

Vite’s dev server compiles on the fly and supports hot module replacement:
npm run dev
You should see output similar to:
  VITE v5.x.x  ready in Xms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
4

Open in your browser

Navigate to http://localhost:5173 — the app bootstraps immediately and redirects to /#/ thanks to the inline hash-redirect script in index.html.The full site — particle field, animated transitions, all seven pages — is available for local development without any additional configuration.
5

Build for production

When you’re ready to deploy, generate the optimised static output:
npm run build
Vite bundles and tree-shakes the app into the dist/ directory, producing the same structure you see in the repository root: an index.html entry point, assets/ for bundled JS and CSS, components/ for pre-built module scripts, and pages/ for per-route HTML shells.

​
Project Layout

The repository root is the static export of the Vite build. Here is every file and what it does: 
dev-nexus/
├── index.html                 # SPA entry point — mounts #root, sets route "/"
├── useScreenInit.js           # React / ReactDOM bootstrap shim
├── canvas.manifest.js         # Build manifest for canvas chunk
│
├── assets/
│   ├── main.js                # Bundled application JavaScript (all pages + routing)
│   ├── main.css               # Bundled Tailwind CSS (design tokens + utilities)
│   ├── jsx-runtime.js         # React JSX transform runtime
│   ├── proxy.js               # Framer Motion re-export (single import surface)
│   └── createLucideIcon.js    # Lucide icon factory helper
│
├── components/
│   ├── NavBar.js              # Fixed top navigation with active-route highlighting
│   ├── Footer.js              # Site-wide footer (GitHub icon link)
│   ├── ParticleField.js       # Animated canvas background — four-colour particle system
│   ├── PageTransition.js      # Framer Motion fade+scale wrapper for route changes
│   ├── VialCard.js            # Expandable project card with colour accent tiers
│   └── SigilDiagram.js        # Animated SVG pentagon skill diagram
│
└── pages/
    ├── Home.html              # Static shell → redirects to /#/
    ├── About.html             # Static shell → redirects to /#/about
    ├── Projects.html          # Static shell → redirects to /#/projects
    ├── Skills.html            # Static shell → redirects to /#/skills
    ├── Writing.html           # Static shell → redirects to /#/writing
    ├── CaseStudies.html       # Static shell → redirects to /#/case-studies
    └── Contact.html           # Static shell → redirects to /#/contact

​
Key files explained

index.html The SPA entry point. It preloads every component module, loads assets/main.js as an ES module, and includes an inline script that sets window.__STATIC_PAGE_ROUTE__ = "/" before immediately redirecting any bare URL to its hash equivalent: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/";

  (function () {
    if (!window.location.hash || window.location.hash === "#") {
      window.location.replace(
        window.location.pathname +
        window.location.search +
        "#/"
      );
    }
  })();
</script>
useScreenInit.js A React/ReactDOM bootstrap shim that exports React as R and ReactDOM as r. All component files import React hooks and ReactDOM APIs from this module rather than directly from the react package — it acts as the centralised initialisation layer for the entire component tree. components/ParticleField.js A <canvas> fixed at z-index: 0 behind every page. Spawns coloured particles (electric-violet #9d4dff, neon-lime #9eff5b, ghost-mint #6dffc7, hot-magenta #ff4ad8) at a density of one particle per 15 000 px² of viewport area, then animates them in a continuous requestAnimationFrame loop with edge-wrapping and per-particle glow. components/PageTransition.js Wraps each routed page in a Framer Motion motion.div that animates opacity, scale, and a CSS blur filter on both enter and exit, giving every navigation event a smooth magical-dissolve feel: 
// initial → animate → exit
{ opacity: 0, scale: 0.95, filter: "blur(10px)" }
→ { opacity: 1, scale: 1,    filter: "blur(0px)"  }
→ { opacity: 0, scale: 1.05, filter: "blur(10px)" }
components/VialCard.js An expandable project card styled as an alchemical vial. Cards accept a color prop — "violet", "lime", "mint", or "magenta" — that controls the border accent, glow effect, and tech-tag colours. Clicking a card toggles an AnimatePresence-driven drawer that reveals the project description, tech stack badges, and action buttons (Demo, Source, Case Study). components/SigilDiagram.js An animated SVG that renders a five-point skill diagram (FRONTEND, BACKEND, DEVOPS, DATABASE, ARCHITECTURE) as a glowing pentagonal sigil. Each node pulses in its own accent colour, and the connecting lines animate in via Framer Motion’s pathLength from 0 → 1 on mount. assets/proxy.js Framer Motion is imported and re-exported from this single file. Every component that needs animation — PageTransition, VialCard, SigilDiagram — imports from ../assets/proxy.js, keeping the bundle’s module graph clean and the Framer Motion version pinned in one place. pages/*.html Each file is an identical HTML shell with one difference: the window.__STATIC_PAGE_ROUTE__ value and the hash redirect target. For example, pages/About.html sets window.__STATIC_PAGE_ROUTE__ = "/about" and redirects to #/about. This allows the static files to be served directly (e.g., from a CDN) while still landing users on the correct hash route.

​
Routing

Dev Nexus uses React Router v6 HashRouter — all routes are hash-based (e.g., /#/about, /#/projects). This means the server never needs to handle client-side routes; every request serves the same index.html, and React Router reads the fragment portion of the URL to determine which page component to render.The static HTML shells in pages/ each inject window.__STATIC_PAGE_ROUTE__ and run a self-invoking function on load that redirects the visitor to the hash equivalent of that route. This means a direct link to /pages/About.html will transparently land the user at /#/about without a 404.
The seven hash routes and their corresponding NavBar labels are defined in components/NavBar.js: 
const routes = [
  { path: "/",            label: "PORTAL"  },  // Home — sigil hub
  { path: "/about",       label: "ORIGIN"  },  // About — origin timeline
  { path: "/projects",    label: "SPELLS"  },  // Projects — spellbook
  { path: "/skills",      label: "ARSENAL" },  // Skills — sigil diagram
  { path: "/writing",     label: "SCROLLS" },  // Writing — articles
  { path: "/case-studies",label: "RITUALS" },  // Case Studies — deep-dives
  { path: "/contact",     label: "SUMMON"  },  // Contact — summoning circle
];
The active route is detected with React Router’s useLocation hook; the matching nav item receives text-neon-lime text-glow-lime classes and its label is wrapped in brackets — [ ARSENAL ] — while inactive items render as dimmed moonlight/70 text that glows electric-violet on hover.

Build docs developers (and LLMs) love

Get started for freeTalk to us