Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/mystery-haunting/llms.txt

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

The Attic transforms the conventional developer bio into a classified monster file. Styled as Monster File Dossier #404, the page presents personal and professional details in the format of a creature profile pulled from some bureaucratic supernatural registry. At its center is an interactive polygon-shaped card that begins closed — showing only a cryptic exterior — and flips open on click to reveal a monster illustration alongside the full dossier. The tone is absurd and self-aware, and the layout rewards curiosity.

​
Interactive Dossier Card

The card is the main interactive element on the page. It uses a CSS clip-path: polygon() to trim its corners into an irregular, roughly hexagonal shape, giving it the look of a classified file folder or arcane artefact rather than a standard rectangle. The flip interaction is handled by Framer Motion using a rotateY transform. The card has two faces — a front face showing a sealed, ominous exterior and a back face containing the dossier contents and monster illustration. Clicking anywhere on the card triggers the flip by toggling the rotateY value between 0deg and 180deg.
PropertyValue
ShapeCSS clip-path: polygon()
Flip axisrotateY
Flip triggeronClick
Front faceSealed dossier exterior
Back faceMonster illustration + dossier fields
TransitionFramer Motion spring
The back face uses rotateY: 180deg on its own container so that the text and illustration read correctly once flipped, countering the parent’s transform.

​
Dossier Fields

Once the card is flipped open, the following fields are displayed in the monster profile section:
FieldValue
SpeciesHomo Sapiens (Debatable)
Primary HabitatDark Mode IDEs
Hours AwakeToo Many
Caffeine Resistance0%, Critical
Known WeaknessesLegacy Code, Sunlight
Each field renders as a label/value pair styled to resemble typewritten entries on an official form, complete with dotted underlines and monospace typography.

​
Developer Bio

The bio appears beneath the dossier fields on the card’s back face. It reads:
Discovered lurking in the depths of the web, this creature specializes in weaving complex webs of React and TypeScript. Known to haunt servers late at night, leaving behind optimized builds and occasionally, a spooky easter egg. Approach with coffee.

​
Page Header

The page header follows the same two-line pattern as the rest of the site:
  • Title: THE CREATURE IN THE ATTIC
  • Subtitle: Monster File Dossier #404
The title renders in the same large display typeface used throughout the portfolio, with the subtitle in a smaller, muted treatment beneath it.

​
Customization

The dossier fields are defined as an array of label/value objects rendered inline on the card’s back face. Update the value strings to reflect your own details, or add and remove entries to change what the dossier reports.
// Dossier fields are inline JSX — update these strings:
{ label: 'Species', value: 'Homo Sapiens (Debatable)' }
{ label: 'Primary Habitat', value: 'Dark Mode IDEs' }
{ label: 'Hours Awake', value: 'Too Many' }
{ label: 'Caffeine Resistance', value: '0%, Critical' }
{ label: 'Known Weaknesses', value: 'Legacy Code, Sunlight' }

// Example rendering pattern:
{dossierFields.map(({ label, value }) => (
  <div key={label} className="dossier-field">
    <span className="field-label">{label}</span>
    <span className="field-value">{value}</span>
  </div>
))}
Add new entries to the array to introduce additional fields. They will render in order from top to bottom on the card.
The bio text is a plain string rendered inside the card’s back face, below the dossier fields. Find the bio paragraph in the component and replace the text content directly.
<p className="bio-text">
  Discovered lurking in the depths of the web, this creature specializes
  in weaving complex webs of React and TypeScript. Known to haunt servers
  late at night, leaving behind optimized builds and occasionally, a spooky
  easter egg. Approach with coffee.
</p>
The bio does not have a character limit, but longer text may overflow the card’s clipped boundary on smaller viewports. Test on mobile after making changes.

Build docs developers (and LLMs) love

Get started for freeTalk to us