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 Home page (/) is the entry point for Dev Nexus — a full-screen ambient portal that sets the arcane aesthetic immediately. Rather than a conventional hero section, it renders a layered orbital sigil as the primary navigation mechanism. Six radial nodes surround a central identity circle, each linking to a core section of the portfolio. Every element fades in with staggered opacity animations powered by Framer Motion, giving the impression of a ritual circle materializing from darkness.

​
Route & Navigation

PropertyValue
Route/
Nav LabelPORTAL
Page Heading(no visible <h1> — the sigil IS the UI)

​
Visual Structure

​
Orbit Sigil

The sigil is built from three concentric layers, all animated independently:
  1. Outer rotating ring — A solid circular track that spins clockwise at a constant velocity. Fifteen code-syntax characters are evenly distributed along its circumference and orbit with it.
  2. Inner dashed ring — A dashed-border circle that counter-rotates, creating a sense of arcane interference between the two layers.
  3. Center identity circle — A static circle displaying the developer’s name and title.
The fifteen orbiting characters are: 
{ } < > / ; = [ ] ( ) * & | !
Each character is positioned using polar-coordinate math (sin/cos transforms) and inherits the parent ring’s rotation, so they orbit as a unified constellation.

​
Center Circle

The center circle displays two lines of text: 
ALEX CHEN
SOFTWARE_DEVELOPER
To update the developer name or title, locate the center circle JSX in the Home component and edit the text content directly.

​
Radial Navigation Nodes

Six navigation nodes are placed at 60° intervals around the sigil. Each node is a clickable pill/button that routes to a page using React Router’s <Link> component.
AngleLabelRoute
0°ORIGIN/about
60°SPELLS/projects
120°ARSENAL/skills
180°SCROLLS/writing
240°RITUALS/case-studies
300°SUMMON/contact
Nodes are positioned absolutely using the same polar-coordinate math as the orbit characters. Adjust the radius constant in the component to push the nodes closer to or further from the sigil center.

​
Bottom Label

A single line of text anchors the bottom of the viewport: 
// INITIATE SEQUENCE
This is purely decorative and communicates the arcane-terminal theme.

​
Animations

All elements use Framer Motion with an initial={{ opacity: 0 }} state and an animate={{ opacity: 1 }} target. Entrance animations are staggered via transition.delay values so the sigil layers appear sequentially rather than all at once. 
// Example staggered entrance pattern used on the page
<motion.div
  initial={{ opacity: 0, scale: 0.8 }}
  animate={{ opacity: 1, scale: 1 }}
  transition={{ duration: 0.8, delay: 0.3 }}
>
  {/* Orbit ring */}
</motion.div>
The continuous ring rotations use animate={{ rotate: 360 }} with transition={{ repeat: Infinity, duration: 20, ease: "linear" }}. The inner ring uses a negative duration equivalent to spin in the opposite direction.
The Home page has no scroll — it is intentionally a single-viewport experience. All content must fit within 100vh. If you add more nav nodes, reduce the sigil radius or adjust node font sizes to prevent overflow on smaller screens.

​
Customization

Changing the developer identity: Edit the two text strings inside the center circle element — one for the name, one for the role title. Adding or removing orbit characters: The character array is defined near the top of the Home component. Add or remove entries; the positioning math distributes them evenly regardless of count. Adjusting animation speed: Change the duration value on the outer ring’s Infinity transition. The inner ring’s counter-rotation speed is set independently — keep both values harmonious to preserve the visual effect. Changing nav node labels or routes: The node array maps label strings to route paths. Update either value to rename a section or reroute a node without breaking the sigil layout.
The sigil scales naturally using vmin-based sizing. Test on mobile viewports — the radial nodes may overlap on very narrow screens. Consider adding a breakpoint that switches to a vertical list layout below sm:.

Build docs developers (and LLMs) love

Get started for freeTalk to us