Aurora Drift’s five core portfolio pages form the backbone of the template. Each one is backed by a dedicated HTML file inDocumentation 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.
/pages/ that handles static deep-linking, and each renders inside the shared AuroraBackground + CursorGlow + Nav + PageTransition app shell. Despite covering very different content types, all five pages share the same foundational glass-panel aesthetic — a semi-transparent dark card surface with a subtle white border over the aurora backdrop.
About — /about
Personal bio, a timeline of milestones or education, and any personal detail sections. Served from
pages/About.html.Projects — /projects
A responsive project grid. Each card shows project name, description, tech stack tags, and external links. Served from
pages/Projects.html.Skills — /skills
Skills grouped by category and displayed as pill tags. Served from
pages/Skills.html.Work — /work
A vertical work-history timeline with alternating left/right card layout on medium-and-up screens. Served from
pages/Work.html.Contact — /contact
A contact form with name, email, and message fields, plus an aurora-gradient submit button. Served from
pages/Contact.html.About /about
The About page presents a personal narrative through bio text and a timeline of key life or career events. Each timeline entry or bio block is rendered inside a glass panel card layered over the aurora background, giving the page depth without sacrificing readability.
Layout details
Layout details
The page uses a single-column layout on mobile and expands to a two-column or offset-card arrangement on larger screens. Timeline entries are spaced with generous vertical gaps so the aurora background remains visible between cards. Avatar or profile images, if included, are displayed in a rounded container with a subtle ring in an aurora accent colour.
Projects /projects
The Projects page displays your work in a responsive card grid. Each project card follows this Tailwind pattern:
- Project name — bold heading at the top of the card.
- Description — one to two sentence summary of the project.
- Tech tags — small pill badges listing the technologies used, styled similarly to the Skills pills.
- Links — icon-button links to the live project and/or source repository.
Adding a new project card
Adding a new project card
Open the Projects React component source file. Locate the project data array — each entry is a plain JavaScript object with keys like
name, description, tags, liveUrl, and repoUrl. Add a new object to the array and the grid will automatically include it on next build.Skills /skills
The Skills page organises your technical and professional capabilities into named categories. Each skill within a category is rendered as a pill tag:
Work /work
The Work page presents employment history as a vertical timeline. On medium-and-up screens the layout alternates card positions left and right of a central axis line styled as:
- Company name and role — displayed as a heading pair.
- Date range — a muted metadata line.
- Description — bullet points or prose summarising responsibilities and achievements.
Responsive behaviour
Responsive behaviour
On mobile (
< md) the alternating layout collapses to a single left-aligned column. The timeline line shifts to the left edge of the viewport with each card indented to its right. The aurora-turquoise accent line remains visible as a continuous visual guide.Contact /contact
The Contact page provides a simple three-field form: Name, Email, and Message. All inputs share a consistent focus style:
Aurora Drift’s contact form is purely front-end by default — there is no back-end handler or form service configured. To make form submissions functional, wire the form to a service such as Formspree, Netlify Forms, or your own API endpoint inside the Contact component’s submit handler.