58 lines
2.2 KiB
Markdown
58 lines
2.2 KiB
Markdown
# 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
|