portfolio/README.md

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:

npm run dev

Open http://localhost:3000 to view the site.

Build

Create an optimized production build:

npm run build

Production

Start the production server:

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/:

---
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/:

---
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:

   - "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:

   docker compose up -d
   

3. View logs:

   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.