web-portfolio/README.md

# Cayden's Website

A professional portfolio and markdown-powered blog built with **Next.js 16**, **React 19**, **TypeScript**, and **Tailwind CSS 4**.

This site serves as a digital portfolio for Cayden, a Web Developer & Focus-Driven Leader, highlighting expertise in Clinical UI/UX, EHR systems, and large-scale logistics. It features a custom Nord-inspired design and a dynamic blog system.

## 🚀 Features

- **Modern Tech Stack**: Built with React 19 and Next.js 16 using the App Router.
- **Tailwind CSS 4**: Modern, high-performance styling with the Nord color palette.
- **Markdown Blog**: Fully dynamic blog system powered by `remark` and `gray-matter`.
- **Responsive Design**: Elegant mobile-first navigation and layout.
- **Optimized Typography**: Custom Google Fonts (Cormorant Garamond & Poppins) via `next/font`.
- **Type-Safe**: Full TypeScript implementation for robust development.

## 🛠️ Tech Stack

- **Framework**: [Next.js 16](https://nextjs.org/) (App Router)
- **Library**: [React 19](https://react.dev/)
- **Styling**: [Tailwind CSS 4](https://tailwindcss.com/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Content**: Markdown with [Remark](https://github.com/remarkjs/remark) & [Gray-matter](https://github.com/jonschlinkert/gray-matter)
- **Icons**: [Heroicons](https://heroicons.com/)
- **Date Handling**: [Moment.js](https://momentjs.com/)

## 📂 Project Structure

```text
├── app/              # Next.js App Router (pages, layouts, globals)
│   ├── blog/         # Blog listing and dynamic article pages
│   ├── contact/      # Contact page
│   └── layout.tsx    # Root layout with fonts and navigation
├── articles/         # Markdown content for blog posts
├── components/       # Reusable UI and Layout components
│   ├── layout/       # Header, Footer, etc.
│   └── ui/           # Generic UI elements
├── lib/              # Utility functions and data fetching (markdown parser)
├── public/           # Static assets (images, icons)
├── types/            # TypeScript interface definitions
└── package.json      # Dependencies and scripts
```

## 🏁 Getting Started

First, install the dependencies:

```bash
npm install
# or
bun install
```

Then, run the development server:

```bash
npm run dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## 📝 Writing Articles

To add a new blog post, create a `.md` file in the `/articles` directory with the following frontmatter:

```markdown
---
title: "Your Title"
date: "YYYY-MM-DD"
category: "Category Name"
description: "Brief summary of the article"
---

Your content here...
```

## 📜 License

This project is private and intended for portfolio demonstration.