Crafting a Personal Showcase: How I Made My Portfolio

My process for designing and building some of the features of this site

Project Overview

As someone passionate about showcasing my skills and projects, I embarked on the journey of designing and building my own portfolio website. The primary goal was to create an online experience that not only reflects my professional abilities but also provides visitors with an engaging and memorable experience.

My Role

As the sole designer and developer of the project, I am responsible for every aspect of the process, from initial ideation, conceptualization, asset preparation, and visual and UI design to coding, deployment, bug-squashing, and continued maintenance.

Objectives

Personal Branding: Develop a portfolio website that effectively communicates my personal brand, style, and approach to design and development.
Interactivity: Prioritize a user-friendly interface with a touch of memorable interactivity to ensure visitors want to explore my work and learn about my skills.
Showcasing Projects + Technology: Feature a diverse range of projects with detailed case studies to highlight my expertise and problem-solving capabilities.

Challenges

1
Outdated Portfolio & Case Studies: My existing portfolio did not effectively convey my unique style and personality and lacked meaningful detail and explanation in the case studies.
2
Lack of Personal Branding: As someone who has a degree in graphic design, it pains me that I didn't have personal branding that I'm proud of.
3
Limited Engagement: No one really knows about my portfolio site, and I didn't have any sort of analytics in place to inform me of usage statistics.

Design Process

Brainstorming & Conceptualization

Competitive Inspiration

There are plenty of amazing portfolios on the web, but I was especially inspired by various interactions, interfaces, and quirks from the following:

Rough Sketches

Like most projects, I did my usual brainstorming and sketching in my sketchbook to further flesh out ideas.

One that I was particularly excited about was making some sort of interactive collage.

Personal Branding

I've long had the idea to "borrow" inspiration from a logomark created by Paul Rand for one of the titans of the design world, the classic IBM rebus.

I love the simplicity and effectiveness of such a lasting visual, and my initials are a perfect fit to riff on the famous design.

Collage & Color Studies

After doing a mini photo shoot with a number of sentimental items around my house and office, I started experimenting with different collage layouts and derived a color palette from the images to carry through to the user interface.

Solution

Key Features

Subtly Interactive Imagery

I knew I wanted to make the collage in the landing section more memorable, and one way to do that was to add interactivity subtle enough to entertain visitors without being completely distracting from the rest of the projects or case studies.

Integrated Email Form

My previous portfolios have lacked more intentional methods for contacting me other than email.

By integrating with the incredibly easy to set up Web3Forms API, I was able to build a simple contact form that is tailored to send messages how I prefer to be contacted.

Dead Simple CI/CD

Deciding to deploy my portfolio using Vercel has made continuous development and deployment a breeze because of their integrations with GitHub and great documentation for Next.js projects.

I also installed and now use the free tiers of Vercels analytics and speed insights packages to learn more about the usage and performance stats of my portfolio.

Technology Highlights

The React Framework

I explored and benefitted from a lot of the features with Next.js version 14, one of the top frameworks to integrate with React

Intentional Code Design

I treated my portfolio the same as any other TypeScript project I've worked on, benefitting from the type-checking, debugging, and other features of the language

Utility-First CSS

I used this portfolio as a deep-dive into the benefits and quirks of using Tailwind CSS, especially helpful for enabling dark mode

Top-Notch DX

This site is deployed and hosted on Vercel, chosen for its ease of use and amazing developer experience for a project this size

Modern Contact Forms

Integrating with the Web3Forms API made my custom contact form incredibly easy to configure, test, and use

Results & Impact

Metrics

TBD: Now that I have basic analytics incorporated into my portfolio site, I'm excited to track the usage and site performance over time.

Impact

I know this redesigned portfolio website will successfully elevate my online presence (because I haven't had a functional one for a couple years). I look forward to creating a positive impression and providing a stable website for effectively showcasing my skills and projects.

On a personal level it also feels great to finally have built a site that exemplifies my creative and technical skill set and is configured in a way that will allow me to easily make updates in the future.

Reflection

Designing and building my own portfolio website was a fulfilling experience that allowed me to express my personal brand and capabilities in a digital space. As the sole designer and developer, this project reinforced the importance of continuous improvement, creativity, and user-centric design principles in creating a compelling online showcase.

Lessons Learned

Content Is the Hardest Part: I'm grateful for all the marketing folks and copywriters I've worked with in the past - generating content is HARD
Documentation Is Your Friend: Well-written documentation can make even the most complex technologies easily approachable
The Web is Ever-Changing: New technologies are coming and going every day, and a personal portfolio is a great way to stay on top of the latest trends and frameworks

Future Recommendations

For future updates, I plan to regularly refresh project showcases, incorporate new technologies, and seek feedback to ensure the portfolio remains relevant and engaging.

PREVIOUS PROJECT:

WA State Parks

Camping Reservation System

NEXT PROJECT:

TPC

E-Commerce Rebrand