Cayden Website 2.0: Rewrite with t3code & hand

2026-10-31 20:06:37 -05:00 · 2026-10-31 20:06:37 -05:00 · 243527af9f
commit 243527af9f
parent 75a0e8f5fc
34 changed files with 1652 additions and 1001 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -6,14 +6,14 @@
 # Note that environment variables can be set in several places
 # See https://docs.gitlab.com/ci/variables/#cicd-variable-precedence
 stages:
- test
- secret-detection
+    - test
+    - secret-detection
 sast:
-  stage: test
+    stage: test
 include:
- template: Security/SAST.gitlab-ci.yml
- template: Security/Secret-Detection.gitlab-ci.yml
+    - template: Security/SAST.gitlab-ci.yml
+    - template: Security/Secret-Detection.gitlab-ci.yml
 variables:
-  SECRET_DETECTION_ENABLED: 'true'
+    SECRET_DETECTION_ENABLED: 'true'
 secret_detection:
-  stage: secret-detection
+    stage: secret-detection
--- a/.prettierrc
+++ b/.prettierrc
@ -1,5 +1,7 @@
 {
-    "tabWidth": 4,
-    "singleQuote": true,
-    "useTabs": true
-}
+	"tabWidth": 4,
+	"singleQuote": true,
+	"useTabs": true,
+	"plugins": ["prettier-plugin-tailwindcss"],
+	"tailwindStylesheet": "./app/globals.css"
+}
--- a/AGENTS.md
+++ b/AGENTS.md
@ -1,4 +1,5 @@
 <!-- BEGIN:nextjs-agent-rules -->
+
 # This is NOT the Next.js you know

 This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
--- a/README.md
+++ b/README.md
@ -1,80 +1,23 @@
 # Cayden's Website

-A professional portfolio and markdown-powered blog built with **Next.js 16**, **React 19**, **TypeScript**, and **Tailwind CSS 4**.
+A developer portfolio built with **Next.js 16**, **React 19**, **TypeScript**, and **Tailwind CSS 4**, featuring a full-page React Bits `GradientWaves` ("Aurora") background behind sharp, translucent `1px` panels.

