David Heckhoff Developer Portfolio

Overview

This portfolio for David Heckhoff is an exceptional example of a high-end creative developer site, utilizing a minimalist aesthetic paired with sophisticated 3D and motion-based interactivity. It serves as a premier reference for builders looking to master GSAP-driven scroll storytelling and Three.js hero integration in a clean, professional context.

Design System

• Color Palette & Visual Hierarchy: The site uses a sophisticated warm-neutral background (#F4EFE6) with high-contrast dark charcoal text. A vibrant brand orange is used sparingly for the global CTA ("GET IN TOUCH") to draw immediate attention, while a deep navy blue is used for sub-header badges ("WEB DEVELOPER").
• Typography System: The design features a bold, geometric Sans-Serif font for primary headings (e.g., "David Heckhoff") using large scales for high impact. Secondary UI elements like nav links and project descriptions use a smaller, monospace or clean sans-serif for a technical, modern feel.
• Page Structure: The layout follows a linear narrative: a minimalist 3D hero stage, followed by a sticky "About" section with progressive reveal panels (skills, services), and finally a project grid.
• Reusable Components:
  • The Header Pill: A semi-transparent centered navigation bar with simple text links.
  • The Badge: Rotated, high-contrast labels (e.g., the "Web Developer" banner) that break the baseline.
  • Project Cards: Bento-style images with "notched" corner overlays and rounded action buttons.
  • The Scroll Indicator: A custom SVG mouse icon with a bouncing dot animation.
• Interaction & Motion: The site relies heavily on GSAP for scroll-triggered events. The HTML indicates custom cursors (cursor-wrapper) that change state based on the hover target (cursor-arrow, cursor-circle-white). Animations include clip-path reveals on text containers and scale transitions on project card images.
• Implementation Clues: Built with Vue.js (noted by data-v- attributes) and Three.js (noted by the .three-canvas element). The CSS uses CSS variables for dynamic positioning (e.g., --contact-bottom).

Use Cases

• Who should clone this: Creative developers, UI/UX designers, and technical architects who want to showcase a small number of high-quality projects with a "show, don't just tell" approach to motion design.
• Remixing for other products: This pattern effectively translates to high-end digital agencies or landing pages for creative software tools where visual polish is a primary selling point.
• Practical Directions:
  • Brand Swap: Replace the warm neutral with a dark mode (deep black/purple) and swap the orange CTA for a neon accent to create a "cyberpunk" or "gaming" aesthetic.
  • Information Architecture: Adapt the sticky "About" section to explain a complex 3-step service process instead of personal skills.
• Suggested Clone Scope: A full-page clone is recommended to capture the seamless transition between the 3D hero and the scroll-triggered content sections, as they are technically interdependent.