feat: update app pages and layout

app/about/page.tsx

@@ -1,5 +1,11 @@
-import Hero from "@/components/content/Hero";
 import type { Metadata } from "next";
+import { IconBrandLinkedinFilled, IconMailFilled } from "@tabler/icons-react";
+import Hero from "@/components/content/Hero";
+import SectionLabel from "@/components/layout/SectionLabel";
+import AccentLink from "@/components/navigation/AccentLink";
+import GiteaIcon from "@/components/icons/GiteaIcon";
+import Tooltip from "@/components/ui/Tooltip";
+import { colors, education, timeline } from "@/constants";
 
 export const metadata: Metadata = {
   title: "About — Angel Mankel",
@@ -7,6 +13,91 @@ export const metadata: Metadata = {
 
 export default function AboutPage() {
   return (
-    <Hero label="About"/>
+    <div className="space-y-14">
+      <Hero label="About">
+        <div className="space-y-5 text-[19px] leading-[1.65]">
+          <p>
+            I came up through healthcare IT — help desk, then Salesforce
+            administration, then software engineering. A path that taught me
+            to translate between operations, design, and engineering without
+            losing the thread.
+          </p>
+          <p>
+            These days I write React and TypeScript for production, lead
+            component-library work, and spend a lot of time in Claude Code —
+            custom slash commands, MCP integrations, agent workflows. The
+            AI-tooling layer is reshaping how I work across the stack.
+          </p>
+          <p>
+            Based in Arizona, looking for remote-US roles where shipping
+            frontend product and building AI tooling around it are both
+            first-class. Bonus points for teams that take design seriously
+            and don&apos;t hand things off at every layer.
+          </p>
+        </div>
+      </Hero>
+
+      <section className="space-y-4">
+        <SectionLabel label="Education" />
+        <ul className="space-y-2">
+          {education.map((row) => (
+            <li key={row.span} className="flex gap-2 text-sm">
+              <span className="w-36 shrink-0 text-neutral-500">
+                {row.span}
+              </span>
+              <span className="text-neutral-200">{row.degree} · {row.location}</span>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <section className="space-y-4">
+        <SectionLabel label="Timeline" />
+        <ul className="space-y-2">
+          {timeline.map((row) => (
+            <li key={row.span} className="flex gap-2 text-sm">
+              <span className="w-36 shrink-0 text-neutral-500">
+                {row.span}
+              </span>
+              <span className="text-neutral-200">{row.role}</span>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <AccentLink link="/cv.pdf" label="Download CV (PDF)" />
+
+      <nav aria-label="Contact" className="flex gap-5 text-neutral-300">
+        <Tooltip text="Email">
+          <a
+            href="mailto:angelmankel@gmail.com"
+            aria-label="Email"
+            className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
+          >
+            <IconMailFilled size={32} />
+          </a>
+        </Tooltip>
+        <Tooltip text="LinkedIn">
+          <a
+            href="https://www.linkedin.com/in/angel-mankel-0616aa132/"
+            target="_blank"
+            rel="noreferrer"
+            aria-label="LinkedIn"
+            className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
+          >
+            <IconBrandLinkedinFilled size={32} />
+          </a>
+        </Tooltip>
+        <Tooltip text="Gitea">
+          <a
+            href="#"
+            aria-label="Gitea"
+            className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
+          >
+            <GiteaIcon size={32} />
+          </a>
+        </Tooltip>
+      </nav>
+    </div>
   );
 }