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.

The Projects page (/projects) presents the developer’s work as a collection of experimental potions — each project is bottled inside a VialCard component rendered in a four-column responsive grid. The arcane metaphor extends to the page header (“SPELLBOOK INDEX”) and a footer warning about dependency conflicts. Each card features a gradient accent bar at the bottom and a glass-panel body, keeping the visual language consistent with the rest of the site.

​
Route & Navigation

PropertyValue
Route/projects
Nav LabelSPELLS
Page HeadingSPELLBOOK INDEX
Subheading// APOTHECARY OF CONSTRUCTED SYSTEMS

​
Visual Structure

​
VialCard Grid

Cards are arranged in a CSS Grid with four columns on large screens, collapsing to two on tablet and one on mobile. Each VialCard is a self-contained component that holds all display and interaction logic. 
┌──────────────┐  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│ VOID_COMMERCE│  │ASTRAL_ANALYT.│  │ NEXUS_ROUTER │  │ECHO_CHAMBER  │
│              │  │              │  │              │  │              │
│  description │  │  description │  │  description │  │  description │
│              │  │              │  │              │  │              │
│ [tech stack] │  │ [tech stack] │  │ [tech stack] │  │ [tech stack] │
│──────────────│  │──────────────│  │──────────────│  │──────────────│
│  gradient bar│  │  gradient bar│  │  gradient bar│  │  gradient bar│
└──────────────┘  └──────────────┘  └──────────────┘  └──────────────┘

​
Project Entries

ProjectDescriptionStack
VOID_COMMERCEHeadless e-commerce platformNext.js, TypeScript, Redis, Stripe
ASTRAL_ANALYTICSReal-time data dashboardReact, D3.js, WebSockets, Node.js
NEXUS_ROUTERAPI gateway with load-based routing (40% bottleneck reduction)Go, Docker, Kubernetes, gRPC
ECHO_CHAMBERDecentralized messaging protocolRust, WebRTC, Cryptography, WASM
Each card displays:
  • Project name — uppercase, monospace, styled as a codename
  • Description — one to two sentence summary of the project’s purpose
  • Tech stack — a row of tag chips, one per technology
  • Gradient bottom bar — a decorative horizontal bar with a color gradient unique to each card
  • Action buttons — links to live demo and source repository

​
Footer Warning

A full-width warning banner sits below the grid: 
WARNING: MIXING THESE POTIONS MAY RESULT IN UNEXPECTED DEPENDENCY CONFLICTS.
This is purely decorative and reinforces the alchemical theme.

​
Animations

Cards entrance-animate on page load using staggered Framer Motion delays. Hover interactions use whileHover to lift the card slightly and intensify the gradient bar glow. 
// VialCard hover animation pattern
<motion.div
  whileHover={{ y: -4, boxShadow: "0 0 24px rgba(139, 92, 246, 0.4)" }}
  transition={{ duration: 0.2 }}
>
  {/* Card content */}
</motion.div>
The gradient bottom bar color differs per card. These colors are defined either as inline styles or per-card data properties. If you add a new project, assign it a distinct gradient to maintain visual differentiation.

​
Customization

Adding a new project: Locate the projects data array in the component (or its data file) and append a new entry following the existing shape: 
// Project entry shape
{
  name: "PROJECT_CODENAME",
  description: "One to two sentence description of what this project does.",
  stack: ["Tech1", "Tech2", "Tech3"],
  demoUrl: "https://...",
  repoUrl: "https://github.com/...",
  gradientColors: ["#color1", "#color2"]
}
Removing a project: Delete the corresponding entry from the data array. The grid automatically reflows — with three items the last column will be empty on large screens. Consider adjusting the grid column count to lg:grid-cols-3 for a cleaner layout. Updating tech stack tags: Edit the stack array for the relevant project entry. Tags are rendered by mapping over the array, so order matters — they appear left to right as listed. Changing action button URLs: Update the demoUrl and repoUrl fields in the project data. These map directly to the href attributes of the action buttons.
NEXUS_ROUTER’s 40% bottleneck reduction metric is hardcoded in the project description string. If you want to make metrics easy to update site-wide, consider extracting them into a dedicated metrics field on the project data object.
The four-column grid can look sparse if only one or two projects are present. If the portfolio has fewer than three projects, switch the grid to grid-cols-1 sm:grid-cols-2 to avoid large empty columns on desktop.

Build docs developers (and LLMs) love

Get started for freeTalk to us