# Portfolio — Design Spec

## Visual Direction
Modern SaaS landing page style. Inspired by n8n.io, openclaw.ai, claude.ai, openai.com.

## Theme
- **Dark mode primary** (deep gray/near-black background, light text)
- Light mode optional (can add later)

## Typography
- **Font:** Inter or Geist Sans (clean, modern sans-serif)
- **Headings:** Bold, large, high contrast
- **Body:** Regular weight, comfortable reading size (16-18px base)

## Colors
- **Background:** `#0a0a0a` to `#111111` range
- **Text:** White/off-white (`#fafafa` / `#e5e5e5`)
- **Muted text:** `#888888` to `#a1a1a1`
- **Accent:** Single strong color — TBD (suggest warm orange, electric blue, or green)
- **Cards:** Subtle borders (`#222`) or glass/frosted effect with slight transparency
- **Hover states:** Accent color glow or brightness shift

## Layout
1. **Navbar** — Logo/name left, 3-4 section links right, language switcher, CTA button
2. **Hero** — Big bold headline, one-line subtitle, CTA button. Centered or left-aligned.
3. **Services** — 4 cards in a 2x2 grid (stack on mobile)
4. **Projects** — Card grid with title, short description, tech stack tags
5. **About** — Short bio, tech stack icon grid, languages
6. **Contact** — Email + links (LinkedIn, GitHub/Gitea)
7. **Footer** — Minimal, copyright + links

## Components
- **Cards:** Rounded corners (8-12px), subtle border or glass effect
- **Tags/badges:** For tech stack items (small, rounded, muted background)
- **Buttons:** Rounded, accent color, clear hover state
- **Dividers:** Subtle gradient lines or just whitespace

## Animations
- Fade-in on scroll (subtle, 200-300ms)
- Nothing else — no parallax, no particle effects, no hero animations

## Responsive
- Mobile-first
- Cards stack to single column on mobile
- Navbar collapses to hamburger
- Large tap targets for mobile

## i18n
- Language switcher in navbar (EN / DE / ES)
- URL structure: `/en/`, `/de/`, `/es/`
- Default locale: `en`

## Reference Sites
- https://n8n.io — dark, cards, clean sections
- https://openclaw.ai — bold hero, testimonials, dark
- https://openai.com — minimal, monochrome, typography-focused
- https://claude.ai — warm tones, generous whitespace