My personal web portfolio and projects.
| .idea | ||
| app | ||
| articles | ||
| components | ||
| lib | ||
| public | ||
| types | ||
| .gitignore | ||
| .gitlab-ci.yml | ||
| .prettierrc | ||
| AGENTS.md | ||
| bun.lock | ||
| CLAUDE.md | ||
| eslint.config.mjs | ||
| next.config.ts | ||
| package.json | ||
| postcss.config.mjs | ||
| README.md | ||
| tsconfig.json | ||
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
remarkandgray-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 (App Router)
- Library: React 19
- Styling: Tailwind CSS 4
- Language: TypeScript
- Content: Markdown with Remark & Gray-matter
- Icons: Heroicons
- Date Handling: Moment.js
📂 Project Structure
├── 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:
npm install
# or
bun install
Then, run the development server:
npm run dev
# or
bun dev
Open 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:
---
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.