web-portfolio/app/page.tsx

import React from "react";

export default async function Home() {
    return (
        <main className="mx-auto mb-20 mt-20 flex w-11/12 max-w-4xl flex-col gap-12 md:w-2/3">
            <section className="flex flex-col items-center gap-8 text-center font-cormorantGaramond">
                <img
                    src="/cayden-portrait.png"
                    alt="Portrait of Cayden"
                    className="h-40 w-40 rounded-full object-cover shadow-lg"
                />

                <header className="flex flex-col items-center gap-4">
                    <h1 className="text-5xl font-light leading-tight md:text-6xl">
                        Howdy, I&apos;m Cayden.
                    </h1>

                    <p className="font-poppins text-2xl font-light leading-tight opacity-80">
                        Web Developer & Focus-Driven Leader
                    </p>
                </header>
            </section>

            <section className="flex flex-wrap items-center justify-center gap-4 font-poppins text-sm tracking-wider text-gray-600 sm:gap-6 sm:text-base md:gap-8">
                {["JavaScript", "TypeScript", "Python", "Go", "React", "Next.js"].map((tech, index, arr) => (
                    <React.Fragment key={tech}>
                        <span className="cursor-default text-snow-storm font-medium transition-colors duration-200 hover:text-nord-12">
                            {tech}
                        </span>
                        {index < arr.length - 1 && (
                            <span className="select-none text-snow-storm">•</span>
                        )}
                    </React.Fragment>
                ))}
            </section>

            <section className="flex flex-col gap-6 font-cormorantGaramond text-lg leading-8">
                <p>
                    Nice to meet you! I am a Web Developer who specializes in architecting robust, user-centric
                    applications, transforming complex logic into seamless digital experiences.
                </p>

                <p>
                    My work is driven by a commitment to meeting complex demands in specialized medical markets. With a
                    strong focus on ergonomics, UI/UX optimization, and precision within fast-paced clinical
                    environments, I engineer comprehensive EHR solutions—ranging from portable medical cart workstations
                    to pioneering tracking and fleet management systems.
                </p>

                <p>
                    Beyond technical architecture, my work is deeply informed by an extensive background in organizational logistics. Grounded by foundational training in nationally recognized civic leadership programs, I previously directed one of the largest interest-driven communities in the Southern United States. In this capacity, I spearheaded large-scale event production—routinely managing gatherings of up to 250 attendees and coordinating cross-country travel for live entertainers. I have additionally facilitated strategic talent placements in commercial media, negotiated partnerships with major global streaming networks, and regularly presented as a panelist at large-scale conventions.
                </p>

                <p>
                    This focus-driven leadership approach directly translates to my engineering philosophy. Whether orchestrating high-concurrency state management systems, leading a project through rapid architectural shifts, or aligning a development team to meet ambitious goals, I am dedicated to executing with precision and creating software that is modern, accessible, and highly functional.
                </p>
            </section>

            <section className="mt-10 rounded-2xl bg-nord-2 p-8 font-cormorantGaramond text-white shadow-md">
                <h2 className="mb-6 border-b border-white/20 pb-3 text-2xl font-semibold tracking-wide">
                    Focus Areas
                </h2>

                <ul className="grid gap-4 text-lg md:grid-cols-2">
                    <li className="flex items-center gap-3">
                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
                        Clinical UI/UX & Ergonomics
                    </li>
                    <li className="flex items-center gap-3">
                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
                        EHR & Fleet Architecture
                    </li>
                    <li className="flex items-center gap-3">
                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
                        High-Concurrency Infrastructure
                    </li>
                    <li className="flex items-center gap-3">
                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
                        Large-Scale Event Logistics
                    </li>
                    <li className="flex items-center gap-3">
                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
                        Strategic Team Alignment
                    </li>
                    <li className="flex items-center gap-3">
                        <span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
                        Community State Management
                    </li>
                </ul>
            </section>
        </main>
    );
}