feat: updated app pages

app/about/page.tsx

@@ -1,11 +1,25 @@
 import type { Metadata } from "next";
-import { IconBrandLinkedinFilled, IconMailFilled } from "@tabler/icons-react";
+import {
+  IconBrandLinkedinFilled,
+  IconMailFilled,
+  IconPhoneFilled,
+} 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";
+import CopyButton from "@/components/ui/CopyButton";
+import {
+  about,
+  colors,
+  education,
+  email,
+  gitea,
+  linkedIn,
+  phone,
+  timeline,
+} from "@/constants";
 
 export const metadata: Metadata = {
   title: "About — Angel Mankel",
@@ -18,23 +32,9 @@ export default function AboutPage() {
 			{/* Hero Section */}
 			<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.
-          </p>
+          {about.map((paragraph) => (
+            <p key={paragraph}>{paragraph}</p>
+          ))}
         </div>
       </Hero>
 
@@ -72,18 +72,23 @@ export default function AboutPage() {
 
       {/* Social Links */}
       <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>
+        <CopyButton
+          value={email}
+          label="Copy email"
+          className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
+        >
+          <IconMailFilled size={32} />
+        </CopyButton>
+        <CopyButton
+          value={phone}
+          label="Copy phone"
+          className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
+        >
+          <IconPhoneFilled size={32} />
+        </CopyButton>
         <Tooltip text="LinkedIn">
           <a
-            href="https://www.linkedin.com/in/angel-mankel-0616aa132/"
+            href={linkedIn}
             target="_blank"
             rel="noreferrer"
             aria-label="LinkedIn"
@@ -94,7 +99,9 @@ export default function AboutPage() {
         </Tooltip>
         <Tooltip text="Gitea">
           <a
-            href="#"
+            href={gitea}
+            target="_blank"
+            rel="noreferrer"
             aria-label="Gitea"
             className={`hover:text-neutral-200 rounded-md hover:bg-[${colors.accent}] p-1 transition-colors duration-200`}
           >