+ verbiage

.gitlab-ci.yml

@@ -6,13 +6,13 @@
 # Note that environment variables can be set in several places
 # See https://docs.gitlab.com/ci/variables/#cicd-variable-precedence
 stages:
-- test
+    - test
-- secret-detection
+    - secret-detection
 sast:
     stage: test
 include:
-- template: Security/SAST.gitlab-ci.yml
+    - template: Security/SAST.gitlab-ci.yml
-- template: Security/Secret-Detection.gitlab-ci.yml
+    - template: Security/Secret-Detection.gitlab-ci.yml
 variables:
     SECRET_DETECTION_ENABLED: 'true'
 secret_detection:

.prettierrc

@@ -1,5 +1,7 @@
 {
 	"tabWidth": 4,
 	"singleQuote": true,
-    "useTabs": true
+	"useTabs": true,
+	"plugins": ["prettier-plugin-tailwindcss"],
+	"tailwindStylesheet": "./app/globals.css"
 }

AGENTS.md

@@ -1,5 +1,9 @@
 <!-- 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.
+## 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/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
 <!-- END:nextjs-agent-rules -->

README.md

@@ -1,36 +1,23 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Cayden's Website
 
-## Getting Started
+Software engineer & AI orchestrator 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.
 
-First, run the development server:
+## Structure
 
-```bash
+```text
-npm run dev
+app/               Root layout, global styles, home page
-# or
+components/
-yarn dev
+  layout/          Header, Footer, PageBackground
-# or
+  sections/        Hero, Projects, Feats, Contact
-pnpm dev
+  ui/              Reveal, SectionHeading
-# or
+  GradientWaves.tsx  Vendored from React Bits
-bun dev
+lib/site.ts        All editable content and types
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Development
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+```bash
-
+bun install
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+bun dev       # http://localhost:3000
-
+bun run format
-## Learn More
+```
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/blog/[slug]/page.tsx

@@ -1,23 +0,0 @@
-import Link from "next/link"
-import {ArrowLeftIcon} from "@heroicons/react/24/solid"
-import {getArticleData} from "@/lib/articles";
-
-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;

app/blog/page.tsx

@@ -1,21 +0,0 @@
-import {getCategorizedArticles} from "@/lib/articles";
-import ArticleItemList from "@/components/ArticleListItem";
-
-export default 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>
-        </>
-    );
-}

app/contact/page.tsx

@@ -1,7 +0,0 @@
-export default 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>
-    )
-}

app/globals.css

