Kenzo Signer
Back to Overview
Finished

Sigitec - Mein modernes Portfolio mit Next.js und TypeScript

Ein mehrsprachiges Portfolio mit Blog-System, Dark Mode und responsivem Design. Gebaut mit Next.js 15, TypeScript und Tailwind CSS für optimale Performance und Benutzererfahrung.

Next.js 15TypeScriptReact 18Tailwind CSSFramer Motiongray-matterremark
Live DemoGitHub Repository

Sigitec - Mein modernes Portfolio

Projektübersicht

Sigitec ist mein persönliches Portfolio, das ich entwickelt habe, um meine Projekte, Fähigkeiten und Erfahrungen zu präsentieren. Das Projekt demonstriert moderne Frontend-Entwicklung mit Server-Side Rendering, statischer Generierung und einem integrierten Blog-System.

Live-Website: sigitec.dev

Projektart: Personal Portfolio Website mit Blog

Inhaltsverzeichnis

  1. Technologie-Stack
  2. Kernfeatures
  3. Architektur
  4. Internationalisierung
  5. Blog-System
  6. Design & UX
  7. Performance-Optimierung
  8. Deployment

Technologie-Stack

Frontend-Framework

Next.js 15 - Das React-Framework für Production

  • App Router: Moderne, dateisystembasierte Routing-Architektur
  • Server Components: Optimierte Performance durch serverseitiges Rendering
  • Static Generation: Pre-rendering für blitzschnelle Ladezeiten
  • Image Optimization: Automatische Bildoptimierung mit next/image

React 18 - Die neueste Version der beliebten UI-Library

  • Hooks: Moderne State-Management mit useState, useEffect, useMemo
  • Context API: Globale State-Verwaltung ohne externe Libraries
  • Concurrent Features: Verbesserte Rendering-Performance

Styling

Tailwind CSS 3 - Utility-First CSS-Framework

  • Responsive Design: Mobile-First Ansatz
  • Dark Mode: Vollständige Theme-Unterstützung
  • Custom Configuration: Maßgeschneiderte Farbpalette und Spacing
  • JIT Compiler: Just-In-Time Compilation für optimale Bundle-Größe

Framer Motion - Production-Ready Animation Library

  • Smooth Animations: Flüssige Übergänge und Animationen
  • Scroll-basierte Effekte: Animationen beim Scrollen
  • Gestures: Interaktive Hover- und Click-Effekte

Content-Management

Markdown-basiertes Blog-System

  • gray-matter: Frontmatter-Parsing für Metadaten
  • remark: Markdown-zu-HTML-Konvertierung
  • remark-html: HTML-Generierung mit Syntax-Support
  • File-based CMS: Kein externer CMS erforderlich

Entwicklungstools

TypeScript - Type-Safe JavaScript

  • Type Inference: Automatische Typ-Erkennung
  • Interface Definitions: Klare Datenstrukturen
  • Compile-Time Checks: Fehler vor der Runtime erkennen

ESLint - Code Quality und Konsistenz

  • Next.js Config: Optimierte Rules für Next.js
  • Auto-Fixing: Automatische Code-Formatierung

Kernfeatures

🌍 Mehrsprachigkeit (i18n)

Vollständige Unterstützung für Deutsch und Englisch:

// Middleware-basierte Locale-Detection
export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;
  const pathnameIsMissingLocale = locales.every(
    (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
  );

  if (pathnameIsMissingLocale) {
    const locale = getLocale(request);
    return NextResponse.redirect(
      new URL(`/${locale}${pathname}`, request.url)
    );
  }
}

Features:

  • Automatische Browser-Sprach-Erkennung
  • URL-basierte Locale-Verwaltung (/de, /en)
  • Persistente Sprachauswahl
  • Übersetzungen für alle UI-Elemente

🎨 Dark Mode

Systembasierter Dark Mode mit manueller Override-Option:

