How to design a gaudy profile site

How to design a gaudy profile site

Published on December 22, 2024

escaping suburbia

There’s the safe way to build a developer website – to show that you’re professional, restricted, and understand tech-minimalism – and then there’s what I did.

I’ve always been…weird. I’m an ADHD, anxiety-riddled mess of a human being who is fascinated by big, bold designs. Growing up in the Untied States I’m very used to the corporate design on everything. If you’re in a suburb anywhere in the Midwest, you already know what the buildings will look like. In the United States, conformity in design is everything – especially if it’s utilitarian.

We’ve let that bleed over into web design, but at a global scale. We’ve suburbanized the internet. Are you making a website for a law firm? We all know what it’s going to look like before you’ve even opened your Figma file because everything in design tilts toward pragmatic, utilitarian displays.

Use only the elements and graphics you need to (1) make the button work and (2) make the site brand-specific. But at the end of the day, no matter how much marketing you add, that’s what it is, marketing. It’s not art, it’s not expression, it’s not soulful. It’s cold. It’s internet suburbia.

The thing is, I hate suburbia – both in real life and on the internet. So when I built my first two portfolio sites, I didn’t know the rules and just built sites that felt like me.

I quickly figured out that a gaudy profile site that had an x-overflow that caused the screen to move back and forth by about 1200px likely wasn’t going to land me a job. So I moved back to the suburbs of the internet, built my suburban house that looked like everyone else, and was accepted by into society via interviews. Yet, I was bored every time I looked at my site.

a website for me

I’m 6’0, 180lbs, in decent shape, and have a deep voice. I was also raised to believe in the typical male stereotype of being strong, being in control, and not taking anything from anyone. In many ways, I’m a “brute.” Or at least I was at one point…or at least I wanted to be perceived as one but really I’ve always been kind of a big softy on the inside and a kid that never grew up.

Who I am matters. When I’m in a space where I feel comfortable, I’m goofy, fun, don’t take life seriously, but also work hard.

That matters. It matters not just who I am, but that I know who I am.

And it matters that this is reflected in the site I build that’s supposed to capture the attention of a future employer. After all, if someone looks at a site that is imbued with my personality and goes, “Gross, I hate this,” then there’s a really good chance I would have never fit in there. The entire point of putting my personality into the design is my self-selector: if someone doesn’t like the design of the site, they likely wouldn’t like me (well, working with me – they still might love me as a person).

So every single iteration of my site just felt devoid of me. Each time I went through an iteration there’d be parts of the site that stood out, that reflected who I was as a person, but for the most part they were incredibly sterile. But, I was getting interviews (and failing, because I really didn’t know what I was doing). The sites were working. And I was left feeling empty looking at them.

Neubrutalism for the new brute

After failing quite a few interviews, I decided it was time to go back to the learning board. Obviously, my bootcamp education hadn’t really prepared me as advertised. I was faced with two options:

  1. Give up

  2. Don't give up

I’m sure I could elaborate, but really it boils down to that. Ce la vie.

I threw myself into a year of self-education around web-development and emerged wanting to build a site that displayed not just what I had learned and what I knew, but who I was as a person. I wanted a future employer to look at this and see that I’m not just qualified for the role; I’m a good fit for the company. Or not! Self-selection is an important part of this.

Around the time I was looking to create my own site, a friend at work approached me and asked if I could build a photography site for her photography business. She wanted it to look like a fashion magazine, not like all the other photographer sites she had seen out there.

I switched over to look for inspiration for the photographer’s website. I began going to multiple fashion websites and started to pick up on a new design pattern. Thick borders, dark box shadow, more than 2 fonts, more than 2 colors even! This was excessive, expressive, and just…in your face gaudy. It was like they took a design style guide from the 1990s (if they had existed) and updated it for the 2020s. Hello, neubrutalism.

If the internet has turned into suburbia, neubrutalism is trying to turn it into an eclectic urban block.

Neubrutalism is the response to techno-minimalism, or just minimalism in general. For years, most websites, especially SaaS-oriented or anything tech-oriented, have been built to look sleek, minimalistic, and modern. We’ve had various phases that attempted to spice it up – looking at you, glassmorphism – but nothing really stuck.

Neurbrutalism comes along and says, “Well, let’s keep the white space but just sod off with everything else.”

i am a child of the 80s and so is my website

Even though I was born in 1983 (shut up), most of my deepest, most entrenched memories begin in the 90s. Makes sense, right?

