From c6858b1738935aac9e22b89834522c29e0d1e11e Mon Sep 17 00:00:00 2001 From: Guilherme de Andrade Date: Wed, 4 Feb 2026 11:58:57 +0000 Subject: [PATCH 01/23] feat: ledger grid redesign --- src/components/ActivityGraph/BarGraph.astro | 2 +- .../ActivityGraph/SummaryStats.astro | 4 +- src/components/Header.astro | 6 +- src/components/PostCard.astro | 35 +++---- src/components/SectionHeading.astro | 2 +- src/components/SubtleLink.astro | 2 +- src/layouts/BaseLayout.astro | 21 +---- src/layouts/BlogPost.astro | 38 +++++--- src/layouts/Talk.astro | 92 ++++++++++--------- src/pages/index.astro | 12 +-- src/pages/moving.astro | 6 +- src/pages/talks.astro | 42 +++++---- src/pages/writing.astro | 42 +++++---- src/styles/base.css | 20 ++++ 14 files changed, 181 insertions(+), 143 deletions(-) diff --git a/src/components/ActivityGraph/BarGraph.astro b/src/components/ActivityGraph/BarGraph.astro index 130ec49..1c28f47 100644 --- a/src/components/ActivityGraph/BarGraph.astro +++ b/src/components/ActivityGraph/BarGraph.astro @@ -20,7 +20,7 @@ const chartData = { diff --git a/src/components/ActivityGraph/SummaryStats.astro b/src/components/ActivityGraph/SummaryStats.astro index fb6c0f9..6d35877 100644 --- a/src/components/ActivityGraph/SummaryStats.astro +++ b/src/components/ActivityGraph/SummaryStats.astro @@ -24,9 +24,7 @@ const activeDays = activities.filter( ).length; --- -
+
{activeDays} days
diff --git a/src/components/Header.astro b/src/components/Header.astro index 2bd8c0c..6a46bba 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -2,9 +2,9 @@ import { SITE_TITLE } from "../consts"; --- -
- +
+ {SITE_TITLE} - Frontend Engineer + Frontend Engineer
diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro index c92c606..a0d145e 100644 --- a/src/components/PostCard.astro +++ b/src/components/PostCard.astro @@ -12,19 +12,25 @@ interface Props { const { title, description, pubDate, href, featured = false } = Astro.props; --- -
  • - -
    - {title} - { - featured && ( - - Featured - - ) - } +
  • + +
    +
    + {title} + { + featured && ( + + Featured + + ) + } +
    + + +
    { description && ( @@ -33,8 +39,5 @@ const { title, description, pubDate, href, featured = false } = Astro.props; ) } - - -
    • diff --git a/src/components/SectionHeading.astro b/src/components/SectionHeading.astro index 2ededf4..72ac74d 100644 --- a/src/components/SectionHeading.astro +++ b/src/components/SectionHeading.astro @@ -7,7 +7,7 @@ interface Props { const { title, href } = Astro.props; --- -

    +

    { Boolean(href) ? ( diff --git a/src/components/SubtleLink.astro b/src/components/SubtleLink.astro index 5166139..de947c4 100644 --- a/src/components/SubtleLink.astro +++ b/src/components/SubtleLink.astro @@ -11,7 +11,7 @@ const { href, target } = Astro.props; href={href} target={target} rel="noopener noreferrer" - class="hover:text-gray-1200 underline transition-colors" + class="underline decoration-[var(--ledger-line)] underline-offset-4 transition-colors hover:text-gray-1200" > diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index f6f6bfd..0107259 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -2,25 +2,10 @@ import Header from "../components/Header.astro"; --- - - -
    -
    - - -
    -
    - - -
    + +
    -
    +
    diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index a1a52d1..8527987 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -15,19 +15,29 @@ const { title, description, pubDate, updatedDate } = Astro.props; -
    -

    {title}

    -
    - - { - updatedDate && ( -
    - Last updated on -
    - ) - } -
    - -
    +
    +
    +
    Meta
    +
    +

    {title}

    +
    + +
    + { + updatedDate && ( +
    + Last updated on +
    + ) + } +
    +
    +
    +
    Content
    +
    + +
    +
    +
    diff --git a/src/layouts/Talk.astro b/src/layouts/Talk.astro index 6e97cb3..569e0d5 100644 --- a/src/layouts/Talk.astro +++ b/src/layouts/Talk.astro @@ -16,46 +16,56 @@ const { title, description, pubDate, updatedDate, event, slides, recording } = -
    -

    {title}

    -
    - - {event &&
    Event: {event}
    } - { - (slides || recording) && ( -
    - {slides && ( - - Slides → - - )} - {recording && ( - - Recording → - - )} -
    - ) - } - { - updatedDate && ( -
    - Last updated on -
    - ) - } -
    - -
    +
    +
    +
    Meta
    +
    +

    {title}

    +
    + +
    + {event &&
    Event: {event}
    } + { + (slides || recording) && ( +
    + {slides && ( + + Slides → + + )} + {recording && ( + + Recording → + + )} +
    + ) + } + { + updatedDate && ( +
    + Last updated on +
    + ) + } +
    +
    +
    +
    Content
    +
    + +
    +
    +
    diff --git a/src/pages/index.astro b/src/pages/index.astro index 4b948c1..e98690b 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -20,7 +20,7 @@ import "../styles/base.css"; -
    +

    I'm Gui, a Frontend Engineer focused on crafting polished and user-first @@ -39,7 +39,7 @@ import "../styles/base.css";

    -
    +

    @@ -84,9 +84,9 @@ import "../styles/base.css";

    -
    +
    -
      +
        { postsSortedByPubDate.map((post, index) => ( -
        +
        -
          +
            { talksSortedByPubDate.map((talk, index) => ( - +
            + + +
            diff --git a/src/pages/talks.astro b/src/pages/talks.astro index 29d1e9e..baa2b2c 100644 --- a/src/pages/talks.astro +++ b/src/pages/talks.astro @@ -2,6 +2,7 @@ import BaseHead from "../components/BaseHead.astro"; import BaseLayout from "../layouts/BaseLayout.astro"; import FormattedDate from "../components/FormattedDate.astro"; +import SectionHeading from "../components/SectionHeading.astro"; import "../styles/base.css"; import { SITE_DESCRIPTION, talksSortedByPubDate } from "../consts"; --- @@ -11,24 +12,27 @@ import { SITE_DESCRIPTION, talksSortedByPubDate } from "../consts"; - +
            + + +
            diff --git a/src/pages/writing.astro b/src/pages/writing.astro index 2386124..d83bc8a 100644 --- a/src/pages/writing.astro +++ b/src/pages/writing.astro @@ -2,6 +2,7 @@ import BaseHead from "../components/BaseHead.astro"; import BaseLayout from "../layouts/BaseLayout.astro"; import FormattedDate from "../components/FormattedDate.astro"; +import SectionHeading from "../components/SectionHeading.astro"; import "../styles/base.css"; import { SITE_DESCRIPTION, postsSortedByPubDate } from "../consts"; --- @@ -11,24 +12,27 @@ import { SITE_DESCRIPTION, postsSortedByPubDate } from "../consts"; - +
            + + +
            diff --git a/src/styles/base.css b/src/styles/base.css index 8c2e181..f6a098e 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -23,6 +23,18 @@ --font-mono: "Commit Mono", ui-monospace, monospace; } +:root.light { + --page-bg: var(--color-gray-100); + --ledger-line: var(--color-gray-400); + --ledger-muted: var(--color-gray-1000); +} + +:root.dark { + --page-bg: var(--color-gray-100); + --ledger-line: var(--color-gray-600); + --ledger-muted: var(--color-gray-1000); +} + @layer utilities { /* Prose styles - in utilities layer to match typography plugin */ .prose h1 { @@ -63,6 +75,14 @@ font-size: var(--text-sm); font-weight: var(--font-weight-light); } + + .ledger-label { + color: var(--ledger-muted); + font-family: var(--font-mono); + font-size: var(--text-xs); + letter-spacing: 0.2em; + text-transform: uppercase; + } } @utility scrollbar-hide { From 370c88314bf79d5622d1159549eb93d6c5e346a5 Mon Sep 17 00:00:00 2001 From: Guilherme de Andrade Date: Wed, 4 Feb 2026 12:16:39 +0000 Subject: [PATCH 02/23] fix: home header stack and moving layout --- src/components/Header.astro | 15 ++++++++++++++- src/layouts/BaseLayout.astro | 4 +++- src/pages/moving.astro | 6 +----- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index 6a46bba..cdc103f 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,8 +1,21 @@ --- import { SITE_TITLE } from "../consts"; + +interface Props { + stacked?: boolean; +} + +const { stacked = false } = Astro.props; --- -
            +
            {SITE_TITLE} diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 0107259..12c42a6 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,10 +1,12 @@ --- import Header from "../components/Header.astro"; + +const isHome = Astro.url.pathname === "/"; ---
            -
            +
            diff --git a/src/pages/moving.astro b/src/pages/moving.astro index 8ad3e19..80477dc 100644 --- a/src/pages/moving.astro +++ b/src/pages/moving.astro @@ -4,7 +4,6 @@ import BaseLayout from "../layouts/BaseLayout.astro"; import ActivityGraph from "../components/ActivityGraph/index.astro"; import { getActivities } from "../lib/strava"; import { SITE_DESCRIPTION } from "../consts"; -import SectionHeading from "../components/SectionHeading.astro"; import "../styles/base.css"; const activities = await getActivities(); @@ -15,9 +14,6 @@ const activities = await getActivities(); -
            - - -
            +             From 64da192ebbd73b554ff84aa7f3d0e3e25ea34186 Mon Sep 17 00:00:00 2001 From: Guilherme de Andrade Date: Wed, 4 Feb 2026 12:24:12 +0000 Subject: [PATCH 03/23] fix: stack header on all pages --- src/components/Header.astro | 15 +-------------- src/layouts/BaseLayout.astro | 4 +--- 2 files changed, 2 insertions(+), 17 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index cdc103f..6456640 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,21 +1,8 @@ --- import { SITE_TITLE } from "../consts"; - -interface Props { - stacked?: boolean; -} - -const { stacked = false } = Astro.props; --- -
            +
            {SITE_TITLE} diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 12c42a6..0107259 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,12 +1,10 @@ --- import Header from "../components/Header.astro"; - -const isHome = Astro.url.pathname === "/"; ---
            -
            +
            From 9fe8af608244de1369a9ed4084392173be05555d Mon Sep 17 00:00:00 2001 From: Guilherme de Andrade Date: Wed, 4 Feb 2026 12:31:41 +0000 Subject: [PATCH 04/23] fix: unify label tracking --- src/styles/base.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/styles/base.css b/src/styles/base.css index f6a098e..0409a1e 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -78,10 +78,12 @@ .ledger-label { color: var(--ledger-muted); - font-family: var(--font-mono); - font-size: var(--text-xs); - letter-spacing: 0.2em; + font-family: var(--font-sans); + font-size: var(--text-sm); + font-weight: 500; + letter-spacing: var(--tracking-wider); text-transform: uppercase; + line-height: 1.75rem; } } From 0b1fe9c70e4bfd77d27c2e7fd64ae2dab8d21a3c Mon Sep 17 00:00:00 2001 From: Guilherme de Andrade Date: Wed, 4 Feb 2026 12:42:45 +0000 Subject: [PATCH 05/23] refactor: add ledger label component --- src/components/Header.astro | 3 ++- src/components/LedgerLabel.astro | 26 ++++++++++++++++++++++++++ src/components/SectionHeading.astro | 14 +++----------- src/layouts/BlogPost.astro | 9 +++++---- src/layouts/Talk.astro | 9 +++++---- src/styles/base.css | 9 --------- 6 files changed, 41 insertions(+), 29 deletions(-) create mode 100644 src/components/LedgerLabel.astro diff --git a/src/components/Header.astro b/src/components/Header.astro index 6456640..7e3a156 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,10 +1,11 @@ --- import { SITE_TITLE } from "../consts"; +import LedgerLabel from "./LedgerLabel.astro"; ---
            {SITE_TITLE} - Frontend Engineer + Frontend Engineer
            diff --git a/src/components/LedgerLabel.astro b/src/components/LedgerLabel.astro new file mode 100644 index 0000000..7be7ffa --- /dev/null +++ b/src/components/LedgerLabel.astro @@ -0,0 +1,26 @@ +--- +interface Props { + as?: "h2" | "span" | "div"; + href?: string; + class?: string; +} + +const { as: Tag = "span", href, class: className } = Astro.props; +const classes = + "text-gray-1000 font-sans text-sm font-medium uppercase tracking-wider leading-7"; +const combinedClass = className ? `${classes} ${className}` : classes; +--- + +{ + href ? ( + + + + + + ) : ( + + + + ) +} diff --git a/src/components/SectionHeading.astro b/src/components/SectionHeading.astro index 72ac74d..ce0e762 100644 --- a/src/components/SectionHeading.astro +++ b/src/components/SectionHeading.astro @@ -1,4 +1,6 @@ --- +import LedgerLabel from "./LedgerLabel.astro"; + interface Props { title: string; href?: string; @@ -7,14 +9,4 @@ interface Props { const { title, href } = Astro.props; --- -

            - { - Boolean(href) ? ( - - {title} - - ) : ( - {title} - ) - } -

            +{title} diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index 8527987..180b9e6 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -3,6 +3,7 @@ import type { CollectionEntry } from "astro:content"; import BaseHead from "../components/BaseHead.astro"; import FormattedDate from "../components/FormattedDate.astro"; import BaseLayout from "../layouts/BaseLayout.astro"; +import LedgerLabel from "../components/LedgerLabel.astro"; type Props = CollectionEntry<"blog">["data"]; @@ -16,8 +17,8 @@ const { title, description, pubDate, updatedDate } = Astro.props;
            -
            -
            Meta
            +
            + Meta

            {title}

            @@ -32,8 +33,8 @@ const { title, description, pubDate, updatedDate } = Astro.props; }
            -
            -
            Content
            +
            + Content
            diff --git a/src/layouts/Talk.astro b/src/layouts/Talk.astro index 569e0d5..e7912d3 100644 --- a/src/layouts/Talk.astro +++ b/src/layouts/Talk.astro @@ -3,6 +3,7 @@ import type { CollectionEntry } from "astro:content"; import BaseHead from "../components/BaseHead.astro"; import FormattedDate from "../components/FormattedDate.astro"; import BaseLayout from "../layouts/BaseLayout.astro"; +import LedgerLabel from "../components/LedgerLabel.astro"; type Props = CollectionEntry<"talks">["data"]; @@ -17,8 +18,8 @@ const { title, description, pubDate, updatedDate, event, slides, recording } =
            -
            -
            Meta
            +
            + Meta

            {title}

            @@ -60,8 +61,8 @@ const { title, description, pubDate, updatedDate, event, slides, recording } = }
            -
            -
            Content
            +
            + Content
            diff --git a/src/styles/base.css b/src/styles/base.css index 0409a1e..7b9526a 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -76,15 +76,6 @@ font-weight: var(--font-weight-light); } - .ledger-label { - color: var(--ledger-muted); - font-family: var(--font-sans); - font-size: var(--text-sm); - font-weight: 500; - letter-spacing: var(--tracking-wider); - text-transform: uppercase; - line-height: 1.75rem; - } } @utility scrollbar-hide { From a002f65bda65bb1b8f4b9e73d16f79f1ae7e5fa7 Mon Sep 17 00:00:00 2001 From: Guilherme de Andrade Date: Wed, 4 Feb 2026 12:43:44 +0000 Subject: [PATCH 06/23] fix: tighten header gap --- src/components/Header.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index 7e3a156..be46db7 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -3,7 +3,7 @@ import { SITE_TITLE } from "../consts"; import LedgerLabel from "./LedgerLabel.astro"; --- -
            +
            {SITE_TITLE} From af3d1b1fa354be9fbaa7a173833e77ff20ca72ba Mon Sep 17 00:00:00 2001 From: Guilherme de Andrade Date: Wed, 4 Feb 2026 12:44:46 +0000 Subject: [PATCH 07/23] fix: remove header divider --- src/components/Header.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index be46db7..e2d8bed 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -3,7 +3,7 @@ import { SITE_TITLE } from "../consts"; import LedgerLabel from "./LedgerLabel.astro"; --- -
            +
            {SITE_TITLE} From 50252023c4c59f6e1cfd047dd8882db054bf4350 Mon Sep 17 00:00:00 2001 From: Guilherme de Andrade Date: Wed, 4 Feb 2026 12:45:25 +0000 Subject: [PATCH 08/23] docs: update styling guidance --- AGENTS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/AGENTS.md b/AGENTS.md index 66fa014..405584f 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -27,6 +27,7 @@ ## UI + styling - Tailwind v4 only; use built-ins; rare globals; use `cn()` in `src/utils.ts` +- avoid custom CSS classes/vars for typography if Tailwind utilities suffice; prefer components with inline utilities - colors: Radix gray scale `--gray-1`…`--gray-12` - fonts: Commit Mono (mono), Work Sans (sans) - dark mode: `prefers-color-scheme` From 8e21cfc6208502f015e743c2168bc2350bb0bdfb Mon Sep 17 00:00:00 2001 From: Guilherme de Andrade Date: Wed, 4 Feb 2026 12:49:46 +0000 Subject: [PATCH 09/23] refactor: use class:list for ledger label --- src/components/LedgerLabel.astro | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/LedgerLabel.astro b/src/components/LedgerLabel.astro index 7be7ffa..999e8c0 100644 --- a/src/components/LedgerLabel.astro +++ b/src/components/LedgerLabel.astro @@ -7,19 +7,19 @@ interface Props { const { as: Tag = "span", href, class: className } = Astro.props; const classes = - "text-gray-1000 font-sans text-sm font-medium uppercase tracking-wider leading-7"; -const combinedClass = className ? `${classes} ${className}` : classes; + "text-gray-1000 font-sans text-sm font-medium uppercase tracking-wide leading-7"; +const classList = [classes, className]; --- { href ? ( - + ) : ( - + ) From 23fcbe8b0aa747d0ccd9dbb7cf795a1e59703c36 Mon Sep 17 00:00:00 2001 From: Guilherme de Andrade Date: Wed, 4 Feb 2026 12:52:55 +0000 Subject: [PATCH 10/23] fix: tighten header gap and label leading --- src/components/Header.astro | 2 +- src/components/LedgerLabel.astro | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index e2d8bed..a8f603b 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -3,7 +3,7 @@ import { SITE_TITLE } from "../consts"; import LedgerLabel from "./LedgerLabel.astro"; --- -
            +
            {SITE_TITLE} diff --git a/src/components/LedgerLabel.astro b/src/components/LedgerLabel.astro index 999e8c0..5d93ede 100644 --- a/src/components/LedgerLabel.astro +++ b/src/components/LedgerLabel.astro @@ -7,7 +7,7 @@ interface Props { const { as: Tag = "span", href, class: className } = Astro.props; const classes = - "text-gray-1000 font-sans text-sm font-medium uppercase tracking-wide leading-7"; + "text-gray-1000 font-sans text-sm font-medium uppercase tracking-wide leading-6"; const classList = [classes, className]; --- From 4a827386ab29da626ef82045cc179f37a579ab0f Mon Sep 17 00:00:00 2001 From: Guilherme de Andrade Date: Wed, 4 Feb 2026 12:54:14 +0000 Subject: [PATCH 11/23] edit: trim currently section --- src/pages/index.astro | 28 ++++------------------------ 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index e98690b..1b326f5 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -20,7 +20,7 @@ import "../styles/base.css"; -
            +

            I'm Gui, a Frontend Engineer focused on crafting polished and user-first @@ -39,7 +39,7 @@ import "../styles/base.css";

            -
            +

            @@ -49,26 +49,6 @@ import "../styles/base.css"; to orchestrate multiple agents, manage context effectively, and maintain a vendor lock-in-free setup.

            -

            - - Read more: Agentic engineering without lock-in - - -

            -

            - Looking for my next role building user-first products with a focus on - UI. Giving priority to AI-first companies or those making the jump. - Know something interesting? Let's chat! -

            I'm also reading -

            +
              { @@ -102,7 +82,7 @@ import "../styles/base.css";
            -
            +