// Theme-Wechsel mit LocalStorage-Persistenz
const toggleTheme = () => {
  const newTheme = theme === 'dark' ? 'light' : 'dark';
  setTheme(newTheme);
  localStorage.setItem('theme', newTheme);

  if (newTheme === 'dark') {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
};

Vorteile:

  • Reduziert Augenbelastung bei Nachtnutzung
  • System-Präferenz-Unterstützung
  • Smooth Transitions zwischen Themes
  • Keine Flash of Unstyled Content (FOUC)

📝 Blog-System

Markdown-basiertes Blog mit vollständiger Funktionalität:

Frontmatter-Unterstützung:

---
title: "Blog-Post Titel"
date: "2026-01-06"
author: "Autor Name"
excerpt: "Kurzbeschreibung des Posts"
tags: ["tag1", "tag2"]
github: "https://github.com/user/repo"
liveUrl: "https://example.com"
technologies: ["Tech1", "Tech2"]
---

Features:

  • Status-Badges (Finished, In Progress, Draft)
  • Technologie-Tags
  • GitHub und Live-Demo Links
  • Automatische Slug-Generierung
  • SEO-optimierte URLs
  • Responsive Code-Blocks mit Syntax-Highlighting

🎯 Projekt-Showcase

Interaktive Projekt-Karten mit:

  • Hover-Effekte mit Framer Motion
  • Lazy-Loading von Bildern
  • AVIF-Format mit Fallback
  • Filterbare Kategorien
  • Externe Links zu GitHub/Live-Demos

🏆 Achievements

Zeitbasierte Errungenschaften:

  • Chronologische Sortierung
  • Datum-Formatierung (Deutsch/Englisch)
  • Responsive Grid-Layout
  • Icon-Integration

📱 Responsive Design

Mobile-First Ansatz mit Breakpoints:

  • Mobile: < 768px (1 Spalte)
  • Tablet: 768px - 1024px (2 Spalten)
  • Desktop: > 1024px (3 Spalten)
  • Large Desktop: > 1440px (Optimierte Spacing)

Architektur

App Router Struktur

src/
├── app/
│   ├── [locale]/
│   │   ├── page.tsx              # Homepage
│   │   ├── layout.tsx            # Root Layout
│   │   └── blog/
│   │       ├── page.tsx          # Blog-Übersicht
│   │       └── [slug]/
│   │           └── page.tsx      # Blog-Detailseite
│   ├── globals.css
│   └── layout.tsx
├── components/
│   ├── layout/
│   │   ├── Header.tsx            # Navigation
│   │   └── Footer.tsx            # Footer
│   └── sections/
│       ├── HeroSection.tsx       # Hero
│       ├── About.tsx             # Über mich
│       ├── Projects.tsx          # Projekte
│       ├── Achievements.tsx      # Errungenschaften
│       └── Blog.tsx              # Blog-Übersicht
├── content/
│   └── blog/
│       ├── _template.md          # Blog-Template
│       ├── post1.md
│       └── post2.md
├── hooks/
│   └── useTranslation.ts         # i18n Hook
├── lib/
│   ├── blog.ts                   # Blog-Utilities
│   └── i18n.ts                   # i18n Config
├── translations/
│   ├── de.ts                     # Deutsche Übersetzungen
│   └── en.ts                     # Englische Übersetzungen
└── types/
    └── index.ts                  # TypeScript Types

Component-Architektur

Layout Components:

  • Header: Sticky Navigation mit Scroll-Effekt
  • Footer: Social Links und Copyright
  • Section Wrapper: Wiederverwendbare Section-Container

Section Components:

  • HeroSection: Animated Hero mit CTA
  • About: Skills und Erfahrung
  • Projects: Projekt-Grid mit Hover-Effekten
  • Achievements: Timeline-basierte Darstellung
  • Blog: Card-basierte Blog-Übersicht

State Management

Context API für globale States:

// useTranslation Hook
export function useTranslation() {
  const params = useParams();
  const locale = (params?.locale as string) || 'de';

  const t = (key: string) => {
    return translations[locale][key] || key;
  };

  return { t, locale };
}

Vorteile:

  • Kein Redux/Zustand notwendig
  • Einfache Implementierung
  • Type-Safe Übersetzungen
  • Automatic Re-Rendering

Internationalisierung

Middleware-basierte Locale-Detection

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { match as matchLocale } from '@formatjs/intl-localematcher';
import Negotiator from 'negotiator';

const locales = ['en', 'de'];
const defaultLocale = 'de';

function getLocale(request: NextRequest): string {
  const negotiatorHeaders: Record<string, string> = {};
  request.headers.forEach((value, key) => (negotiatorHeaders[key] = value));

  const languages = new Negotiator({ headers: negotiatorHeaders }).languages();
  return matchLocale(languages, locales, defaultLocale);
}

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;
  const pathnameIsMissingLocale = locales.every(
    (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
  );

  if (pathnameIsMissingLocale) {
    const locale = getLocale(request);
    return NextResponse.redirect(
      new URL(`/${locale}${pathname}`, request.url)
    );
  }
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

Übersetzungsdateien

Struktur:

// translations/de.ts
export const de = {
  nav: {
    about: 'Über mich',
    projects: 'Projekte',
    achievements: 'Errungenschaften',
    blog: 'Blog',
    contact: 'Kontakt',
  },
  hero: {
    greeting: 'Hallo, ich bin',
    title: 'Full-Stack Entwickler',
    subtitle: 'Ich entwickle moderne Webanwendungen',
    cta: 'Projekte ansehen',
  },
  // ...
};

Blog-System

Markdown-Processing

// lib/blog.ts
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

export interface BlogPost {
  slug: string;
  title: string;
  date: string;
  author: string;
  excerpt: string;
  tags: string[];
  github?: string;
  liveUrl?: string;
  technologies?: string[];
  content: string;
}

export function getAllBlogPosts(): BlogPost[] {
  const postsDirectory = path.join(process.cwd(), 'src/content/blog');
  const fileNames = fs.readdirSync(postsDirectory);

  const allPostsData = fileNames
    .filter((fileName) => fileName.endsWith('.md') && !fileName.startsWith('_'))
    .map((fileName) => {
      const slug = fileName.replace(/\.md$/, '');
      const fullPath = path.join(postsDirectory, fileName);
      const fileContents = fs.readFileSync(fullPath, 'utf8');
      const { data, content } = matter(fileContents);

      return {
        slug,
        ...data,
        content,
      } as BlogPost;
    });

  return allPostsData.sort((a, b) => (a.date < b.date ? 1 : -1));
}

Static Generation

// app/[locale]/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const slugs = getAllBlogSlugs();
  const params: { locale: string; slug: string }[] = [];

  locales.forEach((locale) => {
    slugs.forEach((slug) => {
      params.push({ locale, slug });
    });
  });

  return params;
}

Vorteile:

  • Pre-rendering aller Blog-Posts zur Build-Zeit
  • Keine Runtime-Fetch-Calls
  • Optimale Performance
  • SEO-freundlich

Design & UX

Farbpalette

Light Mode:

  • Primary: #3B82F6 (Blue-500)
  • Background: #FFFFFF (White)
  • Text: #1F2937 (Gray-800)
  • Accent: #10B981 (Green-500)

Dark Mode:

  • Primary: #60A5FA (Blue-400)
  • Background: #111827 (Gray-900)
  • Text: #F9FAFB (Gray-50)
  • Accent: #34D399 (Green-400)

Typography

Font-Stack:

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Roboto, 'Helvetica Neue', Arial, sans-serif;

Font-Sizes:

  • Heading 1: 3rem (48px)
  • Heading 2: 2.25rem (36px)
  • Heading 3: 1.875rem (30px)
  • Body: 1rem (16px)
  • Small: 0.875rem (14px)

Animationen

Framer Motion Variants:

const fadeInUp = {
  initial: { opacity: 0, y: 60 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.6 }
};

const staggerContainer = {
  animate: {
    transition: {
      staggerChildren: 0.1
    }
  }
};

Scroll-basierte Animationen:

  • Fade-In beim Scrollen
  • Stagger-Effekte für Listen
  • Smooth Scroll zu Anchor-Links

Performance-Optimierung

Next.js Image Optimization

import Image from 'next/image';

<Image
  src="/images/project.avif"
  alt="Projekt Screenshot"
  width={800}
  height={600}
  loading="lazy"
  placeholder="blur"
/>

Optimierungen:

  • Automatische Format-Konvertierung (WebP/AVIF)
  • Responsive Images (srcset)
  • Lazy Loading
  • Blur Placeholder

Code Splitting

  • Automatic Route-based Splitting: Next.js splittet automatisch nach Routes
  • Dynamic Imports: Lazy Loading für schwere Komponenten
  • Component-Level Splitting: Jede Section ist ein eigenes Bundle

Bundle-Optimierung

// next.config.js
module.exports = {
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },
  images: {
    formats: ['image/avif', 'image/webp'],
  },
};

