, <meta description>, OG tags, etc. into <head>. // The root layout (/app/layout.tsx) had its own metadata; this overrides // the title for /work specifically. export const metadata: Metadata = { title: "Work — Angel Mankel", // description: // "Frontend engineer with deep AI-tooling fluency. Currently at Village Medical.", }; // This is a Server Component by default. It runs on the server, sends // HTML to the browser, and ships zero JavaScript for this page itself. // You only add "use client" at the top of a file when you need // interactivity (useState, onClick, etc). // // Because it's a server component, you could `await fetch()` here, read // a markdown file from disk, or query a DB directly — no API route needed. export default function WorkPage() { return ( <main className="mx-auto max-w-2xl px-6 py-24"> <h1 className="text-3xl font-semibold mb-12">Work</h1> <section className="space-y-6 text-base leading-relaxed text-neutral-200"> <p> I came up through healthcare IT — help desk, then Salesforce admin, then software engineer at Village Medical, where I lead React and TypeScript redesigns of patient-facing apps and the internal component library. </p> <p> In parallel I've gone deep on AI-assisted development. Claude Code, custom slash commands, MCP integrations — the tooling layer that's reshaping how I work across the stack. </p> <p> I'm looking for remote-US product-engineering roles where shipping React is the day job and using and building AI tooling is first-class. </p> </section> <section className="mt-16"> <div className="text-xs uppercase tracking-wider text-neutral-500 mb-3"> Timeline </div> <ul className="font-mono text-sm space-y-1.5 text-neutral-200"> <li> <span className="text-neutral-500 mr-3">2024 – now</span> Village Medical · Software Engineer </li> <li> <span className="text-neutral-500 mr-3">2022 – 2024</span> Village Medical · Salesforce Admin </li> <li> <span className="text-neutral-500 mr-3">2019 – 2022</span> Gila River · Help Desk / IT </li> </ul> </section> <nav className="mt-16 pt-8 border-t border-neutral-800 flex gap-6 text-sm text-neutral-400"> <Link href="/" className="hover:text-white"> ← Back home </Link> <Link href="/about" className="hover:text-white"> See about </Link> </nav> </main> ); }

// File-based routing: this file's location IS the URL. // /app/about/page.tsx → https://yoursite.com/about // // Conventions: // page.tsx = the route's UI // layout.tsx = a wrapper shared across this folder + any nested routes // loading.tsx = shown while the page is loading // not-found.tsx = shown on 404 within this segment import type { Metadata } from "next"; import Link from "next/link"; // Route-level metadata. Next reads this at build time and emits the // correct , <meta description>, OG tags, etc. into <head>. // The root layout (/app/layout.tsx) had its own metadata; this overrides // the title for /work specifically. export const metadata: Metadata = { title: "Work — Angel Mankel", // description: // "Frontend engineer with deep AI-tooling fluency. Currently at Village Medical.", }; // This is a Server Component by default. It runs on the server, sends // HTML to the browser, and ships zero JavaScript for this page itself. // You only add "use client" at the top of a file when you need // interactivity (useState, onClick, etc). // // Because it's a server component, you could `await fetch()` here, read // a markdown file from disk, or query a DB directly — no API route needed. export default function WorkPage() { return ( <main className="mx-auto max-w-2xl px-6 py-24"> <h1 className="text-3xl font-semibold mb-12">Work</h1> <section className="space-y-6 text-base leading-relaxed text-neutral-200"> <p> I came up through healthcare IT — help desk, then Salesforce admin, then software engineer at Village Medical, where I lead React and TypeScript redesigns of patient-facing apps and the internal component library. </p> <p> In parallel I've gone deep on AI-assisted development. Claude Code, custom slash commands, MCP integrations — the tooling layer that's reshaping how I work across the stack. </p> <p> I'm looking for remote-US product-engineering roles where shipping React is the day job and using and building AI tooling is first-class. </p> </section> <section className="mt-16"> <div className="text-xs uppercase tracking-wider text-neutral-500 mb-3"> Timeline </div> <ul className="font-mono text-sm space-y-1.5 text-neutral-200"> <li> <span className="text-neutral-500 mr-3">2024 – now</span> Village Medical · Software Engineer </li> <li> <span className="text-neutral-500 mr-3">2022 – 2024</span> Village Medical · Salesforce Admin </li> <li> <span className="text-neutral-500 mr-3">2019 – 2022</span> Gila River · Help Desk / IT </li> </ul> </section> <nav className="mt-16 pt-8 border-t border-neutral-800 flex gap-6 text-sm text-neutral-400"> <Link href="/" className="hover:text-white"> ← Back home </Link> <Link href="/about" className="hover:text-white"> See about </Link> </nav> </main> ); }