- Created BlogList client component with search and category filtering
- Integrated SearchBar and CategoryFilter components
- Implemented case-insensitive search by title/excerpt/tags
- Added category filtering with AND logic for combined filters
- Updated pagination to work with filtered results
- Added search placeholder translations for de/en/sr
- Moved blog card and pagination logic to client component
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Created CategoryFilter component with the following features:
- Client component with 'use client' directive and framer-motion animations
- Props: categories, selectedCategory, onCategoryChange, className
- Uses lucide-react Tag icon
- Responsive design: horizontal scrollable on mobile, grid layout on desktop
- Active category highlighted with bg-[#697565] text-white
- Includes 'All' option to clear filter
- Follows established patterns from SearchBar and ContactForm
- Consistent styling with bg-zinc-900/50 and border-zinc-800
- Smooth transitions and hover states
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Import Clock icon from lucide-react
- Export calculateReadingTime function from blog.ts
- Calculate reading time for post content
- Display reading time in post header with Clock icon
- Format matches listing page: "X min read"
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Added Clock icon import and reading time display to BlogPostCard component.
The reading time now appears between the date and tags with the format "X min read".
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add comprehensive E2E functionality tests (33 tests):
- Navigation: page loading, desktop/mobile nav links, active states
- Contact Form: validation, submission, error handling
- Language Switching: locale changes, URL preservation, dropdown behavior
- Cross-functional: combined navigation and language flows
- Accessibility: ARIA attributes for nav, menu, form labels
- Fix Next.js 15 ssr:false in server component issue:
- Create ChatbotLoader client wrapper for dynamic import
- Update layout.tsx to use ChatbotLoader instead of direct dynamic import
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added comprehensive GDPR-compliant privacy policy translations to all locale
message files (de.json, en.json, sr.json). Translations include:
- Full introduction and data controller sections
- Detailed data collection information (automatic and contact form data)
- Cookie and local storage explanations with duration
- Third-party services (Google Analytics, Supabase, Deepseek API, Vercel)
- Legal basis for processing under GDPR (Art. 6)
- Complete user rights sections (access, rectification, erasure, etc.)
- Data retention and security policies
- Contact information for privacy inquiries
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Complete rewrite following imprint page pattern
- Comprehensive GDPR-compliant sections in DE/EN/SR
- Lists all third-party services: Google Analytics, Supabase, Deepseek API, Vercel
- Detailed cookie table with types, purposes, and durations
- Full user rights section with GDPR articles (15-21, 77)
- Legal basis for data processing (Art. 6 GDPR)
- Data controller information, retention policies, security measures
- Proper SEO metadata with alternates and canonical URLs
- Import dynamic from next/dynamic for lazy loading
- Create lazy-loaded Chatbot component with ssr: false
(uses browser-only APIs like localStorage)
- Add Chatbot inside NextIntlClientProvider for i18n support
- Component loads on client-side only for optimal performance
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Created Chatbot.tsx with floating chat bubble UI
- Implemented streaming SSE message handling
- Added visitor ID persistence via localStorage for session continuity
- Integrated with /api/chat endpoint for AI responses
- Added suggested prompts for empty chat state
- Implemented error handling with retry functionality
- Added clear chat functionality
- Created responsive design with mobile support
- Created index.ts barrel export for chat components
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Created ChatMessage.tsx component with:
- ChatMessage component for displaying user/assistant messages
- Styled differently based on role (user right-aligned, assistant left-aligned)
- Framer Motion animations for smooth appearance
- Streaming indicator for real-time response display
- TypingIndicator component for loading state
- WelcomeMessage component for empty chat state
- Timestamp formatting utility
- Responsive design following existing Tailwind patterns
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Implemented Next.js API route at /api/chat with:
- POST endpoint for sending messages with streaming responses (SSE)
- GET endpoint for retrieving chat history
- OPTIONS endpoint for CORS preflight
- Integration with Deepseek API via createStreamingChatCompletion
- Session management via getOrCreateChatSession (24h continuity)
- Message persistence to Supabase (user + assistant messages)
- Context management with 20-message history limit
- Error handling for API key/database issues
- Request validation for required fields (message, visitorId)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Create SQL migration for chatbot database tables:
- chat_sessions: Stores visitor session data with visitor_id, metadata, timestamps
- chat_messages: Stores chat messages with role (user/assistant/system), content
- Proper indexes for visitor lookup and message ordering
- Row Level Security (RLS) enabled with policies for:
- Service role full access (for server-side API)
- Visitor-based access via x-visitor-id header (for potential future client-side)
- Trigger for automatic updated_at column on chat_sessions
Also updated ChatSession interface in chat.ts to include updated_at field.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Deepseek client using OpenAI SDK with custom baseURL
- Implement createDeepseekClient() factory function with lazy initialization
- Add ChatMessage type definitions for type safety
- Include portfolio-specific system prompt for the chatbot
- Support both streaming and non-streaming chat completions
- Configure default model (deepseek-chat) and sensible defaults
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove outdated static public/sitemap.xml that conflicted with dynamic sitemap.ts
(was missing leistungen pages, city pages, and had outdated blog/portfolio slugs)
- Fix robots.ts to reference only the single sitemap.xml instead of non-existent
language-specific sitemaps (sitemap-de.xml, sitemap-en.xml, sitemap-sr.xml)
- Dynamic sitemap.ts now handles all pages with proper hreflang alternates
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added missing OpenGraph and Twitter card metadata to about, contact, and portfolio pages:
- Added siteName to OpenGraph metadata
- Added OpenGraph images with proper dimensions (1200x630)
- Added Twitter card metadata (summary_large_image)
All pages now follow the home page metadata pattern for consistent SEO.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Enhanced JSON-LD structured data coverage with the following improvements:
## PersonJsonLd Enhancements:
- Added hasOccupation with skills and occupationLocation
- Added knowsLanguage (German, English, Serbian)
- Added worksFor reference to business
- Added nationality for geo-targeting
- Enhanced knowsAbout with Claude AI, GPT-4, LangChain
- Upgraded image to ImageObject with dimensions
## New Components:
- ContactPageJsonLd: Contact page with ContactPoint entity
- CollectionPageJsonLd: Portfolio page with ItemList for projects
- ItemListJsonLd: Generic list schema for any items
## WebSiteJsonLd Enhancement:
- Added SearchAction for sitelinks search box
## Page Updates:
- Contact page now uses ContactPageJsonLd
- Portfolio page now uses CollectionPageJsonLd and BreadcrumbJsonLd
All schemas use @id cross-references for proper entity linking.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Created PAGESPEED_VERIFICATION_REPORT.md with comprehensive audit results
- Fixed robots.txt conflict by removing static public/robots.txt
- Updated src/app/robots.ts to include language-specific sitemaps (de, en, sr)
- Local Lighthouse tests: Accessibility 92-100%, Best Practices 100%
- Performance/SEO verification requires manual testing via pagespeed.web.dev
- Added .auto-claude/ to .gitignore
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create WebVitals client component in src/components/analytics/
- Track LCP, INP, CLS, FCP, and TTFB metrics
- Log metrics to console in development mode
- Send metrics to Google Analytics when available
- Add WebVitals component to root layout
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add 15 optimized WebP images for portfolio (21-53KB each)
- Redesign Hero section with full-width background image
- Add SSR support for Hero component
- Update About section with new portrait image
- Update Contact page with professional headshot
- Add images to Services/Leistungen page
- Add image optimization script (sharp)
- Update translations for gallery section
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Linkedin und Github Icons aus lucide-react importiert
- fixed zu absolute geändert (nicht mehr sticky)
- Styling wie im Footer (text-zinc-400, hover-Effekte)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- LinkedIn Icon durch "in" Text ersetzt
- GitHub Icon durch "</>" Text ersetzt
- Beide Icons haben bg-white/10 Hintergrund und hover-Effekte
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- SVGs direkt inline statt separate Komponenten
- Buttons mit bg-white/10 Hintergrund für Sichtbarkeit
- Fixed position statt absolute
- Runde Buttons mit Hover-Effekt
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Gefüllte SVG Icons (fill="#ffffff")
- Standard LinkedIn/GitHub/Mail Icon Pfade
- Sollte jetzt definitiv sichtbar sein
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- stroke="currentColor" durch stroke="#ffffff" ersetzt
- Icons sind jetzt garantiert sichtbar
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Von top-4 auf top-20 verschoben (unter 64px Navigation)
- z-index auf 50 erhöht für Sichtbarkeit
- LinkedIn und GitHub Icons jetzt sichtbar
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Buttons werden vertikal gestapelt auf kleinen Bildschirmen
- Ab sm-Breakpoint (640px) nebeneinander
- Volle Breite auf Mobile für bessere Bedienbarkeit
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Inline SVG Icons statt lucide-react Import
- Icons werden sofort gerendert ohne Lazy-Loading-Verzögerung
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- i18n lädt EN/SR Übersetzungen nur bei Bedarf
- Hauptbundle von 356KB auf 179KB reduziert (~50%)
- Entfernt modulepreload für nicht-kritische Chunks
- Nur react-vendor und i18n-vendor werden vorgeladen
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Framer-motion aus Layout, NavLink, ContactInfo, LanguageSwitcher entfernt
- PageTransition komplett vereinfacht (keine 1200ms Verzögerung mehr)
- FloatingPaths wird erst nach 2s lazy geladen
- Framer-motion und lucide-react in separate Chunks getrennt
- Icons-Chunk: 10.87KB (statt 126KB ui-vendor)
- Animations-Chunk wird erst bei Bedarf geladen
Einsparung: ~115KB beim Initial Load
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Portrait-Bild von 1.2MB auf ~20KB optimiert (300px/600px + WebP)
- Hero-Animation entfernt für schnelleren LCP
- WebP srcset für alle Projekt-Bilder (6 Größen: 200-1200px)
- Korrekte sizes-Attribute für Mobile (350px statt 1200px)
- Supabase lazy laden via dynamischen Import
- Admin-Check verzögert mit requestIdleCallback
- Hauptbundle von 461KB auf 358KB reduziert
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- LCP-Bild (Portrait) mit fetchpriority="high" und Preload optimiert
- Logo SVG mit expliziten width/height Attributen versehen (CLS)
- Touch-Targets in Experience Navigation von 5px auf 24px vergrößert
- Kontrast für Firmenname/Zeitraum verbessert (zinc-300/zinc-400)
- PWA Service Worker mit script-defer für nicht-blockierendes Laden
- Responsive Bilder: srcset mit 400w/800w/1200w + WebP-Format
- Neues Build-Script für Bildoptimierung (scripts/optimize-images.js)
- Original-Bilder in source-images/ verschoben (gitignored)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Alle Portfolio-Projekte haben jetzt Datumsangaben aus 2025
- Betrifft DE, EN und SR Sprachversionen
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- RecRobot-Projektdateien (DE/EN/SR Locales, MDX) gelöscht
- RecRobot-Bilder entfernt
- Alle Referenzen in Portfolio-Index, Experience, About und Meta bereinigt
- README.md aktualisiert
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Übersetzungsdateien für DE, EN, SR erstellt
- Projekt in ProjectPage.tsx registriert
- Projekt in Portfolio-Index (de, en, sr) hinzugefügt
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Neue Projektseite für Cursor IDE Tutorial
- Video-Einbettung von tella.tv
- Cover-Bild hinzugefügt
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- ai-music-production.mdx erstellt (Projekt war nicht in Portfolio sichtbar)
- automated-ad-creatives Import zu allen Portfolio-Index-Dateien hinzugefügt
- Behebt: Deutsches Fallback auf englischer Seite für Ad Creatives
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Neues Portfolio-Projekt für KI-gestützte Musikproduktion mit Suno AI:
- Übersetzungen in DE/EN/SR
- Video-Einbettung (Tella.tv)
- Workflow-Dokumentation für Songwriting mit KI
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