I’m old enough to have been a child in the days of the early internet, when your computer would scream in pain just so you could connect online. I remember those early, early days of the internet with big borders, boxes with no corner radius, and of course, background wall art. Every site looked unique to the business. Every site attempted a theme or was someone just saying, “God I just want to have a basic website and be done with this.” It was odd. It was hard to use. It was great.

Gone were the inaccessible wallpaper backgrounds and color schemes of the 90s – but the big borders, lack of border radius, dark box shadows, and anything else that offended the sensibilities of those using TailwindCSS were in.

I saw this style and immediately fell in love. Within two days I had my entire site designed in my head and began putting it into Figma. I did a semi-high-fidelity design just to test some ideas out. What came out was something that felt like me and the perfect homage to my first foray into the internet as a young child.

That’s why I have my kindergarten photo as the hero photo. That would have been taken in 1990 (shut up). It’d be a few years later that I’d get to play Oregon Trail, the best video game ever created. And a few years after that, I’d have a friend at school tell me about AOL and it was off.

Being an elder Millennial I’m part of an incredibly unique group in history – those of us born in the late 70s and early 80s are the only generation (generational subset since Gen X is included in that) that grew up with the internet. I don’t mean, “Grew up with the internet existing,” but that we remember a time before the internet was commonly used, but as we entered late adolescence and early adulthood – incredibly formative years! – the internet was also hitting the mainstream and becoming a necessity for us.

We were the first people to remember life before the internet, to then grow up as the internet grew up, and then be expected to be experts in it by the time we hit the workforce. Learning HTML was easy for me because I grew up on the mean streets of the message boards.

And so, it made perfect sense for me to go with a website style that matches my origin story. Beyond that, I hate suburbia, both the internet and in real life. I love large, multi-cultural, artistic urban areas. Neubrutalism, being that urban renewal (but in a good way!) of the internet, fit me like a glove. It was time to escape suburbia.

...and a dash of personality

The other great thing about the neubrutalist design style is that the only constraints you have are the ones that tend to make the most sense. You want a lot of white space, you want everything to be readable, you want everything to flow in a logical order. Outside of that, do whatever the hell you want.

I imagine neubrutalism being some burned-out artistic New Yorker who also has blue-collar chops.

Can I have more than two colors?

“Two colors? You gotta’ be kiddin’ me, right? Here, let me tell you, you can do five colors, okay? Six color, seven col.., TWENTY COLORS! You do want you wanna’ do long as it’s accessible.”

Can I have thick borders?

“Can I have thick borders? Look at this guy! You BETTER have thick borders.”

Okay, but what about box-sha…

“You make that box shadow bold and obvious. Don’t you fuckin’ try and put opacity on that shit.”

Add in the neubrutalist flair for excessive icon use (hint: google aria hidden) and my love of using icons to express things, and I was set.

designing for decisions

While you can break as many rules as you want in your design style, there comes a point where the rules of reality will kick in and limit what you can and cannot do. In this case, a portfolio site still has a purpose, that purpose ostensibly being to get me a job.  

Profile sites for developers are weird because no matter what you do, you’re going to be wrong. Recruiters will tell you one thing, fellow developers another, and decision-makers nothing because they’ll end up ghosting you after the interview anyway.

I think this is why we’ve all moved to the internet suburbia. It’s safe, it’s uniform, everything is put in a known order, and therefore it’s safe to navigate. If you move from a suburb of Wichita to a suburb of Dallas, the acclamation period will be a few weeks at most because everything is still mostly designed the same way. If you go to a UI/UX developer’s website to a Java developer’s website, they’re going to look mostly the same because mostly everything ends up being designed the same way.

The double-edged sword of relying on conformity is that while your site will be easy to navigate, it’ll also be easy to forget. How many times have you been visiting another city, gone into a big-box retail store, and completely forgot that you were in another city because everything was the exact same layout (or similar layout) to what you had at home?

I refuse to accept that trade-off. I refuse to accept the trade-off of conformity for forgetfulness. I wanted my site to be remembered, for better or for worse, but still be navigable and easy to digest the information.

To design the site properly, I needed to know who my audience would be. In this case, it’s pretty easy to know:

  1. Recruiters

  2. Decision-Makers

  3. Candlestick Makers (future co-workers)

Recruiters

There isn’t a recruiter on the face of this planet who will spend more than two minutes on your website. If they can digest it and come to a decision of “contact” or “don’t contact” within 30 seconds even better. This is extremely easy to accomplish in a minimalist site. It’s extremely difficult to do with a neubrutalist site. So of course I chose the difficult path!

