Skip to main content

Documentation Index

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

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

Aurora Drift ships five content-focused pages beyond the core portfolio: a blog listing, individual blog post view, case studies grid, case study detail view, and a testimonials showcase. All content on these pages is hardcoded directly in the React component source — there is no CMS, database, or external API involved. This makes the template entirely self-contained and deployable to any static host, but it also means that adding new posts or studies requires editing source files rather than a web interface.
To add real blog posts or case studies, edit the data arrays inside the corresponding React component source files. Each post or study is a plain JavaScript object in an array — add a new object and rebuild the project to publish new content.

​
Blog /blog

The Blog listing page displays all posts in a responsive card grid. Each post card uses: 
bg-navy-800/80 border border-white/10 rounded-2xl p-6
Card contents include:
  • Title — bold heading linking to the individual post at /blog/:slug.
  • Date — formatted publication date in a muted colour.
  • Category tag — a pill badge in an aurora accent colour indicating the post’s topic area.
  • Excerpt — a short preview of the post body to give readers context before clicking through.
On hover, each blog card receives a subtle border glow in aurora-cyan or aurora-teal (depending on the category) and lifts slightly via a translateY transform. This is handled by a Tailwind group-hover or direct hover: class on the card wrapper.

​
Blog Post /blog/:slug

The individual Blog Post view renders a single post identified by its slug. The layout is editorial and prose-focused:
  • Large title — displayed at the top of the content area in a large serif weight.
  • Metadata row — date, author name, and category tag displayed in a single horizontal line beneath the title.
  • Body content — long-form text rendered with leading-relaxed line spacing for comfortable reading. Code blocks, if any, use the site’s syntax highlight theme.
There is no server-side routing. The slug is read from the URL hash by the React Router useParams hook, and the component looks up the matching post object in the hardcoded posts array by comparing the slug field. If no match is found, the component should render a fallback or redirect to /blog.

​
Case Studies /case-studies

The Case Studies listing is structurally similar to the Blog listing but uses larger, more visually prominent cards suited to showcasing project work:
  • Image placeholder — an aspect-[4/3] image area at the top of each card for a hero screenshot or mockup.
  • Category badge — displayed over the image in aurora-teal or aurora-magenta depending on the study’s domain.
  • Title and summary — below the image area, using the same bg-navy-800/80 border border-white/10 rounded-2xl glass-panel card base.
  • Link — each card links to /case-studies/:slug for the full detail view.

​
Case Study Detail /case-studies/:slug

The Case Study Detail page gives each study a full-page canvas with a structured narrative layout:

Hero Section

A full-width banner area at the top of the page with the study title and a large image placeholder for a project hero visual.

Challenge

A glass-panel section describing the problem or brief that the project was designed to solve.

Solution

A glass-panel section explaining the approach, design decisions, and technical implementation.

Outcome

A glass-panel section summarising results, metrics, or qualitative impact of the work.
Full-width image placeholders are interspersed between the narrative panels to break up text and showcase visual deliverables. Like the Blog Post view, the slug is resolved by matching against the hardcoded case studies array in the component source.

​
Testimonials /testimonials

The Testimonials page presents social proof in a card-based layout styled as a carousel or stacked sequence. Each testimonial card contains:
  • Avatar — a circular image placeholder for the reviewer’s photo.
  • Quote — the testimonial text in a large italic or serif style.
  • Name and role — displayed beneath the quote as a byline.
Card highlight colours cycle through the aurora palette to add visual variety: 
aurora-turquoise  →  aurora-cyan  →  aurora-magenta
The cycling is applied to the card’s top border or left accent stripe, keeping each testimonial visually distinct while staying on-brand.
The /testimonials route is not listed in the primary navigation bar. You can add it to the nav by editing the xp array in components/Nav.js, or leave it as a secondary page linked from the About page or a footer.
To add an entirely new page type — for example, a Speaking page or a Press page — rather than editing the existing data arrays, see the Adding Pages guide for a step-by-step walkthrough of creating a new route, HTML file, and React component from scratch.

Build docs developers (and LLMs) love

Get started for freeTalk to us