Jonnie Hallman Design Engineer Portfolio

Overview

This portfolio serves as a masterclass in high-end design engineering, using a modular "block" architecture to showcase professional case studies through custom-branded sections. It transitions from a clean minimalist landing experience into a series of immersive, scroll-driven interactive stories. It is a premier reference for builders wanting to combine professional credibility with advanced front-end storytelling techniques.

Design System

• Color Palette & Visual Hierarchy: The site uses a dynamic accent color system (defined via CSS variables like --accent-color). Each section adopts the brand identity of the client (Stripe blue, FiftyThree orange, Dropbox blue) against a neutral white or light grey base. This creates a clear visual pivot between projects.
• Typography: The system relies on a clean, sans-serif stack with high-impact bold headings using <h1> and <strong> tags. Body text is set with generous line-height for readability, and links are subtly underlined, adopting the section's accent color for emphasis.
• Page Structure: The layout follows a linear vertical flow. It begins with a minimalist intro (IntroCopy), followed by project-specific blocks (Stripe, Casper, Carousel, FiftyThree), and concludes with a call-to-action (OutroCopy).
• Reusable Components:
  • Brand Blocks: Modular <section> containers that handle background colors and spacing.
  • Sticky Animation Container: A unique hardware visualization seen in the FiftyThree section using position: sticky and layered PNGs (--partSrc) to assemble an object as the user scrolls.
  • Parallax Layers: The Cushion and DesignTown sections utilize a Parallax component with varying --parallax-depth values for 3D depth effects.
• Interaction and Motion: The site is heavily scroll-orientated. Notable patterns include scroll-triggered hardware assembly (the Pencil), parallax image stacking, and responsive video embeds that act as ambient background elements.
• Responsive Behavior: The blocks use CSS variables for width and height (e.g., --casper-width, --casper-scale), suggesting a fluid scaling system that maintains aspect ratios for complex animations on different viewport sizes.
• Implementation Clues: Built using Nuxt.js (based on the __nuxt id), with scoped CSS (indicated by data-v attributes). It utilizes a Contentful-driven backend (images.ctfassets.net) to serve assets.

Use Cases

• Who should clone this pattern: Design engineers, senior front-end developers, and creative directors who need a portfolio that demonstrates technical execution as much as visual taste.
• What products can remix it effectively: Highly visual SaaS landing pages, physical product launch microsites (using the hardware assembly patterns), and long-form interactive journalism.
• Practical remix directions: Swap the client project sections for service offerings or product features. The "sticky-stacking" logic used for the FiftyThree pencil can be repurposed to show the internal components of tech hardware or the layers of a software stack.
• Suggested clone scope: Start by cloning the Copy and Blocks structure to establish the modular grid, then focus on a single interactive section like the FiftyThree sticky assembly for high-impact technical demonstrations.