Ben Havenga.
Web Development

Portfolio Website

Built this personal portfolio from scratch using Next.js, TypeScript, and TailwindCSS to showcase my work and demonstrate modern web development capabilities.

Design Philosophy

I wanted a portfolio that actually reflected who I am—minimalist, focused on substance over flash, with a technical aesthetic that shows I understand both design and engineering.

The dark theme with amber accents, monospace typography, and HUD-style elements create a distinctive identity while maintaining excellent readability and user experience.

Technical Goals

Built with modern best practices: server-side rendering, optimal performance, SEO-friendly, fully responsive, and accessible. Every component is crafted with attention to detail.

Used this as an opportunity to demonstrate proficiency with Next.js App Router, TypeScript, Framer Motion animations, and component composition patterns.

Tech Stack & Features

Framework

Next.js 15
React 18
TypeScript

Styling

TailwindCSS
shadcn/ui
Framer Motion

Performance

SSR & SSG
Optimized images
Code splitting

Deployment

Vercel
CI/CD
Custom domain

Implementation Highlights

1

Project-First Layout

Restructured from traditional CV format to portfolio-first approach, putting projects front and center immediately after hero section.

2

Dedicated Project Pages

Each project gets a custom, standalone page with unique sections and content—no generic templates or markdown.

3

Smooth Animations

Framer Motion integration for polished scroll animations, page transitions, and interactive elements.

4

Dark Mode First

Designed with dark theme as primary, maintaining consistent black/white/amber color scheme throughout.

5

Responsive Design

Mobile-first approach ensuring perfect experience across all devices, from phones to ultrawide monitors.

6

SEO Optimized

Proper meta tags, sitemap generation, and semantic HTML for search engine visibility.

What I Learned

Modern React Patterns

Server components, client components, and optimal data fetching strategies

Design Systems

Building consistent, reusable component libraries with TailwindCSS

Performance Optimization

Image optimization, code splitting, and achieving excellent Lighthouse scores

ENGINEERING // FINANCE // AI // ENTREPRENEURSHIP // PROJECTS //ENGINEERING // FINANCE // AI // ENTREPRENEURSHIP // PROJECTS //ENGINEERING // FINANCE // AI // ENTREPRENEURSHIP // PROJECTS //ENGINEERING // FINANCE // AI // ENTREPRENEURSHIP // PROJECTS //ENGINEERING // FINANCE // AI // ENTREPRENEURSHIP // PROJECTS //ENGINEERING // FINANCE // AI // ENTREPRENEURSHIP // PROJECTS //ENGINEERING // FINANCE // AI // ENTREPRENEURSHIP // PROJECTS //ENGINEERING // FINANCE // AI // ENTREPRENEURSHIP // PROJECTS //ENGINEERING // FINANCE // AI // ENTREPRENEURSHIP // PROJECTS //ENGINEERING // FINANCE // AI // ENTREPRENEURSHIP // PROJECTS //

Ben_Havenga

Building products at the intersection of engineering, finance, and AI. Available for internships 2025-2026.

Encrypted
v4.0.1_LIVE
Activity
Updated: Feb 2026Dublin, IE
© 2026 Ben Havenga
End of Line