Case study · Portfolio Website

Professional Portfolio

A second, recruiter-focused version of my portfolio with a minimal monochrome bento layout that shows my projects, experience, tech stack and certificates at a glance.

Role: Designer & Developer
Year: 2026
Type: Website
Status: Live

live site source code

01 — overview

This site is a cleaner companion to my personal portfolio. A profile header with quick stats and internship status sits above bento cards for About, Experience, Tech Stack, Projects, Certificates and Social Links, and every project has its own case study page.

02 — the problem

Recruiters spend very little time on each portfolio. My personal site has a lot of personality, but I also wanted a version that shows the essentials (who I am, what I've built, and my experience) in a few seconds.

03 — goals

Show the most important information above the fold
Keep the design minimal and consistent in light and dark mode
Reuse the same project and case study content as my personal portfolio

04 — approach

I kept the data-driven structure from my personal portfolio, so profile details, the experience timeline, skills and projects each live in a data file and the cards and /projects/<slug> pages are generated from them. The visual design switched to a monochrome bento grid with Geist and Geist Mono type.

05 — stack

Next.jsApp Router pages, generated case studies and the chatbot API route
ReactInteractive pieces like the chatbot, theme toggle and screenshot viewer
CSSHand-written monochrome styles with light and dark tokens
Simple IconsOfficial brand logos for the tech stack
Gemini APIPowers the "Ask Carl anything" chatbot
VercelHosting and analytics

06 — key features

Profile header
Photo, location, role, quick stats and an "Open to internship" call to action.
Bento cards
About, Experience, Tech Stack, Projects, Certificates and Social Links in one grid.
Experience timeline
Roles and dates, from technical support work to leading development on Teech.
Project case studies
Desktop and mobile previews, a screenshot viewer and a write-up for every project.
Ask Carl anything
A chatbot that answers quick questions about my work.
Light and dark themes
A toggle in the header switches between the two.

07 — challenges & solutions

Saying more with less
Problem
A minimal layout leaves little room, but recruiters still need to see projects, experience and skills.
Solution
Each card holds one kind of information, and the profile header carries the key numbers and the internship status so the most important facts are visible first.