Bernard Uhden Jr. Web Designer and Developer
Back to Case Studies

Case Study

Bernard Uhden Jr. Portfolio Website

Rebuilding my personal portfolio with Next.js, TypeScript, Tailwind CSS, GitHub, and Vercel — creating a faster, cleaner, more scalable platform for showcasing design, development, performance work, and case studies.

Project TypePersonal Portfolio Rebuild
Primary FocusModern Workflow & Performance
PlatformNext.js + Vercel
Homepage Screenshot Placeholder

Project Overview

A modern portfolio built with the same standards I bring to client work.

My personal website needed to do more than look polished. It needed to clearly communicate my positioning as a designer, developer, and performance-focused technical problem solver.

I rebuilt the site using Next.js, TypeScript, Tailwind CSS, GitHub, and Vercel to create a faster, more scalable foundation than a traditional brochure-style portfolio.

The result is a component-based website that can grow over time with new case studies, service pages, blog content, landing pages, and future integrations.

Services

UX/UI DesignFront-End DevelopmentNext.js DevelopmentComponent ArchitecturePerformance OptimizationResponsive DesignContent Strategy

Technologies

Next.jsReactTypeScriptTailwind CSSGitHubVercelStatic RoutingComponent-Based DesignPerformance-First Architecture

The Challenge

My portfolio needed to reflect both my experience and my current direction.

With more than two decades of experience across design, development, WordPress, email marketing, print, hosting, SEO, and performance optimization, the challenge was not a lack of material. The challenge was organizing that experience into a clear, modern, focused presentation.

  • Showcase design and development skills together.
  • Highlight performance optimization as a specialty.
  • Create a reusable case study system.
  • Move beyond a static portfolio into a scalable web app architecture.
  • Demonstrate current front-end skills with Next.js and React.

The site needed to feel credible to clients, recruiters, agencies, and technical hiring managers.

Featured Work Placeholder
Mobile View Placeholder

Why Next.js

The workflow reminded me of what I loved about building dynamic sites with ColdFusion.

Earlier in my career, I loved building dynamic websites with ColdFusion because it made web development feel logical, structured, and powerful. Templates, includes, reusable logic, and dynamic content all made sense to me.

Working with Next.js brought back that same feeling — but with a modern stack. Instead of managing every page manually, the site is organized around routes, reusable components, typed data structures, and clean deployment workflows.

That connection matters because it shows how my past development experience directly supports my current technical growth. The tools are newer, but the underlying thinking is familiar: structure the content well, reuse the right pieces, and build systems that scale.

Key Improvements

A portfolio system built around reusable components and fast iteration.

Component Architecture

Built reusable sections for the hero, services, featured projects, case studies, footer, buttons, and content structures, making future updates faster and more consistent.

Case Study System

Created a reusable case study layout with shared styling, technology tags, results sections, image placeholders, and consistent editorial structure.

Modern Deployment

Connected GitHub and Vercel so every pushed update is automatically built, tested, and deployed through a clean modern workflow.

Timeline

The first version came together quickly because the system was intentionally simple.

Once the structure was established, the site began coming together rapidly. Core sections, routing, responsive layouts, featured projects, and multiple case studies were created in a short, focused build cycle.

The fast timeline was possible because the project used a clean component structure, utility-first styling, and a deployment workflow that made testing and publishing nearly instant.

  • Homepage structure established.
  • Reusable components created.
  • Case study archive built.
  • Multiple case study pages launched.
  • GitHub and Vercel deployment workflow connected.
  • Responsive refinements made across desktop, tablet, and mobile.

Results

A faster, cleaner portfolio foundation built for long-term growth.

Next.jsModern React-based architecture
VercelAutomatic deployments from GitHub
ReusableComponents and case study system
ScalableFoundation for future pages and content
Performance Screenshot Placeholder

Key Takeaway

Modern tools made my experience feel more valuable, not less.

Building this site reinforced that modern front-end development is not disconnected from my earlier experience. My years working with WordPress, PHP, ColdFusion-style thinking, templating, layout systems, performance optimization, and content architecture all translated directly into this project.

Next.js simply gave me a faster, cleaner way to apply the same problem-solving mindset: organize the content, create reusable systems, optimize the experience, and deploy with confidence.

Work with me