Personal Portfolio

import { Badge } from "@/components/ui/badge";

const narrative = [
    "I began my journey at the intersection of design and code, finding joy in making interfaces that feel alive, intuitive, and responsive. Over the years, I have worked with teams of all sizes to build products from scratch, establishing patterns that balance performance with elegant design.",
    "Currently, I am deep-diving into the capabilities of modern design systems, exploring how local AI systems can augment developer tooling, and refining my front-end craft. I believe in software that is fast, highly legible, and accessible to everyone.",
];

const workbench = [
    {
        category: "Languages",
        items: ["TypeScript", "JavaScript", "Go", "SQL", "HTML/CSS"],
    },
    {
        category: "Frameworks & Libs",
        items: ["React", "Next.js", "Vite", "Node.js"],
    },
    {
        category: "Tools & Craft",
        items: ["Figma", "Git", "Docker", "PostgreSQL"],
    },
];

export function About() {
    return (
        <section id="about" className="flex w-full max-w-6xl flex-col gap-12 py-16 ps-4 pe-4 sm:ps-6 sm:pe-6">
            <div className="flex flex-col gap-2">
                <span className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                    About & Craft
                </span>
                <p className="text-xl font-medium tracking-tight sm:text-2xl">Behind the interface.</p>
            </div>

            <div className="grid w-full grid-cols-1 items-start gap-12 md:grid-cols-2">
                <div className="flex flex-col gap-6">
                    {narrative.map((paragraph, index) => (
                        <p
                            key={index}
                            className="text-muted-foreground text-sm leading-relaxed font-normal sm:text-base">
                            {paragraph}
                        </p>
                    ))}
                </div>

                <div className="flex flex-col gap-6">
                    <h3 className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                        The Workbench
                    </h3>
                    <div className="flex flex-col gap-6">
                        {workbench.map((group) => (
                            <div key={group.category} className="flex flex-col gap-2">
                                <span className="text-muted-foreground text-xs font-medium">{group.category}</span>
                                <div className="flex flex-wrap gap-1.5">
                                    {group.items.map((item) => (
                                        <Badge key={item} variant="secondary" className="rounded-md">
                                            {item}
                                        </Badge>
                                    ))}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </section>
    );
}