Merge origin/master

Merge pull request #5 from damjan1996/auto-claude/026-pause-background-animations-when-not-visible
auto-claude: 026-pause-background-animations-when-not-visible
2026-01-25 19:38:30 +01:00 · 2026-01-25 19:37:09 +01:00 · 2026-01-25 19:37:01 +01:00 · 2026-01-25 19:31:59 +01:00 · 2026-01-25 19:31:32 +01:00 · 2026-01-25 19:31:06 +01:00
573 changed files with 17924 additions and 12880 deletions
@@ -0,0 +1,227 @@
 {
  "base_commands": [
    ".",
    "[",
    "[[",
    "ag",
    "awk",
    "basename",
    "bash",
    "bc",
    "break",
    "cat",
    "cd",
    "chmod",
    "clear",
    "cmp",
    "column",
    "comm",
    "command",
    "continue",
    "cp",
    "curl",
    "cut",
    "date",
    "df",
    "diff",
    "dig",
    "dirname",
    "du",
    "echo",
    "egrep",
    "env",
    "eval",
    "exec",
    "exit",
    "expand",
    "export",
    "expr",
    "false",
    "fd",
    "fgrep",
    "file",
    "find",
    "fmt",
    "fold",
    "gawk",
    "gh",
    "git",
    "grep",
    "gunzip",
    "gzip",
    "head",
    "help",
    "host",
    "iconv",
    "id",
    "jobs",
    "join",
    "jq",
    "kill",
    "killall",
    "less",
    "let",
    "ln",
    "ls",
    "lsof",
    "man",
    "mkdir",
    "mktemp",
    "more",
    "mv",
    "nl",
    "paste",
    "pgrep",
    "ping",
    "pkill",
    "popd",
    "printenv",
    "printf",
    "ps",
    "pushd",
    "pwd",
    "read",
    "readlink",
    "realpath",
    "reset",
    "return",
    "rev",
    "rg",
    "rm",
    "rmdir",
    "sed",
    "seq",
    "set",
    "sh",
    "shuf",
    "sleep",
    "sort",
    "source",
    "split",
    "stat",
    "tail",
    "tar",
    "tee",
    "test",
    "time",
    "timeout",
    "touch",
    "tr",
    "tree",
    "true",
    "type",
    "uname",
    "unexpand",
    "uniq",
    "unset",
    "unzip",
    "watch",
    "wc",
    "wget",
    "whereis",
    "which",
    "whoami",
    "xargs",
    "yes",
    "yq",
    "zip",
    "zsh"
  ],
  "stack_commands": [
    "ar",
    "clang",
    "clang++",
    "cmake",
    "composer",
    "dive",
    "docker",
    "docker-buildx",
    "docker-compose",
    "dockerfile",
    "eslint",
    "g++",
    "gcc",
    "ipython",
    "jupyter",
    "ld",
    "make",
    "meson",
    "next",
    "ninja",
    "nm",
    "node",
    "notebook",
    "npm",
    "npx",
    "objdump",
    "pdb",
    "php",
    "pip",
    "pip3",
    "pipx",
    "pnpm",
    "pnpx",
    "pudb",
    "python",
    "python3",
    "react-scripts",
    "strip",
    "ts-node",
    "tsc",
    "tsx",
    "vitest"
  ],
  "script_commands": [
    "bun",
    "npm",
    "pnpm",
    "yarn"
  ],
  "custom_commands": [],
  "detected_stack": {
    "languages": [
      "python",
      "javascript",
      "typescript",
      "php",
      "c"
    ],
    "package_managers": [
      "pnpm"
    ],
    "frameworks": [
      "nextjs",
      "react",
      "vitest",
      "eslint"
    ],
    "databases": [],
    "infrastructure": [
      "docker"
    ],
    "cloud_providers": [],
    "code_quality_tools": [],
    "version_managers": []
  },
  "custom_scripts": {
    "npm_scripts": [
      "dev",
      "build",
      "start",
      "lint",
      "build:images",
      "generate:images",
      "generate:images:dry",
      "test",
      "test:coverage"
    ],
    "make_targets": [],
    "poetry_scripts": [],
    "cargo_aliases": [],
    "shell_scripts": []
  },
  "project_dir": "C:\\Users\\damja\\WebstormProjects\\Portfolio",
  "created_at": "2026-01-22T15:28:38.237190",
  "project_hash": "c4ad399e16be367eb4e6b076fe1d9ee3",
  "inherited_from": "C:\\Users\\damja\\WebstormProjects\\Portfolio"
 }
@@ -0,0 +1,25 @@
 {
  "active": true,
  "spec": "030-add-unit-tests-vitest-configured-but-no-tests-exis",
  "state": "building",
  "subtasks": {
    "completed": 2,
    "total": 8,
    "in_progress": 1,
    "failed": 0
  },
  "phase": {
    "current": "Utility Functions Tests",
    "id": null,
    "total": 2
  },
  "workers": {
    "active": 0,
    "max": 1
  },
  "session": {
    "number": 4,
    "started_at": "2026-01-25T06:18:19.433683"
  },
  "last_update": "2026-01-25T06:32:23.146357"
 }
@@ -0,0 +1,39 @@
 {
  "sandbox": {
    "enabled": true,
    "autoAllowBashIfSandboxed": true
  },
  "permissions": {
    "defaultMode": "acceptEdits",
    "allow": [
      "Read(./**)",
      "Write(./**)",
      "Edit(./**)",
      "Glob(./**)",
      "Grep(./**)",
      "Read(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\030-add-unit-tests-vitest-configured-but-no-tests-exis/**)",
      "Write(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\030-add-unit-tests-vitest-configured-but-no-tests-exis/**)",
      "Edit(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\030-add-unit-tests-vitest-configured-but-no-tests-exis/**)",
      "Glob(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\030-add-unit-tests-vitest-configured-but-no-tests-exis/**)",
      "Grep(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\030-add-unit-tests-vitest-configured-but-no-tests-exis/**)",
      "Read(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\030-add-unit-tests-vitest-configured-but-no-tests-exis\\.auto-claude\\specs\\030-add-unit-tests-vitest-configured-but-no-tests-exis/**)",
      "Write(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\030-add-unit-tests-vitest-configured-but-no-tests-exis\\.auto-claude\\specs\\030-add-unit-tests-vitest-configured-but-no-tests-exis/**)",
      "Edit(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude\\worktrees\\tasks\\030-add-unit-tests-vitest-configured-but-no-tests-exis\\.auto-claude\\specs\\030-add-unit-tests-vitest-configured-but-no-tests-exis/**)",
      "Read(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude/**)",
      "Write(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude/**)",
      "Edit(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude/**)",
      "Glob(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude/**)",
      "Grep(C:\\Users\\damja\\WebstormProjects\\Portfolio\\.auto-claude/**)",
      "Bash(*)",
      "WebFetch(*)",
      "WebSearch(*)",
      "mcp__context7__resolve-library-id(*)",
      "mcp__context7__get-library-docs(*)",
      "mcp__graphiti-memory__search_nodes(*)",
      "mcp__graphiti-memory__search_facts(*)",
      "mcp__graphiti-memory__add_episode(*)",
      "mcp__graphiti-memory__get_episodes(*)",
      "mcp__graphiti-memory__get_entity_edge(*)"
    ]
  }
 }
@@ -0,0 +1,42 @@
 # Dependencies
 node_modules
 .pnpm-store
 # Build outputs
 .next
 out
 build
 dist
 # Development
 .env*.local
 .env.development
 .env.test
 # IDE
 .idea
 .vscode
 *.swp
 *.swo
 # OS
 .DS_Store
 Thumbs.db
 # Git
 .git
 .gitignore
 # Docker
 Dockerfile*
 docker-compose*
 .dockerignore
 # Misc
 *.md
 !README.md
 *.log
 npm-debug.log*
 pnpm-debug.log*
 coverage
 .nyc_output
