new-personal-site/components/pages/Home/index.tsx
2026-02-16 12:50:45 +01:00

76 lines
3.0 KiB
TypeScript

import LucideIcon from "@/components/lib/elements/lucide-icon";
import Button from "@/components/lib/layout/Button";
import Divider from "@/components/lib/layout/Divider";
import H1 from "@/components/lib/layout/H1";
import Row from "@/components/lib/layout/Row";
import Section from "@/components/lib/layout/Section";
import Span from "@/components/lib/layout/Span";
import Stack from "@/components/lib/layout/Stack";
import { Contact, ScrollText, Terminal } from "lucide-react";
export default function Main() {
return (
<Section>
<Stack className="w-full max-w-full xl:max-w-[50vw]">
<Span>Benjamin Toby</Span>
<H1 className="leading-snug m-0!">
DevOps & Platform Engineer
</H1>
<Span className="text-xl">
I help teams ship faster, cut infrastructure costs, and
achieve reliable production systems.
</Span>
<Row className="my-4 gap-6">
<Row>
<LucideIcon name="CheckCircle2" size={20} />
<Span>99.99% uptime targets</Span>
</Row>
<Divider vertical />
<Row>
<LucideIcon name="CheckCircle2" size={20} />
<Span>~10 deployments/week</Span>
</Row>
<Divider vertical />
<Row>
<LucideIcon name="CheckCircle2" size={20} />
<Span>Over 80% Operations cost reduction</Span>
</Row>
</Row>
<Row className="items-stretch flex-col md:flex-row w-full md:w-auto gap-4">
<Button
title="Contact Me"
beforeIcon={
<Contact size={17} className="font-normal" />
}
href="/contact"
className="grow w-full"
>
Book a Consultation
</Button>
<Button
title="View My Work"
beforeIcon={
<Terminal size={17} className="font-normal" />
}
href="/work"
className="grow w-full bg-transparent!"
variant="outlined"
>
View My Work
</Button>
{/* <Button
beforeIcon={
<ScrollText size={17} className="font-normal" />
}
href="/contact"
variant="outlined"
className="grow w-full"
>
Resume
</Button> */}
</Row>
</Stack>
</Section>
);
}