190 lines
5.0 KiB
Markdown
190 lines
5.0 KiB
Markdown
# 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
|
|
- **Next.js 15** - React framework with SSR & SSG
|
|
- **React 19** - UI Framework with Suspense & Lazy Loading
|
|
- **TypeScript** - Type-safe development
|
|
- **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
|
|
- **Next.js Image Optimization** - Automatic image optimization with AVIF/WebP
|
|
- **Code Splitting** - Automatic route-based code splitting
|
|
- **Caching Strategies** - Custom headers for static assets
|
|
|
|
### 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
|
|
pnpm install
|
|
|
|
# Start dev server
|
|
pnpm run dev
|
|
|
|
# Build for production
|
|
pnpm run build
|
|
|
|
# Run tests
|
|
pnpm test
|
|
|
|
# Preview production build
|
|
pnpm run preview
|
|
```
|
|
|
|
## Docker Deployment
|
|
|
|
The application includes Docker support for containerized deployment.
|
|
|
|
### Prerequisites
|
|
|
|
- Docker
|
|
- Docker Compose
|
|
|
|
### Environment Variables
|
|
|
|
Create a `.env` file with the following variables:
|
|
|
|
```env
|
|
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)
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
## 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](https://www.linkedin.com/in/damjan-savi%C4%87-720288127/)
|
|
|
|
---
|
|
|
|
Built with Next.js + TypeScript
|