# Portfolio Website

A modern, minimalist portfolio built with Next.js, TypeScript, and shadcn/ui. Features a clean dark theme design with static site generation for optimal performance.

## Tech Stack

- **Framework:** Next.js 16.0.10
- **Language:** TypeScript 5.9.3
- **UI Library:** React 19.2.1
- **Component Library:** shadcn/ui
- **Styling:** Tailwind CSS 4.1.18
- **Content:** Markdown files with gray-matter and react-markdown

## Getting Started

### Development

Run the development server:

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) to view the site.

### Build

Create an optimized production build:

```bash
npm run build
```

### Production

Start the production server:

```bash
npm start
```

## Project Structure

```
├── app/                    # Next.js app directory
│   ├── page.tsx           # Landing page
│   ├── about/             # About page
│   ├── blog/              # Blog pages
│   │   ├── page.tsx       # Blog listing
│   │   └── [slug]/        # Individual blog posts
│   └── projects/          # Projects page
├── components/            # React components
│   ├── navigation.tsx     # Site navigation
│   ├── blog-card.tsx      # Blog post card
│   └── project-card.tsx   # Project card
├── content/               # Markdown content
│   ├── blog/             # Blog post markdown files
│   └── projects/         # Project markdown files
└── lib/                   # Utility functions
    └── content.ts        # Content parsing utilities
```

## Adding Content

### Blog Posts

Create a new markdown file in `content/blog/`:

```markdown
---
title: 'Your Post Title'
date: '2025-12-12'
excerpt: 'A brief summary of your post'
---

Your post content here...
```

### Projects

Create a new markdown file in `content/projects/`:

```markdown
---
title: 'Your Project'
description: 'A brief description'
links:
  github: 'https://github.com/username/repo'
  live: 'https://example.com'
  gitea: 'https://gitea.example.com/username/repo'
---

Detailed project description...
```

## Customization

### Personal Information

Update the following files with your information:

- `app/page.tsx` - Update the welcome message and name
- `app/about/page.tsx` - Update bio, photo, and social links
- `app/layout.tsx` - Update site metadata

### Styling

The site uses a dark theme by default. To customize colors, edit `app/globals.css` and modify the CSS variables in the `.dark` class.

## Dependencies

All dependencies are pinned to exact versions for reproducible builds. To update dependencies, modify `package.json` and run `npm install`.

## Docker Deployment

This project includes Docker support for easy deployment with Traefik.

### Prerequisites

- Docker and Docker Compose installed
- Traefik running in your environment
- A `traefik` external network created

### Setup

1. Update the domain in `compose.yaml`:

   ```yaml
   - "traefik.http.routers.portfolio.rule=Host(`your-domain.com`)"
   - "traefik.http.routers.portfolio-secure.rule=Host(`your-domain.com`)"
   ```

2. Build and start the container:

   ```bash
   docker compose up -d
   ```

3. View logs:

   ```bash
   docker compose logs -f
   ```

### Traefik Configuration

The compose file includes:

- Automatic HTTP to HTTPS redirect
- Let's Encrypt SSL certificate generation
- Load balancer configuration for port 3000
- Dockge labels for better organization

### Using with Dockge

Simply import the `compose.yaml` file into Dockge, or place this project directory in your Dockge stacks folder. The service will appear with the metadata labels for easy identification.

## License

This project is open source and available under the MIT License.