-This site serves as a digital portfolio for Cayden, a Web Developer & Focus-Driven Leader, highlighting expertise in Clinical UI/UX, EHR systems, and large-scale logistics. It features a custom Nord-inspired design and a dynamic blog system.
-
-## 🚀 Features
-
- **Modern Tech Stack**: Built with React 19 and Next.js 16 using the App Router.
- **Tailwind CSS 4**: Modern, high-performance styling with the Nord color palette.
- **Markdown Blog**: Fully dynamic blog system powered by `remark` and `gray-matter`.
- **Responsive Design**: Elegant mobile-first navigation and layout.
- **Optimized Typography**: Custom Google Fonts (Cormorant Garamond & Poppins) via `next/font`.
- **Type-Safe**: Full TypeScript implementation for robust development.
-
-## 🛠️ Tech Stack
-
- **Framework**: [Next.js 16](https://nextjs.org/) (App Router)
- **Library**: [React 19](https://react.dev/)
- **Styling**: [Tailwind CSS 4](https://tailwindcss.com/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Content**: Markdown with [Remark](https://github.com/remarkjs/remark) & [Gray-matter](https://github.com/jonschlinkert/gray-matter)
- **Icons**: [Heroicons](https://heroicons.com/)
- **Date Handling**: [Moment.js](https://momentjs.com/)
-
-## 📂 Project Structure
+## Structure

 ```text
-├── app/              # Next.js App Router (pages, layouts, globals)
-│   ├── blog/         # Blog listing and dynamic article pages
-│   ├── contact/      # Contact page
-│   └── layout.tsx    # Root layout with fonts and navigation
-├── articles/         # Markdown content for blog posts
-├── components/       # Reusable UI and Layout components
-│   ├── layout/       # Header, Footer, etc.
-│   └── ui/           # Generic UI elements
-├── lib/              # Utility functions and data fetching (markdown parser)
-├── public/           # Static assets (images, icons)
-├── types/            # TypeScript interface definitions
-└── package.json      # Dependencies and scripts
+app/               Root layout, global styles, home page
+components/
+  layout/          Header, Footer, PageBackground
+  sections/        Hero, Projects, Feats, Contact
+  ui/              Reveal, SectionHeading
+  GradientWaves.tsx  Vendored from React Bits
+lib/site.ts        All editable content and types
 ```

-## 🏁 Getting Started
-
-First, install the dependencies:
+## Development

 ```bash
-npm install
-# or
 bun install
+bun dev       # http://localhost:3000
+bun run format
 ```
-
-Then, run the development server:
-
-```bash
-npm run dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-## 📝 Writing Articles
-
-To add a new blog post, create a `.md` file in the `/articles` directory with the following frontmatter:
-
-```markdown
---
-title: "Your Title"
-date: "YYYY-MM-DD"
-category: "Category Name"
-description: "Brief summary of the article"
---
-
-Your content here...
-```
-
-## 📜 License
-
-This project is private and intended for portfolio demonstration.
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@ -1,31 +0,0 @@
-import Link from "next/link"
-import {ArrowLeftIcon} from "@heroicons/react/24/solid"
-import {getArticleData, getSortedArticles} from "@/lib/articles";
-
-export async function generateStaticParams() {
-    const articles = getSortedArticles();
-
-    return articles.map((article) => ({
-        slug: article.id,
-    }));
-}
-
-const Article = async ({params}: { params: Promise<{ slug: string }> }) => {
-    const {slug} = await params;
-    const articleData = await getArticleData(slug);
-
-    return (
-        <section className={"mx-auto w-10/12 md:w-1/2 mt-20 flex flex-col gap-5"}>
-            <div className={"flex justify-between font-poppins"}>
-                <Link href={"/blog"} className={"flex flex-row gap-1 place-items-center"}>
-                    <ArrowLeftIcon width={20}/>
-                    <p>blog homepage</p>
-                </Link>
-                <p>{articleData.date.toString()}</p>
-            </div>
-            <article className={"article"} dangerouslySetInnerHTML={{__html: articleData.contentHtml}}/>
-        </section>
-    )
-}
-
-export default Article;
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@ -1,21 +0,0 @@
-import {getCategorizedArticles} from "@/lib/articles";
-import ArticleItemList from "@/components/ArticleListItem";
-
-export default async function BlogPage() {
-    const articles = getCategorizedArticles()
-
-    return (
-        <>
-            <section className={"mx-auto w-11/12 md:w-1/2 mt-20 flex flex-col gap-16 mb-20"}>
-                <header className={"font-cormorantGaramond font-light text-6xl text-center"}>
-                    <h1 className={'text-nord-14'}>Blog & thoughts</h1>
-                </header>
-                <section className={"md:grid md:grid-cols-2 flex flex-col gap-10"}>
-                    {articles != null && Object.keys(articles).map((article) => (
-                        <ArticleItemList category={article} articles={articles[article]} key={article}/>
-                    ))}
-                </section>
-            </section>
-        </>
-    );
-}
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@ -1,7 +0,0 @@
-export default async function Contact() {
-    return (
-        <div className="flex flex-col items-center justify-center min-h-screen py-2">
-            <h1 className="text-4xl font-bold">Contact page, wip.</h1>
-        </div>
-    )
-}
--- a/app/globals.css
+++ b/app/globals.css
@ -1,84 +1,74 @@
-@import "tailwindcss";
+@import 'tailwindcss';

@theme inline {
-    --font-cormorantGaramond: "Cormorant_Garamond", "sans-serif";
-    --font-poppins: "Poppins", "sans-serif";
-
-    /* Nord: Polar Night */
-    --color-nord-0: #2e3440;
-    --color-nord-1: #3b4252;
-    --color-nord-2: #4D535F;
-    --color-nord-3: #434c5e;
-
-    /* Nord: Snow Storm */
-    --color-nord-4: #d8dee9;
-    --color-nord-5: #e5e9f0;
-    --color-nord-6: #eceff4;
-
-    /* Nord: Frost */
-    --color-nord-7: #8fbcbb;
-    --color-nord-8: #88c0d0;
-    --color-nord-9: #81a1c1;
-    --color-nord-10: #5e81ac;
-
-    /* Nord: Aurora */
-    --color-nord-11: #bf616a;
-    --color-nord-12: #d08770;
-    --color-nord-13: #ebcb8b;
-    --color-nord-14: #a3be8c;
-    --color-nord-15: #b48ead;
-
-    /* Optional semantic aliases */
-    --color-polar-night-dark: #2e3440;
-    --color-polar-night: #3b4252;
-    --color-polar-night-light: #434c5e;
-    --color-polar-night-lighter: #4c566a;
-
-    --color-snow-storm-dark: #d8dee9;
-    --color-snow-storm: #e5e9f0;
-    --color-snow-storm-light: #eceff4;
-
-    --color-frost-green: #8fbcbb;
-    --color-frost-cyan: #88c0d0;
-    --color-frost-blue: #81a1c1;
-    --color-frost-deep-blue: #5e81ac;
-
-    --color-aurora-red: #bf616a;
-    --color-aurora-orange: #d08770;
-    --color-aurora-yellow: #ebcb8b;
-    --color-aurora-green: #a3be8c;
-    --color-aurora-purple: #b48ead;
+	--font-display:
+		var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
+	--font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+	--font-mono:
+		var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, monospace;
 }

-.article {
-    @apply flex flex-col gap-3 font-poppins text-lg tracking-wide mb-20
+@theme {
+	--color-obsidian: #040807;
+	--color-aurora: #34d399;
+	--color-crest: #d1fae5;
+	--color-ink: #f2faf6;
 }

-.article > h1 {
-    @apply text-4xl font-cormorantGaramond text-center tracking-tight;
+@utility container-page {
+	@apply mx-auto max-w-5xl px-6;
 }

-.article > h2 {
-    @apply text-3xl font-cormorantGaramond text-center tracking-tight;
+@utility panel {
+	@apply border border-white/12 bg-obsidian/55 backdrop-blur-md;
 }

-.article > ol {
-    @apply list-decimal flex flex-col mx-10 gap-2;
+@utility btn-primary {
+	@apply border border-aurora bg-aurora px-5 py-2.5 text-obsidian transition-colors hover:border-crest hover:bg-crest;
 }

-.article > ul {
-    @apply list-disc flex flex-col mx-10 gap-2;
+@utility btn-ghost {
+	@apply border border-white/20 bg-obsidian/45 px-5 py-2.5 text-ink backdrop-blur-md transition-colors hover:border-aurora hover:text-aurora;
 }

-.article > pre {
-    @apply bg-neutral-950 text-neutral-50 p-5 overflow-scroll;
+html {
+	scroll-behavior: smooth;
+	scroll-padding-top: 4rem;
 }

-.article > blockquote {
-    @apply pl-5 italic border-l-2 border-neutral-600;
+::selection {
+	background: var(--color-aurora);
+	color: var(--color-obsidian);
 }

-.article > p > img {
-    @apply w-1/2 mx-auto;
+:focus-visible {
+	outline: 1px solid var(--color-aurora);
+	outline-offset: 2px;
 }

+@media (scripting: enabled) {
+	.reveal {
+		opacity: 0;
+		transform: translateY(10px);
+		transition:
+			opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
+			transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+		transition-delay: var(--reveal-delay, 0ms);
+	}
+
+	.reveal[data-visible='true'] {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	html {
+		scroll-behavior: auto;
+	}
+	.reveal {
+		opacity: 1;
+		transform: none;
+		transition: none;
+	}
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,42 +1,53 @@
-import React from "react";
-import type {Metadata} from "next";
-import {Cormorant_Garamond, Poppins} from "next/font/google";
-import "./globals.css";
-import Header from "@/components/layout/layout-header";
+import type { ReactNode } from 'react';
+import type { Metadata, Viewport } from 'next';
+import { Inter, JetBrains_Mono, Space_Grotesk } from 'next/font/google';
+import './globals.css';
+import Header from '@/components/layout/layout-header';
+import Footer from '@/components/layout/layout-footer';
+import PageBackground from '@/components/layout/page-background';

-const cormorantGaramond = Cormorant_Garamond({
-    subsets: ['latin'],
-    variable: "--font-cormorantGaramond",
-    weight: ['400']
-})
+const spaceGrotesk = Space_Grotesk({
+	subsets: ['latin'],
+	variable: '--font-space-grotesk',
+});

-const poppins = Poppins({
-    subsets: ['latin'],
-    variable: "--font-poppins",
-    weight: ['400', '600']
-})
+const inter = Inter({
+	subsets: ['latin'],
+	variable: '--font-inter',
+});

+const jetbrainsMono = JetBrains_Mono({
+	subsets: ['latin'],
+	variable: '--font-jetbrains-mono',
+	weight: ['400', '500'],
+});

 export const metadata: Metadata = {
-    title: "sh ~./caydencodes.sh",
-    description: "Come and see what I'm all about.",
+	title: 'Cayden — Web Developer',
+	description:
+		'Web developer building clinical interfaces and fleet software.',
 };

-export default async function RootLayout({
-                                       children,
-                                   }: Readonly<{
-    children: React.ReactNode;
+export const viewport: Viewport = {
+	themeColor: '#040807',
+};
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: ReactNode;
 }>) {
-    return (
-        <html
-            lang="en"
-            className={`${cormorantGaramond.variable} ${poppins.variable} bg-neutral-100 h-full antialiased`}
-        >
-        <body
-            className="min-h-full flex flex-col bg-polar-night-lighter text-snow-storm text-shadow-snow-storm-dark">
-        <Header/>
-        {children}
-        </body>
-        </html>
-    );
+	return (
+		<html
+			lang="en"
+			className={`${spaceGrotesk.variable} ${inter.variable} ${jetbrainsMono.variable} h-full bg-obsidian antialiased`}
+		>
+			<body className="relative isolate flex min-h-full flex-col font-sans text-ink">
+				<PageBackground />
+				<Header />
+				<div className="flex-1">{children}</div>
+				<Footer />
+			</body>
+		</html>
+	);
 }
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,93 +1,15 @@
-import React from "react";
+import Hero from '@/components/sections/hero';
+import Projects from '@/components/sections/projects';
+import Feats from '@/components/sections/feats';
+import Contact from '@/components/sections/contact';

-export default async function Home() {
-    return (
-        <main className="mx-auto mb-20 mt-20 flex w-11/12 max-w-4xl flex-col gap-12 md:w-2/3">
-            <section className="flex flex-col items-center gap-8 text-center font-cormorantGaramond">
-                <img
-                    src="/cayden-portrait.png"
-                    alt="Portrait of Cayden"
-                    className="h-40 w-40 rounded-full object-cover shadow-lg"
-                />
-
-                <header className="flex flex-col items-center gap-4">
-                    <h1 className="text-5xl font-light leading-tight md:text-6xl">
-                        Howdy, I&apos;m Cayden.
-                    </h1>
-
-                    <p className="font-poppins text-2xl font-light leading-tight opacity-80">
-                        Web Developer & Focus-Driven Leader
-                    </p>
-                </header>
-            </section>
-
-            <section className="flex flex-wrap items-center justify-center gap-4 font-poppins text-sm tracking-wider text-gray-600 sm:gap-6 sm:text-base md:gap-8">
-                {["JavaScript", "TypeScript", "Python", "Go", "React", "Next.js"].map((tech, index, arr) => (
-                    <React.Fragment key={tech}>
-                        <span className="cursor-default text-snow-storm font-medium transition-colors duration-200 hover:text-nord-12">
-                            {tech}
-                        </span>
-                        {index < arr.length - 1 && (
-                            <span className="select-none text-snow-storm">•</span>
-                        )}
-                    </React.Fragment>
-                ))}
-            </section>
-
-            <section className="flex flex-col gap-6 font-cormorantGaramond text-lg leading-8">
-                <p>
-                    Nice to meet you! I am a Web Developer who specializes in architecting robust, user-centric
-                    applications, transforming complex logic into seamless digital experiences.
-                </p>
-
-                <p>
-                    My work is driven by a commitment to meeting complex demands in specialized medical markets. With a
-                    strong focus on ergonomics, UI/UX optimization, and precision within fast-paced clinical
-                    environments, I engineer comprehensive EHR solutions—ranging from portable medical cart workstations
-                    to pioneering tracking and fleet management systems.
-                </p>
-
-                <p>
-                    Beyond technical architecture, my work is deeply informed by an extensive background in organizational logistics. Grounded by foundational training in nationally recognized civic leadership programs, I previously directed one of the largest interest-driven communities in the Southern United States. In this capacity, I spearheaded large-scale event production—routinely managing gatherings of up to 250 attendees and coordinating cross-country travel for live entertainers. I have additionally facilitated strategic talent placements in commercial media, negotiated partnerships with major global streaming networks, and regularly presented as a panelist at large-scale conventions.
-                </p>
-
-                <p>
-                    This focus-driven leadership approach directly translates to my engineering philosophy. Whether orchestrating high-concurrency state management systems, leading a project through rapid architectural shifts, or aligning a development team to meet ambitious goals, I am dedicated to executing with precision and creating software that is modern, accessible, and highly functional.
-                </p>
-            </section>
-
-            <section className="mt-10 rounded-2xl bg-nord-2 p-8 font-cormorantGaramond text-white shadow-md">
-                <h2 className="mb-6 border-b border-white/20 pb-3 text-2xl font-semibold tracking-wide">
-                    Focus Areas
-                </h2>
-
-                <ul className="grid gap-4 text-lg md:grid-cols-2">
-                    <li className="flex items-center gap-3">
-                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
-                        Clinical UI/UX & Ergonomics
-                    </li>
-                    <li className="flex items-center gap-3">
-                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
-                        EHR & Fleet Architecture
-                    </li>
-                    <li className="flex items-center gap-3">
-                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
-                        High-Concurrency Infrastructure
-                    </li>
-                    <li className="flex items-center gap-3">
-                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
-                        Large-Scale Event Logistics
-                    </li>
-                    <li className="flex items-center gap-3">
-                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
-                        Strategic Team Alignment
-                    </li>
-                    <li className="flex items-center gap-3">
-                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
-                        Community State Management
-                    </li>
-                </ul>
-            </section>
-        </main>
-    );
-}
+export default function Home() {
+	return (
+		<main>
+			<Hero />
+			<Projects />
+			<Feats />
+			<Contact />
+		</main>
+	);
+}
--- a/articles/setup.md
+++ b/articles/setup.md
@ -1,7 +0,0 @@
---
-title: "The art of the side hustle"
-category: "business"
-date: "02-02-2023"
---
-
-# The art of the side hustle.
--- a/articles/squirt.md
+++ b/articles/squirt.md
@ -1,31 +0,0 @@
---
-title: "Squirt"
-category: "personal"
-date: "29-06-2026"
---
-
-# The Squirt Article
-
-![Fat guy](/fatdudesquirting.jpg)
-
-Squirt is a playful and energetic topic that can represent movement, surprise, and a little bit of chaos. Sometimes, the
-smallest things can make the biggest splash.
-
-In everyday life, a squirt might be something simple: a splash of water, a squeeze from a bottle, or a sudden burst of
-energy. It is quick, unexpected, and often memorable.
-
-## A Small Burst of Fun
-
-There is something fun about the word squirt. It feels lighthearted and informal. It does not take itself too seriously,
-which makes it a great subject for a personal article.
-
-Whether it reminds you of summer days, water fights, or tiny moments of surprise, squirt can be a symbol of simple joy.
-
-## Final Thoughts
-
-Not every article needs to be serious or complicated. Sometimes, writing about something small and silly is enough to
-create a moment of fun.
-
-Squirt may be simple, but it still makes a splash.
-
-I had NO fucking idea what to put here, so, yeah, squirt.
--- a/articles/stress.md
+++ b/articles/stress.md
@ -1,7 +0,0 @@
---
-title: "Charles de Souza"
-category: "personal"
-date: "02-04-2023"
---
-
-# Stress and management
--- a/bun.lock
+++ b/bun.lock
--- a/components.json
+++ b/components.json
@ -0,0 +1,23 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "new-york",
+	"rsc": true,
+	"tsx": true,
+	"tailwind": {
+		"config": "",
+		"css": "app/globals.css",
+		"baseColor": "neutral",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	},
+	"registries": {
+		"@react-bits": "https://reactbits.dev/r/{name}.json"
+	}
+}
--- a/components/ArticleListItem.tsx
+++ b/components/ArticleListItem.tsx
@ -1,27 +0,0 @@
-import Link from "next/link"
-import type {ArticleItem} from "@/types";
-
-interface Props {
-    category: string,
-    articles: ArticleItem[]
-}
-
-const ArticleItemList = ({category, articles}: Props) => {
-    return (
-        <>
-            <div className={"flex flex-col gap-5"}>
-                <h2 className={"font-cormorantGaramond text-4xl"}>{category}</h2>
-                <div className={"flex flex-col gap-2.5 font-poppins text-lg"}>
-                    {articles.map((article, id) => (
-                        <Link href={`/blog/${article.id}`} key={id}
-                              className={"hover:text-nord-12 transition duration-250"}>
-                            {article.title}
-                        </Link>
-                    ))}
-                </div>
-            </div>
-        </>
-    )
-}
-
-export default ArticleItemList
--- a/components/GradientWaves.tsx
+++ b/components/GradientWaves.tsx
@ -0,0 +1,766 @@
+// From https://reactbits.dev/ - $ npx shadcn@latest add @react-bits/GradientWaves-TS-TW Aurora
+'use client';
+
+import { useEffect, useMemo, useRef, type CSSProperties } from 'react';
+
+export interface GradientWavesProps {
+	horizonColor?: string;
+	waveColor?: string;
+	crestColor?: string;
+	backgroundColor?: string;
+	lightMode?: boolean;
+	speed?: number;
+	amplitude?: number;
+	waveScale?: number;
+	waveRatio?: number;
+	swell?: number;
+	turbulence?: number;
+	tilt?: number;
+	zoom?: number;
+	height?: number;
+	fogDepth?: number;
+	relief?: number;
+	lightAngle?: number;
+	sheen?: number;
+	brightness?: number;
+	opacity?: number;
+	grain?: number;
+	quality?: 'low' | 'medium' | 'high';
+	intro?: boolean;
+	mouseInteraction?: boolean;
+	parallaxStrength?: number;
+	mouseStrength?: number;
+	swellOnClick?: boolean;
+	paused?: boolean;
+	dpr?: number;
+	className?: string;
+	style?: CSSProperties;
+}
+
+type RGB = [number, number, number];
+
+interface Swell {
+	x: number;
+	y: number;
+	at: number;
+}
+
+interface View {
+	zoom: number;
+	tilt: number;
+	height: number;
+}
+
+const ROOT = 'relative h-full w-full overflow-hidden';
+const CANVAS = 'absolute inset-0 block h-full w-full';
+
+const MAX_SWELLS = 4;
+const SWELL_SECONDS = 3.2;
+const SWELL_GAIN = 2.8;
+const SWELL_WIDTH = 8;
+const INTRO_SECONDS = 2.6;
+const CAMERA_HEIGHT = 30;
+const QUALITY: Record<string, number> = { low: 56, medium: 84, high: 120 };
+
+const VERTEX = `#version 300 es
+in vec2 aPosition;
+void main() {
+  gl_Position = vec4(aPosition, 0.0, 1.0);
+}`;
+
+const FRAGMENT = `#version 300 es
+precision highp float;
+uniform vec2 uResolution;
+uniform float uTime;
+uniform float uClock;
+uniform float uAmplitude;
+uniform float uWaveScale;
+uniform float uWaveRatio;
+uniform float uSwell;
+uniform float uTurbulence;
+uniform float uHeight;
+uniform float uTilt;
+uniform float uZoom;
+uniform vec2 uLook;
+uniform float uFogDepth;
+uniform float uBrightness;
+uniform float uOpacity;
+uniform float uGrain;
+uniform vec3 uHorizon;
+uniform vec3 uWave;
+uniform vec3 uCrest;
+uniform vec3 uBackground;
+uniform float uOpaque;
+uniform float uLight;
+uniform vec3 uSun;
+uniform float uRelief;
+uniform float uSheen;
+uniform float uSteps;
+uniform float uStride;
+uniform vec3 uIntro;
+uniform vec3 uSwells[${MAX_SWELLS}];
+uniform float uSwellWidth;
+out vec4 outColor;
+
+const float FAR = 4000.0;
+
+float hash(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+vec3 surface(vec2 xy) {
+  vec2 freq = vec2(uWaveScale / 7.0, (uWaveScale * uWaveRatio) / 3.0);
+  vec4 tc = vec4(uTime / 0.130, uTime / 0.810, uTime / 0.200, uTime / 0.710);
+  float a = xy.x + tc.x;
+  float swellPhase = (xy.y + a) / 20.0 + tc.y;
+  float bend = uSwell * cos(swellPhase) / 20.0;
+  float mx = a + uSwell * sin(swellPhase);
+  float crossPhase = xy.x / 23.0 + tc.w;
+  float my = xy.y - tc.z + uTurbulence * cos(crossPhase);
+  float twist = -uTurbulence * sin(crossPhase) / 23.0;
+  float cx = cos(mx * freq.x);
+  float cy = cos(my * freq.y);
+  float rise = 1.0;
+  if (uIntro.z > 0.0) rise = mix(1.0, smoothstep(uIntro.y * 0.45, uIntro.y * 1.6, xy.x), uIntro.z);
+  float amp = uAmplitude * rise;
+  float h = (sin(mx * freq.x) + sin(my * freq.y)) * amp + uHeight;
+  float dx = amp * (freq.x * cx * (1.0 + bend) + freq.y * cy * twist);
+  float dy = amp * (freq.x * cx * bend + freq.y * cy);
+  for (int k = 0; k < ${MAX_SWELLS}; k++) {
+    vec3 sw = uSwells[k];
+    if (sw.z <= 0.0) continue;
+    float u = (xy.x - sw.x) / uSwellWidth;
+    float v = (xy.y - sw.y) / (uSwellWidth * 3.5);
+    float bump = sw.z * exp(-u * u - v * v);
+    h += bump;
+    dx += bump * (-2.0 * u / uSwellWidth);
+    dy += bump * (-2.0 * v / (uSwellWidth * 3.5));
+  }
+  return vec3(h, dx, dy);
+}
+
+float march(vec3 origin, vec3 dir) {
+  float dist = 0.0;
+  for (int i = 0; i < 128; i++) {
+    if (float(i) >= uSteps) break;
+    float gap = origin.z + dist * dir.z - surface(origin.xy + dist * dir.xy).x;
+    if (abs(gap) < 0.002 * dist + 0.01) break;
+    dist += uStride * gap;
+    if (!(abs(dist) < FAR)) return FAR;
+  }
+  return dist;
+}
+
+void main() {
+  float c;
+  float s;
+  float vfov = (3.14159 / 2.3) / max(uZoom, 0.05);
+  vec3 cam = vec3(0.0, 0.0, ${CAMERA_HEIGHT.toFixed(1)});
+  vec2 uv = gl_FragCoord.xy / uResolution - 0.5;
+  uv.x *= uResolution.x / uResolution.y;
+  uv.y *= -1.0;
+
+  vec3 dir = vec3(0.0, 0.0, -1.0);
+  float ulen = length(uv);
+  float xrot = vfov * ulen;
+  c = cos(xrot);
+  s = sin(xrot);
+  dir = mat3(1.0, 0.0, 0.0, 0.0, c, -s, 0.0, s, c) * dir;
+  vec2 nuv = ulen > 1e-5 ? uv / ulen : vec2(1.0, 0.0);
+  dir = mat3(nuv.x, -nuv.y, 0.0, nuv.y, nuv.x, 0.0, 0.0, 0.0, 1.0) * dir;
+  c = cos(uTilt + uLook.y);
+  s = sin(uTilt + uLook.y);
+  dir = mat3(c, 0.0, s, 0.0, 1.0, 0.0, -s, 0.0, c) * dir;
+  c = cos(uLook.x);
+  s = sin(uLook.x);
+  dir = mat3(c, s, 0.0, -s, c, 0.0, 0.0, 0.0, 1.0) * dir;
+
+  float dist = march(cam, dir);
+  vec3 pos = cam + dist * dir;
+  vec3 field = surface(pos.xy);
+  vec3 view = -dir;
+
+  float crest = clamp((field.x - uHeight) / max(2.0 * uAmplitude, 0.001) * 0.5 + 0.5, 0.0, 1.0);
+  vec3 body = mix(uWave, uCrest, smoothstep(0.45, 1.0, crest) * 0.5);
+  vec3 normal = normalize(vec3(-field.yz * (1.0 + 1.5 * uRelief), 1.0));
+  float diffuse = clamp(dot(normal, uSun) * 0.5 + 0.5, 0.0, 1.0);
+  float lightness = mix(1.0, diffuse * diffuse * (3.0 - 2.0 * diffuse), uRelief);
+  float sheen = pow(clamp(dot(normal, normalize(uSun + view)), 0.0, 1.0), 14.0) * uSheen * (0.4 + 0.6 * uRelief);
+  float rim = pow(1.0 - clamp(dot(normal, view), 0.0, 1.0), 3.0);
+
+  vec3 col;
+  float alpha;
+  float haze = 1.0 - exp(-dist / (uFogDepth * 5.0));
+  float fade = 1.0 - smoothstep(0.35, 1.0, haze);
+  if (uLight < 0.5) {
+    vec3 lit = mix(uHorizon * 0.18, body, lightness) + uCrest * sheen;
+    lit = mix(lit, uHorizon, rim * 0.15 * uRelief);
+    col = mix(lit, uHorizon, smoothstep(0.0, 1.0, haze)) * 0.85 * uBrightness;
+    alpha = fade;
+  } else {
+    vec3 hue = mix(uHorizon, body, 0.35 + 0.65 * lightness);
+    float density = mix(0.16, 0.9, 1.0 - lightness);
+    density *= 1.0 - clamp(sheen, 0.0, 1.0) * 0.85;
+    density *= 1.0 - 0.5 * smoothstep(0.0, 1.0, haze);
+    col = hue;
+    alpha = fade * clamp(density * uBrightness, 0.0, 1.0);
+  }
+
+  float reveal = uIntro.x;
+  col = clamp(col, 0.0, 1.0);
+  float grain = (hash(gl_FragCoord.xy + fract(uClock) * 64.0) - 0.5) * uGrain;
+  alpha = clamp(alpha * (1.0 + grain), 0.0, 1.0) * reveal * uOpacity;
+  if (uOpaque > 0.5) {
+    outColor = vec4(mix(uBackground, col, alpha), 1.0);
+  } else {
+    outColor = vec4(col * alpha, alpha);
+  }
+}`;
+
+const clamp = (value: number, min: number, max: number) =>
+	Math.min(max, Math.max(min, value));
+
+const easeInOut = (t: number) =>
+	t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+
+let probe: CanvasRenderingContext2D | null = null;
+
+const parseColor = (value: string, fallback: RGB | null): RGB | null => {
+	if (value === 'transparent') return null;
+	if (typeof document === 'undefined') return fallback;
+	if (!probe) probe = document.createElement('canvas').getContext('2d');
+	if (!probe) return fallback;
+	probe.fillStyle = '#000000';
+	probe.fillStyle = value;
+	const text = probe.fillStyle;
+	if (text.startsWith('#')) {
+		const hex = parseInt(text.slice(1), 16);
+		return [
+			((hex >> 16) & 255) / 255,
+			((hex >> 8) & 255) / 255,
+			(hex & 255) / 255,
+		];
+	}
+	const match =
+		/rgba?\(([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?/.exec(text);
+	if (!match) return fallback;
+	if (match[4] !== undefined && Number(match[4]) === 0) return null;
+	return [
+		Number(match[1]) / 255,
+		Number(match[2]) / 255,
+		Number(match[3]) / 255,
+	];
+};
+
+const compile = (gl: WebGL2RenderingContext, type: number, source: string) => {
+	const shader = gl.createShader(type);
+	if (!shader) return null;
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+		console.error(gl.getShaderInfoLog(shader));
+		gl.deleteShader(shader);
+		return null;
+	}
+	return shader;
+};
+
+const rayAt = (point: number[], aspect: number, s: View, look: number[]) => {
+	const uvx = (point[0] - 0.5) * aspect;
+	const uvy = point[1] - 0.5;
+	const vfov = Math.PI / 2.3 / Math.max(s.zoom, 0.05);
+	const length = Math.hypot(uvx, uvy);
+	const turn = vfov * length;
+	let dir = [0, -Math.sin(turn), -Math.cos(turn)];
+	const nx = length > 1e-5 ? uvx / length : 1;
+	const ny = length > 1e-5 ? uvy / length : 0;
+	dir = [nx * dir[0] + ny * dir[1], -ny * dir[0] + nx * dir[1], dir[2]];
+	const pitch = s.tilt + look[1];
+	const cp = Math.cos(pitch);
+	const sp = Math.sin(pitch);
+	dir = [cp * dir[0] - sp * dir[2], dir[1], sp * dir[0] + cp * dir[2]];
+	const cy = Math.cos(look[0]);
+	const sy = Math.sin(look[0]);
+	dir = [cy * dir[0] - sy * dir[1], sy * dir[0] + cy * dir[1], dir[2]];
+	return dir;
+};
+
+const groundAt = (point: number[], aspect: number, s: View, look: number[]) => {
+	const dir = rayAt(point, aspect, s, look);
+	if (dir[2] > -0.02) return null;
+	const travel = (CAMERA_HEIGHT - s.height) / -dir[2];
+	return [dir[0] * travel, dir[1] * travel];
+};
+
+const prefersReduced = () =>
+	typeof window !== 'undefined' &&
+	(window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false);
+
+export default function GradientWaves({
+	horizonColor = '#5227FF',
+	waveColor = '#FF9FFC',
+	crestColor = '#FFFFFF',
+	backgroundColor = 'transparent',
+	lightMode = false,
+	speed = 0.4,
+	amplitude = 2.5,
+	waveScale = 0.6,
+	waveRatio = 0.9,
+	swell = 35,
+	turbulence = 20,
+	tilt = 64,
+	zoom = 1,
+	height = 5.5,
+	fogDepth = 15,
+	relief = 1,
+	lightAngle = 120,
+	sheen = 0,
+	brightness = 1,
+	opacity = 1,
+	grain = 0.2,
+	quality = 'medium',
+	intro = true,
+	mouseInteraction = true,
+	parallaxStrength = 0.5,
+	mouseStrength = 0.6,
+	swellOnClick = true,
+	paused = false,
+	dpr = 2,
+	className = '',
+	style,
+}: GradientWavesProps) {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const horizon = useMemo(
+		(): RGB => parseColor(horizonColor, [0.32, 0.15, 1]) ?? [0.32, 0.15, 1],
+		[horizonColor],
+	);
+	const wave = useMemo(
+		(): RGB => parseColor(waveColor, [1, 0.62, 0.99]) ?? [1, 0.62, 0.99],
+		[waveColor],
+	);
+	const crest = useMemo(
+		(): RGB => parseColor(crestColor, [1, 1, 1]) ?? [1, 1, 1],
+		[crestColor],
+	);
+	const paper = useMemo(
+		() => parseColor(backgroundColor, null),
+		[backgroundColor],
+	);
+
+	const settings = {
+		horizon,
+		wave,
+		crest,
+		paper,
+		lightMode,
+		speed,
+		amplitude: Math.max(0, amplitude),
+		waveScale: Math.max(0.01, waveScale),
+		waveRatio: Math.max(0.01, waveRatio),
+		swell,
+		turbulence,
+		tilt: (clamp(tilt, 10, 85) * Math.PI) / 180,
+		zoom: Math.max(0.05, zoom),
+		height,
+		fogDepth: Math.max(0.5, fogDepth),
+		relief: clamp(relief, 0, 1),
+		lightAngle: (lightAngle * Math.PI) / 180,
+		sheen: Math.max(0, sheen),
+		brightness: Math.max(0, brightness),
+		opacity: clamp(opacity, 0, 1),
+		grain:
+			typeof grain === 'number' ? Math.max(0, grain) : grain ? 0.05 : 0,
+		steps: QUALITY[quality] ?? QUALITY.medium,
+		intro,
+		mouseInteraction,
+		parallaxStrength: Math.max(0, parallaxStrength),
+		mouseStrength: clamp(mouseStrength, 0, 1),
+		swellOnClick,
+		paused,
+		dpr: Math.max(0.5, dpr),
+	};
+	const settingsRef = useRef(settings);
+	settingsRef.current = settings;
+	const wakeRef = useRef<(() => void) | null>(null);
+
+	useEffect(() => {
+		wakeRef.current?.();
+	});
+
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return undefined;
+		const canvas = document.createElement('canvas');
+		canvas.className = CANVAS;
+		container.appendChild(canvas);
+		const gl = canvas.getContext('webgl2', {
+			alpha: true,
+			antialias: false,
+			depth: false,
+			stencil: false,
+			premultipliedAlpha: true,
+			powerPreference: 'high-performance',
+		});
+		if (!gl) {
+			canvas.remove();
+			return undefined;
+		}
+		const vertex = compile(gl, gl.VERTEX_SHADER, VERTEX);
+		const fragment = compile(gl, gl.FRAGMENT_SHADER, FRAGMENT);
+		const program = gl.createProgram();
+		if (!vertex || !fragment || !program) {
+			canvas.remove();
+			return undefined;
+		}
+		gl.attachShader(program, vertex);
+		gl.attachShader(program, fragment);
+		gl.bindAttribLocation(program, 0, 'aPosition');
+		gl.linkProgram(program);
+		gl.deleteShader(vertex);
+		gl.deleteShader(fragment);
+		if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+			gl.deleteProgram(program);
+			canvas.remove();
+			return undefined;
+		}
+		const names = [
+			'uResolution',
+			'uTime',
+			'uClock',
+			'uAmplitude',
+			'uWaveScale',
+			'uWaveRatio',
+			'uSwell',
+			'uTurbulence',
+			'uHeight',
+			'uTilt',
+			'uZoom',
+			'uLook',
+			'uFogDepth',
+			'uBrightness',
+			'uOpacity',
+			'uGrain',
+			'uHorizon',
+			'uWave',
+			'uCrest',
+			'uBackground',
+			'uOpaque',
+			'uLight',
+			'uSun',
+			'uRelief',
+			'uSheen',
+			'uSteps',
+			'uStride',
+			'uIntro',
+			'uSwells',
+			'uSwellWidth',
+		];
+		const u: Record<string, WebGLUniformLocation | null> = {};
+		names.forEach((name) => {
+			u[name] = gl.getUniformLocation(program, name);
+		});
+		const vao = gl.createVertexArray();
+		gl.bindVertexArray(vao);
+		const buffer = gl.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+		gl.bufferData(
+			gl.ARRAY_BUFFER,
+			new Float32Array([-1, -1, 3, -1, -1, 3]),
+			gl.STATIC_DRAW,
+		);
+		gl.enableVertexAttribArray(0);
+		gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+		gl.useProgram(program);
+
+		const swellData = new Float32Array(MAX_SWELLS * 3);
+		const state = {
+			width: 1,
+			height: 1,
+			cssWidth: 0,
+			cssHeight: 0,
+			time: 0,
+			clock: 0,
+			last: 0,
+			raf: 0,
+			visible: false,
+			introAt: -1,
+			pointer: [0.5, 0.5],
+			inside: false,
+			look: [0, 0],
+			steer: [0, 0],
+			swells: [] as Swell[],
+			quiet: 0,
+			seen: null as typeof settings | null,
+		};
+
+		const fit = () => {
+			const s = settingsRef.current;
+			const ratio = Math.min(window.devicePixelRatio || 1, s.dpr);
+			const width = Math.max(1, Math.round(state.cssWidth * ratio));
+			const height = Math.max(1, Math.round(state.cssHeight * ratio));
+			if (width === state.width && height === state.height) return;
+			state.quiet = 0;
+			state.width = width;
+			state.height = height;
+			canvas.width = width;
+			canvas.height = height;
+		};
+
+		const measure = () => {
+			state.cssWidth = container.clientWidth;
+			state.cssHeight = container.clientHeight;
+			fit();
+			wake();
+		};
+
+		const introProgress = (s: typeof settings, reduced: boolean) => {
+			if (!s.intro || reduced || state.introAt < 0) return 1;
+			return clamp((state.clock - state.introAt) / INTRO_SECONDS, 0, 1);
+		};
+
+		const render = (reduced: boolean) => {
+			const s = settingsRef.current;
+			gl.viewport(0, 0, state.width, state.height);
+			gl.uniform2f(u.uResolution, state.width, state.height);
+			gl.uniform1f(u.uTime, state.time);
+			gl.uniform1f(u.uClock, state.clock);
+			gl.uniform1f(u.uAmplitude, s.amplitude);
+			gl.uniform1f(u.uWaveScale, s.waveScale);
+			gl.uniform1f(u.uWaveRatio, s.waveRatio);
+			gl.uniform1f(u.uSwell, s.swell);
+			gl.uniform1f(u.uTurbulence, s.turbulence);
+			gl.uniform1f(u.uHeight, s.height);
+			gl.uniform1f(u.uTilt, s.tilt);
+			gl.uniform1f(u.uZoom, s.zoom);
+			gl.uniform2f(u.uLook, state.look[0], state.look[1]);
+			gl.uniform1f(u.uFogDepth, s.fogDepth);
+			gl.uniform1f(u.uBrightness, s.brightness);
+			gl.uniform1f(u.uOpacity, s.opacity);
+			gl.uniform1f(u.uGrain, s.grain);
+			gl.uniform3fv(u.uHorizon, s.horizon);
+			gl.uniform3fv(u.uWave, s.wave);
+			gl.uniform3fv(u.uCrest, s.crest);
+			const paperColor = s.paper ?? [0, 0, 0];
+			gl.uniform3f(
+				u.uBackground,
+				paperColor[0],
+				paperColor[1],
+				paperColor[2],
+			);
+			gl.uniform1f(u.uOpaque, s.paper ? 1 : 0);
+			gl.uniform1f(u.uLight, s.lightMode ? 1 : 0);
+			const elevation = 0.52;
+			const angle = s.lightAngle + state.steer[0] * s.mouseStrength * 2;
+			const altitude = elevation - state.steer[1] * s.mouseStrength * 0.7;
+			gl.uniform3f(
+				u.uSun,
+				Math.cos(altitude) * Math.cos(angle),
+				Math.cos(altitude) * Math.sin(angle),
+				Math.sin(altitude),
+			);
+			gl.uniform1f(u.uRelief, s.relief);
+			gl.uniform1f(u.uSheen, s.sheen);
+			gl.uniform1f(u.uSteps, s.steps);
+			const slope =
+				s.amplitude *
+				((s.waveScale / 7) * (1 + Math.abs(s.swell) / 20) +
+					((s.waveScale * s.waveRatio) / 3) *
+						(1 + Math.abs(s.turbulence) / 23));
+			const progress = introProgress(s, reduced);
+			const shown = Math.min(1, progress / 0.22);
+			const crest =
+				160 *
+				Math.pow(
+					3 / 160,
+					easeInOut(Math.max(0, (progress - 0.1) / 0.9)),
+				);
+			const settle = clamp((progress - 0.75) / 0.25, 0, 1);
+			gl.uniform3f(
+				u.uIntro,
+				shown * shown * (3 - 2 * shown),
+				crest,
+				1 - settle * settle * (3 - 2 * settle),
+			);
+			swellData.fill(0);
+			let swellPeak = 0;
+			state.swells.forEach((swell, index) => {
+				const age = state.clock - swell.at;
+				const life = age / SWELL_SECONDS;
+				const envelope =
+					(1 - Math.exp(-age / 0.25)) * Math.pow(1 - life, 1.6);
+				const lift = s.amplitude * SWELL_GAIN * envelope;
+				swellData.set([swell.x - age * 12, swell.y, lift], index * 3);
+				swellPeak = Math.max(swellPeak, lift);
+			});
+			gl.uniform3fv(u.uSwells, swellData);
+			gl.uniform1f(u.uSwellWidth, SWELL_WIDTH);
+			gl.uniform1f(
+				u.uStride,
+				0.9 /
+					Math.max(
+						1,
+						(slope + (swellPeak * 0.86) / SWELL_WIDTH) / 1.5,
+					),
+			);
+			gl.clearColor(0, 0, 0, 0);
+			gl.clear(gl.COLOR_BUFFER_BIT);
+			gl.drawArrays(gl.TRIANGLES, 0, 3);
+		};
+
+		const tick = (now: number) => {
+			state.raf = 0;
+			if (!state.visible || document.hidden) return;
+			const s = settingsRef.current;
+			const dt = state.last
+				? Math.min((now - state.last) / 1000, 0.1)
+				: 0;
+			state.last = now;
+			const reduced = prefersReduced();
+			state.clock += dt;
+			if (state.introAt < 0) state.introAt = state.clock;
+			if (!s.paused && !reduced) state.time += dt * s.speed;
+
+			const steering = s.mouseInteraction && state.inside && !reduced;
+			const target = steering ? state.pointer : [0.5, 0.5];
+			const ease = 1 - Math.exp(-dt / 0.45);
+			const goalX = (target[0] - 0.5) * s.parallaxStrength * 0.35;
+			const goalY = (target[1] - 0.5) * s.parallaxStrength * 0.18;
+			state.look[0] += (goalX - state.look[0]) * ease;
+			state.look[1] += (goalY - state.look[1]) * ease;
+			const moving =
+				Math.abs(goalX - state.look[0]) +
+					Math.abs(goalY - state.look[1]) >
+				0.0002;
+
+			const steerEase = 1 - Math.exp(-dt / 0.6);
+			const steerX = steering ? state.pointer[0] - 0.5 : 0;
+			const steerY = steering ? 0.5 - state.pointer[1] : 0;
+			state.steer[0] += (steerX - state.steer[0]) * steerEase;
+			state.steer[1] += (steerY - state.steer[1]) * steerEase;
+			const turning =
+				Math.abs(steerX - state.steer[0]) +
+					Math.abs(steerY - state.steer[1]) >
+				0.0005;
+			state.swells = state.swells.filter(
+				(swell) => state.clock - swell.at < SWELL_SECONDS,
+			);
+
+			const still = s.paused || reduced;
+			const transient =
+				moving ||
+				turning ||
+				state.swells.length > 0 ||
+				introProgress(s, reduced) < 1;
+			if (state.seen !== s || transient || !still) state.quiet = 0;
+			else state.quiet += 1;
+			state.seen = s;
+			if (state.quiet > 3) return;
+
+			state.raf = requestAnimationFrame(tick);
+			fit();
+			render(reduced);
+		};
+
+		const wake = () => {
+			if (state.raf || !state.visible || document.hidden) return;
+			state.last = 0;
+			state.raf = requestAnimationFrame(tick);
+		};
+		wakeRef.current = wake;
+
+		const local = (event: PointerEvent) => {
+			const rect = container.getBoundingClientRect();
+			return {
+				x: (event.clientX - rect.left) / Math.max(rect.width, 1),
+				y: (event.clientY - rect.top) / Math.max(rect.height, 1),
+				inside:
+					event.clientX >= rect.left &&
+					event.clientX <= rect.right &&
+					event.clientY >= rect.top &&
+					event.clientY <= rect.bottom,
+			};
+		};
+
+		const onMove = (event: PointerEvent) => {
+			const point = local(event);
+			const was = state.inside;
+			state.inside = point.inside;
+			if (point.inside) state.pointer = [point.x, point.y];
+			if ((point.inside || was) && settingsRef.current.mouseInteraction)
+				wake();
+		};
+
+		const onLeave = () => {
+			state.inside = false;
+			wake();
+		};
+
+		const onDown = (event: PointerEvent) => {
+			const s = settingsRef.current;
+			if (!s.swellOnClick || event.button !== 0 || prefersReduced())
+				return;
+			if (
+				event.target instanceof Element &&
+				event.target.closest(
+					'a, button, input, textarea, select, label, [role="button"]',
+				)
+			)
+				return;
+			const point = local(event);
+			if (!point.inside) return;
+			const ground = groundAt(
+				[point.x, point.y],
+				state.width / Math.max(state.height, 1),
+				s,
+				state.look,
+			);
+			if (!ground) return;
+			state.swells.push({ x: ground[0], y: ground[1], at: state.clock });
+			if (state.swells.length > MAX_SWELLS) state.swells.shift();
+			wake();
+		};
+
+		const visibility = new IntersectionObserver((entries) => {
+			state.visible = entries.some((entry) => entry.isIntersecting);
+			wake();
+		});
+		visibility.observe(container);
+		const sizes = new ResizeObserver(measure);
+		sizes.observe(container);
+		measure();
+		document.addEventListener('visibilitychange', wake);
+		window.addEventListener('pointermove', onMove, { passive: true });
+		window.addEventListener('pointerdown', onDown);
+		document.documentElement.addEventListener('pointerleave', onLeave);
+		state.raf = requestAnimationFrame(tick);
+
+		return () => {
+			cancelAnimationFrame(state.raf);
+			wakeRef.current = null;
+			document.removeEventListener('visibilitychange', wake);
+			visibility.disconnect();
+			sizes.disconnect();
+			window.removeEventListener('pointermove', onMove);
+			window.removeEventListener('pointerdown', onDown);
+			document.documentElement.removeEventListener(
+				'pointerleave',
+				onLeave,
+			);
+			gl.deleteProgram(program);
+			gl.deleteBuffer(buffer);
+			gl.deleteVertexArray(vao);
+			gl.getExtension('WEBGL_lose_context')?.loseContext();
+			canvas.remove();
+		};
+	}, []);
+
+	return (
+		<div
+			ref={containerRef}
+			className={[ROOT, className].filter(Boolean).join(' ')}
+			style={style}
+		/>
+	);
+}
--- a/components/layout/layout-footer.tsx
+++ b/components/layout/layout-footer.tsx
@ -0,0 +1,21 @@
+import { site } from '@/lib/site';
+
+const Footer = () => (
+	<footer className="border-t border-white/10 bg-obsidian/40 backdrop-blur-sm">
+		<div className="container-page flex items-center justify-between py-6 text-xs text-ink/65">
+			<p>
+				&copy; {new Date().getFullYear()} {site.name}
+			</p>
+			<a
+				href={site.gitlab}
+				target="_blank"
+				rel="noreferrer"
+				className="transition-colors hover:text-aurora"
+			>
+				GitLab ↗
+			</a>
+		</div>
+	</footer>
+);
+
+export default Footer;
--- a/components/layout/layout-header.tsx
+++ b/components/layout/layout-header.tsx
@ -1,68 +1,103 @@
-'use client'
+'use client';

-import React, {useState} from 'react'
-import Image from 'next/image'
+import { useState } from 'react';
+import Image from 'next/image';
 import Link from 'next/link';
-import Logo from "../../public/borb.png"
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
+import Logo from '@/public/borb.png';
+import { nav, site } from '@/lib/site';

 const Header = () => {
-    const [navbar, setNavbar] = useState(false);
+	const [open, setOpen] = useState(false);
+	const close = () => setOpen(false);

-    return (
-        <>
-            <header className="font-poppins bg-polar-night-light z-10">
-                <div className="justify-between px-2 lg:px-0 mx-auto lg:max-w-7xl md:items-center md:flex md:px-4">
-                    <div>
-                        <div className="flex items-center justify-between md:block">
-                            <div className='flex items-center justify-between md:py-3 gap-10'>
-                                <Link href={"/"} className="flex flex-col items-center gap-0 leading-none">
-                                    <Image src={Logo} width={100} alt='Logo'/>
-                                </Link>
-                            </div>
-                            <div className="md:hidden">
-                                <button
-                                    className="p-3 text-gray-700 rounded-md outline-none focus:border-gray-400 border-2 focus:border bg-nord-10"
-                                    onClick={() => setNavbar(!navbar)}>
-                                    {navbar ? (
-                                        <div className="bar text-snow-storm"></div>
-                                    ) : (
-                                        <div className="close text-snow-storm"></div>
-                                    )}
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <hr className='md:opacity-0 md:pt-3'></hr>
-                    <div>
-                        <div
-                            className={`flex-1 justify-self-center md:block md:pb-0 md:mt-0 ${navbar ? 'p-12 md:p-0 block' : 'hidden'}`}>
-                            <ul className=" md:h-auto items-center justify-center md:flex">
-                                <li className="text-xl text-snow-storm py-2 my-2 md:my-0 md:px-6 text-center md:border-b-0  border-snow-storm-dark  hover:text-nord-12 transition duration-250">
-                                    <Link href="/" onClick={() => setNavbar(!navbar)}
-                                          className='sm:px-52 md:px-0'>Home</Link>
-                                </li>
+	return (
+		<header className="sticky top-0 z-50 border-b border-white/10 bg-obsidian/45 backdrop-blur-md">
+			<div className="container-page flex h-16 items-center justify-between">
+				<Link
+					href="/"
+					onClick={close}
+					className="flex items-center gap-2.5 text-sm font-medium tracking-tight text-ink"
+					aria-label="Home"
+				>
+					<Image
+						src={Logo}
+						alt=""
+						width={40}
+						height={40}
+						loading="eager"
+						className="h-9 w-9 object-contain"
+					/>
+					<span>{site.name}</span>
+				</Link>

-                                <li className="text-xl text-snow-storm py-2 my-2 md:my-0 px-6 text-center md:border-b-0  border-snow-storm-dark  hover:text-nord-12 transition duration-250">
-                                    <Link href="/blog" onClick={() => setNavbar(!navbar)}
-                                          className='sm:px-52 md:px-0'>Blog</Link>
-                                </li>
+				<nav
+					aria-label="Primary"
+					className="hidden items-center gap-7 text-sm md:flex"
+				>
+					{nav.map((item) => (
+						<a
+							key={item.href}
+							href={item.href}
+							className="text-ink/75 transition-colors hover:text-ink"
+						>
+							{item.label}
+						</a>
+					))}
+					<a
+						href={site.gitlab}
+						target="_blank"
+						rel="noreferrer"
+						className="border-l border-white/15 pl-6 text-aurora transition-colors hover:text-crest"
+					>
+						GitLab ↗
+					</a>
+				</nav>

+				<button
+					type="button"
+					className="grid h-9 w-9 place-items-center border border-white/15 text-ink hover:border-aurora md:hidden"
+					aria-expanded={open}
+					aria-controls="mobile-nav"
+					aria-label={open ? 'Close menu' : 'Open menu'}
+					onClick={() => setOpen((v) => !v)}
+				>
+					{open ? (
+						<XMarkIcon className="h-4 w-4" aria-hidden />
+					) : (
+						<Bars3Icon className="h-4 w-4" aria-hidden />
+					)}
+				</button>
+			</div>

-                                <li className="text-xl text-snow-storm py-2 my-2 md:my-0 px-6 text-center md:border-b-0  border-snow-storm-dark  hover:text-nord-12 transition duration-250">
-                                    <Link href="https://gitlab.com/caydens" onClick={() => setNavbar(!navbar)}
-                                          className='sm:px-48 md:px-0'>GitLab</Link>
-                                </li>
+			{open && (
+				<nav
+					id="mobile-nav"
+					aria-label="Mobile"
+					className="flex flex-col border-t border-white/10 bg-obsidian/90 backdrop-blur-md md:hidden"
+				>
+					{nav.map((item) => (
+						<a
+							key={item.href}
+							href={item.href}
+							onClick={close}
+							className="border-b border-white/10 px-6 py-3.5 text-sm text-ink/80 hover:bg-white/5 hover:text-ink"
+						>
+							{item.label}
+						</a>
+					))}
+					<a
+						href={site.gitlab}
+						target="_blank"
+						rel="noreferrer"
+						className="px-6 py-3.5 text-sm text-aurora hover:bg-white/5"
+					>
+						GitLab ↗
+					</a>
+				</nav>
+			)}
+		</header>
+	);
+};

-                                <li className="text-xl text-snow-storm py-2 my-2 md:my-0 px-6 text-center md:border-b-0  border-snow-storm-dark  hover:text-nord-12 transition duration-250">
-                                    <Link href="/contact" onClick={() => setNavbar(!navbar)}
-                                          className='sm:px-48 md:px-0'>Contact</Link>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </header>
-        </>
-    )
-}
-export default Header
+export default Header;
--- a/components/layout/page-background.tsx
+++ b/components/layout/page-background.tsx
@ -0,0 +1,28 @@
+import GradientWaves from '@/components/GradientWaves';
+
+// React Bits GradientWaves "Aurora" preset, tuned to fill the viewport.
+const PageBackground = () => (
+	<div aria-hidden className="fixed inset-0 -z-10 overflow-hidden">
+		<GradientWaves
+			horizonColor="#064e3b"
+			waveColor="#34d399"
+			crestColor="#d1fae5"
+			speed={0.35}
+			amplitude={2.6}
+			waveScale={0.7}
+			waveRatio={0.9}
+			swell={38}
+			turbulence={24}
+			fogDepth={12}
+			lightAngle={170}
+			sheen={0.28}
+			height={5.5}
+			tilt={64}
+			className="h-full w-full"
+		/>
+		{/* Dark wash keeps foreground text readable */}
+		<div className="absolute inset-0 bg-obsidian/25" />
+	</div>
+);
+
+export default PageBackground;
--- a/components/sections/contact.tsx
+++ b/components/sections/contact.tsx
@ -0,0 +1,32 @@
+import { site } from '@/lib/site';
+
+const Contact = () => (
+	<section id="contact" className="container-page pt-12 pb-24">
+		<div className="flex flex-col items-start justify-between gap-6 panel p-6 sm:flex-row sm:items-center md:p-9">
+			<div>
+				<h2 className="font-display text-2xl font-medium tracking-tight text-ink md:text-3xl">
+					Get in touch
+				</h2>
+				<p className="mt-1.5 text-sm text-ink/70">
+					Have a project, role, or panel in mind? Let&apos;s talk.
+				</p>
+			</div>
+
+			<div className="flex flex-wrap gap-3 text-sm font-medium">
+				<a href={`mailto:${site.email}`} className="btn-primary">
+					{site.email} →
+				</a>
+				<a
+					href={site.gitlab}
+					target="_blank"
+					rel="noreferrer"
+					className="btn-ghost"
+				>
+					GitLab ↗
+				</a>
+			</div>
+		</div>
+	</section>
+);
+
+export default Contact;
--- a/components/sections/feats.tsx
+++ b/components/sections/feats.tsx
@ -0,0 +1,31 @@
+import Reveal from '@/components/ui/reveal';
+import SectionHeading from '@/components/ui/section-heading';
+import { feats } from '@/lib/site';
+
+const Feats = () => (
+	<section id="feats" className="container-page py-16">
+		<SectionHeading title="Leadership">
+			Operations and community work outside of code.
+		</SectionHeading>
+
+		<ul className="grid panel sm:grid-cols-2">
+			{feats.map((feat, i) => (
+				<li
+					key={feat.title}
+					className="border-white/12 p-6 transition-colors not-last:border-b hover:bg-white/[0.04] sm:odd:border-r sm:odd:nth-last-2:border-b-0 md:p-7"
+				>
+					<Reveal delay={i * 60}>
+						<h3 className="font-display text-base font-medium text-ink">
+							{feat.title}
+						</h3>
+						<p className="mt-1.5 text-sm leading-relaxed text-ink/70">
+							{feat.detail}
+						</p>
+					</Reveal>
+				</li>
+			))}
+		</ul>
+	</section>
+);
+
+export default Feats;
--- a/components/sections/hero.tsx
+++ b/components/sections/hero.tsx
@ -0,0 +1,69 @@
+import Image from 'next/image';
+import { about, site, stack } from '@/lib/site';
+
+const Hero = () => (
+	<section id="about" className="container-page py-20 md:pt-28 md:pb-24">
+		<div className="max-w-2xl">
+			<p className="mb-4 flex items-center gap-3 font-mono text-xs tracking-[0.2em] text-aurora uppercase">
+				<span aria-hidden className="h-px w-6 bg-aurora" />
+				<span>{site.role}</span>
+			</p>
+			<h1 className="font-display text-5xl font-semibold tracking-[-0.035em] text-ink sm:text-6xl md:text-7xl">
+				Howdy, I&apos;m {site.name}.
+			</h1>
+			<p className="mt-4 max-w-xl text-lg leading-relaxed text-ink/85 md:text-xl">
+				{site.tagline}
+			</p>
+
+			<div className="mt-8 flex flex-wrap gap-3 text-sm font-medium">
+				<a href="#work" className="btn-primary">
+					Selected work ↓
+				</a>
+				<a
+					href={site.gitlab}
+					target="_blank"
+					rel="noreferrer"
+					className="btn-ghost"
+				>
+					GitLab ↗
+				</a>
+			</div>
+		</div>
+
+		<div className="mt-16 grid panel md:mt-20 md:grid-cols-[14rem_1fr]">
+			<div className="border-b border-white/12 p-5 md:border-r md:border-b-0 md:p-6">
+				<div className="relative aspect-[8/7] overflow-hidden border border-white/12 bg-obsidian/60">
+					<Image
+						src="/cayden-portrait.png"
+						alt="Cayden"
+						fill
+						loading="eager"
+						sizes="(min-width: 768px) 13rem, 90vw"
+						className="object-cover"
+					/>
+				</div>
+			</div>
+
+			<div className="flex flex-col justify-between">
+				<div className="space-y-4 p-6 text-[15.5px] leading-relaxed text-ink/85 md:p-8">
+					{about.map((paragraph) => (
+						<p key={paragraph}>{paragraph}</p>
+					))}
+				</div>
+
+				<ul className="flex flex-wrap gap-x-6 gap-y-2 border-t border-white/12 px-6 py-3.5 font-mono text-xs text-crest/80 md:px-8">
+					{stack.map((tech) => (
+						<li
+							key={tech}
+							className="transition-colors hover:text-aurora"
+						>
+							{tech}
+						</li>
+					))}
+				</ul>
+			</div>
+		</div>
+	</section>
+);
+
+export default Hero;
--- a/components/sections/projects.tsx
+++ b/components/sections/projects.tsx
@ -0,0 +1,34 @@
+import Reveal from '@/components/ui/reveal';
+import SectionHeading from '@/components/ui/section-heading';
+import { projects } from '@/lib/site';
+
+const Projects = () => (
+	<section id="work" className="container-page py-16">
+		<SectionHeading title="Selected Work">
+			Instant-Response Web Applications
+		</SectionHeading>
+
+		<div className="grid divide-y divide-white/12 panel md:grid-cols-3 md:divide-x md:divide-y-0">
+			{projects.map((project, i) => (
+				<Reveal key={project.title} delay={i * 60}>
+					<article className="flex h-full flex-col justify-between p-6 transition-colors hover:bg-white/4 md:p-7">
+						<div>
+							<h3 className="font-display text-lg font-medium tracking-tight text-ink">
+								{project.title}
+							</h3>
+							<p className="mt-2.5 text-sm leading-relaxed text-ink/70">
+								{project.blurb}
+							</p>
+						</div>
+
+						<p className="mt-8 border-t border-white/10 pt-3 font-mono text-xs text-aurora/90">
+							{project.stack}
+						</p>
+					</article>
+				</Reveal>
+			))}
+		</div>
+	</section>
+);
+
+export default Projects;
--- a/components/ui/reveal.tsx
+++ b/components/ui/reveal.tsx
@ -0,0 +1,49 @@
+'use client';
+
+import {
+	useEffect,
+	useRef,
+	useState,
+	type CSSProperties,
+	type ReactNode,
+} from 'react';
+
+type Props = {
+	children: ReactNode;
+	delay?: number;
+};
+
+// Fades content up as it scrolls into view.
+const Reveal = ({ children, delay = 0 }: Props) => {
+	const ref = useRef<HTMLDivElement>(null);
+	const [visible, setVisible] = useState(false);
+
+	useEffect(() => {
+		const node = ref.current;
+		if (!node) return;
+		const observer = new IntersectionObserver(
+			([entry]) => {
+				if (entry.isIntersecting) {
+					setVisible(true);
+					observer.disconnect();
+				}
+			},
+			{ threshold: 0.12 },
+		);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+
+	return (
+		<div
+			ref={ref}
+			data-visible={visible}
+			className="reveal"
+			style={{ '--reveal-delay': `${delay}ms` } as CSSProperties}
+		>
+			{children}
+		</div>
+	);
+};
+
+export default Reveal;
--- a/components/ui/section-heading.tsx
+++ b/components/ui/section-heading.tsx
@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+type Props = {
+	title: string;
+	children?: ReactNode;
+};
+
+const SectionHeading = ({ title, children }: Props) => (
+	<div className="mb-6 flex flex-col justify-between gap-2 border-b border-white/15 pb-4 sm:flex-row sm:items-end">
+		<div className="flex items-center gap-3">
+			<span aria-hidden className="h-px w-5 bg-aurora" />
+			<h2 className="font-display text-2xl font-medium tracking-tight text-ink md:text-3xl">
+				{title}
+			</h2>
+		</div>
+		{children && <p className="text-sm text-ink/70">{children}</p>}
+	</div>
+);
+
+export default SectionHeading;
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@ -1,18 +1,18 @@
-import { defineConfig, globalIgnores } from "eslint/config";
-import nextVitals from "eslint-config-next/core-web-vitals";
-import nextTs from "eslint-config-next/typescript";
+import { defineConfig, globalIgnores } from 'eslint/config';
+import nextVitals from 'eslint-config-next/core-web-vitals';
+import nextTs from 'eslint-config-next/typescript';

 const eslintConfig = defineConfig([
-  ...nextVitals,
-  ...nextTs,
-  // Override default ignores of eslint-config-next.
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    ".next/**",
-    "out/**",
-    "build/**",
-    "next-env.d.ts",
-  ]),
+	...nextVitals,
+	...nextTs,
+	// Override default ignores of eslint-config-next.
+	globalIgnores([
+		// Default ignores of eslint-config-next:
+		'.next/**',
+		'out/**',
+		'build/**',
+		'next-env.d.ts',
+	]),
 ]);

 export default eslintConfig;
--- a/lib/articles.ts
+++ b/lib/articles.ts
@ -1,74 +0,0 @@
-import fs from "fs"
-import matter from "gray-matter"
-import path from "path"
-import moment from "moment"
-import {remark} from "remark";
-import html from "remark-html"
-
-import type {ArticleItem} from "@/types";
-
-const articlesDirectory = path.join(process.cwd(), "articles");
-
-export const getSortedArticles = (): ArticleItem[] => {
-    const fileNames = fs.readdirSync(articlesDirectory);
-
-    const allArticlesData = fileNames.map((fileName) => {
-        const id = fileName.replace(/\.md$/, "");
-
-        const fullPath = path.join(articlesDirectory, fileName);
-        const fileContents = fs.readFileSync(fullPath, "utf8");
-
-        const matterResult = matter(fileContents);
-
-        return {
-            id,
-            title: matterResult.data.title,
-            date: matterResult.data.date,
-            category: matterResult.data.category,
-        }
-    })
-
-    return allArticlesData.sort((a, b) => {
-        const format = "DD-MM-YYYY";
-        const dateOne = moment(a.date, format);
-        const dateTwo = moment(b.date, format);
-
-        return dateTwo.valueOf() - dateOne.valueOf();
-    })
-}
-
-export const getCategorizedArticles = (): Record<string, ArticleItem[]> => {
-    const sortedArticles = getSortedArticles();
-    const categorisedArticles: Record<string, ArticleItem[]> = {}
-
-    sortedArticles.forEach((article) => {
-        if (!categorisedArticles[article.category]) {
-            categorisedArticles[article.category] = []
-        }
-        categorisedArticles[article.category].push(article);
-    })
-
-    return categorisedArticles;
-}
-
-export const getArticleData = async (id: string) => {
-    const fullPath = path.join(articlesDirectory, `${id}.md`);
-
-    const fileContents = fs.readFileSync(fullPath, "utf8");
-
-    const matterResult = matter(fileContents);
-
-    const processedContent = await remark()
-        .use(html)
-        .process(matterResult.content)
-
-    const contentHtml = processedContent.toString();
-
-    return {
-        id,
-        contentHtml,
-        title: matterResult.data.title,
-        category: matterResult.data.category,
-        date: moment(matterResult.data.date, "DD-MM-YYYY").format("MMMM Do YYYY")
-    }
-}
--- a/lib/site.ts
+++ b/lib/site.ts
@ -0,0 +1,70 @@
+export type Project = {
+	title: string;
+	blurb: string;
+	stack: string;
+};
+
+export type Feat = {
+	title: string;
+	detail: string;
+};
+
+export const site = {
+	name: 'Cayden',
+	role: 'Web Developer',
+	tagline:
+		"I'm a proven people leader building fast, dependable web software for clinical floors and fleet operations.",
+	gitlab: 'https://gitlab.com/caydens',
+	email: 'hi@caydens.dev',
+};
+
+export const nav = [
+	{ label: 'About', href: '#about' },
+	{ label: 'Work', href: '#work' },
+	{ label: 'Leadership', href: '#feats' },
+	{ label: 'Contact', href: '#contact' },
+];
+
+export const stack = ['TypeScript', 'React', 'Next.js', 'Python', 'JavaScript'];
+
+export const about = [
+	'I engineer responsive, high-performance web applications where speed and clarity are paramount, specializing in touch-first EHR interfaces and live fleet telemetry for mobile medical workstations. I bridge the gap between human workflows and technical architecture to deliver interfaces that feel natural, comfortable, and precise.',
+	"Outside of software engineering, I directed one of the Southeast’s largest interest-driven communities, producing 250-attendee live events, speaking at regional conventions, and coordinating partnerships with major streaming platforms.",
+];
+
+export const projects: Project[] = [
+	{
+		title: 'Fleet Management & Tracking',
+		blurb: 'Empower high-stakes healthcare environments with real-time tracking, telemetry, and remote management for EHR devices.',
+		stack: 'TypeScript · Next.js · SQL · Rust',
+	},
+	{
+		title: 'Leadership Training Platforms',
+		blurb: 'Prepare corporate leaders for critical decision-making through dynamic, real-world simulations of routine and high-stress management.',
+		stack: 'React · Tailwind CSS',
+	},
+	{
+		title: 'Battery Management Tooling',
+		blurb: 'Validated configuration tooling for programming power delivery controllers in multi-cell battery packs.',
+		stack: 'Next.js · Python · Embedded',
+	},
+];
+
+export const feats: Feat[] = [
+	{
+		title: 'Live event production',
+		detail: 'Produced gatherings of up to 250 attendees and coordinated cross-country talent travel.',
+	},
+	{
+		title: 'Community direction',
+		detail: "Led one of the Southern USA's largest interest-driven communities.",
+	},
+	{
+		title: 'Media partnerships',
+		detail: 'Negotiated talent placements with global streaming networks.',
+	},
+	{
+		title: 'Public speaking',
+		detail: 'Regular convention panelist on community and operations leadership.',
+	},
+];
--- a/next.config.ts
+++ b/next.config.ts
@ -1,7 +1,13 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from 'next';

 const nextConfig: NextConfig = {
-  /* config options here */
+	async redirects() {
+		return [
+			{ source: '/blog', destination: '/', permanent: true },
+			{ source: '/blog/:slug*', destination: '/', permanent: true },
+			{ source: '/contact', destination: '/#contact', permanent: true },
+		];
+	},
 };

 export default nextConfig;
--- a/package.json
+++ b/package.json
@ -1,38 +1,34 @@
 {
-  "name": "myblog",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint"
-  },
-  "dependencies": {
-    "@heroicons/react": "^2.2.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.6",
-    "gray-matter": "^4.0.3",
-    "moment": "^2.30.1",
-    "next": "16.2.12",
-    "prettier": "^3.9.4",
-    "react": "19.2.8",
-    "react-dom": "19.2.8",
-    "remark": "^15.0.1",
-    "remark-html": "^16.0.1"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4.3.1",
-    "@types/node": "^20.19.43",
-    "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
-    "eslint": "10.8.0",
-    "eslint-config-next": "16.2.12",
-    "tailwindcss": "^4.3.1",
-    "typescript": "^5.9.3"
-  },
-  "overrides": {
-    "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4"
-  }
+	"name": "caydenwebsite",
+	"version": "2.0.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "eslint",
+		"format": "prettier --write ."
+	},
+	"dependencies": {
+		"@heroicons/react": "^2.2.0",
+		"next": "^16.4.3",
+		"react": "^19.3.1",
+		"react-dom": "^19.3.1"
+	},
+	"devDependencies": {
+		"@tailwindcss/postcss": "^4.3.3",
+		"@types/node": "^20.19.43",
+		"@types/react": "19.2.18",
+		"@types/react-dom": "19.2.4",
+		"eslint": "10.8.0",
+		"eslint-config-next": "^16.4.3",
+		"prettier": "^3.9.10",
+		"prettier-plugin-tailwindcss": "^0.8.1",
+		"tailwindcss": "^4.3.3",
+		"typescript": "^5.9.3"
+	},
+	"overrides": {
+		"@types/react": "19.2.18",
+		"@types/react-dom": "19.2.4"
+	}
 }
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@ -1,7 +1,7 @@
 const config = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
+	plugins: {
+		'@tailwindcss/postcss': {},
+	},
 };

 export default config;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,34 +1,34 @@
 {
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts",
-    "**/*.mts"
-  ],
-  "exclude": ["node_modules"]
+	"compilerOptions": {
+		"target": "ES2017",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "react-jsx",
+		"incremental": true,
+		"plugins": [
+			{
+				"name": "next"
+			}
+		],
+		"paths": {
+			"@/*": ["./*"]
+		}
+	},
+	"include": [
+		"next-env.d.ts",
+		"**/*.ts",
+		"**/*.tsx",
+		".next/types/**/*.ts",
+		".next/dev/types/**/*.ts",
+		"**/*.mts"
+	],
+	"exclude": ["node_modules"]
 }
--- a/types/index.ts
+++ b/types/index.ts
@ -1,6 +0,0 @@
-export type ArticleItem = {
-    id: string,
-    title: string,
-    date: string,
-    category: string
-}