Case study · Portfolio Website

Personal Portfolio

My personal portfolio: a responsive portfolio that presents my projects, skills, certificates and contact details, with light and dark themes and an AI chatbot that answers questions about my work.

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

live site source code

01 — overview

My portfolio is the one link I share with recruiters, classmates and collaborators. It brings together my projects, skills, certificates, resume and contact details, and includes a chatbot that answers questions about me in my own voice.

02 — the problem

A PDF resume can't show working software. I needed a place where someone can see what I've built in a couple of minutes, on any device, and reach me easily.

03 — goals

Present projects with real screenshots and a written case study for each
Work well on phones, since many visitors come from social links
Be easy to find by name in search results

04 — approach

Content such as skills and projects lives in data files and is rendered by reusable components, so adding a project means adding one entry. Case study pages are generated at build time from the same data.

05 — stack

Next.jsApp Router pages, API route for the chatbot, static case studies
ReactInteractive components like the chatbot and previews
CSSHand-written responsive styles and theme tokens
Gemini APIPowers the Chat with Carl assistant
VercelHosting and analytics

06 — key features

Chat with Carl
An AI assistant that answers questions about my projects, skills and contact details in first person.
Light and dark themes
Follows your system setting by default and remembers your choice.
Project case studies
Desktop and mobile previews, a screenshot gallery and a write-up for every project.
Certificates and resume
Dedicated pages to view each credential and my resume.
Search-friendly
Page metadata, Open Graph tags, a sitemap and Person structured data.

07 — challenges & solutions

Keeping the AI key private
Problem
Calling the Gemini API from the browser would expose the API key to anyone who opens developer tools.
Solution
The chatbot sends messages to a Next.js API route, which adds the key on the server and calls Gemini. Only the last 12 messages are sent, and the instructions keep answers limited to facts on my portfolio.
Theme flashing on page load
Problem
Pages briefly rendered in the wrong theme before React loaded.
Solution
A tiny script in the layout sets the theme before the page is shown, using the saved choice or the system preference.
Fitting a lot of content on small screens
Problem
The navigation and hero didn't fit well on narrow phones.
Solution
The navigation scrolls sideways on small screens, the hero reorders its content, and layouts adjust at several breakpoints down to 360px wide.