Oracle is the digital grimoire of Alex Weaver — a Software Developer and self-described Occasional Oracle who forges interfaces from raw logic and animated intention. Built as a single-page application with React 18 and Framer Motion, Oracle blurs the line between portfolio and interactive art piece. Every route is a ritual, every component a spell: visitors peer into an animated orb on the home page, flip tarot cards on the About page, and explore projects from a glowing cauldron. The site is a deliberate statement that technical craft and aesthetic depth are not opposites.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.
About — The Reading
Three tarot cards reveal Alex’s nature as developer, night owl, and debugger. Click each card to flip it 180° and read the inscription within.
Projects — The Apothecary
A cauldron of brewed projects. Select a potion to surface its name, tech stack, and full description from the glowing vessel.
Skills — The Ingredients Pantry
Potion-jar visualisations display proficiency levels for React, TypeScript, Tailwind, Node.js, and more. Hover each jar to inspect its potency.
Work Experience — Rituals Performed
A timeline of past roles at Arcane Systems, Mystic Web Co, and Digital Coven, with animated candles that glow when a role is selected.
The Aesthetic
Oracle’s visual identity is built around the idea that great software feels like magic to the people who use it. Every design decision reinforces that metaphor:- Dark background (
#051618) — a near-black deep teal that evokes the void between stars and keeps the eye focused on glowing content. - Turquoise accent (
#1de9b6) — the primary energy colour used for borders, hover glows, active states, and the particle trails that follow the custom cursor. - Parchment typography (
#fdf6e3) — a warm off-white that recalls aged scrolls and softens the contrast against the dark background. - Gold accents (
#e8c468) — reserved for headings, Roman numerals, and decorative dividers, lending the interface an occult formality. - Custom cursor — the default system cursor is hidden site-wide and replaced with a bespoke cursor that emits turquoise particle trails as it moves, built inside
components/CustomCursor.js. - Animated orb — the home page centres a large glowing sphere with a radial turquoise gradient that pulses in a looping Framer Motion animation. Hovering the orb reveals Alex’s name and title through a blur-to-sharp transition.
- Framer Motion transitions — every page entrance, card flip, and hover state is driven by Framer Motion spring and easing configurations, ensuring motion feels physical rather than mechanical.
Tech Stack
| Technology | Role |
|---|---|
| React 18 | Component model and UI rendering |
| TypeScript | Type-safe props, state, and data shapes |
| Vite | Development server and production bundler |
| React Router v6 | Client-side routing with hash history |
| Framer Motion | Declarative animation engine for all transitions |
| Tailwind CSS | Utility-first styling with custom theme tokens |
Oracle is a fully static single-page application deployed on GitHub Pages. Because GitHub Pages does not support server-side URL rewriting, the site uses hash-based routing — all navigation paths are encoded after the
# character (e.g. /#/about, /#/projects). This means the server always serves the same index.html file, and React Router handles route resolution entirely in the browser. No backend is required and no server configuration is needed to support deep linking.