Verified that Next.js build completes successfully before proceeding with
deletion of components-vite and pages-vite directories. Build exited with
code 0 (success).
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Generated responsive image variants for all 4 existing blog posts:
- automated-ad-creatives
- erp-integration-breuninger
- fullstack-development-timetracking
- rfid-automation
Each post now has optimized cover images in multiple sizes:
- JPG variants: 200w, 300w, 400w, 600w, 800w, 1200w
- WebP variants: 200w, 300w, 400w, 600w, 800w, 1200w
- Optimized originals: cover.jpg, cover.webp
This matches the optimization pipeline used for project images and
enables responsive image loading with WebP support.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Extended the image optimization script to process both project and blog post images:
- Added constants for posts input/output directories
- Refactored processImage to accept output directory parameter
- Updated processDirectory to handle multiple content types
- Main function now processes both projects and posts directories
- Gracefully handles missing directories with informative messages
Created comprehensive test page at src/app/test-localstorage/page.tsx to verify useLocalStorage hook functionality in the browser.
Test Coverage:
- String values (basic get/set)
- Complex objects (nested properties)
- Arrays (add/remove items)
- Numbers (increment/decrement)
- Remove functionality
- State persistence across page refreshes
- Real-time localStorage updates visible in DevTools
Verification Guide:
A detailed manual verification guide has been created at .auto-claude/specs/004-add-uselocalstorage-custom-hook/MANUAL_VERIFICATION.md with step-by-step instructions for browser testing.
Manual Verification Checklist:
- [ ] No hydration errors in console
- [ ] localStorage updates visible in DevTools
- [ ] State persists across page refresh
- [ ] No TypeScript errors (verified with npx tsc --noEmit)
TypeScript compilation verified with no errors.
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>
- Switched from npm ci to pnpm install --frozen-lockfile
- Added corepack enable for pnpm support
- Added .dockerignore for cleaner builds
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>
- Entry-Script wird mit hoher Priorität vorgeladen
- Schnellerer JavaScript-Download und Ausführung
🤖 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>
- Portrait-Bild wird sofort in HTML gerendert (kein JS-Warten)
- Skeleton wird ausgeblendet wenn React mounted
- Unnötige preconnects entfernt
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Font Subsetting mit fonttools für Latin + German Zeichen
- 83% Reduktion der Font-Datei
- PageSpeed API Script hinzugefügt
🤖 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>
