Building a responsive portfolio from scratch

TL;DR

A technical engineering portfolio should serve as living proof of system design proficiency: zero bloat, flawless accessibility, fluid responsive scaling without breakpoint spaghetti, and near-instantaneous load times across varied network conditions.

Most developer portfolios suffer from over-engineering: heavy client runtimes, megabytes of 3D canvas libraries that drain mobile batteries, and brittle media queries that break on intermediate viewport widths. A senior approach focuses on layout resilience, typographic rhythm, and structural simplicity.

Architectural Constraints

Bundle Budget: ≤ 40KB gzipped total JS • Layout Engine: CSS Grid + Subgrid • Viewport Handling: Fluid clamp() scaling without media query thrashing

1. Fluid Typography & Spacing without Media Queries

Traditional responsive design relies on scattered media query breakpoints (e.g. @media (min-width: 768px)). This creates discrete jumps in typography scale and padding.

Modern CSS allows continuous, mathematical scaling between minimum and maximum viewport boundaries:

styles/fluid.css CSS Formula

:root {
  /* Fluid typography: 16px at 375px viewport -> 20px at 1280px viewport */
  --font-body: clamp(1rem, 0.917rem + 0.44vw, 1.25rem);
  
  /* Fluid headings: 28px at 375px viewport -> 48px at 1280px viewport */
  --font-h1: clamp(1.75rem, 1.337rem + 2.21vw, 3rem);
  
  /* Fluid gutter spacing */
  --space-gutter: clamp(1.25rem, 0.837rem + 2.21vw, 2.5rem);
}

2. CSS Subgrid for Multi-Card Alignment

When presenting project grids, card titles, descriptions, and tag lists frequently vary in character length. Standard flexbox or grid layouts cause card footers to misalign vertically across columns.

CSS Subgrid allows nested card children to participate directly in the parent grid tracks:

components/project-grid.module.css Subgrid Grid Pattern

.projectGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.projectCard {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 0.75rem;
  padding: 1.5rem;
  background: #111114;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

3. Zero-Runtime Dark Mode & Theme Tokens

To prevent Flash of Inaccurate Color Theme (FOIT) without injecting blocking runtime scripts into <head>, theme tokens should be mapped directly to CSS custom properties with native system preference fallbacks:

styles/theme.css Theme Tokens

:root {
  --bg-primary: #0a0a0c;
  --bg-surface: #121214;
  --text-primary: #f5f5f7;
  --text-muted: #86868b;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --accent-color: #a5b4fc;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-inter), system-ui, sans-serif;
  letter-spacing: -0.011em;
}

Live examples of this design philosophy in production can be explored across the systems and tools index at tirup.in.

System Architecture Principles

Prefer mathematical clamp() expressions over stepped media query cascades for fluid layouts.
Use grid-template-rows: subgrid to align dynamic multi-column card content cleanly.
Eliminate external icon fonts and heavy runtime libraries in favor of inline semantic SVG symbols.