add Wayfarer & PlanMyMeal; WebStorm refactor

2026-11-01 14:39:54 -06:00 · 2026-11-01 14:39:54 -06:00 · fe3021f0c2
commit fe3021f0c2
parent 243527af9f
11 changed files with 119 additions and 47 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@ -1,6 +1,13 @@
 <!-- BEGIN:nextjs-agent-rules -->

-# This is NOT the Next.js you know
+## 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.

-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.
 <!-- END:nextjs-agent-rules -->
--- a/app/globals.css
+++ b/app/globals.css
@ -1,8 +1,10 @@
@import 'tailwindcss';

@theme inline {
-	--font-display:
-		var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
+	--font-display: var(--font-geist-serif), ui-serif, Georgia, Cambria, 'Times New Roman',
+	Times, serif;
+	--font-serif: var(--font-geist-serif), ui-serif, Georgia, Cambria, 'Times New Roman',
+	Times, serif;
 	--font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
 	--font-mono:
 		var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, monospace;
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,6 +1,7 @@
-import type { ReactNode } from 'react';
-import type { Metadata, Viewport } from 'next';
-import { Inter, JetBrains_Mono, Space_Grotesk } from 'next/font/google';
+import type {ReactNode} from 'react';
+import type {Metadata, Viewport} from 'next';
+import {Inter, JetBrains_Mono, Space_Grotesk} from 'next/font/google';
+import {GeistSerif} from 'geist/font/serif';
 import './globals.css';
 import Header from '@/components/layout/layout-header';
 import Footer from '@/components/layout/layout-footer';
@ -40,7 +41,7 @@ export default function RootLayout({
 	return (
 		<html
 			lang="en"
-			className={`${spaceGrotesk.variable} ${inter.variable} ${jetbrainsMono.variable} h-full bg-obsidian antialiased`}
+			className={`${spaceGrotesk.variable} ${inter.variable} ${jetbrainsMono.variable} ${GeistSerif.variable} h-full bg-obsidian antialiased`}
 		>
 			<body className="relative isolate flex min-h-full flex-col font-sans text-ink">
 				<PageBackground />
--- a/bun.lock
+++ b/bun.lock
@ -6,6 +6,7 @@
      "name": "myblog",
      "dependencies": {
        "@heroicons/react": "^2.2.0",
+        "geist": "^1.9.0",
        "next": "^16.4.3",
        "react": "^19.3.1",
        "react-dom": "^19.3.1",
@ -467,6 +468,8 @@

    "functions-have-names": ["functions-have-names@1.2.3", "", {}, "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="],

+    "geist": ["geist@1.9.0", "", { "peerDependencies": { "next": ">=13.2.0" } }, "sha512-uxiyxH5PaKDaK2//ln06NxJEz5gc6771BTwSs1YFgNnASGtp1SYD3VZShSIijvlNwDjMgHnzqye4MmIUTspEzw=="],
+
    "generator-function": ["generator-function@2.0.1", "", {}, "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g=="],

    "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
--- a/components/sections/contact.tsx
+++ b/components/sections/contact.tsx
@ -1,10 +1,10 @@
-import { site } from '@/lib/site';
+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">
+				<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">
--- a/components/sections/feats.tsx
+++ b/components/sections/feats.tsx
@ -1,6 +1,6 @@
 import Reveal from '@/components/ui/reveal';
 import SectionHeading from '@/components/ui/section-heading';
-import { feats } from '@/lib/site';
+import {feats} from '@/lib/site';

 const Feats = () => (
 	<section id="feats" className="container-page py-16">
@ -15,7 +15,7 @@ const Feats = () => (
 					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">
+						<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">
--- a/components/sections/hero.tsx
+++ b/components/sections/hero.tsx
@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { about, site, stack } from '@/lib/site';
+import {about, site, stack} from '@/lib/site';

 const Hero = () => (
 	<section id="about" className="container-page py-20 md:pt-28 md:pb-24">
@ -8,8 +8,8 @@ const Hero = () => (
 				<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 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}
@ -32,7 +32,7 @@ const Hero = () => (

 		<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">
+				<div className="relative aspect-8/7 overflow-hidden border border-white/12 bg-obsidian/60">
 					<Image
 						src="/cayden-portrait.png"
 						alt="Cayden"
--- a/components/sections/projects.tsx
+++ b/components/sections/projects.tsx
@ -1,20 +1,47 @@
 import Reveal from '@/components/ui/reveal';
 import SectionHeading from '@/components/ui/section-heading';
-import { projects } from '@/lib/site';
+import {projects} from '@/lib/site';

-const Projects = () => (
+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 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 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="font-display text-lg font-medium tracking-tight text-ink">
-								{project.title}
+                                    <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}
@ -24,11 +51,29 @@ const Projects = () => (
                                <p className="mt-8 border-t border-white/10 pt-3 font-mono text-xs text-aurora/90">
                                    {project.stack}
                                </p>
-					</article>
+                            </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;
--- a/components/ui/section-heading.tsx
+++ b/components/ui/section-heading.tsx
@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type {ReactNode} from 'react';

 type Props = {
 	title: string;
@ -9,7 +9,7 @@ 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">
+            <h2 className="font-display text-2xl font-normal tracking-tight text-ink md:text-3xl">
 				{title}
 			</h2>
 		</div>
--- a/lib/site.ts
+++ b/lib/site.ts
@ -2,6 +2,7 @@ export type Project = {
 	title: string;
 	blurb: string;
 	stack: string;
+	href?: string;
 };

 export type Feat = {
@ -10,7 +11,7 @@ export type Feat = {
 };

 export const site = {
-	name: 'Cayden',
+	name: 'Cayden Codes',
 	role: 'Web Developer',
 	tagline:
 		"I'm a proven people leader building fast, dependable web software for clinical floors and fleet operations.",
@ -29,7 +30,7 @@ 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.",
+	'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[] = [
@ -48,6 +49,18 @@ export const projects: Project[] = [
 		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[] = [
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
 	},
 	"dependencies": {
 		"@heroicons/react": "^2.2.0",
+		"geist": "^1.9.0",
 		"next": "^16.4.3",
 		"react": "^19.3.1",
 		"react-dom": "^19.3.1"