Forbidden Knowledge is the articles page of the Digital Alchemy portfolio, rendered at routeDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/digital-alchemy/llms.txt
Use this file to discover all available pages before exploring further.
/articles (with an optional /:slug parameter for deep-linking to individual pieces). The page presents five authored technical articles as physical books standing on a dark wooden shelf — each spine is color-coded by topic and labelled with the article title, and hovering over a book reveals an invitation to read it.
What Renders on This Page
The page opens with the standard Framer Motion heading block:- Heading: “Forbidden Knowledge” in large parchment serif
- Subheading: “Tomes written on the art of web development” in uppercase turquoise
Bookshelf component renders centered at max-w-3xl, displaying five books standing upright on a shelf identical in construction to the potion bottle shelf on the Summonings page — a bg-[#2A1B12] plank with a dark bottom border and subtle repeating-line wood grain texture.
Bookshelf Component
The articles display component. Renders books as colored vertical divs with rotated spine text and a hover-triggered tooltip. Each book springs down into place from above with a staggered Framer Motion entrance.
The Five Tomes
Books are displayed left to right in the order defined in the source data. Each has a uniquecolor, a varying height class, and a staggered delay for the entrance animation.
| Title | Spine Color | Relative Height | Entrance Delay |
|---|---|---|---|
| React Performance Runes | Deep Purple #4A0E4E | h-48 (short) | 0.1 s |
| The CSS Grimoire | Dark Teal #004D40 | h-56 (tall) | 0.2 s |
| Accessibility Spells | Dark Red #8B0000 | h-44 (shortest) | 0.3 s |
| State Management Alchemy | Dark Blue #1A237E | h-52 (medium-tall) | 0.4 s |
| Framer Motion Secrets | Dark Brown #3E2723 | h-60 (tallest) | 0.5 s |
The varying heights create a naturally uneven roofline across the shelf, mimicking the look of a real bookcase where volumes of different sizes coexist. This detail reinforces the physical-world metaphor throughout the portfolio.
Article Descriptions
React Performance Runes
React Performance Runes
A deep dive into React rendering optimization techniques — memoization patterns, bundle splitting, virtualized lists, and profiler-guided diagnosis of unnecessary re-renders. Aimed at developers who already know React well and want to push their applications further.
The CSS Grimoire
The CSS Grimoire
A comprehensive reference for advanced CSS: cascade layers, container queries, custom properties as state,
@property registered values, and modern layout incantations with Grid and Subgrid. Covers both the theory and practical browser support realities.Accessibility Spells
Accessibility Spells
Practical accessibility engineering — ARIA live regions, focus management in SPAs, color contrast at scale, keyboard navigation patterns for complex widgets, and how to audit an existing codebase with axe-core and screen reader testing.
State Management Alchemy
State Management Alchemy
A comparative study of state management strategies in React applications: local state, lifted state, Context API, Zustand, Jotai, and Redux Toolkit. Includes decision frameworks for choosing the right tool for a given project’s complexity.
Framer Motion Secrets
Framer Motion Secrets
An exploration of advanced Framer Motion patterns beyond the basics: layout animations,
AnimatePresence with shared element transitions, scroll-driven animations with useScroll and useTransform, and the motion.custom primitive for animating non-standard components.Interactive Behaviors
- Entrance animation: Each book springs down from
y: -50, opacity: 0to its resting position withtype: "spring", bounce: 0.4 - Hover lift:
y: -20withscale: 1.05and an elevatedzIndex: 20so lifted books overlap their neighbors - Tooltip: Absolutely positioned above the book, using
group-hover:opacity-100to appear on hover - Spine text: Article titles are rotated 90° with
whitespace-nowrapand a fixed width, ensuring they read bottom-to-top like a real book spine
Route Information
| Property | Value |
|---|---|
| Route path | /articles, /articles/:slug |
| React component | Articles (internal name d) |
| Key components | Bookshelf |
| Animation library | Framer Motion |