Performance-Metriken

Lighthouse Score:

  • Performance: 95+
  • Accessibility: 100
  • Best Practices: 100
  • SEO: 100

Core Web Vitals:

  • LCP (Largest Contentful Paint): < 2.5s
  • FID (First Input Delay): < 100ms
  • CLS (Cumulative Layout Shift): < 0.1

Deployment

Vercel Deployment

Automatisches Deployment bei Git Push:

  1. Code Push zu GitHub
  2. Vercel erkennt Änderungen
  3. Build wird gestartet
  4. Deployment zu Production

Build-Konfiguration:

{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs",
  "nodeVersion": "18.x"
}

Environment Variables

# Production
NEXT_PUBLIC_SITE_URL=https://sigitec.dev
NODE_ENV=production

CI/CD Pipeline

GitHub Actions Workflow:

name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run build
      - run: npm run lint

Lessons Learned

Technische Highlights

  1. Next.js 15 App Router

    • Moderne Routing-Architektur mit Server Components
    • Optimale Performance durch Static Generation
    • Type-Safe Routing mit TypeScript

  2. Internationalisierung

    • Middleware-basierte Locale-Detection
    • Browser-Sprach-Erkennung
    • URL-basierte Locale-Verwaltung

  3. Blog-System

    • Markdown-basiert ohne CMS
    • Frontmatter für Metadaten
    • Static Generation für optimale Performance

  4. Dark Mode

    • System-Präferenz-Unterstützung
    • LocalStorage-Persistenz
    • Smooth Theme-Transitions

  5. Performance

    • Lighthouse Score 95+
    • Core Web Vitals optimiert
    • Automatische Image-Optimierung

