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 single-page application (SPA) with no backend, no CMS, and no external API calls. Every piece of data — projects, writing entries, skills — is hardcoded directly into component files. The result is a fully static build that can be hosted on any CDN or file server with zero server-side configuration.

​
High-Level Architecture

index.html (SPA shell)
  └── assets/main.js  ← React 18 entry point
        └── App (HashRouter)
              └── AppRoutes (AnimatePresence + Routes)
                    ├── NavBar  (shared shell)
                    ├── <page component>  (7 routes)
                    └── Footer  (shared shell)
The browser loads index.html, which immediately pulls in assets/main.js as a JS module. That bundle bootstraps React 18 and mounts the App component into <div id="root">. From there, React Router’s HashRouter takes over and renders the correct page component based on the URL hash.

​
Tech Stack

LayerTechnology
UI FrameworkReact 18
Build ToolVite
RoutingReact Router v6 (HashRouter)
AnimationFramer Motion
StylingTailwind CSS + CSS custom properties
IconsLucide React v0.522.0
Static ExportVite build + per-route HTML shells

​
Data Flow

All application data lives inside component files — there are no API requests, no environment variables for data fetching, and no CMS integrations. For example:
  • Projects are defined as a plain array of objects inside assets/main.js.
  • Writing entries are similarly hardcoded objects (title, date, excerpt, color).
  • Skills are hardcoded icon + label pairs.
To update content, you edit the source JavaScript directly and rebuild with Vite.

​
Key Bootstrap Files

​
useScreenInit.js

This module bundles React and ReactDOM and re-exports them under stable named exports (r for the React default export, R for the namespace object). Every component that needs React imports it from here instead of the react package directly, ensuring a single shared React instance across the entire bundled application. 
// useScreenInit.js (simplified)
// Exports: { r as React, R as ReactNamespace }
export { r, R };

​
assets/proxy.js

This file re-exports Framer Motion under the named export m. Components that use Framer Motion animations import from ./proxy.js rather than framer-motion directly, so the entire Framer Motion library is included once in the bundle. 
// assets/proxy.js (simplified)
// Usage in components:
import { m } from '../assets/proxy.js';
// <m.div animate={...} />

​
assets/createLucideIcon.js

A factory module that wraps the Lucide React icon factory. It imports React from useScreenInit.js and exposes the createLucideIcon function as named export c. Individual icon components (like Hexagon, Terminal, Zap) are constructed by calling createLucideIcon("icon-name", svgPaths) at the top of assets/main.js. 
// assets/createLucideIcon.js
// @license lucide-react v0.522.0 - ISC
import { r as s } from '../useScreenInit.js';
export { c as createLucideIcon };

​
Rendering Pipeline

Here is the full sequence from URL to pixels:
  1. Browser requests a URL (e.g. https://example.com/pages/About.html).
  2. pages/About.html sets window.__STATIC_PAGE_ROUTE__ = "/about" and redirects the browser to #/about if no hash is present.
  3. assets/main.js is loaded as a module. It imports React, ReactDOM, Framer Motion (via proxy.js), and all page components.
  4. ReactDOM.render() mounts the root App component into <div id="root">.
  5. HashRouter reads window.location.hash (#/about) and resolves it to the /about route.
  6. AnimatePresence wraps the matched route with enter/exit animation support.
  7. The About page component renders inside the NavBar + Footer shell with a PageTransition wrapper applying the blur/scale animation.

​
Explore Further

Routing

HashRouter setup, all 7 route definitions, and page transition patterns.

Styling

Tailwind utilities, CSS custom properties, glass panels, and glow effects.

Components

NavBar, Footer, ParticleField, PageTransition, VialCard, and SigilDiagram.

Build docs developers (and LLMs) love

Get started for freeTalk to us