init build

.idea/inspectionProfiles/Project_Default.xml

@@ -1,7 +1,6 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
     <inspection_tool class="PyPep8NamingInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
       <option name="ignoredErrors">
         <list>

app/blog/[slug]/page.tsx

@@ -1,21 +1,21 @@
 import Link from "next/link"
-import { ArrowLeftIcon } from "@heroicons/react/24/solid"
+import {ArrowLeftIcon} from "@heroicons/react/24/solid"
-import { getArticleData } from "@/lib/articles";
+import {getArticleData} from "@/lib/articles";
 
-const Article = async ({ params }: { params: Promise<{ slug: string }> }) => {
+const Article = async ({params}: { params: Promise<{ slug: string }> }) => {
-    const { slug } = await params;
+    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'],
+    subsets: ['latin'],
-  variable: "--font-poppins",
+    variable: "--font-poppins",
-  weight: ['400', '600']
+    weight: ['400', '600']
 })
 
 
 export const metadata: Metadata = {
-    title: "Create Next App",
+    title: "sh ~./caydencodes.sh",
-    description: "Generated by create next app",
+    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
-        <body className="min-h-full flex flex-col bg-polar-night-lighter text-snow-storm text-shadow-snow-storm-dark">{children}</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 (
-        <>
+        <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={"mx-auto w-11/12 md:w-1/2 mt-20 flex flex-col gap-16 mb-20 color-nord-9"}>
+            <section className="flex flex-col items-center gap-8 text-center font-cormorantGaramond">
-                <header className={"font-cormorantGaramond font-light text-6xl text-center"}>
+                <img
-                    <h1>Hello there, world.</h1>
+                    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>
     );
 }

articles/squirt.md

@@ -8,19 +8,23 @@ date: "29-06-2026"
 
 ![Fat guy](/fatdudesquirting.jpg)
 
-Squirt is a playful and energetic topic that can represent movement, surprise, and a little bit of chaos. Sometimes, the smallest things can make the biggest splash.
+Squirt is a playful and energetic topic that can represent movement, surprise, and a little bit of chaos. Sometimes, the
+smallest things can make the biggest splash.
 
-In everyday life, a squirt might be something simple: a splash of water, a squeeze from a bottle, or a sudden burst of energy. It is quick, unexpected, and often memorable.
+In everyday life, a squirt might be something simple: a splash of water, a squeeze from a bottle, or a sudden burst of
+energy. It is quick, unexpected, and often memorable.
 
 ## A Small Burst of Fun
 
-There is something fun about the word squirt. It feels lighthearted and informal. It does not take itself too seriously, which makes it a great subject for a personal article.
+There is something fun about the word squirt. It feels lighthearted and informal. It does not take itself too seriously,
+which makes it a great subject for a personal article.
 
 Whether it reminds you of summer days, water fights, or tiny moments of surprise, squirt can be a symbol of simple joy.
 
 ## Final Thoughts
 
-Not every article needs to be serious or complicated. Sometimes, writing about something small and silly is enough to create a moment of fun.
+Not every article needs to be serious or complicated. Sometimes, writing about something small and silly is enough to
+create a moment of fun.
 
 Squirt may be simple, but it still makes a splash.
 

components/ArticleListItem.tsx

@@ -1,19 +1,20 @@
 import Link from "next/link"
-import type { ArticleItem} from "@/types";
+import type {ArticleItem} from "@/types";
 
 interface Props {
     category: string,
     articles: ArticleItem[]
 }
 
-const ArticleItemList = ({ category, articles }: Props) => {
+const ArticleItemList = ({category, articles}: Props) => {
     return (
         <>
             <div className={"flex flex-col gap-5"}>
                 <h2 className={"font-cormorantGaramond text-4xl"}>{category}</h2>
                 <div className={"flex flex-col gap-2.5 font-poppins text-lg"}>
                     {articles.map((article, id) => (
-                        <Link href={`/blog/${article.id}`} key={id} className={"hover:text-nord-12 transition duration-250"}>
+                        <Link href={`/blog/${article.id}`} key={id}
+                              className={"hover:text-nord-12 transition duration-250"}>
                             {article.title}
                         </Link>
                     ))}

components/layout/layout-header.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, {useState} from 'react'
 import Image from 'next/image'
 import Link from 'next/link';
 import Logo from "../../public/borb.png"
@@ -21,7 +21,7 @@ const Header = () => {
                             </div>
                             <div className="md:hidden">
                                 <button
-                                    className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
+                                    className="p-3 text-gray-700 rounded-md outline-none focus:border-gray-400 border-2 focus:border bg-nord-10"
                                     onClick={() => setNavbar(!navbar)}>
                                     {navbar ? (
                                         <div className="bar text-white"></div>
@@ -47,6 +47,12 @@ const Header = () => {
                                           className='sm:px-52 md:px-0'>Blog</Link>
                                 </li>
 
+
+                                <li className="text-xl text-white py-2 my-2 md:my-0 px-6 text-center md:border-b-0  border-white  hover:text-nord-12 transition duration-250">
+                                    <Link href="https://gitlab.com/caydens" onClick={() => setNavbar(!navbar)}
+                                          className='sm:px-48 md:px-0'>GitLab</Link>
+                                </li>
+
                                 <li className="text-xl text-white py-2 my-2 md:my-0 px-6 text-center md:border-b-0  border-white  hover:text-nord-12 transition duration-250">
                                     <Link href="/contact" onClick={() => setNavbar(!navbar)}
                                           className='sm:px-48 md:px-0'>Contact</Link>