Add portfolio content and design spec for Otis

content/design-spec.md

@@ -0,0 +1,57 @@
+# 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