Kevin Powell - Community•10mo ago

Is my site layout saveable?

Two years ago I made a custom layout for my website. At a small scale it worked perfectly (only one page) but now the site is hard to navigate, the layout looks esoteric and there are too much elements (see the projects). I tried fixing it with making the background less bright and vibrant but I find that the site is still unpleasant to navigate. My question is: Should I make a complete style rework or can I fix the current style to make it more accessible? Here is the site: https://afghangoat.hu Any feedback is appreciated!

Afghan Goat Development

Click here to see projects I worked on!

39 Replies

Abdul Rehaman Shaikh•10mo ago

IMO it's saveable but you can still work on improving it with the design trends going on these days

majkl•10mo ago

IMO it (aethetically) calls for an overhaul. 😄 Tho it really depends on your customers, what they expect and are okay with.

Afghan_GoatOP•10mo ago

Currently, the only purpose of the site is to host some of my projects.

majkl•10mo ago

Sure. But for whatb purpose? For you only (as a storage)? Fine. To attract prospective customers? Showcase your skills? Then consider the viewer. But do not get me wrong, I know of quite ugly eshops that perform surprisingly well, too.

Afghan_GoatOP•10mo ago

The site hosts some of my THREE js projects, which (in theory) showcases my skills. My main problem is with the bloat. I am afraid that the site is not user friendly enough. For example, a viewer might not notice the buttons because the buttons don't look like too "buttonish". I need to simplify the website design somehow as this is just pure bloat. I consider making a more lighter site, maybe in a neo-brutalist style. I still want to make the site somewhat unique but I also want to make it more digestable.

majkl•10mo ago

My point exactly - it is grosly over the top, personally I would not be engaged in seeking what it is about (an how you could benefit me). Just make it more subtle, focus on your skills and value you offer and be a happy campet. Just my two cents.

Afghan_GoatOP•10mo ago

You are right. I will make it not so bloated. Thank you.

Joao•10mo ago

I agree, and to put it from another perspective: the fact that you are asking about this means that you are not entirely happy with the site itself, which already answers your own question. If anything, starting over can help to practice so it's not a bad thing nor a waste of time regardless.

majkl•10mo ago

It actually reminds me of those flaming gifs of the 90s. 😄

Afghan_GoatOP•10mo ago

Yes, it somewhat looks like a site from the early internet ages.

majkl•10mo ago

Perhaps you may build on that minecraft-ish pixelated graphics as in the "bug" thing. That I would find interesting.

Afghan_GoatOP•10mo ago

Thanks for the idea! I will try some designs and this time try to make them not too bloated.

Joao•10mo ago

One piece of advice... if you are trying to showcase your skills you probably want to avoid saying things like this:

Chatgpt helped me a lot because some of the tactics I used before was quite hacky.

Afghan_GoatOP•10mo ago

Huh, I don't even know, why did I put that there.

Joao•10mo ago

Not that I'm encouraging you to lie about it (you should be able to make it happen on your own) but at least don't make it obvious to potential employers.

majkl•10mo ago

Heh, I would love to bless you with sime more insights ... but I just do not have the guts to read and click those things. 😄

Afghan_GoatOP•10mo ago

Normally I don't use chatgpt as it does not generate scalable code but I got so mad in getting the data from the supplied url. I just wanted to get it done.

Joao•10mo ago

For UI/UX feedback for your new design you can create a new post in #showcase

Afghan_GoatOP•10mo ago

Thank you. I didn't notice there is a separate discussion for that.

Joao•10mo ago

But I mostly agree that it should be simpler to read. Doesn't need to be bare bones but the 3 animations at once is too much. I think that I little spacing between the projects and a smaller font size might already come a long way. Yeah no problem this here was more of a general question so it's fine but if you have doubts about specifics or want overall feedback, I think that's the better place to ask.

Afghan_GoatOP•10mo ago

Ok. Thank you for the suggestions. I will be back with a hopefully better site design.

majkl•10mo ago

Or... to pay homage to Gunnery sergeant Hartman, it is so ugly it could be a modern art masterpiece. o) I am in good mood, obviously. 😄

Afghan_GoatOP•10mo ago

Well, that is surely an option.

Joao•10mo ago

My bad, it's actually in #showcase.

Khoa•10mo ago

yo you have the most interesting projects ever man I think the page is quite readable

Afghan_GoatOP•10mo ago

Thank you but I've seen sites 1000x more creative than mine. I want to improve something. Your site looks way cooler and the readability is also better.

Khoa•10mo ago

I have some advice: - the fonts: change it to something easy to read, professional, sans-serif. I always recommend "Inter". you can keep the font of the heading if you like it. the text on your project description is too big, try 14-16px. google "typescale generator" it should get you a collection of font size to use - colors: do not use pure black and white, it cause eye strain. use a color palette generator: https://www.hover.dev/css-color-palette-generator, pick yourself a brand color and make it the primary in the generator - start using icons, it helps people navigate other pages easier - spacing: you need to create more space between each sections so that people can scan your website. example: create a empty space between your introduction and your projects (try 80px or more, something multiply by 8 is usually good) - if you want something really crazy, like animation and stuff, start learning gsap and follow codegrid on youtube - you can add a contact section at the end, link to your social media, email and stuff too - try having a hero section at the top (with images of you or illustration), introduce yourself, what you do - you can have a section that list your skills and your technology - add more padding to your project card - text-align:left on everything

Afghan_GoatOP•10mo ago

Thank you! Noted.

Khoa•10mo ago

you're using too many white border, it can distract people, try only using it for buttons, remove the rest

Afghan_GoatOP•10mo ago

can I use a border which is not white? A gray for example?

Khoa•10mo ago

sure, that's a good idea

Khoa•10mo ago

this half width thing is really bad for responsive lol, remove it

Khoa•10mo ago

replace your flexes with my grid

Khoa•10mo ago

.flexes {

    --min: 50ch;
    --gap: 1rem;
    display: grid;
    grid-gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

.flexes {

    --min: 50ch;
    --gap: 1rem;
    display: grid;
    grid-gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

you should be able to achieve any grid layout simply by adjusting the --min up and down

majkl•10mo ago

What you really need is visual hierarchy and whitespace. And I would kill the black background - it greatly limits use of additional colors (blue or green on black are just nonsense).

Afghan_GoatOP•10mo ago

What do you recommend for the background? An image or a single color?

majkl•10mo ago

In terms of visual hierarchy, on homepge you may want to dedicate each of those project an individual section, distinguished by a different light color (ar lightweight gradient), which can then play role in that project`s dedicated page. Or you can ho all in with white + good contrast ncolor (green?), but that would require some graphics (minecraft-ish, maybe). ...you can have white on nlack in th about-me (skills, yada yada) page, maybe.

Afghan_GoatOP•10mo ago

Okay, thank you for the suggestion. You guys helped me a lot, thank you all.

majkl•10mo ago

I can even imgine it as a one-pager where for each of the aforementioned sections there would be a toggle to show more details. But it depends, sinhglepagers have both advantages and disadvantages.

Gaming

Programming

Is my site layout saveable?