Day 09: About Page

Today was about adding context and credibility to Shik Digital. The assessment and results flows are useful, but without an About page, there’s no clear “who are these people?” or “why should I trust them?”

Update

  • Implemented a new /about page, centered around a single positioning idea: treat every client like a million-dollar client.
  • Iterated on design + copy, added unit/property tests to keep the page aligned with the design system, and hardened reduced-motion behavior.
  • Also did a small copy pass on the Results “Red Flags” section to keep tone consistent.

What Shipped

1. New About page with clear positioning

The new About page (src/pages/about.astro) is built as a narrative page (not a resume dump):

  • Hero: “We treat every client like our million-dollar client” (trust-first framing)
  • Background: Tokyo-based + global clients + reliability as differentiator
  • Pull quote: blunt honesty (“We’d rather lose a project than waste your time and money.”)
  • Credentials: Gravity Forms / Codeable / AI-assisted development
  • Four pillars: Respond / Honest / Finish / Communicate
  • CTA: links to /assessment and /how-we-work

2. Tests to protect brand consistency

Alongside the page, we added tests so future edits don’t accidentally drift:

  • A unit-style page test (src/pages/about.test.ts) that validates key copy + structure directly from the real .astro source
  • A property test that checks color palette compliance (src/pages/about.color-palette.property.test.ts)
  • A property test that checks typography consistency (src/pages/about.typography.property.test.ts)

3. Reduced-motion hardening (JS + CSS)

The About page uses scroll-reveal animations, but Day 09 tightened the behavior for prefers-reduced-motion:

  • CSS disables animations/transitions when reduced motion is enabled
  • JS uses matchMedia('(prefers-reduced-motion: reduce)') and safely handles older Safari listener APIs
  • If a user toggles reduced motion off mid-session, it won’t hide content they’ve already reached

4. Copy polish beyond the About page

Even though today was “About page day”, we also tightened copy elsewhere:

  • Updated credentials wording on /about (clarity + credibility)
  • Updated Results “Red Flags” copy (src/components/results/RedFlags.astro) and adjusted its test expectations

Try It