Skip to main content

Documentation Index

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

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

dev.void is a fully client-side React SPA built with Vite. After the build step, the output is a flat collection of directories that index.html bootstraps at page load. Understanding where each file lives — and why — helps you extend or debug the portfolio without guessing at the compiled asset graph.

​
Top-level overview

dev.void/
├── index.html
├── assets/
├── components/
├── pages/
└── images/
    └── screenshots/

assets/

Compiled JavaScript bundles and the Tailwind CSS output. Vite code-splits the app into named chunks — each third-party library gets its own file.

components/

ES module files for every React component. Each file is individually preloaded by index.html for maximum parallelism at startup.

pages/

Static HTML stubs created during the build. These are not used by the React SPA at runtime.

images/screenshots/

Sixteen PNG screenshots of the live portfolio, used as reference assets and README illustrations.

​
index.html — App entry point

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dev.Void</title>

    <!-- Main compiled bundle -->
    <script type="module" crossorigin src="./assets/main.js"></script>

    <!-- Preloaded ES module chunks -->
    <link rel="modulepreload" crossorigin href="./assets/jsx-runtime.js">
    <link rel="modulepreload" crossorigin href="./assets/createLucideIcon.js">
    <link rel="modulepreload" crossorigin href="./assets/proxy.js">
    <!-- ...all component chunks... -->

    <link rel="stylesheet" crossorigin href="./assets/main.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
The <link rel="modulepreload"> declarations tell the browser to fetch all chunk files in parallel before main.js requests them, eliminating waterfall latency on initial load.

​
assets/ — Compiled bundles

Vite splits the build into named chunks. Each chunk corresponds to one logical concern.
The compiled application entry point. It imports all component modules, wires up React Router’s HashRouter with nine route definitions, wraps every page in a Framer Motion PageWrapper, and calls ReactDOM.render() targeting #root.
The full Tailwind CSS output plus the project’s custom utility classes (.text-glow, .glass-panel, .box-glow, .aurora-filter). Also contains the @import call that loads three Google Fonts families.
The automatic JSX runtime Vite injects. All components import { j as e } from this file instead of importing React directly — this is the modern “automatic” JSX transform introduced in React 17.
The full motion/react bundle (Framer Motion). Aliased as proxy.js by Vite’s chunking. Components import the motion object from this file to access motion.div, motion.span, etc.
The Lucide React icon factory function. Individual icon components (e.g. x.js) import and call this factory to produce SVG elements with consistent props.
The single Lucide icon used by the project — the X / close icon, rendered inside the mobile navigation drawer’s dismiss button.
Three additional Vite chunks expose individual Framer Motion hooks as separate modules for finer-grained tree-shaking:
FileHook
use-motion-value.jsuseMotionValue
use-spring.jsuseSpring
use-transform.jsuseTransform

​
components/ — Page components

Each file exports one primary React component. They are preloaded by index.html as ES modules and imported by assets/main.js.
FileComponentPurpose
AuroraNav.jsAuroraNavSticky top navigation bar; also re-exports HashRouter, Routes, Route, useLocation, and ReactDOM for use in main.js
StarfieldBackground.jsStarfieldBackgroundFull-screen animated star field rendered as an absolutely positioned canvas layer behind all content
CometCursor.jsCometCursorCustom cursor that replaces the default pointer with a trailing comet-tail animation
AuroraHero.jsAuroraHeroLanding-page hero section with animated aurora gradient, headline, and CTA links
PlanetaryProfile.jsPlanetaryProfileAbout-page content: bio, skills overview, and an animated planet graphic
MissionPatchWall.jsMissionPatchWallProjects grid, styled as mission patches mounted on a wall; also re-exports AnimatePresence for use in main.js
TelemetryRadar.jsTelemetryRadarSkills page radar/chart visualisation of technical proficiencies
MissionLogTimeline.jsMissionLogTimelineWork-experience timeline styled as mission log entries
FlightRecorderCase.jsFlightRecorderCaseCase-studies section displaying detailed project post-mortems
OrbitingSatellites.jsOrbitingSatellitesBlog listing rendered as orbiting satellite cards
CommsConsole.jsCommsConsoleContact form styled as a communications console
AsteroidQuotes.jsAsteroidQuotesTestimonials displayed as drifting asteroid quote blocks

​
pages/ — Static HTML stubs

The files in pages/ are static HTML stubs generated at build time and are not loaded or used by the React SPA. The app uses React Router’s HashRouter for all navigation — there are no real multi-page HTML files at runtime. These stubs exist as build artefacts and can be safely ignored during development.
pages/
├── About.html
├── Blog.html
├── CaseStudies.html
├── Contact.html
├── Projects.html
├── Skills.html
├── Testimonials.html
└── Work.html

​
images/screenshots/

Contains 16 numbered PNG screenshots (dev.void-screenshot-01.png through dev.void-screenshot-16.png) capturing the live portfolio across its various sections. These are reference images used in the README and are not served to end users at runtime.

Build docs developers (and LLMs) love

Get started for freeTalk to us