Route	Description
`/`	Homepage with Hero, Experience, Skills, Projects, FAQ
`/about`	Detailed profile, skills matrix, workflow, journey
`/portfolio`	Project gallery with category filters
`/portfolio/:slug`	Individual project detail pages
`/blog`	Blog post listing
`/blog/:slug`	Individual blog posts
`/contact`	Contact form & info
`/privacy`	Privacy policy
`/terms`	Terms of service
`/imprint`	Legal imprint

Project Structure

src/
├── components/      # Reusable UI components
├── hooks/           # Custom React hooks
├── i18n/            # Translations (de, en, sr)
├── pages/           # Page components
│   ├── home/
│   ├── about/
│   ├── portfolio/
│   │   └── projects/   # MDX project files
│   ├── blog/
│   └── contact/
├── styles/          # Global styles
├── utils/           # Helper functions
├── routes.tsx       # Route definitions
└── App.tsx          # Root component

Environment Variables

The application requires several environment variables to function correctly. Create a .env file in the root directory based on .env.example:

Required Variables

`NEXT_PUBLIC_SUPABASE_URL`

Purpose: Base URL for your Supabase project
Format: https://your-project-id.supabase.co
How to get: Navigate to your Supabase project settings → Settings → API → Project URL
Example: https://mxadgucxhmstlzsbgmoz.supabase.co

`NEXT_PUBLIC_SUPABASE_ANON_KEY`

Purpose: Anonymous/public key for client-side Supabase authentication
Format: Long alphanumeric string (JWT token)
How to get: Navigate to your Supabase project settings → Settings → API → Project API keys → anon public
Security: Safe to use in client-side code (public key)

`NEXT_PUBLIC_GA_TRACKING_ID`

Purpose: Google Analytics 4 tracking ID for analytics
Format: G-XXXXXXXXXX
How to get: Create a GA4 property in Google Analytics → Admin → Data Streams → Web → Measurement ID
Optional: Can be omitted if you don't want analytics tracking

`NEXT_PUBLIC_SITE_URL`

Purpose: The public URL where your site is hosted (used for SEO, canonical URLs, and sitemap generation)
Format: https://your-domain.com (no trailing slash)
Examples:
- Production: https://damjan-savic.com
- Development: http://localhost:3000
Note: Update this when deploying to production

Setup Instructions

Copy the example environment file:
```
cp .env.example .env
```
Fill in your actual values in the .env file
Restart your development server after changing environment variables

Important Notes

All variables prefixed with NEXT_PUBLIC_ are exposed to the browser
Never commit your .env file to version control (it's in .gitignore)
For production deployment, set these variables in your hosting platform's environment settings
The .env.example file shows the required format and should be kept updated

Development

# Install dependencies
pnpm install

# Start dev server
pnpm run dev

# Build for production
pnpm run build

# Run tests
pnpm test

# Preview production build
pnpm run preview

<<<<<<< HEAD

Docker Deployment

The application includes Docker support for containerized deployment.

Prerequisites

Docker
Docker Compose

Environment Variables

Create a .env file with the following variables:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
NEXT_PUBLIC_GA_TRACKING_ID=your_ga_tracking_id
NEXT_PUBLIC_SITE_URL=your_site_url

Using Docker Compose (Recommended)

# Build and start the container
docker-compose up -d

# Stop the container
docker-compose down

# View logs
docker-compose logs -f

The application will be available at http://localhost:3003

Using Docker Directly

# Build the image
docker build -t portfolio-website .

# Run the container
docker run -p 3003:3000 \
  -e NEXT_PUBLIC_SUPABASE_URL=your_supabase_url \
  -e NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key \
  -e NEXT_PUBLIC_GA_TRACKING_ID=your_ga_tracking_id \
  -e NEXT_PUBLIC_SITE_URL=your_site_url \
  portfolio-website

Container Details

Port Mapping: 3003 (host) → 3000 (container)
Base Image: Node 20 Alpine
Package Manager: pnpm
Health Check: Automated health checks every 30 seconds
Restart Policy: unless-stopped

=======

Development Scripts

The project includes 11 utility scripts for automating development tasks. See scripts/README.md for full documentation.

Categories:

Image Optimization - Responsive image generation with WebP support
SEO & Performance - Sitemap generation, PageSpeed testing
Internationalization - Translation file conversion (TS → JSON)
Assets & Resources - Font downloads and self-hosting
Icon Generation - PWA icon creation with placeholders
Documentation - GitHub README and OG image templates

Quick Start:

npm run build:images    # Optimize project images
node scripts/generate-sitemap.js    # Generate sitemap
node scripts/pagespeed-check.js     # Run performance tests

origin/master

Key Technologies Used

Languages: TypeScript, Python, MDX

AI & Automation: GPT-4 API, Claude API, Vapi Voice AI, n8n, Zapier

Frontend: React, Next.js, Tailwind CSS, Framer Motion, Lucide Icons

Backend: Supabase (PostgreSQL, Auth), WebSocket

Build Tools: Next.js, PostCSS

Testing: Vitest, Testing Library, JSDOM

DevOps: ESLint, Git, PWA/Service Workers, Vercel, Docker

Contact

Email: info@damjan-savic.com
Phone: +49 175 695 0979
LinkedIn: linkedin.com/in/damjan-savic

Built with Next.js + TypeScript