# Carter Steinhoff Case Study — Carter Steinhoff > Carter Steinhoff portfolio case study: a statically generated Next.js 16 and React 19 site on Tailwind CSS v4, typed with TypeScript 7, checked by Biome and Playwright, delivered on Vercel. - Carter's role: Design, development & writing - System: Next.js 16 · React 19 · TypeScript 7 · Tailwind CSS 4 · Biome · Playwright · Vercel - Status: Live and in production - [Live site](https://cartersteinhoff.co/) ## Overview A portfolio that exposes both the work and the decisions behind it. The site has to present a broad practice across product design, full-stack development, automation, and cloud work without reading like a résumé or hiding behind surface polish. I built an editorial system where each case pairs the finished interface with its constraints and reasoning. The design challenge is credibility: keep the identity unmistakable, let current screenshots lead, and make a sparse visual language support the evidence instead of competing with it. ## Project story ### Proof: The portfolio itself is part of the evidence. Prospective clients experience the typography, pacing, imagery, accessibility, and performance as evidence of the same skills the case studies describe. The site therefore has to act as proof, not merely as a wrapper around it. ### Range: Different kinds of work still need one point of view. The projects differ in audience, operating model, and technical depth. One editorial structure had to make those differences legible without giving every project a different template or reducing all of them to thumbnails. ### Editorial system: Give every case the same evidence hierarchy. A shared case structure lets readers compare context, constraints, decisions, architecture, and screens across very different projects. That consistency makes the work easier to judge without erasing what makes each project distinct. ## Decisions ### The type scale is tokens, not conventions Heading size, line height, and tracking are Tailwind theme tokens exposed to both utilities and CSS Modules. Components choose a rank instead of inventing one. ### One request-time endpoint Every page prerenders; contact is the only request-time endpoint. That keeps the production surface small while preserving a real way to get in touch. ### Tests assert on structure, not on screenshots Playwright checks document hierarchy, links, image priority, reduced motion, project ordering, and overflow. Those contracts catch drift without coupling tests to pixels. ### The case studies say why, or say nothing Screenshots show what a thing does; prose explains why it is built that way. The Decisions section is optional because a plausible rationale reconstructed after the fact is worth less than an honest gap. ## Architecture A build-time site with one moving part. The pages, the social cards, and the type scale are all resolved before a visitor arrives. The only thing that runs on request is the contact form, and the only thing that runs in their browser is the handful of components that genuinely need state. - **Experience:** Next.js 16 App Router and React 19 Server Components, with four client components - **Design system:** Tailwind CSS v4 theme tokens for a fluid type scale, with CSS Modules per route - **Build output:** Static prerendering for every route plus build-time OpenGraph cards - **Quality gates:** TypeScript 7, Biome, and Playwright checks on desktop and mobile ## Technology and delivery A static-first studio stack with one live endpoint. Next.js and React generate the editorial site, Tailwind and shared tokens hold the visual system together, and Vercel runs the contact boundary without adding a database or CMS. ### Experience - **nextjs:** App Router pages, metadata, and static case-study routes - **react:** Server-first component model with four interactive boundaries - **typescript:** Typed project data and route contracts - **tailwind:** Fluid type tokens and responsive layout utilities ### Delivery - **vercel:** Static pages, image optimization, and contact function - **resend:** Server-only contact delivery ## What Carter owned - Product direction, editorial writing, and the full responsive visual system - Data-driven App Router case studies and static route generation - A shared fluid type scale as Tailwind v4 theme tokens, consumed by utilities and CSS Modules alike - Build-time social cards, structured data, and production browser checks across desktop and mobile ## Selected screens - **Homepage:** The hero cycles through three scenes on a timer and stops entirely when the visitor prefers reduced motion. The test suite asserts that behaviour rather than trusting it. [Image](https://cartersteinhoff.co/images/cartersteinhoff-project.webp) — Homepage hero with the name in a large serif display face over a photograph of a desk at night, above a short positioning line and two calls to action - **The work gallery:** Each project sits in browser chrome with its real domain, then links into a case study with a separate path to the live site. [Image](https://cartersteinhoff.co/images/cartersteinhoff-gallery.webp) — Portfolio index showing project cards in browser chrome, each with a screenshot, title, platform, year, and one line of summary - **Decisions:** The section this whole site exists to carry: the reasoning behind a build, in two columns of real paragraphs rather than a bulleted feature list. [Image](https://cartersteinhoff.co/images/cartersteinhoff-decisions.webp) — Case study Decisions section headed Why it is built this way, with four numbered entries in two columns - **Services:** What I actually do, stated without the padding that usually surrounds it. [Image](https://cartersteinhoff.co/images/cartersteinhoff-services.webp) — Services page with an oversized statement heading and a rule-topped summary column - **About:** The career story as dated chapters, from a COBOL internship on a mainframe to an independent studio in Phoenix. [Image](https://cartersteinhoff.co/images/cartersteinhoff-about.webp) — About page showing centered chapter labels with years and left-aligned prose beneath each - **Contact:** A focused project brief keeps the site’s only request-time feature direct and useful. [Image](https://cartersteinhoff.co/images/cartersteinhoff-contact.webp) — Carter Steinhoff contact page with project brief fields beside the heading Let’s make something good ## Current status Live in production; the site you are reading is the system shown throughout this case study. - [Back to all case studies](https://cartersteinhoff.co/portfolio/index.md) - [Discuss a similar project](https://cartersteinhoff.co/contact/index.md)