TheDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/full-stack-sorcerer/llms.txt
Use this file to discover all available pages before exploring further.
/about route — labeled “Lurking Around” in the site’s nav — is not a bulleted résumé. It’s a scroll-driven story told in three chapters, each rendered as an animated panel that slides in from off-screen as you reach it. Chapters alternate their layout left-to-right: an illustrated panel (a CSS-drawn vignette styled like a dark spooky-navy frame with a thick spooky-midnight border) sits on one side, and a spooky-cream speech-bubble card with the chapter text sits on the other. A sound-effect label stamped in an spooky-orange badge — * CLICK CLACK *, * SIGH *, * IT LIVES! * — punctuates each illustrated panel. The page heading is “Lurking Around” in the Bagel Fat One display font, glowing turquoise.
The Three Chapters
The Awakening
The first chapter, aligned left image / right text. It starts at the beginning:
“It started with a glowing CRT monitor in the dark. I typed PRINT "HELLO WORLD" and the machine obeyed. I was hooked.”
Sound effect: * CLICK CLACK *This chapter captures the childhood spark — the moment a keyboard became something that could command a machine. The CRT glow is baked into the visual identity of the whole site: dark backgrounds, teal light leaks, and that sense of staring into a phosphor screen at 2 AM.The Dark Arts
The second chapter, reversed to right image / left text:
“College was a blur of caffeine and segmentation faults. I learned to speak to databases and bend CSS to my will (mostly).”Sound effect:
* SIGH *This is the “learning the hard way” chapter — compiler errors, late-night debugging sessions, and the slow acquisition of the tools that now feel like second nature. The (mostly) parenthetical is load-bearing.Present Day
The third chapter, back to left image / right text:
“Now I build polished, performant web experiences by day, and tinker with weird, delightful side projects by night.”Sound effect:
* IT LIVES! *The present tense: professional work by day, creative experiments by night. The name Full Stack Sorcery lives here — the idea that the craft itself is a kind of magic, and that the weird side projects are just as important as the production code.Visual Presentation
Each chapter is a Framer Motionmotion.div with initial={{ opacity: 0, x: ±50 }} and whileInView={{ opacity: 1, x: 0 }} triggered once as the panel enters the viewport (viewport={{ once: true, margin: "-100px" }}). The transition uses a spring with duration: 0.6. The alternating align: "left" / align: "right" values on each chapter data object drive a conditional md:flex-row vs md:flex-row-reverse Tailwind class on the flex container.
The illustrated panel uses inline CSS art unique to each chapter — a pulsing CRT outline, a bar-chart motif, and a spinning ring — framed inside a spooky-navy box with a dot-grid overlay at opacity-20. The text card uses absolute-positioned triangle notches to form a speech-bubble pointer aimed at the illustrated panel — pointing left when the image is on the left, right when it’s on the right.
The Idle Easter Egg
At the bottom of the homepage (not the About page), a faint tip is rendered in small-caps tracking:Tip: The homepage footer quietly reads “Tip: idle too long and something might appear.” If you stop moving your mouse for 20 seconds, the
JumpScareController triggers: a ghost slides in from the right edge of the viewport, complete with a "Boo?" speech bubble. Every third click also drops a bug icon down from your cursor position. Both effects respect prefers-reduced-motion.