Case Study NatePaul.Design

Designing and Developing My Personal Portfolio

Overview

As a hybrid designer-developer, I approached my personal portfolio with the same cart I bring to a client project: a strong focus on clarity, usability, performance and accessibility. The goal was to create a space that reflects my creative sensibility while delivering a frictionless user experience across devices and browsers.

View Project

My Role

  • Frontend Developer
  • UI Design
  • UX Design
NatePaul.Design
View of NatePaul.Design on a mobile phone

🎯 Goals

  • Clarity and Intuition: Showcase work and capabilities without unnecessary clicks or distractions.
  • Performance-First Build: Ensure fast load times, efficient asset use, and a smooth browsing experience.
  • Accessible by Design: Comply with WCAG standards to make the site usable by all audiences.
  • Modern UX Expectations: Respect users' system-level preferences like dark mode, reduce motion, and high contrast.
  • Maintainable and Modular Code: Build a system that could evolve easily over time.

🖌️ Design Approach

The site design emphasizes clarity and restraint—fewer pages, clear headings and a deliberate visual rhythm created through consistent spacing and typography.

  • Layout optimized for quick scanning and minimal hover-dependence
  • Anchored top navigation with visible state indicators
  • Color palette designed for high contrast and legibility
  • Automatic Dark Mode: The site detects the user's system preference using the prefers-color-scheme media query and loads either the light or dark mode accordingly—no toggles needed, just smart defaults

🧱 Tools & Stack

  • Templating and Build: Codekit for static site generation, SCSS preprocessing and live-reloading
  • Styling: SCSS with Bourbon for a clean, semantic front-end structure
  • Interactivity: JQuery for smooth scrolling, dynamic toggles and UI enhancements
  • Testing: Google Lighthouse, axe DevTools and manual screen reader tests for performance and accessibility checks

🚀 Performance Optimization

  • All assets are compressed and served via CodeKit's optimized build pipeline
  • Images are lazy-loaded and sized appropriately for retina/non-retina displays
  • JavaScript is deferred to improve time-to-interactive
  • SCSS is modular and complied into minified, production-ready CSS

Google Lighthouse Scores

  • Performance: 100
  • Accessibility: 100
  • Best Practices: 100
  • SEO: 100

(Scores from most recent audit)

♿️ Accessibility Considerations

  • Semantic HTML5 structure with correct heading hierarchy and ARIA roles
  • Full keyboard navigation and logical tab order
  • prefers-reduced-motion respected for users who disable animations
  • High-contrast visual modes for strong legibility
  • Descriptive alt tags and manually tested screen reader flow

💬 Takeaways

Building this portfolio gave me space to refine the intersection of design, performance, and inclusivity. The result is a modern, minimal site that adapts to the user, loads quickly, and honors accessibility best practices. It's a living example of my approach to thoughtful, standards-driven frontend work.

Back to Case Studies