init build

app/blog/[slug]/page.tsx

@@ -1,21 +1,21 @@
 import Link from "next/link"
-import { ArrowLeftIcon } from "@heroicons/react/24/solid"
-import { getArticleData } from "@/lib/articles";
+import {ArrowLeftIcon} from "@heroicons/react/24/solid"
+import {getArticleData} from "@/lib/articles";
 
-const Article = async ({ params }: { params: Promise<{ slug: string }> }) => {
-    const { slug } = await params;
+const Article = async ({params}: { params: Promise<{ slug: string }> }) => {
+    const {slug} = await params;
     const articleData = await getArticleData(slug);
 
     return (
         <section className={"mx-auto w-10/12 md:w-1/2 mt-20 flex flex-col gap-5"}>
             <div className={"flex justify-between font-poppins"}>
                 <Link href={"/blog"} className={"flex flex-row gap-1 place-items-center"}>
-                    <ArrowLeftIcon width={20} />
+                    <ArrowLeftIcon width={20}/>
                     <p>blog homepage</p>
                 </Link>
                 <p>{articleData.date.toString()}</p>
             </div>
-            <article className={"article"} dangerouslySetInnerHTML={{ __html: articleData.contentHtml }} />
+            <article className={"article"} dangerouslySetInnerHTML={{__html: articleData.contentHtml}}/>
         </section>
     )
 }

app/blog/page.tsx

@@ -8,7 +8,7 @@ export default function BlogPage() {
         <>
             <section className={"mx-auto w-11/12 md:w-1/2 mt-20 flex flex-col gap-16 mb-20"}>
                 <header className={"font-cormorantGaramond font-light text-6xl text-center"}>
-                    <h1>Shrimple blog.</h1>
+                    <h1 className={'text-nord-14'}>Blog & talks</h1>
                 </header>
                 <section className={"md:grid md:grid-cols-2 flex flex-col gap-10"}>
                     {articles != null && Object.keys(articles).map((article) => (

app/layout.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import type {Metadata} from "next";
 import {Cormorant_Garamond, Poppins} from "next/font/google";
 import "./globals.css";
@@ -10,15 +11,15 @@ const cormorantGaramond = Cormorant_Garamond({
 })
 
 const poppins = Poppins({
-  subsets: ['latin'],
-  variable: "--font-poppins",
-  weight: ['400', '600']
+    subsets: ['latin'],
+    variable: "--font-poppins",
+    weight: ['400', '600']
 })
 
 
 export const metadata: Metadata = {
-    title: "Create Next App",
-    description: "Generated by create next app",
+    title: "sh ~./caydencodes.sh",
+    description: "Come and see what I'm all about.",
 };
 
 export default function RootLayout({
@@ -31,8 +32,11 @@ export default function RootLayout({
             lang="en"
             className={`${cormorantGaramond.variable} ${poppins.variable} bg-neutral-100 h-full antialiased`}
         >
-        <Header />
-        <body className="min-h-full flex flex-col bg-polar-night-lighter text-snow-storm text-shadow-snow-storm-dark">{children}</body>
+        <body
+            className="min-h-full flex flex-col bg-polar-night-lighter text-snow-storm text-shadow-snow-storm-dark">
+        <Header/>
+        {children}
+        </body>
         </html>
     );
 }

app/page.tsx

@@ -1,14 +1,84 @@
 import React from "react";
 
 export default function Home() {
-
     return (
-        <>
-            <section className={"mx-auto w-11/12 md:w-1/2 mt-20 flex flex-col gap-16 mb-20 color-nord-9"}>
-                <header className={"font-cormorantGaramond font-light text-6xl text-center"}>
-                    <h1>Hello there, world.</h1>
+        <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&apos;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>
     );
-}
+}