Tools I Use

Quiet logo strip on the About page that surfaces the tools used day-to-day. Left-aligned italic label, brand wordmarks on the right with per-logo height overrides for optical balance.

Live Preview

Tools I use

View Full Version

View on About page

Structure

1. Label

"Tools I use" set as body-lg … italic — Inter, not a serif; there is no serif in the system. Left-aligned; stacks above the logos on mobile, sits inline on md+.

2. Logo Row

Flex-wrap row of brand wordmark SVGs, vertically centered.

3. Entrance Animation

Single FadeIn (animation="fadeUp") wraps the whole block.

4. Spacing

py-12 lg:py-16 — deliberately tighter than the site's py-20 lg:py-32 section rhythm, because this is a slim logo strip rather than a full section.

Current Logos & Heights

Heights are tuned per-logo to normalize optical letterform sizes (each brand SVG fills its viewBox differently).

Figma — h-[23px] lg:h-[27px]
Paper — h-[22px] lg:h-[25px]
Lovable — h-4 lg:h-5
Cursor — h-4 lg:h-5
Claude — h-[22px] lg:h-[25px]
Codex — h-[22px] lg:h-[25px]

Source files in /public/images/tools/.

Usage

tsx

import { ToolsIUse } from '@/components/sections/ToolsIUse'
import { SectionFrame } from '@/components/ui/SectionFrame'

// On the About page, wrapped in a SectionFrame for the standard borders
<SectionFrame>
  <ToolsIUse />
</SectionFrame>

Import

tsx

import { ToolsIUse } from '@/components/sections/ToolsIUse'