@@ -1,32 +1,4 @@
 <<<<<<< HEAD
 # Supabase
 NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
 NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
 SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
 # DeepSeek API
 DEEPSEEK_API_KEY=your_deepseek_api_key
 # Analytics
 NEXT_PUBLIC_GA_TRACKING_ID=your_ga_tracking_id
 # Site URL
 NEXT_PUBLIC_SITE_URL=https://your-domain.com
 =======
 # Supabase Configuration
 <<<<<<< HEAD
 # Get these from your Supabase project settings: https://app.supabase.com
 NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
 NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key-here
 # Analytics
 # Google Analytics tracking ID (format: G-XXXXXXXXXX)
 NEXT_PUBLIC_GA_TRACKING_ID=G-XXXXXXXXXX
 # Site Configuration
 # The public URL where your site is hosted (e.g., https://damjan-savic.com)
 NEXT_PUBLIC_SITE_URL=https://your-domain.com
 =======
 NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
 NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
@@ -38,5 +10,3 @@ NEXT_PUBLIC_SITE_URL=https://damjan-savic.com
 # OpenAI API Key (for image generation)
 OPENAI_API_KEY=sk-your-api-key-here
 >>>>>>> origin/master
 >>>>>>> origin/master
@@ -4,6 +4,7 @@ src/pages-vite/
 src/hooks/
 src/services/
 src/utils/
 src/i18n/locales-old/
 *.bak
 # Build output
@@ -1,47 +0,0 @@
 name: CI/CD Pipeline
 on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'
      - name: Install pnpm
        run: npm install -g pnpm
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      - name: Lint
        run: pnpm run lint
      - name: Build
        run: pnpm run build
        env:
          NODE_ENV: production
      - name: Test
        run: pnpm run test -- --passWithNoTests
        env:
          NODE_ENV: test
  deploy:
    needs: ci
    runs-on: ubuntu-latest
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    steps:
      - name: Deploy
        run: |
          echo "Deployment handled via webhook"
@@ -2,18 +2,9 @@
 node_modules
 .pnp
 .pnp.js
 package-lock.json
 # Project-specific directories
 CoderConda/
 scripts/
 # Testing
 coverage
 test-results/
 tests/
 playwright-report/
 .playwright-mcp/
 # Production
 dist
@@ -92,60 +83,5 @@ supabase/.temp/
 # Source images (originals before optimization)
 source-images/
-# Auto Claude files
+# Auto Claude data directory
 .auto-claude/
 .auto-claude-*
 .claude_settings.json
 # Windows reserved names
 nul
 # Temporary/reference images
 *.jpg
 *.pen
 # Build/test output files
 *-output.txt
 *_output.txt
 build-output*.txt
 dev-output.txt
 install-output.txt
 npm-install-output.txt
 dev-server.pid
 context.json
 project_index.json
 *.bak
 # Test scripts
 test*.txt
 test*.sh
 verify-*.sh
 verify-*.js
 verify-*.mjs
 current-headers.txt
 # Docker (if not using)
 Dockerfile
 docker-compose.yml
 .dockerignore
 # Documentation/verification files (generated)
 CONTRIBUTING.md
 E2E_VERIFICATION.md
 e2e-blog-verification.md
 HEADERS_INVESTIGATION.md
 MANUAL_INTERVENTION_REQUIRED.md
 MIGRATION_READY.md
 OPTIMIZATION_RECOMMENDATIONS.md
 OPTIMIZATION_REPORT.md
 PAGESPEED_VERIFICATION_REPORT.md
 PERFORMANCE_BASELINE.md
 QA_*.md
 SECURITY_HEADERS_VERIFICATION.md
 SERVERLESS_COMPATIBILITY_VERIFICATION.md
 SUBTASK*.md
 TESTING-VERIFICATION.md
 VERIFICATION_REPORT.md
 VERIFICATION_STEPS.md
@@ -1 +0,0 @@
 manage-package-manager-versions=false
@@ -0,0 +1,56 @@
 # syntax=docker/dockerfile:1
 # Base image
 FROM node:20-alpine AS base
 RUN apk add --no-cache libc6-compat
 RUN corepack enable && corepack prepare pnpm@latest --activate
 # Install dependencies only when needed
 FROM base AS deps
 WORKDIR /app
 # Copy package files
 COPY package.json pnpm-lock.yaml ./
 # Install dependencies
 RUN pnpm install --frozen-lockfile
 # Rebuild the source code only when needed
 FROM base AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 # Next.js collects anonymous telemetry data - disable it
 ENV NEXT_TELEMETRY_DISABLED=1
 RUN pnpm run build
 # Production image, copy all the files and run next
 FROM node:20-alpine AS runner
 WORKDIR /app
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 COPY --from=builder /app/public ./public
 # Set the correct permission for prerender cache
 RUN mkdir .next
 RUN chown nextjs:nodejs .next
 # Automatically leverage output traces to reduce image size
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 USER nextjs
 EXPOSE 3000
 ENV PORT=3000
 ENV HOSTNAME="0.0.0.0"
 CMD ["node", "server.js"]
@@ -6,7 +6,7 @@ Personal portfolio website showcasing my work as an **AI & Automation Specialist
 ## Current Role
-**Process Automation Specialist** @ Everlast Consulting GmbH (since Dec 2025)
+**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
@@ -14,9 +14,9 @@ Personal portfolio website showcasing my work as an **AI & Automation Specialist
 ## Tech Stack
 ### Frontend
- **Next.js 15** - React framework with SSR & SSG
+- **React 18** - UI Framework with Suspense & Lazy Loading
 - **React 19** - 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
@@ -30,9 +30,9 @@ Personal portfolio website showcasing my work as an **AI & Automation Specialist
 - **Google Analytics 4** - Privacy-compliant analytics with cookie consent
 ### PWA & Performance
- **Next.js Image Optimization** - Automatic image optimization with AVIF/WebP
+- **Workbox** - Service Worker & caching strategies
- **Code Splitting** - Automatic route-based code splitting
+- **vite-plugin-pwa** - Progressive Web App functionality
- **Caching Strategies** - Custom headers for static assets
+- **Code Splitting** - Vendor chunks for React, MDX, i18n, UI libraries
 ### Testing & Quality
 - **Vitest** - Unit testing
