How to design a gaudy profile site

How to design a gaudy profile site

Published on December 22, 2024

The one thing I can confidently say about my site - it's not like any other designer or developer profile out there. That's not to brag (okay, maybe it's a little braggy), but to point out that sometimes it makes sense to put effort into your portfolio. I've had about 6 or 7 iterations of my site over the past four years and only one followed a typical design portfolio look. I hated it and got rid of it after a month. I'm chaotic neutral and I need a site that really shows that. 

I'm a big believer that a developer's portfolio should be where they show off, yet so many developers just pump out a basic profile and call it a day. And that's fine! For some that's all they need, they're not big into design and they don't need to show off. They have projects for that. My brother deals with Salesforce development, so he doesn't really need a profile site full of design features that grab the attention; he needs a site that gets all the information out to the recruiter as quickly as possible. Minimalism, standardized designs, and expected placement of sections are VITAL. In this situation, he wouldn't want it to look unique, he'd want it to look standard and something a recruiter can easily read and disseminate. He could make it look unique, but why? Why spend all that effort on something that ultimately will get the attention of a recruiter but won't do anything to impress the decision-maker?

That is the first lesson in web design, after all—what makes the most sense for the site? What's the goal? What are you trying to convey? In my site, I'm trying to convey that I have an eye for design and business and built-in marketing within my designs. A simple, run-of-the-mill design would be nice, but if you're looking for a designer and their site looks like everyone else's, what's the competitive edge? 

Hence my gaudy site! When I first set out, I had a typical minimalist portfolio site with some beautiful style elements ready to go, but I wasn't happy with it. It worked to attract recruiters and show off my ability to design and develop a site, but it lacked my personality. This is a portfolio site, it's about me, people will presumably be working with me in some capacity (or some of them) who read this site, so it makes sense that it should also function as a way to get to know me beyond the design and the code (and business development). 

I began to ask "Who is this site for?" What type of client am I trying to attract? The reality is I like working in creative industries such as photography, food retail, modeling, and general marketing. I also like working with clients who are young at heart and, while professional, have a personality that extends beyond business. Such clients tend to be more open to creative choices, tend to be easier to work with, and tend to understand the digital landscape when it comes to development. Not that there's anything wrong with working with more rigid business structures, it's just not something that I prefer as a designer. Minimalism and rigid corporate designs have their place - I'm working on a project right now that follows that pattern - but that place isn't on a portfolio website for someone who wants to work with clients in creative industries. 

Therefore, I needed to make a site that would deeply appeal to the client persona that I desire as a freelancer while also putting in sales barriers for the types of clients that I may not be best suited for. I didn't just design a site that would turn on a client, I designed a site that would also turn off a certain type of client - the type that I know I'd struggle to work with and likely wouldn't be a good fit with. If someone sees my site and goes, "Oh absolutely not" then they've made a great business decision for the both of us and I wish them all the best! There are millions of approaches to web design and I'm simply not going to be the best person for every approach, but I will be for others and my site helps establish that up front. 

I began to look at the customer persona for the type of client that I do want - creative, young at heart, receptive, collaborative rather than authoritative - and asked myself how I could design a site that would attract someone like that. Minimalism has been in vogue for years and for good reason - it looks good and works. It allows you to focus on the information you want the client to focus on and forces a good use of white space. Minimalism is, without a doubt, a beautiful way to design a website. But it also looks clean, professional, and crisp, and that's just not what my site needed to convey. I'm appealing to other freelancers and small business types, and "professional, clean, and crisp" rarely describes anyone of us in those fields! 

Freelancing and small businesses are chaotic, amateur at times, and run by the seat of your pants. I needed a site that was designed in that way. Of all the design styles out there, I chose to rely heavily on the neubrutalist style. It's gaudy, it's in your face, it's amateurish, it's chaotic, but it still brings over the aspects of minimalism that make minimalism work. Looking at the site even if you don't know any code, the implied feeling is, "Oh I could do this." It's not intimidating, it's welcoming, it's even immature, but in a professional way. This makes the site approachable and, by extension, makes me approachable. I'm not the know-all guru of tech; I'm the goofy guy with a goofy site who would be fun to work with. 

This directly resulted in the color choice for the site. Originally, I planned on having a light and dark mode or possibly even multiple themes a user could select. I instead opted to go for a low-saturation approach with colors and minimize the amount of text with a light background. While people with sensitive eyes - such as myself - can struggle with lighter backgrounds and text, when it's minimized and placed into chunks coupled with avoiding absolute white or absolute black, it drastically reduces the eye strain without having to introduce a theme changer. The spacing between the text containers allows for a break in the reading and a break in the contrast between dark grey and light grey, which resets the eye and gives it a temporary break before moving onto the next chunk of text. 

For the amateurish look, I chose the non-amateurish SCSS. Due to the repeated styles with different colors, the use of mixins and functions were necessary in my designs. I originally wanted to challenge myself and build this in Tailwind, but due to the large numbers of customizations it simply made sense to stick with SCSS so I'd have more control. Plus, since the framework is Next.js I can use scss modules and not have to worry about class names conflicting. 

The blocky style of the sections is an homage to the old school internet of the 90s when everything was windowed by thick borders. I do think Pit Viper does a better job than anyone else on the internet of bringing a modern twist on the old internet. However, I didn't want to go full 90s. Instead, I wanted a 90s-esque homage, something that triggered a feeling of childish nostalgia without duplicating the items of the past. The way to test it would be to run it by Gen Z, people who grew up on the modern internet. 

But first, I needed something to compare this against. I took my other site, my clean, professional site, and showed this and the other one to about 20 people ages 18-25. 100% chose the site you see before you, all of them said it made them feel warm, comforting, and even like the better parts of being a child. In other words, my design worked! It also stroked my ego because the other site was a knock-off design from a Ukrainian designer that I follow. Ukraine, in my opinion, produces some of the most talented web designers in the world and I find myself drawing from them quite a bit in my inspirations, so to have one of my designs selected over a Ukrainian designer is, to me, an incredibly high achievement. 

With that in mind, I originally built the site in React. The site was beautiful, but it was one page (as in actually just one page - there were no links to any additional pages, just like a typical portfolio site). And being in React it lacked all SEO that Next.js brings. While there are libraries for this thing, Next.js comes with SEO built-in out of the box and I happen to love Next. For the "relaunch," I built the same site but put it in Next.js. I then added a blog and an admin panel for myself so I could create blog posts and read messages. And that's it for admin functions. For now at least. If the freelance business grows then I'll add a client portal at some point. But for now, it really doesn't need much beyond a blog and messages. While I could have offloaded more onto firebase, like my projects, the big question is "why?" I am the only person who will touch the code, all I have to do to add a project is copy and paste a component and fill out the info. Limiting the admin functionality makes the site less complicated to build, easier to maintain, and doesn't limit me. After all, I'm the one who built it and I control the repository. A simple update to my main brand and, boom, a project shows up. 

I also added pages. The reason is a few recruiters stated they wanted more information about me. Having done sales, I know that when a sales target tells you that you almost missed them, that means you've actually missed others because of that reason. For the handful of recruiters who said they wished they had more information on me, I figured there had to be at least 4-5x as many who just didn't even bother reaching out for the same reason. So I created pages to add more information about me to appease the recruiters who might want to know more information. Or maybe it was to tickle some narcissistic itch. I really don't know. 

The unique thing, however, is none of my pages are designed in a traditional way. In most sites you'd go to the page and scroll down in the order the page creator has dictated. Instead, I put modal buttons on the pages to let the user decide which information they want to see first. Keeping in mind that I'd have recruiters, decision-makers, business-owners, and potential clients reading this site, some information would be more important to others depending on who they are. So how do you organize a page that way? Maybe they want to see my CV and don't give a #*$ about me as a person; why make them scroll through all the stuff about me as a person? With my design, they can just click on the modal button, see the information they want, and go about their day. They can do this in the order they want. It gives the user more options without complicating the experience, which at the end of the day, isn't that what web design is about?

And that's basically it. That's how you design a gaudy website; have a weird personality and throw your personality into the site. In all seriousness, the site has worked as intended. It's grabbed the attention of people who see it and, most importantly, it's created a lot of smiles.