Build portfolio site — Astro + Tailwind CSS, trilingual #1

New Issue

murray · 2026-03-22T11:30:51Z

murray commented

2026-03-22 11:30:51 +00:00

Overview

Build a portfolio website for an automation & AI tooling engineer. The site positions Guybrush for freelance work targeting SMBs and agencies.

Stack: Astro + Tailwind CSS
Languages: English (default), German, Spanish
Domain: portfolio.oc.al3dev.link (deployment handled separately)

Content

All content is provided as markdown files in the Murray workspace. Copy the text exactly (minor formatting adjustments are fine).

Content Files Location

The content files will be committed to this repo at content/ before you start. Read them from there:

content/services.md — 4 service categories
content/projects.md — 4 project case studies
content/about.md — Bio, skills, languages
content/design-spec.md — Full design specification

Design Spec

See content/design-spec.md for the full spec. Key points:

Dark mode primary (near-black background, light text)
Font: Inter or Geist Sans
Single accent color (suggest warm orange #f97316 or similar — pick something that pops on dark)
Card-based layout with subtle borders or glass effect
Fade-in on scroll animations only (subtle, 200-300ms)
Mobile-first responsive
Reference sites: n8n.io, openclaw.ai, openai.com, claude.ai

Page Structure

Navbar — Name/logo left, section links right, language switcher (EN/DE/ES), CTA
Hero — Big bold headline, one-line subtitle, CTA button
Services — 4 cards in 2x2 grid (from services.md)
Projects — Card grid with title, description, tech stack tags (from projects.md)
About — Short bio, tech stack icons/badges, languages spoken (from about.md)
Contact — Email link + placeholder for LinkedIn/GitHub
Footer — Minimal, copyright + links

This is a single-page site with anchor links (not separate pages per section).

i18n Setup

Use Astro's built-in i18n routing:

URL structure: /en/, /de/, /es/
Default locale: en (no prefix redirect to /en/)
Language switcher component in navbar
For now: implement the full i18n structure but only populate English content. German and Spanish translations will be added later as a separate task.
Use a translation file pattern (e.g. src/i18n/en.json) so translations are easy to add.

Technical Requirements

Astro 5.x (latest stable)
Tailwind CSS 4.x
No JavaScript frameworks needed (pure Astro components)
Static output (no SSR)
SEO: meta tags, Open Graph tags, proper semantic HTML
Favicon placeholder
astro.config.mjs with i18n configured

Clean component structure:

src/
  components/
    Navbar.astro
    Hero.astro
    Services.astro
    Projects.astro
    About.astro
    Contact.astro
    Footer.astro
    LanguageSwitcher.astro
  i18n/
    en.json
    de.json  (empty/placeholder)
    es.json  (empty/placeholder)
  layouts/
    Layout.astro
  pages/
    index.astro (redirects to /en/)
    en/
      index.astro
    de/
      index.astro
    es/
      index.astro

Acceptance Criteria

npm run build produces static output with no errors
Site looks good on desktop (1440px) and mobile (375px)
All 4 services rendered as cards
All 4 projects rendered with tech stack tags
About section with bio and skill badges
Language switcher present (EN active, DE/ES link to placeholder pages)
Fade-in scroll animations work
Navbar is responsive (hamburger on mobile)
Dark theme throughout
Semantic HTML, meta tags present
No works council references anywhere

Out of Scope

Deployment (Murray handles this)
German/Spanish translations (separate task)
Contact form backend
Analytics
Live demo links (will be added when services are deployed)

## Overview Build a portfolio website for an automation & AI tooling engineer. The site positions Guybrush for freelance work targeting SMBs and agencies. **Stack:** Astro + Tailwind CSS **Languages:** English (default), German, Spanish **Domain:** `portfolio.oc.al3dev.link` (deployment handled separately) --- ## Content All content is provided as markdown files in the Murray workspace. Copy the text exactly (minor formatting adjustments are fine). ### Content Files Location The content files will be committed to this repo at `content/` before you start. Read them from there: - `content/services.md` — 4 service categories - `content/projects.md` — 4 project case studies - `content/about.md` — Bio, skills, languages - `content/design-spec.md` — Full design specification --- ## Design Spec See `content/design-spec.md` for the full spec. Key points: - **Dark mode primary** (near-black background, light text) - **Font:** Inter or Geist Sans - **Single accent color** (suggest warm orange `#f97316` or similar — pick something that pops on dark) - **Card-based layout** with subtle borders or glass effect - **Fade-in on scroll** animations only (subtle, 200-300ms) - **Mobile-first responsive** - **Reference sites:** n8n.io, openclaw.ai, openai.com, claude.ai --- ## Page Structure 1. **Navbar** — Name/logo left, section links right, language switcher (EN/DE/ES), CTA 2. **Hero** — Big bold headline, one-line subtitle, CTA button 3. **Services** — 4 cards in 2x2 grid (from `services.md`) 4. **Projects** — Card grid with title, description, tech stack tags (from `projects.md`) 5. **About** — Short bio, tech stack icons/badges, languages spoken (from `about.md`) 6. **Contact** — Email link + placeholder for LinkedIn/GitHub 7. **Footer** — Minimal, copyright + links This is a single-page site with anchor links (not separate pages per section). --- ## i18n Setup Use Astro's built-in i18n routing: - URL structure: `/en/`, `/de/`, `/es/` - Default locale: `en` (no prefix redirect to `/en/`) - Language switcher component in navbar - **For now: implement the full i18n structure but only populate English content.** German and Spanish translations will be added later as a separate task. - Use a translation file pattern (e.g. `src/i18n/en.json`) so translations are easy to add. --- ## Technical Requirements - Astro 5.x (latest stable) - Tailwind CSS 4.x - No JavaScript frameworks needed (pure Astro components) - Static output (no SSR) - SEO: meta tags, Open Graph tags, proper semantic HTML - Favicon placeholder - `astro.config.mjs` with i18n configured - Clean component structure: ``` src/ components/ Navbar.astro Hero.astro Services.astro Projects.astro About.astro Contact.astro Footer.astro LanguageSwitcher.astro i18n/ en.json de.json (empty/placeholder) es.json (empty/placeholder) layouts/ Layout.astro pages/ index.astro (redirects to /en/) en/ index.astro de/ index.astro es/ index.astro ``` --- ## Acceptance Criteria - [ ] `npm run build` produces static output with no errors - [ ] Site looks good on desktop (1440px) and mobile (375px) - [ ] All 4 services rendered as cards - [ ] All 4 projects rendered with tech stack tags - [ ] About section with bio and skill badges - [ ] Language switcher present (EN active, DE/ES link to placeholder pages) - [ ] Fade-in scroll animations work - [ ] Navbar is responsive (hamburger on mobile) - [ ] Dark theme throughout - [ ] Semantic HTML, meta tags present - [ ] No works council references anywhere --- ## Out of Scope - Deployment (Murray handles this) - German/Spanish translations (separate task) - Contact form backend - Analytics - Live demo links (will be added when services are deployed)

murray added the

labels 2026-03-22 11:31:08 +00:00

murray commented

2026-03-22 12:21:13 +00:00

Content files are now committed to content/ — services.md, projects.md, about.md, design-spec.md. Pull latest and proceed with the build.

Content files are now committed to `content/` — `services.md`, `projects.md`, `about.md`, `design-spec.md`. Pull latest and proceed with the build.

murray closed this issue

2026-03-22 12:21:51 +00:00