The content and spacing of my site allows someone to work their way through it in about a minute if they’re just scanning and checking off a mental list of things they’re looking for. At the same time, my site is also full of different colors and animated icons.

When you’re rebuilding a rundown urban space, one of the most effective things to do is start designing the streets to slow down traffic. You widen the sidewalks, add more art and trees, and make the area pedestrian-first. Any traffic going through the area has to slow down and anyone who is in a hurry knows to avoid that area.

My site is designed in a similar fashion – due to the color usage and icon use, it forces a person to slow down without feeling like they’ve slowed down. If they’re in a hurry, if they want to rush through things, if they’re trying to hit a quota or a deadline, they’re just not going to waste time on my site. They’ll skip by me, and that means a company that is putting a recruiter under such a harsh deadline or quota that they can’t spend an extra 1-2 minutes on a website to qualify a candidate won’t consider me for a job in their turn-and-burn factory. Win for me.

For those that can afford to slow down, they’re going to run into a site that is unique and will stand out against all the others they view. But it also respects their time and gets the information to them in a quick and succinct fashion. By the time you get to the bottom of the about section, you have 90% of the info you need about me to know if I fit the job. After that is the stack, and by then most recruiters will know if I’m worth reaching out to or not.

For those that are spending a little extra time, they run into my projects as proof of my claims and then they hit a contact section. The end. While a recruiter will likely slow down slightly when coming to my site, that slow down will be their choice, and almost a subconscious one because of how the site is design.

decision makers

Of course, if a recruiter likes my site and contacts me, they’re going to pass me onto a decision-maker(s). If they do their due diligence, they’ll go to my site and likely spend a little more time on it to see who I am. I fully expect them to pick a random project to look at or a random one to read about (hello there if this is you!). They’ll likely go to my about page and see what I’m all about.

On the about page they can learn what they want to about me. Rather than taking the traditional approach of trying to dictate the order the user will learn about me, I instead went with three basic cards that summarize my developer side, designer side, and business side. If they want a more in-depth look depending on the position applied for, they can click on the modal button and more information will pop up.

The entire point of adding a blog on here was for decision-makers. There’s a blog page that you can navigate to on foot (well…via hyperlink), but it’s not really active and likely never will be. The posts serve as ways to show off and explain my projects. For all other thoughts, I have a freelance site with a blog there, or my own personal blog that I created.

future co-workers

What makes me so proud of my site is that non-developers look at it and love it. I’ve had people look at it and actually click through the pages and read the content! When showing off our projects to people, as web developers sometimes it can feel like they’re humoring us with the praise, while internally they’re thinking, “This isn’t that big of a deal.” So when we see people excitedly looking through our site and using features without us prompting, it’s confirmation that we landed on a good design.

The people I work with won’t just be developers and designers. I’m hoping that if anyone is curious about me and stumbles on my site, they’ll get a really good idea of who I am. My site doesn’t scream “takes himself very seriously.” If I show up on day one with self-deprecating humor, some goofiness, but a willingness to help others then it’ll be the least surprising thing to anyone who has been to my profile.

When revitalizing an urban area, you want to respect the local culture and populace. The buildings, businesses, and just  vibe of the area should reflect the culture of the area. Walk down Sedgwick Ave near Van Cortland in the Bronx and you immediately know you’re in a working-class neighborhood that likes to party, just not there. Go a few blocks west and you immediately know the people there like it loud, like it busy, and like it quick.

A website should be no different. Any future co-workers who stumble on my site are going to have a really good idea of who they’re dealing with. I’m not a mystery, I’m on their screen in all its neubrutal glory.

under the hood

This version of my profile has undergone quite a few changes since its first launch in 2024; in many ways it stands as a testament to my growth as a developer. When I first launched it in React, it was obviously created by a newer developer. The latest iteration cleaned up the code, improved some UX issues, and serves as what will likely be the final version of the site.

from figma to SASS

I started my journey with a Figma design that was more a rough draft of what I was aiming for. Really, what I had in my mind was a struggle to translate to Figma. I wasn’t entirely faithful with what I wanted, but instead used Figma to test ideas and design concepts, figure out layouts and divs, and so on. Where Figma served as the biggest advantage was figuring out my typography and colors before getting into my SASS files.

