monkey-island/portfolio
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e9403188c4ff4eb3f468384175106bd9192371e5
portfolio/content/design-spec.md

2.2 KiB
Raw Blame History

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