Frontend

Portfolio Website

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

Next.jsTailwind CSSTypeScript

Features

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

Über dieses Projekt

Dieses Portfolio ist mehr als nur eine digitale Visitenkarte – es ist ein Spiegelbild meiner Entwicklung als Software-Entwickler und meiner Philosophie im Code-Design.

Als angehender Fachinformatiker für Anwendungsentwicklung im dritten Lehrjahr bei Lufthansa Industry Solutions habe ich gelernt, dass guter Code nicht nur funktioniert, sondern auch wartbar, zugänglich und performant sein muss.

Mit diesem Portfolio möchte ich zeigen, dass ich:

• **Clean Code** schreibe – lesbar, strukturiert, dokumentiert

• **Performance** ernst nehme – jede Millisekunde zählt

• **Accessibility** priorisiere – Technologie für alle

• **Moderne Standards** umsetze – TypeScript, React, Next.js

Dieses Portfolio wurde von Grund auf selbst entwickelt, ohne Templates oder Frameworks außer Next.js und Tailwind CSS. Jede Zeile Code wurde mit Sorgfalt geschrieben, um Best Practices zu demonstrieren und meine Fähigkeiten zu zeigen.

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>
  );
}

🎨 Portfolio Website

Persönliche Portfolio-Website eines Full-Stack Entwicklers mit Fokus auf minimalistisches Design, Performance und Accessibility.

🛠️ Tech Stack

Framework: Next.js 16 (App Router)
Language: TypeScript
Styling: Tailwind CSS
Markdown: react-markdown + rehype-highlight

🚀 Quick Start

```bash git clone https://github.com/n0xum/p0rtfolio.git cd p0rtfolio/frontend pnpm install pnpm dev ```

📈 Performance

Lighthouse Scores: 100/100 (Performance, Accessibility, Best Practices, SEO)

👤 Author

Alexander Kruska

Website: alexander-kruska.dev
GitHub: @n0xum

⭐ Star this repo if you find it useful!

Über dieses Projekt

Dieses Portfolio ist mehr als nur eine digitale Visitenkarte – es ist ein Spiegelbild meiner Entwicklung als Software-Entwickler und meiner Philosophie im Code-Design.

Mit diesem Portfolio möchte ich zeigen, dass ich:

• **Clean Code** schreibe – lesbar, strukturiert, dokumentiert

• **Performance** ernst nehme – jede Millisekunde zählt

• **Accessibility** priorisiere – Technologie für alle

• **Moderne Standards** umsetze – TypeScript, React, Next.js

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> ); }