104 lines
3.7 KiB
TypeScript
104 lines
3.7 KiB
TypeScript
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",
|
|
};
|
|
|
|
export default function AboutPage() {
|
|
return (
|
|
<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'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>
|
|
);
|
|
}
|