126 lines
3.8 KiB
TypeScript
126 lines
3.8 KiB
TypeScript
import type { Metadata } from "next";
|
|
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 CopyButton from "@/components/ui/CopyButton";
|
|
import {
|
|
about,
|
|
colors,
|
|
education,
|
|
email,
|
|
gitea,
|
|
linkedIn,
|
|
phone,
|
|
timeline,
|
|
} from "@/constants";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "About — Angel Mankel",
|
|
};
|
|
|
|
export default function AboutPage() {
|
|
return (
|
|
<div className="flex flex-col gap-12">
|
|
|
|
{/* Hero Section */}
|
|
<Hero label="About">
|
|
<div className="space-y-5 text-[19px] leading-[1.65]">
|
|
{about.map((paragraph) => (
|
|
<p key={paragraph}>{paragraph}</p>
|
|
))}
|
|
</div>
|
|
</Hero>
|
|
|
|
{/* Education */}
|
|
<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>
|
|
|
|
{/* Timeline */}
|
|
<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>
|
|
|
|
<div className="flex flex-col gap-6">
|
|
<AccentLink link="/Angel_Mankel_Resume_2026.pdf" label="Download Resume (PDF)" download />
|
|
|
|
<div className="flex flex-col gap-2 text-neutral-300">
|
|
<p>
|
|
<span className="font-bold">Email:</span> {email}
|
|
</p>
|
|
<p>
|
|
<span className="font-bold">Phone:</span> {phone}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Social Links */}
|
|
<nav aria-label="Contact" className="flex gap-5 text-neutral-300">
|
|
<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={linkedIn}
|
|
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={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`}
|
|
>
|
|
<GiteaIcon size={32} />
|
|
</a>
|
|
</Tooltip>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|