Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/cosmic-developer/llms.txt
Use this file to discover all available pages before exploring further.
The Case Studies page (/case-studies) presents detailed project work as “Flight Recordings” — declassified mission logs that walk through the problem, approach, and measurable outcome of each engagement. The layout uses alternating full-width panels so that every case study commands the full horizontal canvas of the viewport, alternating the image and text sides to create visual rhythm as the user scrolls.
Layout Overview
The page uses a PageTransition wrapper and is divided into:
Header
TeletypeText types "Decrypting flight recordings..." in aurora-teal mono font- H1 reads “Flight Recordings” —
"Recordings" highlighted in text-aurora-teal
Case Study List
- A
flex flex-col gap-24 pb-20 container holds all panels
- Each panel is a
motion.div with a staggered whileInView entrance (opacity: 0 → 1, y: 50 → 0)
- Viewport margin
-100px allows the animation to trigger slightly before the element fully enters the viewport
Alternating Direction
The flex row direction reverses based on the entry’s array index:
| Index | Flex direction | Image side | Text side |
|---|
| Even (0, 2…) | md:flex-row | Left | Right |
| Odd (1, 3…) | md:flex-row-reverse | Right | Left |
Case Studies Data
The two case studies are defined in the caseStudies array inside the jt component:
const caseStudies = [
{
title: 'Project Apollo',
subtitle: 'E-commerce Redesign',
desc: 'A complete overhaul of a legacy platform, increasing conversion by 24% and reducing load times to sub-second levels.',
image: 'bg-gradient-to-br from-slate-800 to-slate-900',
accent: 'text-aurora-teal',
},
{
title: 'Voyager Dashboard',
subtitle: 'Data Visualization',
desc: 'Complex data streams simplified into an intuitive, accessible interface for financial analysts.',
image: 'bg-gradient-to-br from-indigo-900 to-slate-900',
accent: 'text-aurora-magenta',
},
]
Panel Breakdown
Each panel consists of two halves:
Image Panel (left or right, w-full md:w-1/2)
| Element | Details |
|---|
| Container | aspect-video rounded-2xl with gradient background class from data |
| Noise overlay | Subtle SVG base64 checkerboard at 5% opacity for a “visual static” texture |
| Default state | Centered "Visual Data Encrypted" label in star-dim/50 |
| Hover overlay | bg-black/20 fades in (opacity 0 → 100) revealing “View Record →” with an ArrowRight icon |
group-hover:opacity-100 transition-opacity pattern — no JS state is needed, pure CSS group hover.
Text Panel (right or left, w-full md:w-1/2)
| Element | Details |
|---|
| Subtitle | font-mono text-sm in the entry’s accent color (e.g. text-aurora-teal) |
| Title | text-3xl md:text-4xl font-heading font-bold text-star-white |
| Description | text-star-dim text-lg leading-relaxed |
| CTA button | "Initialize Playback" — outlined pill button, hovers to border-aurora-teal text-aurora-teal |
Entry Accents
Each case study has its own accent color that applies to the subtitle label:
| Case Study | Accent class |
|---|
| Project Apollo | text-aurora-teal |
| Voyager Dashboard | text-aurora-magenta |
Animation Details
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: '-100px' }}
>
-100px viewport margin means the reveal fires 100 pixels before the element fully scrolls into view, preventing a jarring pop-in at the exact scroll boundary.
Customization
Adding a new case study — append an object to caseStudies:
{
title: 'Pulsar CMS',
subtitle: 'Content Platform',
desc: 'Rebuilt the editorial workflow for a high-traffic publication, reducing publish latency by 60%.',
image: 'bg-gradient-to-br from-violet-900 to-slate-900',
accent: 'text-aurora-violet',
}
image gradient class with a real image background:
image: 'bg-[url("/images/pulsar-cms-preview.png")] bg-cover bg-center',
"Initialize Playback" in the button and replace with your desired label (e.g. "Read Full Report").
The image panel currently shows "Visual Data Encrypted" as a placeholder. This is intentional to maintain the encryption/decryption narrative. Replace the inner content of the image div with a real screenshot or illustration when the portfolio is live.
Each panel entry supports any valid Tailwind gradient class for image. Use from-, via-, and to- stops to match the project’s brand palette — the gradient acts as both a placeholder and a subtle brand signal.