Feedback on personal website

Hello! I just went through a rebuild of my personal website/portfolio, and I'd greatly appreciate feedback as I'm not a designer.

https://alvaromontoro.com

Any feedback, comment, or suggestion on design, a11y, bugs, etc. is welcomed. Thanks in advance!

Comments

[Temani Afif]

the outline transition you are applying to your projects look a bit buggy probably due to the outline-offset you are adding on hover. Maybe add the outline-offset to the non-hover state to avoid the small jump.

But nice website, the colors are great

[Alvaro Montoro]

Thanks for the feedback!

I had reduced motion on and didn't see that issue 😳😅
Looking into it.

[Temani Afif]

you have this rule

a:hover {
    text-decoration-color: transparent;
    transition: none;
}

that disable the transition on hover so when you unhover, you have the offset transition. it happens on the home page on the project section (the elements that overlap)

PS: this is probably the result you want.

[Temani Afif]

The slider of the CSS games here: alvaromontoro.com/projects is not working for me. When I click on the arrow then on one game I have a page jump instead of a redirection. It's probably related to the focus event you are adding to the links

[Alvaro Montoro]

This is definitely because of the focus event on the links. I need to update it because it looks like a fail when truly it's working "as expected."

[Temani Afif]

better use width:100% for #home-projects instead of 100vw to avoid getting an horizontal scrollbar when reducing the screen.

and maybe use overflow:auto for #projects #home-projects .panel > div instead of scroll (unless you explicitely want to always show the scrollbar)

[Alvaro Montoro]

Thanks! Adding these changes.

I don't fully understand the difference between 100vw vs 100% thing though. Could you give me some info on that one?

[Temani Afif]

The 100vw include the width of the vertical scrollbar so basically it's equivalent to 100% + scrollbar width and since you have the vertical scrollbar you will always have a small overflow equal to the width of the scrollbar and this will trigger the horizontal scrollbar.

[Alvaro Montoro]

This is a great explanation. Thank you!

[Temani Afif]

I would add margin:0 to #fun-facts li. They look better with no gap on small screens :)

[Alvaro Montoro]

I could have sworn I had fixed this before... I probably fixed it on the browser and forgot to put it in my code 😅

Fixed it too. Thanks a lot for your feedback and the recommendations. I applied most of them, and need to work on figuring out the rest. Thanks again! I really appreciate it.

[Andrew Schimelpfening]

Footer alignment is a little funky on mobile.

[Alvaro Montoro]

Thanks for the feedback. The footer really looks basic and wraps awkwardly on mobile, I need to change it.

[Vincent Milum Jr]

I just wanted to say that I always highly appreciate anyone who uses SVG for their graphics where possible! :)

One question: some are embedded, some are linked. Is there a reason for this, vs having them all embedded so CSS could apply to them?

[Alvaro Montoro]

Thanks!

I inlined the SVGs that needed to change colors with the light/dark mode, so I could use currentcolor for the fill and stroke. The ones that had a fixed background color (the SVGs in tabs and menus) keep their color all the time are "static", so I added with <img/> to cache them. Although probably it can be done in an easier/more efficient way... I'm open to suggestions and improvements.

[Vincent Milum Jr]

having them in an img element means they still need fetched at least once no matter what. svg files are tiny text files, usually ~1-4KB in size, so the full round trip of fetching something so small isn't usually worth it, even if only done once and cached. from personal experience, I've found that just embedding them every time, even though that means they transfer over the wire every page load, is still more efficient over all, since there is zero interaction needed at that point to either test the caching system or make a full fetch from the remote server.

Oh, and if you wanted to do fancy CSS stuff in the future, it would already be ready for it ;)

[Alvaro Montoro]

I'll inline them. I think it's only 8 in total, so it should be easy. Thanks for the suggestion and the explanation!

It gets confusing with all the changes in that, HTTP, HTTP2, caching, inlining... It's tough to keep up sometimes.

[Danish Shafi]

Really cool and simple site, Alvaro.
Nowadays, devs seem to confuse complexity as productivity.

My only suggestion would be is to add a degree of animated transitions. For example, when you switch between languages to show your projects. Maybe try add an animation ease-in/ease-out etc to give it that extra flair?

Keep it up!

[Alvaro Montoro]

Thanks!

The animated transition idea is great. I will definitely add something simple. Thanks for the suggestion!

[Kyle Hoskins]

Killer site! However, I loaded it on mobile and would have missed half of it if I wasn’t determined that there was more.

The About/Work/Projects/Writing tabs on iPhoneX look like they might be quick links to jump downward in scrolling given that it seems like the “About” section starts immediately after them.

Scrolling down, you come across what looks like what could be the project section, then a blog post, which could be construed as the writing section, and then “Contact Me”. At that point I thought “alright, end of website!”

Perhaps on mobile you could have your row of tabs repeated above the contact me with a message just above like “explore more about my...” (changing “About” to “Bio” in that set of tabs) ... or maybe just sticky the tabs to the top when you scroll down.

Cheers from Austin!

[Alvaro Montoro]

Hi from Austin! 🤘

That is actually not good and a big problem... and the worst part is that I designed it that way on purpose (that's why I need design advice)... Maybe I could add a chevron pointing down below the tabs? I'll definitely play with position:sticky to see how the tabs look.

Thanks for the feedback and the suggestions!

[Artem Kononov]

Cool photo ;D

[Alvaro Montoro]

Thanks :D

[Natalia Asteria]

Wow. I feel some education site design vibes when scrolling your site. That's kinda unique, especially for a personal site. 10/10

[Alvaro Montoro]

Thanks!

[Alvaro Montoro]

It's funny that you mention the education site thing, the design was inspired by the header of an education template from nicepage.com... and I started building from there. Maybe I should have copied other parts of the design, it looks kind of cool tbh 😳

[Natalia Asteria]

Wow. Predicted it!