Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/sorcerer/llms.txt

Use this file to discover all available pages before exploring further.

The About page layers atmospheric scroll-driven motion over a straightforward biographical layout. A large translucent moon orb drifts slowly downward as the visitor scrolls, while a witch hat SVG near the footer floats upward in the opposite direction. Between these two decorative anchors sit three text blocks that introduce the developer’s identity, working philosophy, and a closing aphorism.

​
Layout

​
Parallax Moon Orb

A 400×400 px rounded div with a bg-moonlight-silver/10 background (a very faint silver tint) is positioned in the upper portion of the page. It is not an image — the soft circular glow is achieved purely through Tailwind’s background-color utility and a rounded-full class. The orb sits behind the text content in the stacking order so it never obscures the biography.

​
Bio Text Structure

The heading “Scrying the Self” introduces the section. Beneath it, three prose blocks appear in sequence:
  1. Identity paragraph — describes the developer as a maker of digital experiences:
    “I am a weaver of digital tapestries, a conjurer of interfaces, and a binder of data…”
  2. Working philosophy paragraph — splits the day/night metaphor across two concerns:
    “By day, I transmute complex business requirements into elegant, accessible user experiences. By night, I study the deeper mysteries of performance optimization and state management.”
  3. Closing quote — the Clarke attribution that anchors the mystical framing:
    “Any sufficiently advanced technology is indistinguishable from magic.”

​
Scroll Animation

Both the moon orb and the witch hat are animated with Framer Motion’s useScroll and useTransform hooks. useScroll provides a scrollY motion value that represents the current vertical scroll position of the page in pixels. useTransform maps that raw pixel value to a new range that drives the element’s y offset.

​
Moon Orb — Scrolls Down

import { useScroll, useTransform, motion } from "framer-motion";

const { scrollY } = useScroll();

// Over the first 1000 px of scroll, the orb moves 0 → 300 px downward
const moonY = useTransform(scrollY, [0, 1000], [0, 300]);

<motion.div
  style={{ y: moonY }}
  className="w-[400px] h-[400px] rounded-full bg-moonlight-silver/10"
/>
scrollY inputmoonY outputVisual effect
0 px0 pxOrb at its initial position
500 px150 pxOrb halfway down
1000 px300 pxOrb at maximum offset
Because the input range clamps at 1000 px, scrolling further than that does not move the orb beyond 300 px.

​
Witch Hat — Floats Up

The witch hat SVG near the bottom of the page moves in the opposite direction — it rises as the user scrolls down, creating a counterpoint to the descending moon: 
// Over the first 1000 px of scroll, the hat moves 0 → -50 px (upward)
const hatY = useTransform(scrollY, [0, 1000], [0, -50]);

<motion.div style={{ y: hatY }}>
  {/* witch hat SVG */}
</motion.div>
Both transforms share the same scrollY source, so they update together on every frame with no additional event listeners required.

​
Customizing the Bio

All three text blocks are hardcoded strings inside the AboutPage component. To update the biography, locate each paragraph by its opening phrase and replace the content: Paragraph 1 — Identity 
// Current text (find this line in AboutPage)
"I am a weaver of digital tapestries, a conjurer of interfaces, and a binder of data..."

// Replace the string with your own introduction
"I am a ..."
Paragraph 2 — Philosophy 
// Current text
"By day, I transmute complex business requirements into elegant, accessible user experiences.
By night, I study the deeper mysteries of performance optimization and state management."

// Replace with your own day/night or work/learning split
Paragraph 3 — Quote 
// Current text
"Any sufficiently advanced technology is indistinguishable from magic."

// Swap in any single-sentence aphorism you prefer
The heading "Scrying the Self" is a separate string just above the paragraph block — change it independently if you want a different section title without touching the bio text.

Build docs developers (and LLMs) love

Get started for freeTalk to us