# Portfolio - Damjan Savić

Personal portfolio website showcasing my work as an **AI & Automation Specialist** based in Germany.

**Live:** [damjan-savic.com](https://damjan-savic.com)

## Current Role

**Process Automation Specialist** @ Everlast Consulting GmbH (since Dec 2024)
- Developing AI agents with n8n and Zapier
- Building web scraping solutions
- Migration from Power Automate to n8n

## Tech Stack

### Frontend
- **React 18** - UI Framework with Suspense & Lazy Loading
- **TypeScript** - Type-safe development
- **Vite** - Build tool & dev server
- **Tailwind CSS** - Utility-first styling with custom design tokens
- **Framer Motion** - Animations & page transitions

### Content & Internationalization
- **MDX** - Markdown + JSX for blog posts and project pages
- **i18next** - Multi-language support (German, English, Serbian)
- **react-helmet-async** - SEO meta tags & structured data

### Backend & Services
- **Supabase** - Database & Authentication
- **Google Analytics 4** - Privacy-compliant analytics with cookie consent

### PWA & Performance
- **Workbox** - Service Worker & caching strategies
- **vite-plugin-pwa** - Progressive Web App functionality
- **Code Splitting** - Vendor chunks for React, MDX, i18n, UI libraries

### Testing & Quality
- **Vitest** - Unit testing
- **Testing Library** - React component testing
- **ESLint** - Code linting

## Features

- **Multi-language support** - DE/EN/SR with automatic language detection
- **Progressive Web App** - Installable, offline-capable
- **SEO optimized** - Structured data (Schema.org), sitemap generation
- **Responsive Design** - Mobile-first approach
- **Cookie Consent** - GDPR-compliant with granular category control
- **Blog System** - MDX-based with frontmatter support
- **Portfolio Gallery** - Dynamic project showcase with filtering
- **Contact Form** - Integrated with backend services

## Pages

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

## Development

```bash
# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Run tests
npm test

# Preview production build
npm run preview
```

## Development Scripts

The project includes **11 utility scripts** for automating development tasks. See [scripts/README.md](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:**
```bash
npm run build:images    # Optimize project images
node scripts/generate-sitemap.js    # Generate sitemap
node scripts/pagespeed-check.js     # Run performance tests
```

## 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:** Vite, PostCSS, Terser

**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](https://www.linkedin.com/in/damjan-savi%C4%87-720288127/)

---

Built with React + TypeScript + Vite