Zurück zu Projekten
Frontend

Portfolio Website

Persönliche Portfolio-Website mit minimalistischem Design, entwickelt mit Next.js und optimiert für Performance.

Next.jsTailwind CSSTypeScript
View on GitHub

Features

  • Minimalistisches, responsives Design
  • Dark Mode Support
  • Performance-optimiert
  • SEO-freundlich
  • Accessibility (WCAG 2.1)
  • Smooth Scroll Animationen

Code-Beispiel

Theme-Provider mit localStorage-Persistenz und System-Preference-Detection

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light');
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
    // Sync with localStorage and system preference
    const stored = localStorage.getItem('theme') as Theme;
    const initial = stored ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    setTheme(initial);
  }, []);

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);

    document.documentElement.classList.toggle('dark', newTheme === 'dark');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}