DEV Community

loading...

Feedback on personal website

Alvaro Montoro
CSS aficionado ⊆ Web Developer ⊆ Software Developer ⊆ Person
・1 min read

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!

Discussion (49)

Collapse
darkain profile image
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?

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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.

Collapse
darkain profile image
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 ;)

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author • 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.

Collapse
afif profile image
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)

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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?

Collapse
afif profile image
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.

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author

This is a great explanation. Thank you!

Collapse
jpestana profile image
jpestana

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

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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

Collapse
omarfarooq profile image
Mohammad Omar Farooq Khan

It is not a programming language because it contains no logic

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author

Define logic.

Thread Thread
omarfarooq profile image
Mohammad Omar Farooq Khan

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

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author
  1. That is the dictionary definition of "logic", and not the definition of programming logic.
  2. A mark-up language can be a programming language. They are not mutually exclusive concepts.
  3. 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.
  4. HTML is not Turing complete, but it is enough to create models of computation such as finite-state automata.
Thread Thread
alvaromontoro profile image
Alvaro Montoro Author

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.

Collapse
jpestana profile image
jpestana

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

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author • Edited

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

Thread Thread
jpestana profile image
jpestana

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

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author

Agree to disagree 😊

Thread Thread
jpestana profile image
jpestana

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

Thread Thread
alvaromontoro profile image
Alvaro Montoro Author • 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.

Collapse
afif profile image
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

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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."

Collapse
afif profile image
Temani Afif • 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

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks for the feedback!

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

Collapse
afif profile image
Temani Afif • Edited

you have this rule

a:hover {
    text-decoration-color: transparent;
    transition: none;
}
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
dealloc profile image
Wannes Gennar

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)

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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.

Collapse
dealloc profile image
Wannes Gennar

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

Collapse
coderninja123 profile image
CoderNinja123

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

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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.

Collapse
builtbydan profile image
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!

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks!

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

Collapse
kyleapex profile image
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!

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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!

Collapse
nefomemes profile image
Nefomemes

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

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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 😳

Collapse
nefomemes profile image
Nefomemes

Wow. Predicted it!

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks!

Collapse
afif profile image
Temani Afif

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

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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.

Collapse
baenencalin profile image
Calin Baenen

Good job. Wish I had the knowledge to make my site as good.

Keep up the nice work, and good luck!

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks! I'm sure you can do your site the same and definitely better. Share what you are doing, and if you hit a roadblock we can help :)

Collapse
janhommes profile image
Jan Hommes

love the details in the dev-tools. Nice Site!

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks! I thought no one would see :P

Collapse
727021 profile image
Andrew Schimelpfening

Footer alignment is a little funky on mobile.

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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

Collapse
starwar23 profile image
Artem Kononov

Cool photo ;D

Collapse
alvaromontoro profile image
Alvaro Montoro Author

Thanks :D