, <meta description>, OG tags, etc. into <head>. // The root layout (/app/layout.tsx) had its own metadata; this overrides // the title for /about specifically. export const metadata: Metadata = { title: "About — 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 AboutPage() { return ( <main className="mx-auto max-w-2xl px-6 py-24"> <h1 className="text-3xl font-semibold mb-12">About</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> {/* next/link does client-side navigation between routes (no full page reload) and prefetches the target route when the link enters the viewport. Use it for any internal nav. For external links and file downloads, plain <a> is fine. */} <p className="mt-10 text-sm"> <a href="/cv.pdf" className="underline underline-offset-4 text-amber-400"> Download CV (PDF) </a> </p> <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="/projects" className="hover:text-white"> See projects </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 /about specifically. export const metadata: Metadata = { title: "About — 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 AboutPage() { return ( <main className="mx-auto max-w-2xl px-6 py-24"> <h1 className="text-3xl font-semibold mb-12">About</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> {/* next/link does client-side navigation between routes (no full page reload) and prefetches the target route when the link enters the viewport. Use it for any internal nav. For external links and file downloads, plain <a> is fine. */} <p className="mt-10 text-sm"> <a href="/cv.pdf" className="underline underline-offset-4 text-amber-400"> Download CV (PDF) </a> </p> <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="/projects" className="hover:text-white"> See projects </Link> </nav> </main> ); }