DEV Community

Feedback on personal website

Alvaro Montoro on March 17, 2021

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!

Vincent Milum Jr • Mar 18 '21

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 • Mar 18 '21

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 • Mar 18 '21

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 • Mar 18 '21 • Edited

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.

Temani Afif • Mar 17 '21

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 • Mar 18 '21

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 • Mar 18 '21

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 • Mar 19 '21

This is a great explanation. Thank you!

jpestana • Mar 19 '21

I like your website but, please, don't say HTML is a programming language!

Alvaro Montoro • Mar 19 '21

Thank you! Where did I say it was a programming language? And why the hate for HTML? That poor thing never did anything wrong to anybody :P

Mohammad Omar Farooq Khan • May 3 '21

It is not a programming language because it contains no logic

Alvaro Montoro • May 3 '21

Define logic.

Mohammad Omar Farooq Khan • May 3 '21

logic is a sensible reason or way of thinking

Javascript or PHP is a programming language because you can use variables, conditions, loops etc. HTML is not a programming language because you have write tags and can't use variables or conditions. HTML stands for Hyper Text Markup Language. So, HTML is a Markup Language not a Programming Language

Alvaro Montoro • May 3 '21

That is the dictionary definition of "logic", and not the definition of programming logic.
A mark-up language can be a programming language. They are not mutually exclusive concepts.
HTML has control structures that allow the conditional display of elements (e.g. open in details or dialog) and transitions between pages/states without needing external languages like JS or CSS.
HTML is not Turing complete, but it is enough to create models of computation such as finite-state automata.

Alvaro Montoro • May 3 '21

It all boils down to what the definition of a programming language is. If we take Turing-completeness as the sole criterion then HTML is not a programming language. But the selection of that criterion is subjective in itself. Not all programming languages are Turing complete. A Turing machine is a mathematical model and not a definition for a programming language.

jpestana • Mar 19 '21

In your CV!
Ops, I don't hate HTML... But it is not a programming language

Alvaro Montoro • Mar 19 '21 • Edited

But it is a programming language. Do people program with it? Yes. Is it a language? Yes. Then it is a programming language 😊

jpestana • Mar 19 '21

You are wrong. It is a language but not a programming language because does not contain programming logic.
Sorry 😐

Alvaro Montoro • Mar 19 '21

Agree to disagree 😊

jpestana • Mar 19 '21

It wasn't an opinion but a fact. You can ignore it if you want, but still being true.

Alvaro Montoro • Mar 19 '21 • Edited

I'm not saying it's true or false. You are providing a definition of what a programming language is, and I agree that, within that definition, HTML is not a programming language. Then I am providing a different definition of what a programming language is which would include HTML, and you disagree with it. And that's Ok. Other people will disagree with both of us and say that Turing-completeness is what really defines a programming language. Others will say that programming languages can be Turing-complete or not. You say your definition of a programming language is the correct one (opinion), I say I find it too restrictive (opinion). We can agree to disagree.

Temani Afif • Mar 17 '21

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 • Mar 18 '21

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 • Mar 17 '21 • Edited

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 • Mar 17 '21

Thanks for the feedback!

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

Temani Afif • Mar 17 '21 • Edited

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.

Wannes Gennar • Mar 18 '21

Rather than using a manual toggle for dark theme you could check if the user agent prefers dark theme automatically.
Aside from that, avoid storing the preference of dark/light theme in cookies as you currently seem to be doing as they're sent to the server on every request (unless you somehow need this information server side?), localStorage or sessionStorage are just fine for this purpose (and probably easier codewise too)

Alvaro Montoro • Mar 18 '21

Thanks for the recommendations. I really like the idea of checking the user agent for color scheme preferences. At least for the default, then they could override it.

Right now I don't have routing set up on the client's side, so the pages render on the server via PHP. I used the cookie to allow PHP to know the user's preference so it could add a class and avoid a "white flash" if I changed it on load via JS. I need to work on that and replace the cookie with localStorage.

Wannes Gennar • Mar 22 '21

if the pages are rendered on the server side and the data is used there, then a cookie is the approperiate use case :)

CoderNinja123 • Mar 19 '21

I think there should be a delay animation on the little navbar thingie below the short introduction..? It should be toggled by the CSS prefers-reduced-motion feature. It would add a little visual feedback and a11y for people who've disabled it

Alvaro Montoro • Mar 19 '21

What would you recommend? To be honest, I'm hitting a block with the animations, I don't want to overdo it, but I don't want to end only with just fading in/out things.

Danish Shafi • Mar 18 '21

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 • Mar 18 '21

Thanks!

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

Kyle Hoskins • Mar 18 '21

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 • Mar 18 '21

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!

Natalia Asteria • Mar 18 '21

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 • Mar 18 '21

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 • Mar 20 '21

Wow. Predicted it!

Alvaro Montoro • Mar 18 '21

Thanks!

Temani Afif • Mar 17 '21

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

Alvaro Montoro • Mar 18 '21

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.