84 lines
No EOL
4.2 KiB
TypeScript
84 lines
No EOL
4.2 KiB
TypeScript
import React from "react";
|
|
|
|
export default 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 gap-4">
|
|
<h1 className="text-5xl font-light leading-tight md:text-6xl">
|
|
Howdy, I'm Cayden.
|
|
</h1>
|
|
|
|
<p className="font-poppins text-2xl font-light leading-tight">
|
|
JavaScript · TypeScript · Python · Go · React, NextJS
|
|
</p>
|
|
</header>
|
|
</section>
|
|
|
|
<section className="flex flex-col gap-6 text-lg leading-8 font-cormorantGaramond">
|
|
<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 the clinical sector, my architectural experience extends to high-concurrency community
|
|
platforms. I have developed complex state management systems, robust user infrastructure, and
|
|
comprehensive governance controls. These applications have successfully scaled to support thousands
|
|
of daily active users, functioning as mission-critical tools for large digital communities.
|
|
</p>
|
|
|
|
<p>
|
|
Whether developing a new feature, refining an existing product, or adapting to rapid architectural
|
|
shifts, I am dedicated to creating software that is accessible, modern, 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 text-2xl font-semibold tracking-wide border-b border-white/20 pb-3">
|
|
Core Competencies
|
|
</h2>
|
|
|
|
<ul className="grid gap-4 md:grid-cols-2 text-lg">
|
|
<li className="flex items-center gap-3">
|
|
<span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
|
|
Next.js & React Ecosystems
|
|
</li>
|
|
<li className="flex items-center gap-3">
|
|
<span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
|
|
TypeScript & Tailwind CSS
|
|
</li>
|
|
<li className="flex items-center gap-3">
|
|
<span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
|
|
EHR & Fleet Management
|
|
</li>
|
|
<li className="flex items-center gap-3">
|
|
<span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
|
|
High-Concurrency Systems
|
|
</li>
|
|
<li className="flex items-center gap-3">
|
|
<span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
|
|
Infrastructure & Automation
|
|
</li>
|
|
<li className="flex items-center gap-3">
|
|
<span className="h-2 w-2 rounded-full bg-blue-300 shadow-sm"></span>
|
|
Human-Centric Design & Thinking
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
);
|
|
} |