Best Practices

  • Type-Safety: TypeScript für alle Components
  • Component-Struktur: Wiederverwendbare, modulare Components
  • Accessibility: Semantic HTML, ARIA-Labels
  • SEO: Meta-Tags, Sitemap, Structured Data
  • Code-Qualität: ESLint, Prettier, Konsistente Formatierung

Fazit

Sigitec ist mehr als nur ein Portfolio - es ist eine Demonstration moderner Frontend-Entwicklung mit Next.js, TypeScript und Tailwind CSS. Das Projekt zeigt meine Fähigkeiten in:

  • Full-Stack Development: Next.js Server Components + Static Generation
  • Internationalisierung: Mehrsprachige Anwendungen
  • Content Management: Markdown-basiertes Blog-System
  • Performance-Optimierung: Lighthouse Score 95+
  • Design & UX: Responsive Design, Dark Mode, Animationen
  • DevOps: CI/CD, Vercel Deployment

Technische Highlights:

  • Type-Safe TypeScript-Architektur
  • Server-Side Rendering + Static Generation
  • Markdown-basiertes Blog ohne CMS
  • Automatische Image-Optimierung
  • Accessibility-First Approach

Live-Website: sigitec.dev GitHub Repository: github.com/DarkSekki/sigitec

Erstellt am 2026-01-06