EM Topics: Portfolio Revamp Case Study

Reimagining a digital home to bridge the gap between student projects and professional brand strategy.

Spring 2025 | NMIX6012 Your Role: Lead Designer & Web Developer

Homepage of my redesigned portfolio

Project Overview

In the marketing and design world, it is crucial to have a portfolio that communicates everything you want a hiring manager to know. Whether a recruiter glances at your site for 30 seconds or three hours, your portfolio must capture your personality, skills, values, and work. It is the tool that helps you stand out among a sea of qualified candidates; if a recruiter can connect with you based solely on your personal brand, that is the ultimate goal.

I began my portfolio journey back in Fall 2024 during my first-ever web development class. It was one of the final projects we created, and looking back on it now , let me tell you , it was rough. Since then, it has gone through many iterations. This past winter break, I started updating my work, but it wasn’t aesthetic by any means; it was just one big data dump.

The Problem

There were so many problems with my portfolio when I began tearing it apart in early January 2026. While I had branding throughout the site, it didn’t quite feel like it represented me anymore. My work was sectioned off into “buckets” that made sense at the time (All, Class Projects, Internship Work, and Other), but it wasn’t clear what I had done or who I had done it for. Additionally, the mix of cover images wasn’t brand-consistent.

Old portfolio case Study project filter

My sections were also out of order; I displayed brand logos before ever showing a photo of myself, and the “About Me” section I did have was a Canva collage that didn’t feel professional. Within the project pages, I didn’t have a clear narrative. Descriptions weren’t in the STAR format, lacked impact numbers, and I felt like I had to link every single piece of work I’d ever done, even if I wasn’t proud of it. Technically, the spacing was completely off; without the right padding, everything sat too close to the left on full screens, making it not responsive at all.

Old portfolio about me section

Old portfolio case study page for RaceTrac

I met with my professor, Kyla, for a conference to deep-dive into how I should approach making the site better. I left that conversation with two things in my mind: One, oh gosh, I have to start over. Two, oh gosh, how am I going to start over?

The Solution

Feeling overwhelmed, I began by researching other popular websites. I knew I didn’t want to pay a monthly fee or be limited by storage on a free plan, which ruled out platforms like Squarespace and Wix. I looked into Readymag for its animations, but the free plan was too restrictive regarding page counts, fonts, and domain implementation. I even considered Framer, but I realized it was much harder to update than a Bootstrap template. I decided to stick with Bootstrap but find a fresh template to start from scratch.

I looked for a one-page scroll base and began customizing it with the help of Google Gemini. I implemented several key updates to solve my previous pain points:

• Strategic Bucketing: I reorganized my work into targeted categories: All Projects, Social Media & Content, Campaign Strategy, Branding, Digital Experience, and Storytelling. I also made all my covers match, so it wasn’t overwhelming and maintained that brand consistency.

New portfolio strategic bucketing

• Animated Brand Logos: I kept the section displaying brands I’ve worked with but animated it into a slider where users can hover to stop and look closer.

Old brand logos displayed

New animated self moving slider

New animated slider when you hover

• Brand Identity: I created a new brand guide with updated colors, typography, favicons, and imagery that better represents my tone of voice.

Personal brand style guide

• Tailored Project Pages: I moved away from a “one-size-fits-all” layout. Each page now highlights the specific Role, Skills, Tools, and Project Type at the top. I updated all descriptions into a STAR format dropdown to keep the UI clean. Additionally, implementing a z-pattern to display my work examples in an easy and digestible way.

Project page case study

Z-Pattern Layout

• Impact-Driven Content: For RaceTrac, I focused on numbers like average engagement rates. For See Spark Go, I highlighted agency work for various brands. For class projects, I embedded the actual presentations, and for Innovation Gateway, I built an interactive “card clicker” to showcase photography and articles.

The imapct numbers

My photos displayed in the interactive card clicker

Results

The transition from a student “data dump” to a refined brand asset has been one of the most rewarding challenges of my graduate career. By prioritizing mobile responsiveness and intentional white space, I have created a digital home that finally mirrors the quality of the work it holds. I learned that in the world of design, less is often more.

Beyond the aesthetics, this project forced me to master the balance between pre-built frameworks and custom code, giving me the technical confidence to maintain and grow this site as my career evolves. By leading with my personality and backing it up with data-driven storytelling, I’ve moved past the “rough” first draft and built a platform that I am genuinely proud to share with the industry.