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 is a personal developer portfolio single-page application wrapped in a dark, arcane aesthetic — equal parts witch-tech grimoire and engineering showcase. Every interaction is animated, every panel glows, and every route carries its own occult name. This documentation walks you through what Dev Nexus is, what powers it under the hood, and what you’ll find in each of its seven pages.

​
What is Dev Nexus?

Dev Nexus is a fully client-rendered React SPA designed to serve as a developer’s portfolio and creative outlet. It ships as a pre-built static export — meaning there’s no server required — but beneath the static shell is a rich, animated UI driven by Framer Motion transitions, a live particle-field canvas, and a cohesive witch-tech visual identity expressed entirely through Tailwind CSS utility classes and custom design tokens. The name “nexus” signals the site’s intent: a central hub that connects every dimension of a developer’s work — projects, writing, case studies, skills, and contact — in a single, immersive experience.

​
Tech Stack

LayerTechnology
UI libraryReact 18 (react@18.3.1)
Build toolVite
RoutingReact Router v6 — HashRouter
AnimationFramer Motion (re-exported via assets/proxy.js)
StylingTailwind CSS with custom design tokens
IconsLucide React (lucide-react@0.522.0)
FontsSyne (display), JetBrains Mono (code), Inter (body)
React and ReactDOM are bootstrapped through useScreenInit.js, a module-preloaded shim that exposes them as named exports consumed by every component. Framer Motion is centralised in assets/proxy.js so the entire animation surface is imported from one place.

​
The Seven Pages

Dev Nexus divides the portfolio into seven thematically named sections, each with a corresponding static HTML shell in the pages/ directory and a hash-based route in the React Router config:
RouteNav labelTheme
/#/PORTALHome — the sigil hub and entry point
/#/aboutORIGINAbout — an origin timeline and developer backstory
/#/projectsSPELLSProjects — a spellbook of built work
/#/skillsARSENALSkills — a radial sigil diagram of competencies
/#/writingSCROLLSWriting — articles and long-form posts
/#/case-studiesRITUALSCase Studies — deep-dives on complex work
/#/contactSUMMONContact — a summoning circle / contact form
The navigation bar, rendered by components/NavBar.js, highlights the active route by wrapping its label in arcane brackets — [ PORTAL ] — and applies a neon-lime glow to signal the current location.

​
Visual Identity

Dev Nexus defines its colour palette as CSS custom properties on :root, consumed through Tailwind’s theme:
TokenHexUsage
electric-violet#9d4dffPrimary accent, borders, glow effects
neon-lime#9eff5bActive states, hover highlights, text glow
ghost-mint#6dffc7Secondary accent, skill node highlights
hot-magenta#ff4ad8Tertiary accent, hover borders
void#050208Page background — near-black
witch-purple#1b0833Surface background, glass panel base
moonlight#f0eaffPrimary text colour
These tokens are used consistently throughout: particle colours, SVG stroke colours in SigilDiagram, VialCard accent tiers, and glow box-shadows all draw from the same five-colour neon palette.

​
Glassmorphism — the .glass-panel pattern

Every major surface in the UI — the navigation bar, content cards, sidebars — uses the .glass-panel utility class: 
.glass-panel {
  border-width: 1px;
  border-color: #9d4dff4d;           /* electric-violet at 30% opacity */
  background-color: #1b083366;       /* witch-purple at 40% opacity */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
The combination of a semi-transparent witch-purple background and a 12 px backdrop blur creates a frosted-glass depth effect that floats panels above the animated canvas background without fully obscuring it.

​
Particle Field Canvas

components/ParticleField.js renders a <canvas> element fixed behind every page. On mount it:
  1. Sizes the canvas to the full viewport and spawns particles proportional to viewport area (1 particle per 15 000 px²).
  2. Assigns each particle a random position, velocity, radius, opacity, and one of the four neon palette colours — violet, lime, mint, or magenta.
  3. Runs a requestAnimationFrame loop that moves particles and wraps them at viewport edges, adding a shadowBlur glow in the particle’s own colour.
  4. Re-initialises on window.resize to keep density consistent.
The canvas sits at z-index: 0 with opacity: 0.6 and pointer-events: none, so it never interferes with page interaction.

​
Where to Go Next

Getting Started

Clone the repo, install dependencies, and boot the dev server in under five minutes.

Architecture Overview

Understand how the static export, HashRouter, and component tree fit together.

Build docs developers (and LLMs) love

Get started for freeTalk to us