https://ankit986.github.io/portfoli...

Have a look on my portfolio and comment how it is?
Should I add or remove something.

You don't need all that animations. :)

Slow loading.
Confusing animations.
Waiting for elements to appear on screen is not good.
I, personally, would leave the headshot out, people will look at your linkedin if they really care to see what you look like.
Dark colored text on dark colored BG should be changed.
Gap at the bottom of the splash page feels like I'm waiting for something to load but it doesn't.

Also, a more readable font would do nicely.

It's simple, which is good, just needs tweaking. Good luck.

At the beginning, DON'T indicate people should scrolling. Instead, axe the whole stupid hero image that contributes absolutely nothing and shoves the content away. Splash pages sucked already 20 years ago. Especially with text over image which is hard to read, and then even cheap text shadow effects.

The animated crap sucks, just as parallax does in general. It distracts and is artsy nonsense without any value. Even worse, the whole site doesn't work without JS although you don't have anything on the page that justifies even the PRESENCE of JS.

It's a bloated monster that clocks in at 4.89 MB, WTF? Where does that come from? Oh it's the stupid animated thing in the footer, where you have used a 4.1 MB GIF image! Just drop it.

There are several H1 headings - H1 is THE heading of a page. Fully justified text looks bad because browser rendering still sucks for that.

And then low contrast problems with orange on white, or the card headings. The tech stack headers? ":-" instead of ":"?

I'm not a web dev. I liked it.

@Fast-Nop 🥰I'm catching some feels bro.

I'm sitting here wondering why nothing was loading at first, there's no content besides your name and even that jumped around changing font, preload your fonts or better yet, host them in your code base to speed them up, I'm assuming it's a google font based on how slow it changed.

Once I finally figured out you're site was able to scroll, you're about me header is on a new page, which is fine if you had something to tell me it's down there.

The animation for the content block for "about me" is to slow, and I can't read the thing without waiting, also, why are you animating such a large piece of text?

Next up is the projects,
You have a crazy gradient going on down there with massive borders, and again animations that are also distracting. The last project enters the screen from the contacts section and looks like it's floating across the site instead of into view.

Contact details, again animated beyond need.

Footer.... if I can stop my eyes wandering for 2 seconds and determine what it says down there, I might let you know.

-------------

Overall, the site is very distracting with animations, but they are also require me to scroll up and down to reset them while trying to write this.

Remove the giant gradient behind projects, remove some of the animations and fix the giant whitespace at the top of the page, otherwise I only have a name and a line of text and that's all anyone will spot, and remove that... image at the footer making my eyes go in circles and add white text to the content down there.

This was all while on a phone, I really don't want to know what this animations look like at a desktop level.

In the "about me", i would much prefer monospace than justified, but it's up to you.

Good on you for putting this out there for critique.

@odite thanks for your review
Can you please suggest some other readable google fonts.

@Fast-Nop Thank you so much for such long response.
Can you please suggest instead of those "cheap shadow effect"
What should I add?

@orhun thanks

@C0D4
Thanks you so much for your response I will try to modify things

And sorry that footer section makes your eyes go in circle

@arcsector thanks I will modify as you suggested

@ThereIsNoCloud thanks for your review

Also, it appears you have some chunk files, probably node_modules and the rest seperated, but you're still shipping the dev source code.

@ankitbansal
Sans-serif:
Roboto, Open Sans, Lato

Serif:
Merriwether, Noto Serif,

@ankitbansal Effects in general should only be used if there is a purpose. If you use them just to be there, the whole design just gets overloaded.

I don't see why the caption with the shadow should have any effect at all.

If you want to show that you know how to code crazy stuff, then you could make that as demos, e.g. a dedicated parallax demo, or a React JS demo. Animations could go into a mini game (and then using CSS animations triggered by JS).

@odite Serif fonts only for headings, not for the flowing text because they're not that easy to read on screen, except at larger size.

@ankitbansal Oh and btw, the HTML5 landmarks are good to have - they read out nicely e.g. with Firefox plus NVDA screenreader (even better because you've given the language tag in the html tag).

However, you have the header, and in the header, only the main navigation. I'd pull the nav area out of the header. Actually delete the header tags because you don't have something like say a logo. The footer landmark is OK.

I'd also add a main landmark on the stuff between the navigation and the footer.

@ankitbansal Ah and just seeing that - in the main navigation, the links are just like that while they need to be wrapped in UL/LI because NAV doesn't provide that.

And actually MAKE them links, with real A tags, so that e.g. keyboard navigation works. Using JS for faking stuff where you have proper HTML elements leaves you with a broken and slow page. And I guess the hover effects are probably also with JS instead of CSS. But well, the whole page is using JS for things that shouldn't be in JS, as I already wrote.

Also, the resume is a PDF download link hiding in the navigation. Better make a resume page in HTML and offer the PDF download link there.

I have created the site using react so that might be the reason that it looks that whole page is js

@ankitbansal Using a JS framework on a website that wouldn't even need JS is using the wrong tool for the purpose. And it makes for a crappy result, as evidenced by the broken keyboard navigation.

@Fast-Nop Yes in general, but if its for learning purposes then it's fine.

@theuser Sure, that's why I had suggested to have that as a linked demo page, but not for the main page which is probably meant to be shown to employers.

An over-engineered solution that still gives an inferior result is a risky bet for this purpose.

@Fast-Nop ok
And what is broken keyword navigation?

@ankitbansal KeyBOARD navigation. That's when you use tab / shift+tab for navigating between links and pressing enter for selecting a link. Works also with buttons (real HTML buttons), only that these can be activated with both space or enter. This worked already on websites in the 1990s.

With your page, this is broken, i.e. it doesn't work, because you don't have links in the main navigation, but instead some JS trying (and failing) to fake links.

If you haven't already, in addition to our suggestions, I recommend running an audit of your page in chrome devtools (under the audit tab). It gives you a nice summary of suggested improvements.

@theuser ok

Can you guys suggest some ideal portfolio?