80 lines
2.8 KiB
Markdown
80 lines
2.8 KiB
Markdown
# 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.
|