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 About page (/about) frames the developer’s biography as a grimoire — a personal book of arcane knowledge accumulated over time. Rather than a résumé-style list, the page tells a story of career pivots and unconventional paths through a vertical timeline. Each milestone enters the viewport with a Framer Motion whileInView animation, rewarding visitors who scroll. A secondary glass panel highlights innate character traits using RPG-inspired language, deepening the arcane theme.

​
Route & Navigation

PropertyValue
Route/about
Nav LabelORIGIN
Page HeadingGRIMOIRE OF ORIGIN
Subheading// CHRONICLES OF A NON-LINEAR PATH

​
Visual Structure

​
Innate Abilities Panel

Below the page header sits a glass-morphism panel listing innate abilities — core developer traits expressed as RPG-style character attributes. Each ability is a short phrase written in the site’s arcane voice. This panel uses a semi-transparent background with a border and backdrop blur, consistent with the glass-panel aesthetic used across the site. To edit the traits, locate the ability list in the About component and update the text content of each list item.

​
Timeline

The main content is a vertical timeline with four entries. On desktop, entries alternate between left and right alignment, creating a zigzag reading path. On mobile, all entries collapse to a single left-aligned column.
YearTitleDescription
2016THE HEALING ARTSNursing school — early career in healthcare
2018THE MERCHANTS GUILDRetail and merchandising work
2020THE SPARK OF CURIOSITYFirst line of code written in HTML/CSS
2022–PRESENTMASTERING THE ARCANEFull-time software engineering
Each timeline entry is composed of:
  • A year badge styled as an arcane timestamp
  • A title in uppercase spaced lettering
  • A description paragraph elaborating on the period
The alternating layout is implemented with conditional CSS classes based on the entry index (even entries align left, odd entries align right, or vice versa).

​
Animations

Timeline entries use Framer Motion’s whileInView prop so they animate in only when the user scrolls them into the viewport. This creates a progressive reveal effect as the visitor reads down the page. 
// Pattern used for each timeline entry
<motion.div
  initial={{ opacity: 0, x: isLeft ? -40 : 40 }}
  whileInView={{ opacity: 1, x: 0 }}
  viewport={{ once: true }}
  transition={{ duration: 0.6, ease: "easeOut" }}
>
  {/* Timeline entry content */}
</motion.div>
The viewport={{ once: true }} flag means the animation fires once per page load, not every time the element re-enters view. Remove once: true if you prefer the entry to re-animate on scroll-back.
The x offset direction for each entry’s slide animation is tied to which side of the timeline it appears on — left entries slide in from the left, right entries from the right. If you reorder entries, verify the directional logic is still correct.

​
Customization

Adding a new timeline entry: Append a new object to the timeline data array with year, title, and description fields. The component maps over this array, so layout and animation are applied automatically. 
// Example timeline entry shape
{
  year: "2024",
  title: "THE NEXT CHAPTER",
  description: "A brief description of this milestone in the journey."
}
Changing the innate abilities: Locate the abilities list in the About component’s JSX and update the text inside each list item. There is no separate data file — the content is inline. Adjusting the alternating layout breakpoint: The left/right alternation is controlled by a Tailwind responsive class (e.g., md:flex-row-reverse). Change md: to lg: to defer the alternating layout to larger screens.
The glass panel and timeline styling both rely on custom Tailwind utilities for the arcane color palette. If you update tailwind.config.js theme colors, verify the bg-opacity and border-color values still render legibly against the dark background.
The whileInView animation requires the parent container to have a defined height or overflow context. If you wrap the timeline in a new container, ensure it does not have overflow: hidden set — that would clip the viewport detection and prevent entries from animating.

Build docs developers (and LLMs) love

Get started for freeTalk to us