The Case Studies page presents a single long-form project breakdown under the Project Nebula theme. The page is laid out with a sticky sidebar that lists the six major sections of the case study — Problem, Goal, Process, Design Decisions, Dev Decisions, and Result — allowing readers to jump directly to any section or track their reading progress as they scroll. The content is written as a technical narrative that goes significantly deeper than the one-line descriptions in the Mission Catalog.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/aurora-borealis/llms.txt
Use this file to discover all available pages before exploring further.
What the Page Displays
The/case-studies route contains:
- Sticky sidebar navigation — a fixed-position list of internal anchor links that highlight the currently visible section as the user scrolls.
- Six content sections — each section is an
<article>element with anidthat the sidebar links target. - Project header — the case study opens with the project name, a one-sentence thesis statement, and the tech stack as badges.
The Six Sections
The default case study covers Nebula DB, a distributed Rust key-value database. The six sections are:Problem
Describes the specific pain point or gap in the ecosystem that the project was built to address.
Goal
Defines the success criteria — what a working solution needed to achieve, stated as measurable outcomes.
Process
Chronicles the development journey: research, prototyping, iteration, and pivots made along the way.
Design Decisions
Explains the key architectural and UX choices — why certain approaches were selected over the alternatives.
Dev Decisions
Covers language choice, library selection, performance trade-offs, and implementation details.
Result
Documents outcomes: performance benchmarks, lessons learned, and what you would do differently.
Content Data Structure
Each section is stored as an object in aCASE_STUDY object in main.js:
Sticky Sidebar Navigation
The sidebar renders an anchor list from thesections array. The active section is tracked with an IntersectionObserver:
activeId state updates whenever a section’s <article> element crosses the 30% viewport threshold — the corresponding sidebar link receives the active class and a highlight style.
The sidebar is
position: sticky with a top: 2rem offset. On mobile viewports (below 768 px), the sidebar collapses into a horizontal tab strip at the top of the page instead of a vertical rail.Replacing with Your Own Project
Update the project header
Change
CASE_STUDY.projectName, CASE_STUDY.thesis, and CASE_STUDY.tech to match your project.Rewrite each section's content
Replace the
content string in each section object. Use backtick template literals to allow multi-paragraph text with natural line breaks.Keep section IDs stable
The sidebar links use the
id values as anchor hrefs. Keep the six IDs (problem, goal, process, design-decisions, dev-decisions, result) unless you rename the headings — if you do rename them, update both the id and heading fields together.Add images or diagrams (optional)
Each section object accepts an optional
image field. Set it to a path string (e.g., "/images/architecture-diagram.png") and the section component will render it below the text block.Adding Additional Case Studies
The current implementation supports one case study at a time. To display multiple case studies:- Convert
CASE_STUDYinto an array:const CASE_STUDIES = [{ ...nebulaDb }, { ...yourNewProject }]. - Add a project selector (tabs or a card grid) at the top of the page that sets a
selectedCaseStudystate variable. - Pass
CASE_STUDIES[selectedIndex]to the case study renderer.
Related Pages
Projects
The Mission Catalog where Nebula DB appears as an interactive orb.
Writing
The Transmission Archive — shorter-form technical writing.