The About page in Oracle is called The Reading — a nod to tarot card readings in which cards are drawn and interpreted to reveal deeper truths about a subject. Rather than a conventional bio section, the page presents three tarot-style cards laid face-down. Each card represents a distinct facet of Alex Weaver’s identity as a developer. The instruction printed beneath the heading reads: “Click the cards to reveal the practitioner’s nature.” Clicking any card triggers a 3D flip animation that rotates the card 180° on the Y-axis, exposing the inscription hidden on its reverse face. The front of each card shows a Roman numeral and an icon; the back carries the card’s name and a short paragraph of flavour text drawn directly from the source.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/oracle/llms.txt
Use this file to discover all available pages before exploring further.
The Three Cards
I — The Developer
Front: A code-bracket icon (
< / >) rendered in turquoise, with the Roman numeral I in gold at the top and the card name in parchment serif at the bottom.Reverse: “Forging digital realms from raw logic. I specialize in React, TypeScript, and crafting interfaces that feel like magic to the user.”II — The Night Owl
Front: A crescent moon icon in turquoise, with the Roman numeral II in gold at the top and the card name in parchment serif at the bottom.Reverse: “My best spells are cast when the world sleeps. The quiet hours are when complex architectures unravel into elegant solutions.”
III — The Debugger
Front: A circle-with-info icon in turquoise, with the Roman numeral III in gold at the top and the card name in parchment serif at the bottom.Reverse: “A seeker of truth in the console. I banish phantom bugs and untangle cursed legacy code with patience and precision.”
Card Interaction & Animation
Each tarot card is an independent interactive component that manages its own flipped/unflipped state viaReact.useState. The following interaction behaviours are implemented:
Click to flip — Clicking anywhere on the card surface toggles the isFlipped boolean. Framer Motion animates the rotateY property from 0° (face showing) to 180° (back showing) using an easeInOut easing curve over 600 ms. The front face uses a backface-hidden CSS class so it is invisible when the card is rotated past 90°, and the back face is pre-rotated by rotate-y-180 so it appears correctly when the card completes its turn.
Hover lift — When the card is in its unflipped state, Framer Motion’s whileHover prop translates the card upward by 10px with a fast 200 ms transition, giving a tactile “picking up the card” sensation. This hover lift is intentionally disabled when the card is already flipped, so the back-face reading is not disturbed by accidental hover offsets.
Entrance animation — Cards animate in on page load with a staggered delay (0 ms, 200 ms, 400 ms respectively). Each card begins 50 px below its final position with zero opacity and slides up to rest, creating a sequential reveal effect.