05 — META

About this Site

Learn about the design philosophy, technology stack, and Swiss design principles behind this portfolio website

Design Philosophy

This portfolio embraces the principles of Swiss Design (International Typographic Style), a movement that emerged in Switzerland in the 1950s. It emphasizes cleanliness, readability, and objectivity through mathematical grids, sans-serif typography, and asymmetric layouts.

Core Principles Applied

  • Mathematical Grid System — 12-column precision grid with 1.5rem gutters for perfect alignment
  • Dramatic Typography — Golden Ratio (1.618) scale from 6rem display to 0.75rem caption
  • Minimal Color Palette — Black, white, and Swiss red as accent, plus 9-step grayscale
  • Asymmetric Layouts — 7:5 and 8:4 column splits create visual tension
  • Structural Lines — 2-4px borders as functional design elements
  • Definition Lists — Structured data presentation for metadata
  • No Decoration — Elimination of shadows, rounded corners, and gradients
  • Functional Beauty — Every element serves a clear purpose

Swiss Masters Inspiration

The design philosophy draws from pioneering designers:

  • Josef Müller-Brockmann — Mathematical grids and objective design
  • Armin Hofmann — Geometric precision and visual tension
  • Jan Tschichold — Typographic excellence and asymmetric layouts
  • Emil Ruder — Grid systems and rational beauty

Technology Stack

Core Technologies

Static Site Generator
Eleventy 3.1.2
Fast, flexible, and powerful static site generation with zero client-side JavaScript overhead
Templating Engine
Nunjucks
Powerful templating with macros, inheritance, and includes for maintainable code
CSS Framework
Tailwind CSS 3.4
Utility-first framework extended with custom Swiss design components and typography
Interactivity
Alpine.js
Lightweight JavaScript for mobile menu and interactive components

Development Tools

  • Node.js — JavaScript runtime environment
  • npm-run-all — Parallel script execution for build processes
  • Git — Version control and collaboration
  • GitHub Pages — Automated deployment and hosting

Typography

The site uses Inter, a carefully crafted typeface optimized for user interfaces and digital screens. Its Helvetica-inspired design makes it the perfect modern substitute for Swiss design's traditional typography.

Key Features

Swiss Grid System

Custom 12-column mathematical grid with precise gutters:

  • Desktop: 12 columns with 1.5rem (24px) gutters
  • Tablet: 8 columns with responsive scaling
  • Mobile: 4 columns for optimal readability
  • Swiss grid classes: .swiss-grid, .swiss-col-1 through .swiss-col-12

Fluid Typography

Responsive typography using CSS clamp() for perfect scaling across devices:

  • --fluid-display: 3rem → 6rem (massive headlines)
  • --fluid-h1: 2.5rem → 4.5rem
  • --fluid-h2: 2rem → 3rem
  • --fluid-h3: 1.5rem → 2rem
  • Golden Ratio (1.618) scale for dramatic hierarchy

Swiss Color System

Minimal palette with CSS custom properties:

  • --swiss-black: #000000 (primary text)
  • --swiss-white: #FFFFFF (backgrounds)
  • --swiss-red: #E53E3E (accent, used sparingly)
  • 9-step grayscale from gray-100 to gray-900

Performance Optimizations

  • Static Generation — Pre-rendered HTML for instant loading
  • Minimal JavaScript — Only Alpine.js for mobile menu (~15KB gzipped)
  • CSS Purging — Tailwind removes unused styles in production
  • View Transitions API — Smooth page navigation
  • Lazy Loading — Images load only when visible
  • Web Vitals Monitoring — Performance tracking built-in

Accessibility Features

  • WCAG Compliant — 44x44px minimum touch targets
  • Semantic HTML — Proper heading hierarchy and landmarks
  • Focus States — Clear keyboard navigation indicators
  • ARIA Labels — Screen reader support for navigation
  • Definition Lists — Structured data for assistive technology

Swiss Components

Custom-built components following Swiss principles:

  • .btn-swiss — Outlined button with 2px border
  • .btn-swiss-primary — Black background, white text
  • .btn-swiss-accent — Red background for emphasis
  • .swiss-divider — 3px structural line separator
  • .prose-swiss — Comprehensive typography for content

Build Process

Development Workflow

The site uses a parallel build process for optimal development experience:

  1. CSS Compilation — Tailwind processes custom CSS with Swiss components
  2. JavaScript Bundling — Alpine.js is bundled for production
  3. Template Processing — Nunjucks templates compile to static HTML
  4. Live Reload — Dev server watches for changes and auto-refreshes

Production Build

Optimized output for deployment:

  • Minified CSS with purged unused styles
  • Compressed JavaScript bundle
  • Static HTML files ready for CDN delivery
  • RSS feed for blog subscriptions
  • XML sitemap for SEO
  • robots.txt for search engine guidelines

Deployment

Automated GitHub Actions workflow:

  • Push to main branch triggers build
  • Eleventy generates static site
  • Files deploy to GitHub Pages
  • Available within seconds at custom domain

Design Resources

Further Reading

To learn more about Swiss Design and the International Typographic Style:

  • Grid Systems in Graphic Design by Josef Müller-Brockmann
  • Graphic Design Manual by Armin Hofmann
  • The New Typography by Jan Tschichold
  • Typography by Emil Ruder

Quote from Josef Müller-Brockmann

"The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to their personal style. But one must learn how to use the grid; it is an art that requires practice."