Designing a Basic Portfolio Site

Published on February 9, 2025
With my own flair for flamboyance in my designs, or making them look unique, it might surprise you that I also know how to build a standard site as well! A website is a lot of things wrapped into one, but at the end of the day it's about brand identity. Whether you're a cinnamon roll shop, a car manufacturer, or just a person looking for a job, the site's design needs to reflect the message you wish to convey.
Someone looking to break into the data analyst field is going to attract recruiters and interviewers who:
1) Want the information as quickly as they can possibly get it
2) Doesn't need to be dazzled by design
3) Actually want something that is uniform and easy to follow
Now, Rebekah had a traditional HTML build that she did herself and it was fine. It covered everything and fit the basic template that you'd expect from a code camp. It was a good build, but it didn't stand out.
See, that's the challenge with minimalist designs - sometimes the minimalist approach makes the most sense, but with minimalism there aren't a lot of chances to stick out. You want to match everyone else's site and follow a standard, but you don't want to do it to the point you're not memorable.
Thankfully, she chose a very good color palette for me to work with, one that is naturally eye-catching. I love purple and, when used right, it absolutely pulls attention to CTA's and other important elements on a site.
This follows a very simple design approach - hero section, about, skills, projects, contact. This is the natural order that most recruiters are going to look at when considering a candidate. They want to know a bit about them (cultural fit), what their skills are (tech fit), and what projects they've done (proof of skills). If everything lines up, they're going to want to contact the candidate. After speaking with recruiters, as long as they get a brief overview and everything looks right, they'll often reach out to the candidate from there.
The splash page, then, functions as a very basic CV sans any job experience. It's for a recruiter to look at and go, "Yup, good candidate, let me use this." However, recruiters aren't the only ones who will look at the site. Presumably, anyone conducting the interview will also look at the site and want even more information. This is the importance of having pages in your profile site, but in an HTML build going from page to page can cause a browser refresh and require a new file to load. To go the extra mile for Rebekah, I built this in Next.js to avoid that issue.
And it's not that big of an issue. After all, that's how the web has worked ever since I started using it (we won't get into how long ago that was). But we now have tech that can make page transitions faster, preload links, etc, and Next.js has all that tech. To increase the speed of the site and getting to the information, it made sense to make access to that information as unobtrusive as possible.
Going to the pages gives you more information that you would need before conducting an interview. The About has more information about her plus her work history, the skills go in depth on the various libraries and other techs associated with the base tech skills, and every page has a way to contact her or access her social media to learn even more about her.
The whole built from design to launch took aproximately two months as I was busy doing other things and doing this part-time. This was also my very first client project of someone who wasn't a family member or a friend, so I wanted to get it right. The advantage to this build is that I didn't need to build an admin panel - since Rebekah knows how to code and has a basic understanding of HTML, CSS, and JavaScript, I was able to leave developer notes inside the repository on how to add projects, change colors, change images, and so on. This, of course, makes the site super secure as the only way to really change any of the data is to access the repository, which only she has access to.
Finally, to add the extra-mile to this, I gave it a light and dark mode. Some people who are going to spend time on the site are developers, meaning they're going to likely want a dark mode (it's a sick mind of a developer who prefers light mode). It's a design option that gives users choices with minimal effort on building, so why not add it?
And that's basically it. A very simple design and build that serves its purpose, is utilitarian, but also stands out. When designing your own portfolio site, remember, the first question you should ask is, "What do I want this to say about me and who do I want this to apeal to?" Every design decision should flow from there, and that's exactly what I did here.