@@ -1,84 +1,78 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @theme inline {
-    --font-cormorantGaramond: "Cormorant_Garamond", "sans-serif";
+	--font-display:
-    --font-poppins: "Poppins", "sans-serif";
+		var(--font-geist-serif), ui-serif, Georgia, Cambria, 'Times New Roman',
-
+		Times, serif;
-    /* Nord: Polar Night */
+	--font-serif:
-    --color-nord-0: #2e3440;
+		var(--font-geist-serif), ui-serif, Georgia, Cambria, 'Times New Roman',
-    --color-nord-1: #3b4252;
+		Times, serif;
-    --color-nord-2: #4D535F;
+	--font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
-    --color-nord-3: #434c5e;
+	--font-mono:
-
+		var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, monospace;
-    /* 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;
 }
 
-.article {
+@theme {
-    @apply flex flex-col gap-3 font-poppins text-lg tracking-wide mb-20
+	--color-obsidian: #040807;
+	--color-aurora: #34d399;
+	--color-crest: #d1fae5;
+	--color-ink: #f2faf6;
 }
 
-.article > h1 {
+@utility container-page {
-    @apply text-4xl font-cormorantGaramond text-center tracking-tight;
+	@apply mx-auto max-w-5xl px-6;
 }
 
-.article > h2 {
+@utility panel {
-    @apply text-3xl font-cormorantGaramond text-center tracking-tight;
+	@apply border border-white/12 bg-obsidian/55 backdrop-blur-md;
 }
 
-.article > ol {
+@utility btn-primary {
-    @apply list-decimal flex flex-col mx-10 gap-2;
+	@apply border border-aurora bg-aurora px-5 py-2.5 text-obsidian transition-colors hover:border-crest hover:bg-crest;
 }
 
-.article > ul {
+@utility btn-ghost {
-    @apply list-disc flex flex-col mx-10 gap-2;
+	@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 {
+html {
-    @apply bg-neutral-950 text-neutral-50 p-5 overflow-scroll;
+	scroll-behavior: smooth;
+	scroll-padding-top: 4rem;
 }
 
-.article > blockquote {
+::selection {
-    @apply pl-5 italic border-l-2 border-neutral-600;
+	background: var(--color-aurora);
+	color: var(--color-obsidian);
 }
 
-.article > p > img {
+:focus-visible {
-    @apply w-1/2 mx-auto;
+	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;
+	}
+}

app/layout.tsx

@@ -1,41 +1,53 @@
-import React from "react";
+import type { ReactNode } from 'react';
-import type {Metadata} from "next";
+import type { Metadata, Viewport } from 'next';
-import {Cormorant_Garamond, Poppins} from "next/font/google";
+import { Inter, JetBrains_Mono, Space_Grotesk } from 'next/font/google';
-import "./globals.css";
+import { GeistSerif } from 'geist/font/serif';
-import Header from "@/components/layout/layout-header";
+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({
+const spaceGrotesk = Space_Grotesk({
 	subsets: ['latin'],
-    variable: "--font-cormorantGaramond",
+	variable: '--font-space-grotesk',
-    weight: ['400']
+});
-})
 
-const poppins = Poppins({
+const inter = Inter({
 	subsets: ['latin'],
-    variable: "--font-poppins",
+	variable: '--font-inter',
-    weight: ['400', '600']
+});
-})
 
+const jetbrainsMono = JetBrains_Mono({
+	subsets: ['latin'],
+	variable: '--font-jetbrains-mono',
+	weight: ['400', '500'],
+});
 
 export const metadata: Metadata = {
-    title: "sh ~./caydencodes.sh",
+	title: 'Cayden — Software Engineer & AI Orchestrator',
-    description: "Come and see what I'm all about.",
+	description:
+		'Software engineer and AI orchestrator building clinical interfaces, fleet telemetry, and high-performance web systems.',
+};
+
+export const viewport: Viewport = {
+	themeColor: '#040807',
 };
 
 export default function RootLayout({
 	children,
-                                   }: Readonly<{
+}: Readonly<{
-    children: React.ReactNode;
+	children: ReactNode;
 }>) {
 	return (
 		<html
 			lang="en"
-            className={`${cormorantGaramond.variable} ${poppins.variable} bg-neutral-100 h-full antialiased`}
+			className={`${spaceGrotesk.variable} ${inter.variable} ${jetbrainsMono.variable} ${GeistSerif.variable} h-full bg-obsidian antialiased`}
 		>
-        <body
+			<body className="relative isolate flex min-h-full flex-col font-sans text-ink">
-            className="min-h-full flex flex-col bg-polar-night-lighter text-snow-storm text-shadow-snow-storm-dark">
+				<PageBackground />
-        <Header/>
+				<Header />
-        {children}
+				<div className="flex-1">{children}</div>
+				<Footer />
 			</body>
 		</html>
 	);

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 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">
+		<main>
-            <section className="flex flex-col items-center gap-8 text-center font-cormorantGaramond">
+			<Hero />
-                <img
+			<Projects />
-                    src="/cayden-portrait.png"
+			<Feats />
-                    alt="Portrait of Cayden"
+			<Contact />
-                    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>
 	);
 }

articles/goalstooearly.md

@@ -1,61 +0,0 @@
----
-title: "Achieving your dreams: what next?"
-category: "personal"
-date: "04-08-2026"
----
-
-# I achieved most of my dream goals much earlier than I expected. Now what?
-
-I'm in a pickle mentally; this is a situation in which I was never truly expecting to get to where I am at currently.
-
-I would like to preface with the fact that I have always put my best foot forward. Image is incredibly important to me,
-but work is paramount; if you are unable to hold up both to the best of your ability, I believe one will fail.
-
-## Past In Leadership
-
-I started at a young age in Cub Scouts, before quickly climbing the ranks and moving on to Boy Scouts. I quickly became
-the troop's Assistant Senior Patrol Leader (ASPL), and I took on additional responsibilities such as leading troop
-meetings, organizing campouts, miscellaneous administrative tasks, and teaching my fellow scouts valuable safety and
-personal life skills.
-
-Past my scouting life, I have dedicated multiple years of my life to building safe-space communities for all on
-platforms such as Discord and in real life, even creating and leading the Southern US's largest interest-based
-community. Over the years, this community grew to hosting 250+ members monthly at in-person events, with an additional
-social media presence spanning over 2,000 members. Some of my duties included running the group, coordinating logistics
-such as premiering guests on Netflix, flying musicians out to in-house events, working alongside large non-profit
-organizations such as Nashville Pride in partnership, and more.
-
-## You _will_ swim - sinking isn't an option.
-
-_You are never too young to succeed. It just matters when you start._
-
-I am _incredibly_ obsessed with ensuring I can deliver quality products. I strive for complexity and niche requirements;
-I find that I usually work best if I'm thrown into the fire with a good challenge for me.
-
-Part of my dedication to my craft is that I will dedicate 100% of my time and power to it. I take on projects as a
-personal mission every time if the project aligns with my interests; I will not rest until I have achieved my goals.
-
-This means that I am very often obsessing over small details on my work and do regularly end up re-writing my work or
-plans many times. The reward of having it _just right_ is absolutely worth the effort.
-
-## Proving It
-
-I have maintained relative proof of my achievements and have been able to demonstrate my skills and work to a great many
-people. This is incredibly important and necessary; you may be able to vouch for yourself, but other people won't see
-you for who you are if you can't back up your claims.
-
-Keeping track of everything has enabled me to move very far very fast in life; I am now a software engineer working in
-the medical industry at just 20 years old, and have achieved my lifelong dream of becoming a developer since childhood.
-
-## And what about nowadays?
-
-In all honesty, it feels kind of... empty, knowing you've achieved what you set out to do. Call it a recalibration or
-"rebalancing" of sorts.
-
-Work has been challenging me well, and I am thrilled with where I am now. I've set myself up to be able to comfortably
-live where I am and work on these projects, but I am finding that I am now in the active process of defining exactly
-what my next ambition looks like.
-
-I am beyond happy and excited to shape my new future, and I look forward to contributing to amazing projects and
-spearheading innovation where I can.
-

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.

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.

articles/stress.md

@@ -1,7 +0,0 @@
----
-title: "Charles de Souza"
-category: "personal"
-date: "02-04-2023"
----
-
-# Stress and management

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"
+	}
+}

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

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}
+		/>
+	);
+}

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;

components/layout/layout-header.tsx

@@ -1,68 +1,103 @@
-'use client'
+'use client';
 
-import React, {useState} from 'react'
+import { useState } from 'react';
-import Image from 'next/image'
+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="sticky top-0 z-50 border-b border-white/10 bg-obsidian/45 backdrop-blur-md">
-            <header className="font-poppins bg-polar-night-light z-10">
+			<div className="container-page flex h-16 items-center justify-between">
-                <div className="justify-between px-2 lg:px-0 mx-auto lg:max-w-7xl md:items-center md:flex md:px-4">
+				<Link
-                    <div>
+					href="/"
-                        <div className="flex items-center justify-between md:block">
+					onClick={close}
-                            <div className='flex items-center justify-between md:py-3 gap-10'>
+					className="flex items-center gap-2.5 text-sm font-medium tracking-tight text-ink"
-                                <Link href={"/"} className="flex flex-col items-center gap-0 leading-none">
+					aria-label="Home"
-                                    <Image src={Logo} width={100} alt='Logo'/>
+				>
+					<Image
+						src={Logo}
+						alt=""
+						width={40}
+						height={40}
+						loading="eager"
+						className="h-9 w-9 object-contain"
+					/>
+					<span>{site.name}</span>
 				</Link>
-                            </div>
+
-                            <div className="md:hidden">
+				<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
-                                    className="p-3 text-gray-700 rounded-md outline-none focus:border-gray-400 border-2 focus:border bg-nord-10"
+					type="button"
-                                    onClick={() => setNavbar(!navbar)}>
+					className="grid h-9 w-9 place-items-center border border-white/15 text-ink hover:border-aurora md:hidden"
-                                    {navbar ? (
+					aria-expanded={open}
-                                        <div className="bar text-snow-storm"></div>
+					aria-controls="mobile-nav"
+					aria-label={open ? 'Close menu' : 'Open menu'}
+					onClick={() => setOpen((v) => !v)}
+				>
+					{open ? (
+						<XMarkIcon className="h-4 w-4" aria-hidden />
 					) : (
-                                        <div className="close text-snow-storm"></div>
+						<Bars3Icon className="h-4 w-4" aria-hidden />
 					)}
 				</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>
 
-                                <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">
+			{open && (
-                                    <Link href="/blog" onClick={() => setNavbar(!navbar)}
+				<nav
-                                          className='sm:px-52 md:px-0'>Blog</Link>
+					id="mobile-nav"
-                                </li>
+					aria-label="Mobile"
-
+					className="flex flex-col border-t border-white/10 bg-obsidian/90 backdrop-blur-md md:hidden"
-
+				>
-                                <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">
+					{nav.map((item) => (
-                                    <Link href="https://gitlab.com/caydens" onClick={() => setNavbar(!navbar)}
+						<a
-                                          className='sm:px-48 md:px-0'>GitLab</Link>
+							key={item.href}
-                                </li>
+							href={item.href}
-
+							onClick={close}
-                                <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">
+							className="border-b border-white/10 px-6 py-3.5 text-sm text-ink/80 hover:bg-white/5 hover:text-ink"
-                                    <Link href="/contact" onClick={() => setNavbar(!navbar)}
+						>
-                                          className='sm:px-48 md:px-0'>Contact</Link>
+							{item.label}
-                                </li>
+						</a>
-                            </ul>
+					))}
-                        </div>
+					<a
-                    </div>
+						href={site.gitlab}
-                </div>
+						target="_blank"
+						rel="noreferrer"
+						className="px-6 py-3.5 text-sm text-aurora hover:bg-white/5"
+					>
+						GitLab ↗
+					</a>
+				</nav>
+			)}
 		</header>
-        </>
+	);
-    )
+};
-}
+
-export default Header
+export default Header;

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;

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-normal 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;

components/sections/feats.tsx

@@ -0,0 +1,49 @@
+import Reveal from '@/components/ui/reveal';
+import SectionHeading from '@/components/ui/section-heading';
+import { feats } from '@/lib/site';
+
+const Feats = () => {
+	const isOddTotal = feats.length % 2 === 1;
+
+	return (
+		<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) => {
+					const isLast = i === feats.length - 1;
+					const isLastRow = isOddTotal
+						? isLast
+						: i >= feats.length - 2;
+					const isLeftCol = i % 2 === 0;
+					const colSpan = isOddTotal && isLast ? 'sm:col-span-2' : '';
+					const rightBorder =
+						isLeftCol && !(isOddTotal && isLast)
+							? 'sm:border-r'
+							: '';
+					const bottomBorder = isLastRow ? 'sm:border-b-0' : '';
+
+					return (
+						<li
+							key={feat.title}
+							className={`border-white/12 p-6 transition-colors not-last:border-b hover:bg-white/[0.04] md:p-7 ${colSpan} ${rightBorder} ${bottomBorder}`}
+						>
+							<Reveal delay={i * 60}>
+								<h3 className="font-display text-base font-normal 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;

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-normal tracking-[-0.035em] text-ink sm:text-6xl md:text-7xl">
+				Howdy, I&apos;m Cayden.
+			</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;

components/sections/projects.tsx

@@ -0,0 +1,79 @@
+import Reveal from '@/components/ui/reveal';
+import SectionHeading from '@/components/ui/section-heading';
+import { projects } from '@/lib/site';
+
+const Projects = () => {
+	const rem = projects.length % 3;
+	const lastRowStart = projects.length - (rem || 3);
+
+	return (
+		<section id="work" className="container-page py-16">
+			<SectionHeading title="Selected Work">
+				Instant-Response Web Applications
+			</SectionHeading>
+
+			<div className="grid panel md:grid-cols-6">
+				{projects.map((project, i) => {
+					const inLastRow = i >= lastRowStart;
+					const colSpan =
+						inLastRow && rem === 1
+							? 'md:col-span-6'
+							: inLastRow && rem === 2
+								? 'md:col-span-3'
+								: 'md:col-span-2';
+					const rightRule =
+						i !== projects.length - 1 && i % 3 !== 2
+							? 'md:border-r'
+							: '';
+					const bottomRule = inLastRow ? 'md:border-b-0' : '';
+					const className = `group grid border-white/12 p-6 transition-colors not-last:border-b hover:bg-white/4 md:p-7 ${colSpan} ${rightRule} ${bottomRule}`;
+
+					const content = (
+						<Reveal delay={i * 60}>
+							<div className="flex h-full flex-col justify-between">
+								<div>
+									<h3 className="flex items-baseline justify-between gap-2 font-display text-lg font-normal tracking-tight text-ink group-hover:text-crest">
+										<span>{project.title}</span>
+										{project.href && (
+											<span
+												aria-hidden
+												className="text-sm text-aurora transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
+											>
+												↗
+											</span>
+										)}
+									</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>
+							</div>
+						</Reveal>
+					);
+
+					return project.href ? (
+						<a
+							key={project.title}
+							href={project.href}
+							target="_blank"
+							rel="noreferrer"
+							className={className}
+						>
+							{content}
+						</a>
+					) : (
+						<article key={project.title} className={className}>
+							{content}
+						</article>
+					);
+				})}
+			</div>
+		</section>
+	);
+};
+
+export default Projects;

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;

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-normal tracking-tight text-ink md:text-3xl">
+				{title}
+			</h2>
+		</div>
+		{children && <p className="text-sm text-ink/70">{children}</p>}
+	</div>
+);
+
+export default SectionHeading;

eslint.config.mjs

@@ -1,6 +1,6 @@
-import { defineConfig, globalIgnores } from "eslint/config";
+import { defineConfig, globalIgnores } from 'eslint/config';
-import nextVitals from "eslint-config-next/core-web-vitals";
+import nextVitals from 'eslint-config-next/core-web-vitals';
-import nextTs from "eslint-config-next/typescript";
+import nextTs from 'eslint-config-next/typescript';
 
 const eslintConfig = defineConfig([
 	...nextVitals,
@@ -8,10 +8,10 @@ const eslintConfig = defineConfig([
 	// Override default ignores of eslint-config-next.
 	globalIgnores([
 		// Default ignores of eslint-config-next:
-    ".next/**",
+		'.next/**',
-    "out/**",
+		'out/**',
-    "build/**",
+		'build/**',
-    "next-env.d.ts",
+		'next-env.d.ts',
 	]),
 ]);
 

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");
-
-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")
-    }
-}

lib/site.ts

@@ -0,0 +1,93 @@
+export type Project = {
+	title: string;
+	blurb: string;
+	stack: string;
+	href?: string;
+};
+
+export type Feat = {
+	title: string;
+	detail: string;
+};
+
+export const site = {
+	name: 'Cayden Codes',
+	role: 'Software Engineer, AI Orchestrator & Proven People Leader',
+	tagline:
+		'Software engineer and AI orchestrator building fast, resilient systems for clinical floors, fleet telemetry, and complex web architectures.',
+	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 am a software engineer and AI orchestrator with a relentless focus on core programming craftsmanship, systems architecture, and runtime performance. Whether engineering touch-first EHR interfaces for high-pressure clinical floors or architecting real-time telemetry pipelines for mobile medical workstations, my work is rooted in writing clean, resilient, and maintainable code across TypeScript, React, Next.js, and Python.',
+	'As an AI orchestrator, I approach models as architectural building blocks rather than superficial shortcuts. I design deterministic multi-agent workflows, structured context pipelines, and robust tooling integrations—grounded in strict validation, solid state machines, and end-to-end code execution.',
+	'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: 'Enterprise Agent Governance Framework',
+		blurb: 'Centralized developer tooling and orchestration suite—enforcing deterministic agent rules, custom MCP servers, automated style guides, and standardized integration patterns across enterprise repositories.',
+		stack: 'TypeScript · Node.js · MCP · Shell',
+	},
+	{
+		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',
+	},
+	{
+		title: 'Wayfarer',
+		blurb: 'Multi-provider weather station pairing animated NEXRAD and global radar maps with live NWS alerts, air quality, and 14-day forecasts.',
+		stack: 'Next.js · TypeScript · Tailwind CSS · Leaflet',
+		href: 'https://wayfarer.caydens.dev',
+	},
+	{
+		title: 'Plan My Meal',
+		blurb: 'Budget-first weekly meal planner with whole-package grocery pricing, ingredient overlap scoring, and appliance-aware filtering across 420+ recipes.',
+		stack: 'Next.js · TypeScript · Tailwind CSS',
+		href: 'https://planmymeal.caydens.dev',
+	},
+];
+
+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.',
+	},
+	{
+		title: 'Crisis response & rapid deployment',
+		detail: 'A proven knack for quick deadlines and tight risks—always willing to meet deadlines during downtime or fast-tracked product launches and go extremely far to make that happen, including flying across the world to Malaysia with under 6 hours’ notice in case of emergency to secure a product launch.',
+	},
+];

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;

package.json

@@ -1,34 +1,35 @@
 {
-  "name": "myblog",
+	"name": "caydenwebsite",
-  "version": "0.1.0",
+	"version": "2.0.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",
 		"start": "next start",
-    "lint": "eslint"
+		"lint": "eslint",
+		"format": "prettier --write ."
 	},
 	"dependencies": {
 		"@heroicons/react": "^2.2.0",
-    "eslint-config-prettier": "^10.1.8",
+		"geist": "^1.9.0",
-    "eslint-plugin-prettier": "^5.5.6",
+		"next": "^16.4.3",
-    "gray-matter": "^4.0.3",
+		"react": "^19.3.1",
-    "moment": "^2.30.1",
+		"react-dom": "^19.3.1"
-    "next": "16.2.9",
-    "prettier": "^3.9.4",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "remark": "^15.0.1",
-    "remark-html": "^16.0.1"
 	},
 	"devDependencies": {
-    "@tailwindcss/postcss": "^4.3.1",
+		"@tailwindcss/postcss": "^4.3.3",
 		"@types/node": "^20.19.43",
-    "@types/react": "^19.2.17",
+		"@types/react": "19.2.18",
-    "@types/react-dom": "^19.2.3",
+		"@types/react-dom": "19.2.4",
-    "eslint": "^9.39.4",
+		"eslint": "10.8.0",
-    "eslint-config-next": "16.2.9",
+		"eslint-config-next": "^16.4.3",
-    "tailwindcss": "^4.3.1",
+		"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"
 	}
 }

postcss.config.mjs

@@ -1,6 +1,6 @@
 const config = {
 	plugins: {
-    "@tailwindcss/postcss": {},
+		'@tailwindcss/postcss': {},
 	},
 };
 

types/index.ts

@@ -1,6 +0,0 @@
-export type ArticleItem = {
-    id: string,
-    title: string,
-    date: string,
-    category: string
-}