# Next.js Portfolio Template with Docker

Modern portfolio website template built with Next.js, Tailwind CSS, and Docker.

## Features

- Next.js 14+ with App Router
- Tailwind CSS for styling
- Docker multi-stage builds
- PNPM package manager
- Production-ready configuration
- Contact form component
- Responsive design

## Core Dependencies

- Next.js 14 (App Router)
- React 18
- Tailwind CSS 3
- PNPM 8
- TypeScript 5
- Lucide React Icons
- PostCSS 8

## Configuration Files

### Git Configuration

#### .gitignore

    node_modules/
    .next/
    .env*
    .DS_Store
    *.pem
    npm-debug.log*
    yarn-debug.log*
    yarn-error.log*
    .pnpm-debug.log*
    .vercel

### Docker Configuration

#### .dockerignore

    node_modules
    .next
    .git
    .env*

#### docker-compose.yml (Production)

    version: '3.8'
    services:
      web:
        build:
          context: .
          dockerfile: Dockerfile
        ports:
          - "805:805"
        environment:
          - NODE_ENV=production
          - PORT=805
        restart: unless-stopped

#### docker-compose.dev.yml (Development)

    version: '3.8'
    services:
      web-dev:
        build:
          context: .
          dockerfile: Dockerfile.dev
        ports:
          - "3000:3000"
        volumes:
          - .:/app
          - /app/node_modules
          - /app/.next
        environment:
          - NODE_ENV=development
        command: pnpm dev

## Development Setup

1. Install PNPM: `corepack enable && corepack prepare pnpm@latest --activate`
2. Install dependencies: `pnpm install`
3. Run development server: `docker compose -f docker-compose.dev.yml up`

## Production Deployment

1. Build and run: `docker compose up -d`
2. Access site on port 805

## Portainer Deployment Steps

1. Add stack in Portainer
2. Configure GitHub repository access
3. Set compose path to docker-compose.yml
4. Deploy and monitor through Portainer UI

## Project Structure

- `/src/app` - Next.js pages and routes
- `/src/components` - Reusable React components
- `/src/styles` - Global styles and Tailwind config

## Best Practices

- Use PNPM for consistent dependency management
- Follow Next.js App Router patterns
- Maintain separate Docker configurations for dev/prod
- Keep sensitive data in .env files (not in repository)
- Use multi-stage builds for production