In SASS I set up my base folders and files that I knew I would need. This is always a complex part of design. One approach has you planning everything you can up front – build the components you know will exist, design them, create your variables off those designs, rinse and repeat until your frontend is mostly plug-and-play with components. Of course, another way is to just do this as you go along.

My approach was…both. I built the designs, variables, mixins, and components first. I figured out what I would need, knew the things I wouldn’t need, and was left worrying about the things I knew I’d need but didn’t know about.

This, of course, was early on. When I went through on the refactor this was easier; just look for repeated patterns, offload it into a mixin or utility class, and call it a day.

Pages, Blog, and admin!

When upgrading my site I threw it into Next.js from just React. This transition is natural, of course, since the Next.js framework uses the React library. I wanted to add pages to my site – 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 bother reaching out for the same reason. So I created pages to add more information about me to appease the recruiters who might what to know more about me. Or maybe it was to tickle some narcissistic itch. I don’t really know.

While React can handle “multiple pages,” you’ll have to use a library for this and it can get clunky. Next.js handles this natively with its file system – to create a page you just go with app/page-name/page.tsx (or jsx) and then you link to that path. Doesn’t really take a lot. And, of course, it’s all still a single page site, but there’s no flash when changing the displayed layout and it allows you to create animations if you want to (I did not).

I also wanted to add a backend via Firebase and Next.js just makes it easier to sync up with a database. Again, everything I did you can do in React, because React is just JavaScript, and everything I did you can do in just JavaScript. But Next.js makes it easier, and I like easy.

The blog went through four different libraries before I found the Utopia of rich text editor libraries. Every single library I tried out for my rich text editor was a pain in the ass to set up and even harder to work with on styling. I started looking for other libraries, reading reviews on Stack Overflow, and realized they all suck (unless you want to pay money).

the miracle of tipTap

If you really want to pump life into an urban area or downtown, the easiest way is to introduce mixed-use housing. The reason is that mix-used housing is a building type that’s built for a highly dense area that will require different types of housing and commercial usage. It allows the buildings to be almost agnostic as to what they’re ultimately hosting. Apartments? Yeah, no biggie. Retail? Yeah, we can do that too. Versatility leads to profitability.

TipTap is the mixed-use housing of rich text editors. It’s made for React and therefore is meant to be component-based. Styling it is extremely easy too since it’s design-agnostic. Yes, this means you have to account for everything that could come out of an editor, or that could go into an editor, but oh my God is it worth it! And it’s incredibly simple.

Suffice it to say, TipTap impressed me to the point that I now find excuses to use it in my builds. Need a minor CMS? Yeah, why not use TipTap for that? Blogs used to be a pain for me almost exclusively because of the rich text editor issue. It got so bad that I looked up how to just create my own. Thankfully, I found TipTap in the middle of that search and haven’t looked back since.

what's next?

As I alluded to above, I wasn’t sure if this was the final version of my site or if there’d be something else. The answer to that is…of course there will be something else. However, this site hasn’t been a waste.

This was the most complete version of my profile that I built, completely original, and my first dive into neubrutalism, a style that’s defined most of my builds.

Still, I’m currently learning a new tech and will likely use that to build the final site that I want. That site will have a new backend that’s based on SQL instead of NoSQL and have other features. I’m currently designing it right now (the backend). Still, it won’t launch until Q3 2026 at earliest, with a more realistic launch of Q1 2027(!!!). Until then, this site will be here.

Building this site was about more than showcasing my skills or just having an online presence. It was about reclaiming identity in a field that too often pushes people to conform. I didn’t set out to rebel against minimalist design or UX conventions for the sake of it. I just couldn’t keep pretending that blending in was the best way to stand out.

Neubrutalism gave me a way to scream This is me in big font, bold borders, and weird vibes. And yeah, it might turn some people away, but if you’re still here, then either you’re hate-viewing or you’re really into this stuff.

At the end of the day, web development is just another form of storytelling. Whether I’m building a personal portfolio, a bakery ordering system, or a photographer’s site that feels like Vogue, the same principle applies: communicate clearly, design with intention, and leave a little soul in the work. I don’t want to just be another name on a resume. I want to be remembered. Not for being perfect, but just for being me.

So this is my house, built right in the middle of internet suburbia, but with neon paint, crooked picture frames, and an open door. You don’t have to like the layout. Hell, you don’t even have to come inside. But if you do, I hope it makes you feel something. Because in a world where websites are templated to death and everyone’s trying to optimize conversion, I think there’s still room for art, honesty, and the kind of chaos that reminds us we’re alive.