Tools I Use

Quiet logo strip on the About page that surfaces the tools used day-to-day. Left-aligned serif 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" in serif italic (font-serif), 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.

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'