Client Hiring Portal

A React and TypeScript site that presents real case studies, filters work by skill, and lets a visitor choose a team role, a dedicated contract, or a scoped project.

This site: a portfolio where a company can read the work, pick how to engage, and send a brief.

Hiring managers reading a flat résumé could not tell which systems were in production, what stack sat behind them, or how to start a conversation.

Hiring managers were reading a flat résumé and still could not tell which systems were production, which stack sat behind them, or how to start a conversation.

• •Present real case studies with stack and outcomes.
• •Let visitors filter work by skill.
• •Offer clear engagement paths and a contact flow that does not require a PDF back-and-forth.

Design and build end to end: React and TypeScript front end, content model, theming, motion and the contact flow, built with Vite and Bun.

Shipped a single-page product with case-study modals, skill-to-project mapping, a timezone-aware theme, and a contact path that opens a ready brief in the mail client.

1. 01

   React + TypeScript

   A typed content model drives the home page, case studies, services and slide decks from one data file.

2. 02

   Skill-to-project mapping

   Skills reference project ids directly, so filters resolve reliably instead of matching tag strings.

3. 03

   Theme engine

   Picks light or dark from the visitor’s real sunrise and sunset (estimated from their time zone, no location prompt) before first paint; a manual switch lasts until the next sunrise or sunset.

4. 04

   Contact path

   Engagement options open a prefilled brief in the visitor’s mail client.

• •No theme flash on first paint.
• •Three engagement paths.
• •Case studies backed by one typed data source.

function themeForVisitor(now = new Date()) {
  const hour = Number(new Intl.DateTimeFormat('en-US', {
    hour: 'numeric',
    hourCycle: 'h23',
    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
  }).format(now));
  return hour >= 7 && hour < 19 ? 'light' : 'dark';
}

1. 01

   Theme had to match the visitor local day or night before the first paint, with a manual override that sticks.

   An inline script decides the theme from the visitor’s timezone before React mounts, then respects a saved manual choice.

2. 02

   Skill names and project tags did not line up, so filters had to resolve by project id.

   Skills carry relatedProjectIds, so filtering is a lookup rather than fuzzy tag matching.

3. 03

   Long pages needed inertial scroll that still landed section titles under a fixed nav.

   Inertial scrolling with offsets that land section titles below the fixed navigation.

Security

A static site with no backend or stored visitor data; the contact flow hands off to the visitor’s own mail client.

Speed & growth

Vite code-splitting and lazy-loaded modals keep the initial bundle small; heavy components load only when opened.

TypeScript checks and lint run on every build, and pages are checked visually across themes and breakpoints.