diff --git a/AGENTS.md b/AGENTS.md index 66fa014..f1e97de 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -13,24 +13,23 @@ - package mgr: pnpm - github: gh - web automation: `agent-browser` (see `agent-browser --help`) +- use `agent-browser` for UI validation only after larger UI changes or a batch of small tweaks; skip for tiny single change if confident - frontend tasks: use `/frontend-design` -- framework: Astro (SSG sites), React + TanStack Start if app needed ## Code style - TS strict, no `any`, no default exports, inline `export` - avoid new abstractions unless needed; prefer clear names over comments -- avoid helpers for trivial expressions; avoid `useEffect` unless required +- avoid helpers for trivial expressions - no `try/catch` unless necessary -- file names: kebab-case for `.ts`/`.tsx`/`.jsx` - Astro: use frontmatter (`---`), keep markup semantic - formatting: Prettier (astro + tailwind plugins) ## UI + styling -- Tailwind v4 only; use built-ins; rare globals; use `cn()` in `src/utils.ts` +- Tailwind v4 only; use built-ins; rare globals +- 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` -- UI lib: project DS first; else `shadcn/ui` w/ Base UI ## Content - blog: `src/content/blog/` (MD/MDX + frontmatter) diff --git a/src/components/ActivityGraph/BarGraph.astro b/src/components/ActivityGraph/BarGraph.astro index 130ec49..79a7a83 100644 --- a/src/components/ActivityGraph/BarGraph.astro +++ b/src/components/ActivityGraph/BarGraph.astro @@ -8,11 +8,12 @@ type Props = { const { activities } = Astro.props; +const normalizeValue = (value: number) => (value === 0 ? null : value); const chartData = { labels: activities.map((day) => formatDate(day.date)), - swimData: activities.map((day) => (day.swim ?? 0) / 1000), - runData: activities.map((day) => day.run ?? 0), - rideData: activities.map((day) => day.ride ?? 0), + swimData: activities.map((day) => normalizeValue((day.swim ?? 0) / 1000)), + runData: activities.map((day) => normalizeValue(day.run ?? 0)), + rideData: activities.map((day) => normalizeValue(day.ride ?? 0)), }; --- @@ -20,7 +21,7 @@ const chartData = { diff --git a/src/components/ActivityGraph/SummaryStats.astro b/src/components/ActivityGraph/SummaryStats.astro index fb6c0f9..870a0a1 100644 --- a/src/components/ActivityGraph/SummaryStats.astro +++ b/src/components/ActivityGraph/SummaryStats.astro @@ -25,7 +25,7 @@ const activeDays = activities.filter( ---
{activeDays} days
diff --git a/src/components/Header.astro b/src/components/Header.astro index 2bd8c0c..daaecf3 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..8651302 --- /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-ledger-muted font-sans text-sm font-medium uppercase tracking-wide leading-6"; +const classList = [classes, className]; +--- + +{ + href ? ( + + + + + + ) : ( + + + + ) +} diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro index c92c606..53e1290 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..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/components/SubtleLink.astro b/src/components/SubtleLink.astro index 5166139..4e52862 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="decoration-ledger-line hover:text-gray-1200 underline underline-offset-4 transition-colors" > diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index f6f6bfd..5d8d8ab 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -2,25 +2,14 @@ import Header from "../components/Header.astro"; --- - - +
    - - -
    -
    - - -
    +
    -
    +
    diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index a1a52d1..841c764 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"]; @@ -15,19 +16,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..0db1cfd 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"]; @@ -16,46 +17,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..0b1cc56 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";

    -
    +

    @@ -47,30 +47,10 @@ import "../styles/base.css"; >agentic engineering. I'm building software alongside AI coding agents and exploring how 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! + building predictable UIs from prompts.

    - I'm also reading Vibe Coding by Gene Kim and Steve Yegge. Planning to write about it once I finish. @@ -84,9 +64,9 @@ import "../styles/base.css";

    -
    +
    -
      +
        { postsSortedByPubDate.map((post, index) => ( -
        +
        -
          +
            { talksSortedByPubDate.map((talk, index) => ( - +
            + + +
            diff --git a/src/pages/writing.astro b/src/pages/writing.astro index 2386124..b7ac7f9 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..13390c0 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -18,6 +18,9 @@ --color-gray-1000: var(--slate-10); --color-gray-1100: var(--slate-11); --color-gray-1200: var(--slate-12); + --color-page-bg: var(--color-gray-100); + --color-ledger-line: var(--color-gray-400); + --color-ledger-muted: var(--color-gray-1000); --font-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "Commit Mono", ui-monospace, monospace;