This site uses vue.js, vuetify and buttercms as headless content management for the blog. I’ve tried to make it responsive for all screen sizes. Please let me know what you think and about any ways I might improve it.
Hello Dan,
That background image got me so bad Dan, so cool design! perfect if you ask me.
But note that background image is around 1.2MB and also in very high resolution 3Kx1.8K! I think it’s a little heavy comrade.
Layout looks responsive, as I just checked the project section, everything looks okay, but I think style needs more contrasted stuff. for example give moe sharp border for each item box in project page/section, also some more space between them. My suggestion:
top-margin:0.5em;
border:1px solid gray
I personally don’t like the 3D like text, but this is my opinion, please ignore.
There is also one very small issue about overflow text in project(maybe another place but I got one in this section) please check:
You see that out of bound text?! please fix.
I also suggest you may make the text content a little larger for mobile. I see you use pixel for font-size , please don’t, use em.
Fact: best font-size is no font-size, let it be as default. But if you like to enlarge or smaller the text somewhere, please use em
Please give some background colour to that top fixed navigation panel, same a bottom border could be great too.
When something is behind it, user may confuse if it’s top navigation or what!? My suggestion:
For project box(items) I see you set background-image to show the image as covered. I suggest go for plain img tag.
There is one bug about the menu when in mobile. If user taps the menu and page is not top scroll, so menu is nowhere! user should scroll to top to see the menu items. Since the top navigation is fixed, so user supposed(expected) the items belong to it come as fixed without any scroll too, please fix.
One weird issue about the many items, when in project page, the menu items are black, and background is dark gray! So hard to find and read the elements. Please fix.
Contact page is broken, I think because of map you added, it scrolls even in desktop, very huge stuffs! I also suggest you may remove the form border when it’s in mobile. But wait this could be becasue of Chrome bug? since it looks working with Firefox! Anyway please recheck.
I’m not design guy, but I believe you admit it too the design you set for the contact page is not the cool one sync with another pages.
Very good work, I suggest you do the same thing using just HTML+ CSS + JS, and no any other framework, extra stuff, all pure stuffs. I believe you can.
Keep going on great work comrade, liked you work, happy programming.
1 Like
Thanks for the feedback that was so specific and useful. I will work on those suggestions.
Looks so professional with that domain. If you can set HTTPS.
On design its looks clean and some point have a bit more rgba on background on index so be more readable with ::before.
But great!
1 Like
Thanks for the feedback. I will dig into the github docs and try to figure out how to set https.
1 Like