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 Almanac
Every oracle keeps a record of hard-won knowledge. In Alex Weaver’s portfolio, The Almanac is that record — a curated collection of technical writing where practical software engineering meets the mystical aesthetic of the Oracle project. The page arranges four articles in a responsive four-column grid of flip cards: each card rests face-up displaying an enigmatic oracle sigil, and on hover it rotates 180° on its Y-axis to reveal the article’s title, publication date, estimated read time, and a teaser excerpt. The effect transforms what could be a plain blog index into an interactive cabinet of curiosities.Articles
Understanding React's UseEffect: A Divination Guide
Published: October 31, 2023 · Read time: 5 minStop fighting the dependency array. Learn to read the signs and sync your components with the external world peacefully.
CSS Grid: Sacred Geometry for Layouts
Published: September 15, 2023 · Read time: 8 minAbandon the float hacks of old. Embrace the two-dimensional power of Grid to construct layouts that adapt to any viewport.
Banishing Memory Leaks in Single Page Apps
Published: August 02, 2023 · Read time: 6 minPhantom event listeners and unclosed subscriptions can drain your app’s vitality. Here is how to hunt them down.
The Alchemy of Webpack Configuration
Published: July 11, 2023 · Read time: 10 minTransmute your raw assets into an optimized bundle. A beginner’s guide to understanding the bundler’s dark arts.
The Flip Card Mechanic
Each article is mounted inside a CSS flip card built with three nested elements:- Outer wrapper — sets a fixed height and enables
perspectiveso the 3-D rotation looks natural at a reading distance. - Inner container — carries
transform-style: preserve-3dand transitions ontransform. On hover, the parent appliesrotate-y-180to this element via a Tailwind utility, spinning the entire card 180° around its vertical axis. - Front face — visible by default (
rotateY(0deg)). Renders the same generic SVG oracle sigil on every card — a diamond, two concentric circles, and a crosshair — centred on a dark card background. The sigil is identical across all four articles; it acts as a uniform mystical placeholder rather than a content-specific visual. - Back face — starts hidden (
rotateY(180deg)) thanks tobackface-visibility: hidden. Once the card has rotated, this face is forward-facing and displays the article’s title, date, read time, and excerpt.
backface-visibility: hidden and preserve-3d on the shared inner container, only one face is ever visible at a time — no z-index juggling required. The transition duration is set to 600ms with an ease-in-out timing function, giving the reveal a deliberate, ceremonial pace that fits the Oracle theme.
Article Excerpts
Understanding React's UseEffect: A Divination Guide
Understanding React's UseEffect: A Divination Guide
Stop fighting the dependency array. Learn to read the signs and sync your components with the external world peacefully.Published October 31, 2023 · 5 min read
CSS Grid: Sacred Geometry for Layouts
CSS Grid: Sacred Geometry for Layouts
Abandon the float hacks of old. Embrace the two-dimensional power of Grid to construct layouts that adapt to any viewport.Published September 15, 2023 · 8 min read
Banishing Memory Leaks in Single Page Apps
Banishing Memory Leaks in Single Page Apps
Phantom event listeners and unclosed subscriptions can drain your app’s vitality. Here is how to hunt them down.Published August 02, 2023 · 6 min read
The Alchemy of Webpack Configuration
The Alchemy of Webpack Configuration
Transmute your raw assets into an optimized bundle. A beginner’s guide to understanding the bundler’s dark arts.Published July 11, 2023 · 10 min read