my website kinda looks empty
Hey ! Not really a technical question but I made of custom portfolio website from scratch with vanilla html/CSS/Js and I feel like my website looks empty. Any recommendations/design choices I should make to make it feel better ? Thanks. https://antonycd.com/en/
61 Replies
your website has bigger issues than "looking empty"
i strongly disagree about it looking empty
Can you explain what you mean by bigger issues ?
I'm not that good at designing stuff so I don't really know
well, a simple one: your cv is very hard to read and has an empty page
that's a little bit of wasted space
your design also suffers from content layout shifting issues
in fact, the content is all generated by javascript/jquery, which is horrifying to look at
i understand what you're going for, but that doesn't make it any less bad
also, you have alignment issues all over
here's my opinion on the design, pointing out some things i thought they were of interest
forgot this one: the space between the CTA (call to action) button and the content isn't equal and makes it look weirdly out of place
YIKES!!!! all images are pngs
you're not loading the font with
font-display: swap
you can improve how the page feels by using the defer attribute in the javascript
your favicon is 2048x2048 - you should use 32x32 or, at most, 64x64
your css could use some cleaning up tooThank you 🙏. I'm wondering.. what's wrong with pngs? And generating the content by JavaScript is what I thought would be best instead of hardcoding a page for each project I work on, do you have a better alternative?
there's nothing wrong with pngs
except the fact that you're using them in ways you shouldn't
contrary to jpegs, pngs are lossless - they keep 100% of the detail while compressed
the problem: they don't compress as well as a jpeg, and you get a 32kb png for a 15x15px icon
Yes. I've done computer science but obviously I do not know every norms yet your advice is pretty useful
Thanks 😊
just so you know, the "chom" page is ~4.2mb, with images
What's wrong with generating my page with js? Seems like the best way to do it in my case
honestly, i find it horrifying
Damn I didn't look at this
I know. But why ?
there's """""""""""nothing""""""""""" wrong
Ah ok
except that there's 0% indexable content
you don't have a placeholder
this is your website until the javascript kicks in
True ! Didn't think of that
by the way, your favicon is 2.3mb
Thanks for the advice, I will do better. I love getting knowledge from someone more experienced
Thanks for taking the time
you're welcome
i do have a lot more to share
If you don't mind 🙂
the responsivity is a bit iffy - specifically the big ass title
and it's just a link to the front page, not even an h1
For the alignment issues. I'm wondering.. what do people usually do ? Do I need to make it the same alignment everywhere on the page ? How would you make it ?
well, kevin has a simple technique that works most of the time (but not always)
something like this will set the margin top to a decent value
Great 👍 and what about alignment ?
in the browser console, just try to add this style:
also, for this:
C.H.O.M. is a Parkour/Shooter video game in a sci-fi environment that was made in Unity with C# in the context of a student project, I made it in a team with 3 other students over a period of 3 months. Working in an agile way (SCRUM) and participating in almost every aspect of video game design, it allowed me to gain experience and work in an industry-like way. My team and I also worked in collaboration with a small team of artists, which gave us a good understanding of the collaborative aspect of game creation. C.H.O.M. was only the first iteration of my journey in video game creation, I'm very ambitious about my future in the business. As you'll see below, although my part in the project was focused on programming, I was also heavily involved in the game's design.have you considered to split the sentences into different lines? that block of text is like trying to eat a huge steak by chewing on it by grabbing it and bitting a side
😂 I didn't consider it but it's a good idea
I'm on mobile at the moment 🥲
well, that thingy helps a lot, but doesn't make it consistent
it doesn't fix everything
Ty but actually my question was that in the image you wrote justified/centered and I was wondering what was the problem with it
https://antonycd.com/images/chom-screenshots/Capture d’écran 2023-07-12 230018.png <-- please, don't name files like this, ever
it looks disjointed, messy, misaligned, just thrown together
tossed with absolutely no care for consistencyOkay but what do people usually do ?
(im not saying that that's how it is, but what it looks like)
yeah
well, i would center it
pick the one that looks better to you
At first I made it centered like your first image but I changed it. Left align looks good tho
it does look good, even if it does look inconsistent and half-thrown-half-placed-there
but honestly, the middle one is even better
.... discord messed the order
this, i prefer this
centered, without long weird lines
Agreed !
that's all you need to do
You are a real mvp thank you for all of this
you're welcome
by the way, just because im saying something, doesn't mean you have to agree
you can tell me that what i am saying isn't a good idea for you
It was my first out of college small project and I wanted to make it by myself from scratch, all those tips will help me for this project and future ones
i am here to help
(but it is to help, not to do it for you and solve all problems for you - and not you specifically but the hypothetical you reading this)
💯
your images really do need some help
https://antonycd.com/images/chom-screenshot.png <-- you have this 1080p image that takes 542kb of space
Yeah. I did not at all look into it.
do you have any image editor?
Hmm the closest to one would be paint 😅
https://squoosh.app/ <-- use this to optimize the image
Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.
the ui is kinda strange, but works ok
Great !
there's a jpeg with 60kb, and an avif file with 22.6kb
the jpeg looks worse, but is more compatible
webp proved to be completely useless, but avif worked decently
im not saying these are perfect results or you must use these images - generate your own
this is just to give you a tiny taste of how much you can reduce the size of your website
you actually can (and should) give an option to open the full-size screenshot on another tab
I would like to add that the text on top of your images (school, game jam) have no padding; they stick to the side. And you’re using white for all of them , you may want to use a gradient pseudo element on all images to make an overlay so if you can be sure your text is always readable even if you have an image that has white spots where the text overlaps.
Wait images can’t use pseudo elements
You can use a blend mode or use the image as a background image with a background color + background blend mode.
Thanks!