Skip to content

feat(ui): homepage restructure, left-align, theme toggle, EN/ES switch #15

Description

@albertogg

Summary

Refresh homepage UI/IA inspired by mariozechner.at while keeping current Hugo stack/i18n conventions.

Final decisions (single source of truth)

1) Homepage structure/order

  1. Hero block
  2. Nav bar
  3. Who I am
  4. What I offer
  5. Notes (musings)
  6. Get in touch

2) Alignment

  • All homepage items/sections are left-aligned.

3) Icons

4) Theme toggle

  • Add dark/light toggle icon button in nav.
  • Place on the right side of nav.
  • Persist user choice via localStorage.
  • Fallback to prefers-color-scheme when no stored preference exists.

5) Language switch

  • Add explicit language switch control in nav.
  • Show target-language label only:
    • On English pages show ES
    • On Spanish pages show EN
  • Use Hugo language-aware URLs and preserve page translation when available.

6) Content sources

  • What I offer: i18n string content.
  • Get in touch: social links rendered as Bootstrap Icons.

7) Typography

  • Keep current serif font family for now.
  • No font-family change in this issue.

8) Scope/intent

  • Inspired by mariozechner.at structure/clarity, but implementation standardized for this repo.

Implementation plan (tiny slices)

  • Slice 1: Add homepage section scaffolding in requested order.
  • Slice 2: Apply left-alignment styles across homepage blocks.
  • Slice 3: Add nav controls (theme toggle + language switch).
  • Slice 4: Implement theme persistence and fallback behavior.
  • Slice 5: Wire “What I offer” (i18n) and “Get in touch” icon links.
  • Slice 6: QA + build validation.

Acceptance criteria

  • Homepage order exactly matches requested sequence.
  • All homepage content is left-aligned.
  • Theme toggle works, is accessible, and persists.
  • EN/ES switch is visible and behaves as target-language control.
  • Build passes with hugo --gc --minify.
  • No regressions in i18n/hreflang/RSS behavior.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions