HARSH VATS

Posted on Jul 15, 2020

How do you rate my website?

#discuss #webdev #showdev #react

How much do you rate my website on a scale of 1-10 and why?
https://harshvats.vercel.app
Don't count my picture plz😅.

Top comments (49)

Hey Harsh!
These are all opinions! Your profile image is sized in a way that distorts the image of so it comes off a little unprofessional, you have no margins or paddings on most of the elements so everything looks really spaced out, and you've got an interesting color choice with poor contrast. I would personally recommend you learn CSS grids so you can lay things out better. I would also recommend you use a site like this Adobe Create to choose your colors for your next website so you aren't going against common UI/UX rules. I would also like to recommend you purchase a domain name for yourself, it's a small investment that adds authenticity.

HARSH VATS • Jul 15 '20

This opinion actually feels like someone is literally caring for me 😅. Thank u so much.

Marco Chavez • Jul 15 '20

Of course! I am happy to help 😀

Shravan Kumar B • Jul 15 '20

Decent and Pretty good.

Just try to work on UX where your logo looks too enlarged. There's a lot of wasted space here and there.
Otherwise quite decent for beginner who is playing around with technology.

Well, I would like to know how are you hosting it?

Danny • Jul 15 '20

Looks like its with vercel.com

Shravan Kumar B • Jul 16 '20

okay. never heard of it

HARSH VATS • Jul 16 '20

formerly known as zeit but now it's vercel and is pretty good for your nextjs website hosting.

Shravan Kumar B • Jul 16 '20

Thanks for answering :)

HARSH VATS • Jul 16 '20

Thank you so much. I will definitely make some edits and will ask for your opinion again after some time :)

GraphiTivity • Jul 17 '20 • Edited on

Try adding the below code....

div#about {
    max-width: 600px;
    margin: 0 auto;
}

`
The brown is more like an earthy color... you may want to go with blue/black or red/black for this design it's just my personal opinion.

Cheers!

Michael Burrows • Jul 16 '20

One small thing I noticed is you haven't set a default global font on the <body> element.

Because of this the fonts in the footer are falling back to the default system serif font.

I'd suggest adding font-family: "Inter",sans-serif; to the <body> in your CSS.

HARSH VATS • Jul 16 '20

Thanks I will edit it.

Abhijit Hota • Jul 16 '20

The concept is pretty neat! You've summed it up quite good and I like the JS object styled lists!

But you can still improve a lot!
Add some good colours, fonts and fix the layout problem pointed out in the comments. And this will become quite a better website! 😁

All the best!

HARSH VATS • Jul 16 '20

Thank you so much. I will definitely make changes to it and will ask for your opinion again after some time :)

Andrew Baisden • Jul 16 '20 • Edited on

Your website is ok however I agree with what a lot of people have been saying. The spacing needs a lot of work and the colour theme is very bland. I don't think those drop shadows on the boxes look that great either. And the icons for instagram, gmail and linkedin don't match the design at all. However its simple, loads fast and explains your skills. It would be a good idea to take a look at this Design Resources for Developers
Just absorb lots of design information so that you can get a good eye for design. Also do some research on branding, UI/UX and of course colour style guides like Adobe Create as mentioned.

HARSH VATS • Jul 16 '20 • Edited on

I will surely look into it. Btw thanks. :)

Andrew Baisden • Jul 16 '20

There is also something else which is extremely helpful that I don't think anyone has mentioned yet. Create a design before you build your website. I'm not sure how good you are at design but if you at least created a design before you built your website then it would be a huge improvement as opposed to designing on the fly. Check out a free tool like Figma figma.com/ I designed my website before I built it.

Nikola Peevski • Jul 16 '20

Hey man. The fact that you've started working on your own personal site is a great step forward. I am not particularly fan of rating scales, so instead I'll give you some feedback. Firstly try to use as minimal Javascript as possible, you can do most things with pure CSS. Secondly you don't need flashy animations to make an impression. Thirdly think about view prioritisation, especially if you consider using it on your CV/Resume. Make it easily readable with your external links top left/right corner (that be github, linkedin etc), skills in a simple list ordered by the standard Good, Average, Have worked with only once and the rest of the space leave out for personal projects and hobbies. You can try looking at some popular spoke person's sites like John Papa. The difference is that in his site he's focusing on blog posts as you can clearly see from firstly opening the page, also you can notice his contact information at the very top. A small detail, which is more SEO related is that if you stop Javascript you'd want the first serve of the site to be accompanied with as much as information as possible. Try looking into a way of either static site generation or server side rendering for your site.

HARSH VATS • Jul 16 '20

Thank you Nikola. I will keep that in mind. :)

Anik Khan • Jul 16 '20 • Edited on

Hi Harsh 😊 Your website shows lots of promises.
But here is my take on this-

Your about me section is breaking the rules of UX. Please align those text.
Try to use icons when describing your skillset. But don't forget them to keep in good shape :P
There is no project section! It seems like you have lots of tools under your belt but you didn't use this to build any.

Again you have a lot of promises as I can see but you have to keep on working. I love that you use your genuine thoughts and design to come up with this project. Thats very brave. Never stop!
I hope this will help you with your design -
Simple design guideline: dev.to/akdeberg/simple-guideline-f...
Develop an eye for design: dev.to/akdeberg/develop-an-eye-for...

HARSH VATS • Jul 16 '20

Thank you Anik. I will definitely look into these resources. :)

Diogo Rodrigues • Jul 19 '20

I wouldn't say hate, but I think you could improve some details, such as:

colors: maybe a palette more modern :)
contrast: that's ok if you want to continue using the actual main color, but blue and red colors on that don't add a high contrast and it can be bad for accessibility

It's important emphasize that I'm looking at your site from a smartphone. :)

I liked the animation on header very much. And I also think you made a good choice putting the content in boxes, it's easy to read. 👌

HARSH VATS • Jul 19 '20

Thanks Diogo

Alain D'Ettorre • Jul 16 '20

I am sorry to say that but I think you should improve it by choosing a better contrast in your color palette and also fix the desktop layout. Namely, it gets stretched on all the width of the monitor and should have some sort of container or max-width instead. Also, the colored "call to action" links on the bottom should not be colored to better match the chosen color palette. That's my 2 cent.

tmaxxcar • Jul 15 '20

So I am just looking from an accessibility perspective.

Contrast between the text and background is not sufficient for the Social, Drop an Email, nor Connect text. The first h1 on the page is for the #social-heading, which is at the bottom of the page. WCAG guidelines say headings should follow a logical order (h1 through h6). Your image is missing an alt tag, or the aria-hidden="true" attribute to either provide a text description or hide the image from a screen reader. Also, I would add the aria-hidden="true" attribute to the hr objects. Finally, your icons at the bottom of the page are missing inner text, so a screen reader wouldn't know that the link would be to Github or Codepen.

Looking from a keyboard perspective, it might be nice to add a skip-link to the different sections. When using my tab key I skip over the About Me and My Skills sections and jump down to the Instagram link. You can read how to implement a skip-link.

Overall you seem to be using the additional social links as the footer, but you used a div tag as opposed to the footer tag. You are doing the same thing for the header, which you could just use the header tag itself, and you don't have any main content section. I would suggest wrapping the div's of the main content into a main tag. You can take a look at the Web Content Accessibility Guidelines (WCAG) to learn a bit more about accessibility.

HARSH VATS • Jul 16 '20

This is great to learn from this comment. I will make changes and again ask for your opinion in some time. :)

Danny Tran • Jul 16 '20

I like the code at the top. First thing I would look at is making sure the capital letters are in the right area. E.g. jquery should be jQuery, if unsure just google what you typed and it should come with the vendor name. This makes it more professional and readable (they've branded it as spelt like that so when people see it its instantly identifiable).

HARSH VATS • Jul 16 '20

I will edit my website and will again ask for your opinion after some time. :)

Samuel FAURE • Jul 16 '20

On the scale of personal projects I give it 3/10.

This doesnt mean you failed and doesnt evaluate your talent as a webdev, I am just rating the website where 0 is "ugly piece of junk" and 10 is "incredibly amazing"

I love to see a work of passion and some things on it are great. The little bubbles are very nice. I love the feel of storytelling.

The main problem is the visual design.

The color palette is a bit bland
The boxes dont yet manage to give a good material design feeling (if you were going for this).
The title font for social media is not great at all

I must confess I am very impressed and somewhat jealous that you managed to do such a nice website at 19. My first website was at 28 and worth 1/10. After 5 years of web dev Im still bad enough in design that I could get a 7 or 8/10 today at BEST.

Keep up the great work !

HARSH VATS • Jul 16 '20

Thank you so much for your words sir. I hope someday when I will again ask for review of my website on dev.to , you will rate it 10. :)

Hemant Joshi • Jul 16 '20

Every Things looks fine, except the footer which stars from Let's get Social...

I would recommend you not to embed your Instagram over there and rebuild your footer...

And about the top to bottom Except Footer;

That is really simple and eye catching 😁, really loved the About Me section💥...

Cheers 🎉🎉🎉🎉🎉🎉🎉🎉

Please don't mind but would again recommend you to work on Let's get Social part and rest is all fine....

Keep the good work going💛🛸🛸

HARSH VATS • Jul 17 '20

Thanks Hemant 😊. I think the footer is great BUT not matching the whole website colour palette.

Mikael • Jul 15 '20

Hey Harsh,
there is much to say about your website.
Overall choice of color is not optimal for contrast purposes, the proportions are off (maybe add margins to tighten everything together, maybe change your fonts (go to google font to check nice combinations), you repeat yourself with your social Icons that are too large and the one in the footer that are very small. On the picture, try to respect the ratio of your original picture. Well... there is a lot to change, but we all started somewhere.

Mikael • Jul 15 '20

Also, for strictly display websites, I would use something like jekyll to simplify your life and have better graphics from the get go

View full discussion (49 comments)

DEV Community 👩‍💻👨‍💻

How do you rate my website?

Top comments (49)

Git Concepts I Wish I Knew Years Ago

Read next

Build Server With Go Under 10 minutes

Git Basic Commands That You Need For Regular Project Work

2023's Top Development Projects for Programmers: A Complete List of Tutorials and Tools for Mastering the Latest Technologies

Running Gitlab on Backstage locally