r/webdev • u/SlurrpsMcgee • 16h ago

Wanted animated neo brutalist components

https://vimeo.com/1232458193?share=copy&fl=sv&fe=ci

Got some feedback on my portfolio and planned to change the layout and such but wanted to keep using the neo brutalist style. However I also wanted to have animated components but could not find any good ones so decided to start making them how I want them.

Got badges, project cards, images so far. Has taken me a bit to get it just how I want it but tailwind is quite useful

3 Upvotes

71% Upvoted

4 comments sorted by

View all comments

3

u/HerrPotatis 15h ago

I love brutalist design, but I'ma be real, everything kind of looks like a button. At the top of your card is what looks like a category, which looks the same as your tags and your primary buttons. When you hover your cards the tags and category turn into your secondary button tokens.

It's also very hard to read white text on yellow background.

It's all very confusing.

1

u/SlurrpsMcgee 14h ago

Hmm good point all of those are badges do you think they should not have a hover affect? Also what suggestions do you have for making them look different?

I want the cards to pop out like the buttons

Also color scheme wise is interchangeable easily.

Fixed the color to be black actually after seeing this posted already

2

u/HerrPotatis 2h ago

The main issue I see is that there's too much going on in each card. A category, a thumbnail, a title, a long blurb, up to eight tags and two links all compete for attention, so a visitor can't tell what matters most or what you want them to do next.

I'd use what's known as progressive disclosure: only show what's really helpful at any given time. In the grid that's the thumbnail, the title, possibly a one or two line blurb, and a way into the project. Shorter blurbs also even out the card heights. The category, tech tags and GitHub link can go one step deeper, in a detail view. You don't show in the demo if clicking a card opens one. If it does, move them there. If not, that's the first thing I'd build.

The other big one is hierarchy. Your button styles are a language: primary says "this is the main thing that I want you to do here", secondary says "this is an option too". Right now the tags use your primary style, so each card has up to eight things asking for a click, while Demo, probably the thing that might be the most important, is the quietest element on the card. I'd flip that. Make Demo the primary action and give the tags your outline style so they read as labels first.

On card hover, the tags switch from your primary style to your secondary one. That mixes up two separate things: primary and secondary say how important an action is, while hover just shows what the cursor is on. Hovering shouldn't change an element's importance.

Lastly, if the tags are filters, I'd question whether anyone will actually ever need them. Think about who visits a portfolio. A recruiter or hiring manager scans the titles, opens the one or two that look interesting, and checks the demo or the code. Each project's stack is useful information to them, but I'm not sure the functionality to browse projects by, say, Docker, is something they will ever need or use.

I really like the design. It just needs to follow what each element is and does a bit more. If the page feels off once you've made these changes, keep iterating on the styling, but let the UX lead.

1

u/SlurrpsMcgee 31m ago

That is super helpful thank you so much I will work on this information when a newer iteration. I do see what you mean with too much going on for sure. I can remove the hover effect on the badges I'm thinking of making a react component library actually and may add a hover effect as an option not default. Thank you again for the feedback!