@@ -85,135 +85,25 @@ src/
 └── 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](https://app.supabase.com) → 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](https://app.supabase.com) → 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](https://analytics.google.com) → 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
 1. Copy the example environment file:
   ```bash
   cp .env.example .env
   ```
 2. Fill in your actual values in the `.env` file
 3. 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
 ```bash
 # Install dependencies
-pnpm install
+npm install
 # Start dev server
-pnpm run dev
+npm run dev
 # Build for production
-pnpm run build
+npm run build
 # Run tests
-pnpm test
+npm test
 # Preview production build
-pnpm run preview
+npm 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:
 ```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
 =======
 ## Development Scripts
 The project includes **11 utility scripts** for automating development tasks. See [scripts/README.md](scripts/README.md) for full documentation.
@@ -233,7 +123,6 @@ node scripts/generate-sitemap.js    # Generate sitemap
 node scripts/pagespeed-check.js     # Run performance tests
 ```
 >>>>>>> origin/master
 ## Key Technologies Used
 **Languages:** TypeScript, Python, MDX
@@ -244,7 +133,7 @@ node scripts/pagespeed-check.js     # Run performance tests
 **Backend:** Supabase (PostgreSQL, Auth), WebSocket
-**Build Tools:** Next.js, PostCSS
+**Build Tools:** Vite, PostCSS, Terser
 **Testing:** Vitest, Testing Library, JSDOM
@@ -258,4 +147,4 @@ node scripts/pagespeed-check.js     # Run performance tests
 ---
-Built with Next.js + TypeScript
+Built with React + TypeScript + Vite
@@ -1,457 +0,0 @@
 ================================================================================
 BLOG IMAGE PROMPTS - PORTFOLIO
 ================================================================================
 Format: 8K Resolution, 16:9 Aspect Ratio
 CI: Dark moss (#181C14), Sage green (#697565/#465B50), Cream (#ECDFCC)
 Style: Modern, minimalist, tech-forward with earthy tones
 ================================================================================
 ================================================================================
 AI & LLM (01-20)
 ================================================================================
 01 - Agentic AI 2026
 --------------------
 Futuristic dark moss green control room with multiple holographic AI agent interfaces, interconnected neural network visualization, enterprise server infrastructure in background, soft sage green ambient lighting, cream-colored data streams, 8K resolution, 16:9 aspect ratio, cinematic lighting, minimalist tech aesthetic
 02 - DeepSeek R1 vs OpenAI o1
 -----------------------------
 Split-screen comparison of two abstract AI brain architectures, left side with blue reasoning pathways, right side with orange logic networks, dark moss background (#181C14), floating mathematical equations in cream color, sage green connection lines, 8K resolution, 16:9 aspect ratio, clean minimalist design
 03 - Multi-Agent Systeme TypeScript
 -----------------------------------
 Abstract visualization of multiple interconnected AI agents as geometric nodes, TypeScript code fragments floating in space, dark sage green (#465B50) connecting lines, dark moss background, cream-colored data packets flowing between agents, 8K resolution, 16:9 aspect ratio, modern tech aesthetic
 04 - AI Cost Optimization
 -------------------------
 Minimalist visualization of descending cost graph transforming into efficiency curve, golden coins morphing into data bits, dark moss environment, sage green accent lighting on graph elements, cream-colored financial metrics floating, 8K resolution, 16:9 aspect ratio, clean corporate aesthetic
 05 - Human-in-the-Loop
 ----------------------
 Elegant human hand reaching toward AI holographic interface, feedback loop visualization connecting human and machine, dark moss background, sage green neural pathways, cream-colored approval checkmarks, 8K resolution, 16:9 aspect ratio, sophisticated tech-human harmony
 06 - Claude Haiku vs Sonnet vs Opus
 -----------------------------------
 Three abstract AI model representations as ascending geometric structures, smallest to largest, dark moss environment, sage green light gradients distinguishing each model, cream-colored performance metrics floating, 8K resolution, 16:9 aspect ratio, elegant comparative visualization
 07 - Tool Use Patterns
 ----------------------
 AI agent hand reaching toward floating API tool icons, gear mechanisms, database symbols, webhook connections, dark moss background, sage green tool outlines, cream-colored data flows, 8K resolution, 16:9 aspect ratio, clean technical illustration
 08 - AI Governance Frameworks
 -----------------------------
 Balanced scales with AI brain on one side and ethical guidelines document on other, governance framework structure surrounding, dark moss background, sage green framework lines, cream-colored policy text elements, 8K resolution, 16:9 aspect ratio, professional corporate aesthetic
 09 - Physical AI Robotics
 -------------------------
 Sleek robotic arm with integrated LLM visualization, holographic decision-making interface, industrial environment with dark moss tones, sage green sensor lights, cream-colored data streams connecting brain to mechanics, 8K resolution, 16:9 aspect ratio, futuristic industrial design
 10 - Open Source AI Demokratisierung
 ------------------------------------
 Open hands releasing multiple AI models into the world, community collaboration visualization, dark moss background, sage green open-source symbols, cream-colored accessibility icons, diverse representation, 8K resolution, 16:9 aspect ratio, empowering community aesthetic
 11 - DeepSeek R1 Training Paradigm
 ----------------------------------
 Abstract visualization of reinforcement learning training loop, reward signals as golden particles, neural network layers expanding, dark moss background, sage green gradient learning curves, cream-colored milestone markers, 8K resolution, 16:9 aspect ratio, scientific research aesthetic
 12 - Telegram Bots AI Enterprise
 --------------------------------
 Telegram logo morphing into enterprise AI interface, chat bubbles with intelligent responses, corporate environment silhouette, dark moss background, sage green Telegram accent, cream-colored message threads, 8K resolution, 16:9 aspect ratio, professional communication aesthetic
 13 - AI Agent Testing
 ---------------------
 Quality assurance visualization with AI agent under examination, test case checkboxes, debugging magnifying glass, dark moss background, sage green test success indicators, cream-colored test metrics, 8K resolution, 16:9 aspect ratio, quality-focused technical design
 14 - Prompt Engineering 2026
 ----------------------------
 Artistic representation of prompt crafting as sculpting light, human hands shaping text into AI responses, dark moss environment, sage green text highlighting, cream-colored output manifestation, 8K resolution, 16:9 aspect ratio, creative technical artistry
 15 - Human-AI Teams
 -------------------
 Human and AI avatar working at shared holographic workspace, collaborative task completion visualization, dark moss office environment, sage green connection threads, cream-colored shared documents, 8K resolution, 16:9 aspect ratio, harmonious teamwork aesthetic
 16 - Voice AI Infrastructure
 ----------------------------
 Sound wave transforming into structured data pipeline, server infrastructure with audio processing nodes, dark moss data center, sage green audio waveforms, cream-colored transcription text, 8K resolution, 16:9 aspect ratio, technical infrastructure visualization
 17 - Conversational AI Turn-Taking
 ----------------------------------
 Two speech bubbles in elegant dance, timing visualization with conversation rhythm, dark moss background, sage green speaker indicators, cream-colored dialogue text, 8K resolution, 16:9 aspect ratio, fluid communication design
 18 - Multilingual Voice Bots
 ----------------------------
 Global languages floating around central voice AI core, translation pathways connecting cultures, dark moss globe, sage green language bridges, cream-colored text in multiple scripts, 8K resolution, 16:9 aspect ratio, international connectivity aesthetic
 19 - Deepgram Nova German
 -------------------------
 German language waveform being processed by Nova neural network, Umlauts and German text elements, dark moss background, sage green processing nodes, cream-colored German transcription, 8K resolution, 16:9 aspect ratio, precision speech recognition visualization
 20 - ElevenLabs Turbo Performance
 ---------------------------------
 Speed-optimized voice synthesis visualization, sound wave racing through optimized pipeline, dark moss environment, sage green performance metrics, cream-colored latency indicators showing improvement, 8K resolution, 16:9 aspect ratio, high-performance audio aesthetic
 ================================================================================
 VOICE & REAL-TIME (21-27)
 ================================================================================
 21 - WebSockets Voice AI
 ------------------------
 Bidirectional data streams carrying voice data between client and server, persistent connection visualization, dark moss network environment, sage green WebSocket channels, cream-colored audio packets, 8K resolution, 16:9 aspect ratio, real-time communication design
 22 - N8N AI Agents Workflow
 ---------------------------
 Visual workflow canvas with AI agent nodes connected by automation paths, n8n interface elements, dark moss background, sage green workflow connections, cream-colored trigger events, 8K resolution, 16:9 aspect ratio, workflow automation aesthetic
 23 - Zapier vs N8N vs Make
 --------------------------
 Three workflow platforms represented as distinct geometric islands connected by bridges, comparison visualization, dark moss ocean, sage green platform accents, cream-colored feature labels, 8K resolution, 16:9 aspect ratio, clean platform comparison design
 24 - Event-Driven AI Architecture
 ---------------------------------
 Event bus with AI processors responding to streaming events, pub-sub pattern visualization, dark moss infrastructure, sage green event streams, cream-colored message payloads, 8K resolution, 16:9 aspect ratio, architectural diagram aesthetic
 25 - Socket.IO AI Chat
 ----------------------
 Real-time chat interface with AI responses appearing instantly, Socket.IO room visualization, dark moss chat environment, sage green user indicators, cream-colored message bubbles, 8K resolution, 16:9 aspect ratio, modern chat application design
 26 - Realtime Dashboards WebSocket
 ----------------------------------
 Live updating dashboard with streaming metrics and charts, WebSocket data feeds, dark moss dashboard background, sage green chart lines, cream-colored metric numbers updating, 8K resolution, 16:9 aspect ratio, data visualization aesthetic
 27 - SSE vs WebSocket
 ---------------------
 Split comparison showing one-way SSE stream vs bidirectional WebSocket, protocol visualization, dark moss background, sage green data direction arrows, cream-colored protocol labels, 8K resolution, 16:9 aspect ratio, technical comparison design
 ================================================================================
 FRONTEND & FRAMEWORK (28-40)
 ================================================================================
 28 - Next.js 15 Deep Dive
 -------------------------
 Next.js logo descending into deep architectural layers, RSC, routing, caching visualization, dark moss code environment, sage green framework structure, cream-colored component hierarchy, 8K resolution, 16:9 aspect ratio, framework deep-dive aesthetic
 29 - React Server Components
 ----------------------------
 Server and client components separated by elegant boundary line, data flowing from server to client, dark moss background, sage green server zone, cream-colored client hydration, 8K resolution, 16:9 aspect ratio, React architecture visualization
 30 - Streaming UI Patterns
 --------------------------
 UI skeleton progressively filling with content, streaming data visualization, dark moss interface, sage green loading states, cream-colored content appearing, 8K resolution, 16:9 aspect ratio, progressive enhancement design
 31 - TypeScript 6 Advanced Patterns
 -----------------------------------
 Abstract type system visualization with generics, conditional types, mapped types floating, dark moss IDE environment, sage green type annotations, cream-colored TypeScript syntax, 8K resolution, 16:9 aspect ratio, type-safe code aesthetic
 32 - Tailwind CSS 4
 -------------------
 Utility classes transforming into beautiful UI components, CSS-in-JS visualization, dark moss design environment, sage green utility badges, cream-colored styled components, 8K resolution, 16:9 aspect ratio, modern CSS framework design
 33 - Zod Schema Validation
 --------------------------
 Data passing through validation gates, schema structure protecting application, dark moss security environment, sage green validation checkmarks, cream-colored schema definitions, 8K resolution, 16:9 aspect ratio, data validation aesthetic
 34 - Prisma 7 ORM
 -----------------
 Database schema transforming into TypeScript types, Prisma client connecting to database, dark moss database environment, sage green model relationships, cream-colored query results, 8K resolution, 16:9 aspect ratio, ORM visualization design
 35 - tRPC Type-Safe APIs
 ------------------------
 End-to-end type safety visualization from client to server, type inference flowing, dark moss API environment, sage green type connections, cream-colored procedure calls, 8K resolution, 16:9 aspect ratio, type-safe API aesthetic
 36 - Zustand vs Jotai
 ---------------------
 Two state management approaches visualized as different architectural styles, comparison view, dark moss application state, sage green store structures, cream-colored state atoms, 8K resolution, 16:9 aspect ratio, state management comparison design
 37 - TanStack Query
 -------------------
 Data fetching lifecycle visualization with caching layers, stale-while-revalidate pattern, dark moss data layer, sage green cache indicators, cream-colored fresh data, 8K resolution, 16:9 aspect ratio, query management aesthetic
 38 - React Hook Form
 --------------------
 Form fields with elegant validation states, hook-based form management visualization, dark moss form interface, sage green valid indicators, cream-colored form labels, 8K resolution, 16:9 aspect ratio, form handling design
 39 - Vitest Testing
 -------------------
 Test suite running with fast execution visualization, green checkmarks appearing rapidly, dark moss terminal environment, sage green passing tests, cream-colored test descriptions, 8K resolution, 16:9 aspect ratio, testing framework aesthetic
 40 - Radix UI Components
 ------------------------
 Accessible UI primitives assembling into polished components, headless design system, dark moss component library, sage green accessibility indicators, cream-colored component labels, 8K resolution, 16:9 aspect ratio, design system visualization
 ================================================================================
 BACKEND & DATABASES (41-50)
 ================================================================================
 41 - Supabase Fullstack Platform
 --------------------------------
 Supabase ecosystem with auth, database, storage, functions orbiting central platform, dark moss cloud environment, sage green service connections, cream-colored data flows, 8K resolution, 16:9 aspect ratio, platform architecture design
 42 - MongoDB Atlas Vector Search
 --------------------------------
 Vector embeddings in high-dimensional space with semantic search visualization, dark moss database cloud, sage green vector arrows, cream-colored similar document clusters, 8K resolution, 16:9 aspect ratio, vector database aesthetic
 43 - Redis Stack Vector Database
 --------------------------------
 Redis data structures with vector similarity search, in-memory speed visualization, dark moss cache layer, sage green vector indices, cream-colored fast query results, 8K resolution, 16:9 aspect ratio, high-performance database design
 44 - Drizzle ORM Lightweight
 ----------------------------
 Lightweight ORM as elegant minimal structure, SQL-like syntax with TypeScript types, dark moss database connection, sage green query builder, cream-colored lean code, 8K resolution, 16:9 aspect ratio, minimalist ORM aesthetic
 45 - Turso LibSQL Edge
 ----------------------
 Edge database nodes distributed globally, LibSQL replication visualization, dark moss edge network, sage green sync connections, cream-colored regional data, 8K resolution, 16:9 aspect ratio, edge computing database design
 46 - PlanetScale MySQL Serverless
 ---------------------------------
 Serverless MySQL scaling visualization, branching database schema, dark moss cloud infrastructure, sage green branch connections, cream-colored schema migrations, 8K resolution, 16:9 aspect ratio, serverless database aesthetic
 47 - Hono Edge Framework
 ------------------------
 Ultrafast edge runtime with minimal footprint, Hono bird silhouette, dark moss edge environment, sage green request routing, cream-colored response paths, 8K resolution, 16:9 aspect ratio, lightweight framework design
 48 - API Design Patterns
 ------------------------
 RESTful and GraphQL patterns visualized as architectural blueprints, dark moss API layer, sage green endpoint structures, cream-colored request/response flows, 8K resolution, 16:9 aspect ratio, API architecture aesthetic
 49 - Authentication Patterns
 ----------------------------
 Security layers with JWT tokens, session management, OAuth flows, dark moss security environment, sage green authentication shields, cream-colored user credentials protected, 8K resolution, 16:9 aspect ratio, auth security design
 50 - Background Jobs Queues
 ---------------------------
 Job queue with workers processing tasks, async execution visualization, dark moss worker pool, sage green job progress, cream-colored task payloads, 8K resolution, 16:9 aspect ratio, background processing aesthetic
 ================================================================================
 WEB SCRAPING & AUTOMATION (51-60)
 ================================================================================
 51 - Playwright Web Scraping
 ----------------------------
 Automated browser navigating through web pages, data extraction visualization, dark moss browser environment, sage green selector highlights, cream-colored extracted data, 8K resolution, 16:9 aspect ratio, web automation design
 52 - Puppeteer Browser Automation
 ---------------------------------
 Puppet strings controlling browser actions, headless Chrome visualization, dark moss automation environment, sage green action paths, cream-colored DOM elements, 8K resolution, 16:9 aspect ratio, browser puppetry aesthetic
 53 - Cheerio HTML Parsing
 -------------------------
 HTML document being parsed into structured data tree, jQuery-like selection, dark moss code environment, sage green parsed elements, cream-colored data extraction, 8K resolution, 16:9 aspect ratio, HTML parsing design
 54 - Anti-Bot Detection
 -----------------------
 Shield protecting scraper from detection, fingerprinting evasion visualization, dark moss security layer, sage green protection barriers, cream-colored stealth indicators, 8K resolution, 16:9 aspect ratio, anti-detection aesthetic
 55 - Data Extraction Pipelines
 ------------------------------
 Data flowing through extraction, transformation, loading stages, ETL pipeline visualization, dark moss data flow, sage green processing stages, cream-colored clean output data, 8K resolution, 16:9 aspect ratio, pipeline architecture design
 56 - Cron Job Scheduling
 ------------------------
 Clock with scheduled tasks triggering at specific times, calendar automation visualization, dark moss scheduling environment, sage green time indicators, cream-colored task executions, 8K resolution, 16:9 aspect ratio, scheduling aesthetic
 57 - Browser Extensions Automation
 ----------------------------------
 Browser extension icon with automation gears inside, content script injection visualization, dark moss browser chrome, sage green extension actions, cream-colored automated workflows, 8K resolution, 16:9 aspect ratio, extension development design
 58 - API Integration Patterns
 -----------------------------
 Multiple APIs connecting through integration hub, adapter pattern visualization, dark moss integration layer, sage green API connectors, cream-colored data transformations, 8K resolution, 16:9 aspect ratio, integration architecture aesthetic
 59 - Email Automation
 ---------------------
 Automated email sequences flowing to recipients, campaign visualization, dark moss email infrastructure, sage green trigger points, cream-colored email templates, 8K resolution, 16:9 aspect ratio, email marketing automation design
 60 - Workflow Orchestration
 ---------------------------
 Complex workflow with conditional branches, parallel execution paths, orchestration visualization, dark moss workflow canvas, sage green decision nodes, cream-colored execution paths, 8K resolution, 16:9 aspect ratio, orchestration aesthetic
 ================================================================================
 IOT & SMART HOME (61-70)
 ================================================================================
 61 - Home Assistant Integration
 -------------------------------
 Smart home central hub connecting all devices, Home Assistant dashboard visualization, dark moss home environment, sage green device connections, cream-colored automation flows, 8K resolution, 16:9 aspect ratio, smart home aesthetic
 62 - MQTT Protocol IoT
 ----------------------
 Publish-subscribe messaging pattern with IoT devices, broker connecting publishers and subscribers, dark moss IoT network, sage green topic channels, cream-colored message payloads, 8K resolution, 16:9 aspect ratio, MQTT protocol design
 63 - ESP32 Development
 ----------------------
 ESP32 microcontroller with connected sensors and actuators, embedded development visualization, dark moss electronics environment, sage green circuit traces, cream-colored data readings, 8K resolution, 16:9 aspect ratio, embedded systems aesthetic
 64 - Raspberry Pi IoT
 ---------------------
 Raspberry Pi as IoT gateway connecting edge devices to cloud, dark moss computing environment, sage green GPIO connections, cream-colored sensor data streams, 8K resolution, 16:9 aspect ratio, single-board computer design
 65 - Matter Thread Protocol
 ---------------------------
 Matter-enabled devices communicating over Thread mesh network, interoperability visualization, dark moss smart home, sage green mesh connections, cream-colored device icons, 8K resolution, 16:9 aspect ratio, next-gen smart home protocol aesthetic
 66 - Zigbee Zigbee2MQTT
 -----------------------
 Zigbee mesh network with MQTT bridge, device communication visualization, dark moss IoT environment, sage green Zigbee links, cream-colored MQTT messages, 8K resolution, 16:9 aspect ratio, Zigbee network design
 67 - InfluxDB Sensor Data
 -------------------------
 Time-series data streaming into InfluxDB, sensor metrics visualization, dark moss database environment, sage green time buckets, cream-colored metric graphs, 8K resolution, 16:9 aspect ratio, time-series database aesthetic
 68 - IoT Security
 -----------------
 Security layers protecting IoT devices, encryption and authentication visualization, dark moss security perimeter, sage green security shields, cream-colored protected devices, 8K resolution, 16:9 aspect ratio, IoT security design
 69 - Smart Home Dashboard
 -------------------------
 Beautiful dashboard displaying all smart home controls and metrics, dark moss interface, sage green active device indicators, cream-colored temperature and status readings, 8K resolution, 16:9 aspect ratio, dashboard UI aesthetic
 70 - Edge Computing IoT
 -----------------------
 Processing happening at the edge before cloud, reduced latency visualization, dark moss edge nodes, sage green local processing, cream-colored optimized data to cloud, 8K resolution, 16:9 aspect ratio, edge computing design
 ================================================================================
 3D & GRAPHICS (71-73)
 ================================================================================
 71 - Three.js React Three Fiber
 -------------------------------
 3D scene rendered with React components, Three.js geometry with declarative syntax, dark moss 3D space, sage green wireframe meshes, cream-colored lighting effects, 8K resolution, 16:9 aspect ratio, 3D web development aesthetic
 72 - WebGPU 3D Graphics
 -----------------------
 GPU-accelerated 3D rendering with WebGPU, shader pipelines visualization, dark moss graphics environment, sage green compute shaders, cream-colored rendered output, 8K resolution, 16:9 aspect ratio, next-gen web graphics design
 73 - glTF Model Optimization
 ----------------------------
 3D model being optimized and compressed, polygon reduction visualization, dark moss 3D workspace, sage green optimized mesh, cream-colored file size reduction metrics, 8K resolution, 16:9 aspect ratio, 3D optimization aesthetic
 ================================================================================
 SEO & PERFORMANCE (74-80)
 ================================================================================
 74 - Next.js SEO Metadata
 -------------------------
 Search engine crawling Next.js pages with rich metadata, structured data visualization, dark moss search environment, sage green metadata tags, cream-colored search results preview, 8K resolution, 16:9 aspect ratio, SEO optimization design
 75 - Core Web Vitals Optimization
 ---------------------------------
 LCP, FID, CLS metrics being optimized, performance gauges improving, dark moss performance dashboard, sage green optimal scores, cream-colored metric improvements, 8K resolution, 16:9 aspect ratio, web vitals aesthetic
 76 - Structured Data JSON-LD
 ----------------------------
 JSON-LD schema enriching search results, rich snippets visualization, dark moss semantic web, sage green structured connections, cream-colored enhanced search listings, 8K resolution, 16:9 aspect ratio, structured data design
 77 - Image Optimization Web
 ---------------------------
 Images being compressed and optimized for web delivery, format conversion visualization, dark moss media pipeline, sage green optimization process, cream-colored faster loading indicators, 8K resolution, 16:9 aspect ratio, image optimization aesthetic
 78 - Technical SEO Checklist
 ----------------------------
 SEO audit checklist with items being completed, technical optimization visualization, dark moss audit environment, sage green completed checkmarks, cream-colored improvement items, 8K resolution, 16:9 aspect ratio, SEO checklist design
 79 - International SEO i18n
 ---------------------------
 Global map with localized content versions, hreflang connections, dark moss world view, sage green regional markers, cream-colored translated content, 8K resolution, 16:9 aspect ratio, international SEO aesthetic
 80 - Performance Monitoring Analytics
 -------------------------------------
 Real-time performance metrics dashboard, analytics visualization, dark moss monitoring center, sage green healthy metrics, cream-colored trend graphs, 8K resolution, 16:9 aspect ratio, performance analytics design
 ================================================================================
 SAAS & GROWTH (81-100)
 ================================================================================
 81 - A/B Testing Implementation
 -------------------------------
 Split test visualization with variant A and B, statistical significance indicators, dark moss testing environment, sage green winning variant, cream-colored conversion data, 8K resolution, 16:9 aspect ratio, A/B testing aesthetic
 82 - Conversion Rate Optimization
 ---------------------------------
 Funnel optimization with improved conversion at each stage, dark moss marketing funnel, sage green optimization points, cream-colored conversion percentages, 8K resolution, 16:9 aspect ratio, CRO design
 83 - SaaS Pricing Strategies
 ----------------------------
 Pricing tiers as elegant ascending platforms, value proposition visualization, dark moss pricing environment, sage green tier highlights, cream-colored feature lists, 8K resolution, 16:9 aspect ratio, SaaS pricing aesthetic
 84 - Subscription Billing Stripe
 --------------------------------
 Recurring payment cycle with Stripe integration, subscription management visualization, dark moss billing environment, sage green successful payments, cream-colored invoice flows, 8K resolution, 16:9 aspect ratio, subscription billing design
 85 - Multi-Tenancy Architecture
 -------------------------------
 Isolated tenant environments within shared infrastructure, data separation visualization, dark moss cloud architecture, sage green tenant boundaries, cream-colored shared services, 8K resolution, 16:9 aspect ratio, multi-tenant aesthetic
 86 - Feature Flags Progressive Rollout
 --------------------------------------
 Feature being gradually enabled for user segments, rollout percentage visualization, dark moss deployment environment, sage green enabled features, cream-colored user segments, 8K resolution, 16:9 aspect ratio, feature flag design
 87 - User Onboarding Flows
 --------------------------
 New user journey through onboarding steps, progress visualization, dark moss onboarding interface, sage green completed steps, cream-colored welcome screens, 8K resolution, 16:9 aspect ratio, onboarding experience aesthetic
 88 - SaaS Analytics Metrics
 ---------------------------
 Key SaaS metrics dashboard showing MRR, churn, LTV, dark moss analytics environment, sage green positive trends, cream-colored metric values, 8K resolution, 16:9 aspect ratio, SaaS metrics design
 89 - Customer Success Automation
 --------------------------------
 Automated customer success workflows, health score monitoring visualization, dark moss CS environment, sage green healthy accounts, cream-colored intervention triggers, 8K resolution, 16:9 aspect ratio, customer success aesthetic
 90 - SaaS Security Compliance
 -----------------------------
 Security compliance badges SOC2, GDPR, with audit trail visualization, dark moss compliance environment, sage green certified checkmarks, cream-colored compliance documentation, 8K resolution, 16:9 aspect ratio, security compliance design
 91 - API Design Documentation
 -----------------------------
 Beautiful API documentation with interactive examples, developer portal visualization, dark moss documentation environment, sage green endpoint categories, cream-colored code samples, 8K resolution, 16:9 aspect ratio, API docs aesthetic
 92 - Webhook Implementation
 ---------------------------
 Event-driven webhook notifications flowing to external systems, payload delivery visualization, dark moss integration environment, sage green successful deliveries, cream-colored event payloads, 8K resolution, 16:9 aspect ratio, webhook design
 93 - Rate Limiting Throttling
 -----------------------------
 Traffic being controlled through rate limiting gates, protection visualization, dark moss API gateway, sage green allowed requests, cream-colored throttled indicators, 8K resolution, 16:9 aspect ratio, rate limiting aesthetic
 94 - Developer Experience DX
 ----------------------------
 Developer workflow with excellent tooling, productivity visualization, dark moss development environment, sage green efficient workflows, cream-colored documentation and CLI tools, 8K resolution, 16:9 aspect ratio, DX design
 95 - API Versioning
 -------------------
 Multiple API versions coexisting, deprecation and migration visualization, dark moss API timeline, sage green current version, cream-colored legacy support, 8K resolution, 16:9 aspect ratio, API versioning aesthetic
 96 - Marketplace Platform
 -------------------------
 Two-sided marketplace connecting sellers and buyers, platform architecture visualization, dark moss marketplace environment, sage green transaction flows, cream-colored product listings, 8K resolution, 16:9 aspect ratio, marketplace design
 97 - Payment Integration Providers
 ----------------------------------
 Multiple payment providers unified through single integration, payment method icons, dark moss checkout environment, sage green successful transactions, cream-colored payment options, 8K resolution, 16:9 aspect ratio, payment integration aesthetic
 98 - Digital Product Delivery
 -----------------------------
 Digital products being delivered instantly after purchase, download and access visualization, dark moss delivery system, sage green completed deliveries, cream-colored product files, 8K resolution, 16:9 aspect ratio, digital delivery design
 99 - Affiliate Referral Systems
 -------------------------------
 Referral network with tracked conversions and commissions, viral growth visualization, dark moss affiliate environment, sage green successful referrals, cream-colored commission payouts, 8K resolution, 16:9 aspect ratio, referral system aesthetic
 100 - Scaling SaaS Infrastructure
 ---------------------------------
 Infrastructure scaling from small to massive, auto-scaling visualization with growing servers, dark moss cloud environment, sage green healthy instances, cream-colored traffic growth graph, 8K resolution, 16:9 aspect ratio, infrastructure scaling design
 ================================================================================
 END OF PROMPTS
 ================================================================================
@@ -0,0 +1,74 @@
 {
  "files_to_modify": {
    "frontend": [
      "src/components/seo/JsonLd.tsx",
      "src/components/seo/index.ts"
    ]
  },
  "files_to_create": {
    "frontend": [
      "src/components/seo/schemas/PersonJsonLd.tsx",
      "src/components/seo/schemas/ProfessionalServiceJsonLd.tsx",
      "src/components/seo/schemas/BreadcrumbJsonLd.tsx",
      "src/components/seo/schemas/WebPageJsonLd.tsx",
      "src/components/seo/schemas/FAQJsonLd.tsx",
      "src/components/seo/schemas/ServiceJsonLd.tsx",
      "src/components/seo/schemas/OrganizationJsonLd.tsx",
      "src/components/seo/schemas/ArticleJsonLd.tsx",
      "src/components/seo/schemas/HowToJsonLd.tsx",
      "src/components/seo/schemas/ProfilePageJsonLd.tsx",
      "src/components/seo/schemas/VideoJsonLd.tsx",
      "src/components/seo/schemas/SoftwareAppJsonLd.tsx",
      "src/components/seo/schemas/WebSiteJsonLd.tsx",
      "src/components/seo/schemas/index.ts"
    ]
  },
  "files_to_reference": [
    "src/components/about/index.ts",
    "src/components/layout/index.ts",
    "src/components/portfolio/index.ts"
  ],
  "patterns": {
    "component_organization": "Each component type gets its own directory with multiple component files and a barrel export index.ts",
    "barrel_export": "index.ts re-exports all components from the directory using named exports",
    "import_paths": "Imports use path alias @/components/... for cleaner imports",
    "typescript": "All components use TypeScript with proper interface definitions"
  },
  "existing_implementations": {
    "description": "Found 14 JSON-LD schema components in a single 758-line file at src/components/seo/JsonLd.tsx",
    "relevant_files": [
      "src/components/seo/JsonLd.tsx",
      "src/components/seo/index.ts",
      "src/app/[locale]/layout.tsx (imports PersonJsonLd, ProfessionalServiceJsonLd, OrganizationJsonLd, WebSiteJsonLd)",
      "src/app/[locale]/about/page.tsx (imports ProfilePageJsonLd, BreadcrumbJsonLd)",
      "src/app/[locale]/blog/[slug]/page.tsx (imports BreadcrumbJsonLd, ArticleJsonLd)",
      "src/app/[locale]/leistungen/page.tsx (imports BreadcrumbJsonLd, FAQJsonLd)"
    ],
    "components_to_split": [
      "PersonJsonLd",
      "ProfessionalServiceJsonLd",
      "BreadcrumbJsonLd",
      "WebPageJsonLd",
      "FAQJsonLd",
      "ServiceJsonLd",
      "OrganizationJsonLd",
      "ArticleJsonLd",
      "HowToJsonLd",
      "ProfilePageJsonLd",
      "VideoJsonLd",
      "SoftwareAppJsonLd",
      "WebSiteJsonLd"
    ],
    "usage_locations": [
      "src/app/[locale]/layout.tsx",
      "src/app/[locale]/about/page.tsx",
      "src/app/[locale]/blog/page.tsx",
      "src/app/[locale]/blog/[slug]/page.tsx",
      "src/app/[locale]/contact/page.tsx",
      "src/app/[locale]/leistungen/page.tsx",
      "src/app/[locale]/leistungen/[slug]/page.tsx",
      "src/app/[locale]/leistungen/standort/[city]/page.tsx",
      "src/app/[locale]/portfolio/[slug]/page.tsx"
    ]
  }
 }
@@ -0,0 +1,21 @@
 services:
  portfolio:
    container_name: portfolio-website
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3003:3000"
    environment:
      - NODE_ENV=production
      - NEXT_PUBLIC_SUPABASE_URL=${NEXT_PUBLIC_SUPABASE_URL}
      - NEXT_PUBLIC_SUPABASE_ANON_KEY=${NEXT_PUBLIC_SUPABASE_ANON_KEY}
      - NEXT_PUBLIC_GA_TRACKING_ID=${NEXT_PUBLIC_GA_TRACKING_ID}
      - NEXT_PUBLIC_SITE_URL=${NEXT_PUBLIC_SITE_URL}
    restart: unless-stopped
    healthcheck:
      test: ["CMD", "wget", "-q", "--spider", "http://localhost:3000"]
      interval: 30s
      timeout: 10s
      retries: 3
      start_period: 40s
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+/// <reference path="./.next/types/routes.d.ts" />
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
@@ -6,18 +6,6 @@ const withNextIntl = createNextIntlPlugin('./src/i18n/request.ts');
 const nextConfig: NextConfig = {
  output: 'standalone',
  outputFileTracingRoot: process.cwd(),
  // Enable React strict mode for better error detection
  reactStrictMode: true,
  // Temporarily ignore TypeScript during build (pre-existing issues)
  typescript: {
    ignoreBuildErrors: true,
  },
  // Remove X-Powered-By header for security
  poweredByHeader: false,
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
@@ -25,8 +13,6 @@ const nextConfig: NextConfig = {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    // Cache remote images for 30 days
    minimumCacheTTL: 60 * 60 * 24 * 30,
    remotePatterns: [
      {
        protocol: 'https',
@@ -36,21 +22,14 @@ const nextConfig: NextConfig = {
  },
  experimental: {
-    // Tree-shake large packages for smaller bundles
+    optimizePackageImports: ['lucide-react', 'framer-motion'],
    optimizePackageImports: [
      'lucide-react',
      'framer-motion',
      '@supabase/supabase-js',
      'clsx',
      'tailwind-merge',
      'react-intersection-observer',
    ],
  },
  async headers() {
-    // Security headers for all routes
+    return [
-    // Note: Content-Security-Policy is handled by @next-safe/middleware in src/middleware.ts
+      {
-    const securityHeaders = [
+        source: '/:path*',
        headers: [
          {
            key: 'X-DNS-Prefetch-Control',
            value: 'on',
@@ -63,54 +42,36 @@ const nextConfig: NextConfig = {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
-      {
+        ],
        key: 'X-XSS-Protection',
        value: '1; mode=block',
      },
      {
-        key: 'Referrer-Policy',
+        source: '/fonts/:path*',
-        value: 'strict-origin-when-cross-origin',
+        headers: [
      },
      {
        // Enforce HTTPS (1 year, include subdomains, allow preload list)
        key: 'Strict-Transport-Security',
        value: 'max-age=31536000; includeSubDomains; preload',
      },
      {
        // Restrict browser features for security
        key: 'Permissions-Policy',
        value: 'camera=(), microphone=(), geolocation=(), interest-cohort=()',
      },
    ];
    // Long-term caching for immutable assets
    const immutableCacheHeader = [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
-    ];
+        ],
    return [
      // Apply security headers to all routes
      {
        source: '/:path*',
        headers: securityHeaders,
      },
      // Cache static assets aggressively
      {
        source: '/fonts/:path*',
        headers: immutableCacheHeader,
      },
      {
        source: '/images/:path*',
-        headers: immutableCacheHeader,
+        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
      {
        source: '/_next/static/:path*',
-        headers: immutableCacheHeader,
+        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
-      // Content-Language headers for SEO (important for Bing and other search engines)
+        ],
      },
      // Content-Language Headers für jede Sprache (wichtig für Bing)
      {
        source: '/de/:path*',
        headers: [
@@ -141,7 +102,7 @@ const nextConfig: NextConfig = {
    ];
  },
-  // Compiler optimizations
+  // Compiler-Optimierungen
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },
@@ -19,11 +19,11 @@
    "test:coverage": "vitest run --coverage"
  },
  "dependencies": {
    "openai": "^4.77.0",
    "@mdx-js/loader": "^3.1.0",
    "@mdx-js/mdx": "^3.1.0",
    "@mdx-js/react": "^3.1.0",
-    "@next-safe/middleware": "^0.10.0",
+    "@next/mdx": "^15.1.0",
    "@next/mdx": "^16.1.0",
    "@supabase/ssr": "^0.8.0",
    "@supabase/supabase-js": "^2.39.7",
    "class-variance-authority": "^0.7.1",
@@ -31,48 +31,33 @@
    "framer-motion": "^11.18.2",
    "gray-matter": "^4.0.3",
    "lucide-react": "^0.475.0",
-    "next": "^16.1.0",
+    "next": "^15.1.0",
-    "next-intl": "^4.7.2",
+    "next-intl": "^3.26.0",
-    "openai": "^4.77.0",
+    "next-mdx-remote": "^5.0.0",
-    "pg": "^8.13.1",
+    "react": "^19.0.0",
-    "react": "^19.2.0",
+    "react-dom": "^19.0.0",
    "react-dom": "^19.2.0",
    "react-ga4": "^2.1.0",
    "react-intersection-observer": "^9.8.1",
    "tailwind-merge": "^3.0.1",
    "tailwindcss-animate": "^1.0.7",
    "web-vitals": "^5.1.0"
  },
  "devDependencies": {
-    "@playwright/test": "^1.58.0",
+    "@tailwindcss/forms": "^0.5.7",
    "@tailwindcss/forms": "^0.5.11",
    "@tailwindcss/postcss": "^4.1.0",
    "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^16.1.0",
+    "@testing-library/react": "^14.0.0",
    "@types/mdx": "^2.0.13",
    "@types/node": "^22.0.0",
-    "@types/pg": "^8.11.10",
+    "@types/react": "^19.0.0",
-    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.0.0",
    "@types/react-dom": "^19.2.0",
    "@vitest/coverage-v8": "1.6.1",
    "autoprefixer": "^10.4.18",
    "eslint": "^9.9.1",
-    "eslint-config-next": "^16.1.0",
+    "eslint-config-next": "^15.1.0",
    "jsdom": "^23.2.0",
    "playwright-lighthouse": "^4.0.0",
    "postcss": "^8.4.35",
    "sharp": "^0.34.3",
-    "tailwindcss": "^4.1.0",
+    "tailwindcss": "^3.4.1",
-    "typescript": "5.9.3",
+    "typescript": "^5.5.3",
    "vitest": "^1.3.1"
  },
  "pnpm": {
    "onlyBuiltDependencies": [
      "@parcel/watcher",
      "@swc/core",
      "esbuild",
      "sharp",
      "unrs-resolver"
    ],
    "ignoredBuiltDependencies": []
  }
 }
@@ -1,89 +0,0 @@
 import { defineConfig, devices } from '@playwright/test';
 /**
 * Playwright configuration for E2E and performance testing.
 *
 * This configuration is optimized for:
 * - Chromium-only testing (required for Lighthouse integration)
 * - Performance audits with playwright-lighthouse
 * - Testing Next.js application across all locales (de, en, sr)
 *
 * @see https://playwright.dev/docs/test-configuration
 */
 export default defineConfig({
  // Test directory
  testDir: './tests/e2e',
  // Run tests in files in parallel
  fullyParallel: true,
  // Fail the build on CI if you accidentally left test.only in the source code
  forbidOnly: !!process.env.CI,
  // Retry on CI only
  retries: process.env.CI ? 2 : 0,
  // Limit workers to avoid overwhelming the dev server
  workers: process.env.CI ? 1 : 4,
  // Reporter to use
  reporter: [
    ['html', { open: 'never' }],
    ['list'],
  ],
  // Shared settings for all projects
  use: {
    // Base URL - test against running Docker container
    baseURL: process.env.BASE_URL || 'http://localhost:3001',
    // Collect trace when retrying the failed test
    trace: 'on-first-retry',
    // Take screenshot on failure
    screenshot: 'only-on-failure',
  },
  // Configure projects for E2E testing
  // Note: --remote-debugging-port removed to allow parallel test execution.
  // For Lighthouse performance tests, use a separate config with a single worker.
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    },
    // Mobile Chrome for responsive testing
    {
      name: 'mobile-chrome',
      use: {
        ...devices['Pixel 5'],
      },
    },
    // Tablet viewport for responsive testing
    {
      name: 'tablet',
      use: {
        viewport: { width: 768, height: 1024 },
      },
    },
  ],
  // Use running Docker container - no webServer needed
  // webServer: {
  //   command: 'pnpm dev --port 3100',
  //   url: 'http://localhost:3100',
  //   reuseExistingServer: false,
  //   timeout: 120000,
  // },
  // Global timeout for each test
  timeout: 60000,
  // Expect timeout
  expect: {
    timeout: 10000,
  },
 });
@@ -1,6 +0,0 @@
 ignoredBuiltDependencies:
  - '@parcel/watcher'
  - '@swc/core'
  - esbuild
  - sharp
  - unrs-resolver
@@ -1,5 +1,6 @@
 module.exports = {
  plugins: {
-    '@tailwindcss/postcss': {},
+    tailwindcss: {},
    autoprefixer: {},
  },
 };
@@ -0,0 +1,27 @@
 {
  "project_type": "single",
  "services": {
    "frontend": {
      "path": ".",
      "tech_stack": ["typescript", "react", "nextjs", "tailwindcss"],
      "framework": "Next.js 15 (App Router)",
      "port": 3000,
      "dev_command": "npm run dev",
      "build_command": "npm run build",
      "test_command": "npm test"
    }
  },
  "infrastructure": {
    "docker": false,
    "database": null,
    "ci_cd": false
  },
  "conventions": {
    "linter": "eslint",
    "formatter": "prettier",
    "testing": "vitest",
    "component_pattern": "Each component directory contains multiple .tsx files with a barrel export index.ts",
    "import_pattern": "Path aliases using @/ for src directory",
    "export_pattern": "index.ts re-exports components using export { ComponentName } or export { default as ComponentName }"
  }
 }
@@ -1,8 +1,16 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+<?xml version="1.0" encoding="UTF-8"?>
-  <rect width="32" height="32" rx="6" fill="#181C14"/>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
-  <g transform="translate(2.5, 4.5) scale(0.027)">
+  <!-- Generator: Adobe Illustrator 29.7.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 8)  -->
-    <path fill="#ECDFCC" d="M965.47,97.09l-461.75,786.4L34.81,97.09h930.65M1000,77.5H0l17.59,29.5,468.89,786.4,17.35,29.1,17.15-29.22L982.73,106.88l17.27-29.38h0Z"/>
+  <defs>
-    <polygon fill="#ECDFCC" points="755.12 213.96 524.03 214.02 544.73 249.03 734.41 249 830.87 249 782.41 330.91 759.95 368.91 687.8 490.96 639.56 572.54 591.35 490.96 519.2 368.98 615.65 368.95 639.56 409.41 663.47 368.95 685.97 330.91 593.15 330.95 496.71 330.95 448.28 249.05 427.57 214.02 379.13 132.11 475.57 132.11 803.57 132.05 900.03 132.02 851.57 213.96 755.12 213.96"/>
+    <style>
-    <polygon fill="#ECDFCC" points="618.8 607.63 570.59 689.19 548.33 726.83 500.09 808.39 451.88 726.83 240.28 369.01 217.81 331 169.39 249.08 265.85 249.08 314.27 330.97 336.73 369.01 500.09 645.29 522.35 607.63 381.23 368.98 358.76 330.97 310.33 249.05 289.61 214.06 245.11 214.06 148.69 214.08 100.24 132.17 196.69 132.14 241.17 132.14 337.64 132.11 386.05 214.02 406.76 249.05 455.21 330.97 477.68 368.98 570.59 526.08 618.8 607.63"/>
+      .st0 {
        fill: #d6d7d8;
      }
    </style>
  </defs>
  <path class="st0" d="M965.47,97.09l-461.75,786.4L34.81,97.09h930.65M1000,77.5H0l17.59,29.5,468.89,786.4,17.35,29.1,17.15-29.22L982.73,106.88l17.27-29.38h0Z"/>
  <g>
    <polygon class="st0" points="755.12 213.96 524.03 214.02 544.73 249.03 734.41 249 830.87 249 782.41 330.91 759.95 368.91 687.8 490.96 639.56 572.54 591.35 490.96 519.2 368.98 615.65 368.95 639.56 409.41 663.47 368.95 685.97 330.91 593.15 330.95 496.71 330.95 448.28 249.05 427.57 214.02 379.13 132.11 475.57 132.11 803.57 132.05 900.03 132.02 851.57 213.96 755.12 213.96"/>
    <polygon class="st0" points="618.8 607.63 570.59 689.19 548.33 726.83 500.09 808.39 451.88 726.83 240.28 369.01 217.81 331 169.39 249.08 265.85 249.08 314.27 330.97 336.73 369.01 500.09 645.29 522.35 607.63 381.23 368.98 358.76 330.97 310.33 249.05 289.61 214.06 245.11 214.06 148.69 214.08 100.24 132.17 196.69 132.14 241.17 132.14 337.64 132.11 386.05 214.02 406.76 249.05 455.21 330.97 477.68 368.98 570.59 526.08 618.8 607.63"/>
  </g>
 </svg>
--- a/Show More
+++ b/Show More