Ed Hinrichsen Portfolio with 3D Canvas

Overview

This portfolio showcases a sophisticated blend of 2D and 3D design, featuring a WebGL interactive background powered by Three.js and a retro-themed pixel-art hero section. It is a strong reference for developers looking to combine high-end canvas graphics with a structured, content-heavy project timeline that remains readable and accessible.

Design System

• Color Palette & Visual Hierarchy: The site uses a muted, warm monochromatic theme (hex #F5D5B5) for the background, creating a "paper" or "retro tech" feel. High contrast is achieved using a dark charcoal (#4D4D4D) for text and highlighted containers, ensuring a clear focus on the central brand name and project details.
• Typography: The design utilizes a pixelated monospace font for the hero section to emphasize a "low-fi" tech aesthetic. The body content transitions to a clean, highly legible sans-serif for the long-form project descriptions, using bold weights for technology tags and subtitles.
• Page Structure: The flow begins with a minimalist terminal-style hero (#home), followed by a long-scroll <main> container. Each project is separated by a horizontal rule (<hr>) and structured with a title, date, a horizontal list of skill tags (ul.skills), and media embeds (images, videos, or iframes).
• Reusable Components:
  • Skill Tags: Horizontal bullet-less lists that act as metadata chips.
  • Media Containers: Image and video blocks with defined aspect ratios to prevent layout shift during loading.
  • Collapse Toggle: A collapse-btn component used to hide/show extended project details, keeping the initial scroll height manageable.
• Interaction & Motion: The primary interaction is the interactive 3D canvas (WebGL) that sits behind the content. The hero section uses a "highlighted text" block effect where the name "Ed" is nested in a high-contrast container. The code indicates a custom loading bar (#loading-bar) for the assets.
• Implementation Clues: The project is built using TypeScript and Three.js (WebGL). It utilizes a standard HTML5 structure with a canvas layer and a separate main layer for SEO-friendly text content.

Use Cases

• Software Engineer Portfolios: Ideal for developers who want to show off high-level technical skills (graphics, compilers, low-level architecture) while maintaining a clean, chronological CV.
• Creative Technologists: The mix of 3D rendering and traditional layouts is perfect for designers who also code, allowing them to showcase both visual work and technical write-ups.
• Remix Directions:
  • Quick Section Clone: Reuse the ul.skills and <hr> methodology to create a compact, text-focused project timeline.
  • Full-Page Remix: Swap the Three.js background for a static or CSS-animated gradient to reduce performance overhead while keeping the unique retro-typography hero.
  • Content Adaptation: The "My Own Programming Language" section demonstrates how to use simple lists and paragraphs to explain complex, non-visual code projects effectively.