dev.void is a space-themed personal developer portfolio built with React (Vite), Framer Motion, and Tailwind CSS. This page introduces the project’s purpose, the libraries it depends on, the visual design system, the full component roster, and the route structure — giving you the mental model you need before diving into customization.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.
Quickstart
Clone the repo, open it in a browser or static server, and personalize the hero in minutes.
Project Structure
Understand how Vite output, components, pages, and assets are laid out on disk.
AuroraHero Component
Customize the animated hero section, including your name, tagline, and CTA buttons.
Profile Data
A complete reference for every data value you can swap to make the portfolio your own.
Tech Stack
dev.void uses a modern, client-only React stack compiled with Vite. All runtime JavaScript ships as ES modules — there is no server-side rendering.| Concern | Library / Tool |
|---|---|
| Framework | React 18 (via react / react-dom) |
| Build tool | Vite |
| Routing | React Router v6 (BrowserRouter + Routes) |
| Animation | Framer Motion (motion/react — AnimatePresence, motion.div) |
| Styling | Tailwind CSS (utility classes, no CSS-in-JS) |
| Icons | Lucide React (createLucideIcon) |
Fonts
Three Google Fonts families are loaded via@import in assets/main.css:
- Space Grotesk —
font-sans, used for headings and navigation - Cormorant Garamond —
font-serif, used for italic taglines and pull-quotes - JetBrains Mono —
font-mono, used for monospaced labels and code-style text
Color Palette
The aurora color system is defined as Tailwind CSS custom tokens and referenced throughout every component:| Token | Hex | Usage |
|---|---|---|
aurora-teal | #0d9488 | Primary accent, borders, glows |
aurora-mint | #34d399 | Secondary accent, particle effects |
aurora-pink | #ec4899 | Tertiary accent, gradient highlights |
aurora-light | #ccfbf1 | High-contrast text on dark backgrounds |
space-950 | #010308 | Page background — near-black deep-space base |
Key Features
Animated Page Transitions
Every route is wrapped in a
motion.div with AnimatePresence. Pages fade and slide in with a 600 ms ease curve, and blur out on exit.Procedural Starfield
StarfieldBackground renders three layered star planes (#stars, #stars2, #stars3) as absolutely positioned layers behind all page content.Glass-Panel UI
Section cards use the
glass-panel utility class — a frosted-glass effect combining a translucent bg-space-900/40 fill, border-aurora-teal/20 border, and backdrop-blur-md.Space-Themed Naming
Every route and component carries a thematic name: skills are “Telemetry”, work history is the “Mission Log”, projects are “Probes & Payloads”, and the contact form is a “Hailing Frequency”.
Comet Cursor
The default browser cursor is replaced with a custom
CometCursor component that renders a glowing dot, a trailing ring, and click-burst particle sparks using Framer Motion spring values.Responsive Navigation
AuroraNav provides a full desktop nav bar with an animated active-indicator underline, and a full-screen mobile overlay menu that opens on small viewports.Sections & Routes
The portfolio is a single-page application with nine React Router v6 routes. Each route renders a page-level wrapper that passes its children into the sharedAnimatePresence transition.
| Route | Page Title | Primary Component |
|---|---|---|
/ | Home | AuroraHero |
/about | Stellar Cartography | PlanetaryProfile |
/projects | Probes & Payloads | MissionPatchWall |
/skills | Telemetry | TelemetryRadar |
/work | Mission Log | MissionLogTimeline |
/case-studies | Anomalies Investigated | FlightRecorderCase |
/blog | Field Notes from the Void | OrbitingSatellites |
/contact | Open a Hailing Frequency | CommsConsole |
/testimonials | Voices from the Crew | AsteroidQuotes |
App component in assets/main.js) mounts StarfieldBackground, CometCursor, and AuroraNav once, above the route outlet, so they persist across all page transitions.
Component Reference
| Component | File | Description |
|---|---|---|
AuroraNav | components/AuroraNav.js | Sticky header with animated nav indicator and mobile overlay |
StarfieldBackground | components/StarfieldBackground.js | Layered CSS star planes rendered behind all content |
CometCursor | components/CometCursor.js | Custom cursor with spring-physics trailing ring and click sparks |
AuroraHero | components/AuroraHero.js | Full-viewport hero with name, tagline, animated aurora blobs, and CTAs |
PlanetaryProfile | components/PlanetaryProfile.js | About section with bio, avatar, and orbital detail rings |
MissionPatchWall | components/MissionPatchWall.js | Project grid using mission-patch–style card artwork |
TelemetryRadar | components/TelemetryRadar.js | Skills display styled as a telemetry/radar readout |
MissionLogTimeline | components/MissionLogTimeline.js | Vertical timeline of work experience entries |
FlightRecorderCase | components/FlightRecorderCase.js | Case-study deep-dives in a flight-recorder aesthetic |
OrbitingSatellites | components/OrbitingSatellites.js | Blog post list styled as orbiting satellite cards |
CommsConsole | components/CommsConsole.js | Contact form styled as a communications console |
AsteroidQuotes | components/AsteroidQuotes.js | Testimonial carousel with asteroid-field visual motif |
Custom cursor requires
cursor: none.CometCursor only works because body { cursor: none; } is set globally in assets/main.css. If you remove or override this rule, the native browser cursor will appear alongside the custom one. Do not remove it unless you are intentionally disabling CometCursor as well. On touch devices the component already returns null automatically, so mobile users are unaffected.