DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for My Portfolio Site
Jayant
Jayant

Posted on • Updated on

My Portfolio Site

Hey πŸ‘‹, Guys I just Made My Portfolio Site and wanted to share you with all, It is Made using React.js

My Portfolio Site

It has some Flaws that are yet to be Resolved.

Pls have a look at this & give Your Review.

Thanks.

Top comments (43)

Collapse
matijanovosel profile image
Matija Novosel • Edited on

It is a nice site and I'd hate to nitpick but I'd suggest looking into a few things:

  • The link icons on the navigation stay as text when I hover over them and leave quickly (don't know if that's intentional)
  • The title of the page and routes all have the default React one, I'd recommend looking into dynamic changes of the page metadata and changing the default favicon as well
  • The blogs and timeline routes don't share the navigation and overflow both in width and height
  • The dev.to link points to one of your articles, don't know if you meant to point it at your profile
Collapse
jay818 profile image
Jayant Author

Thnx for the feedback bro πŸ™‚
I will do the required chages

Collapse
georgewl profile image
George WL

I can recommend creating a simple hook that sets the document.title on page change 😁

Collapse
cicirello profile image
Vincent A. Cicirello

Looks nice. I have 2 comments.... First, your GitHub link is broken. Just get a 404 error. One of the first things I look for in a developer portfolio site is a link to any open source they've worked on such as a link to GitHub or GitLab or BitBucket, etc. It looks like your GitHub link in your DEV profile is also broken.

My second comment is that as a fan of 1980s games, I was disappointed that the Pacman went away after a couple seconds. My first thought when seeing the animated Pacman was: cool, Pacman, what's it going to do? So I was a bit disappointed when it was just a momentary placeholder. But that's just me and not particularly important.

Collapse
jay818 profile image
Jayant Author

Here is my GitHub profile link
github.com/jayant818

Actually I have changed my username that's why the link is broken.

Also, Thnx for visiting my portfolio site.

Collapse
codingchili profile image
Robin Duda • Edited on

Timeline is right to left, which to me seems backwards but it might be cultural? On the timeline page try a black background, on mobile about 80% of the screen is white. Maybe set the timeline to 100vh and have mobile users scroll-x?

Why does the blog page have a back button and hide the menu? This seems inconsistent to me. Another thing with navigation, when all your content is available from the top/any level, I would drop browser history. When I hit back I want to exit your site, not go back to the previous menu item - because then I can just click in the menu and go anywhere instantly.

Probably most important, on a resume site I would prefer to have the resume inlined, you want to push it in the visitors face as soon as possible. And I would remove the requirement to log-in just to download, to increase availability. (Keep the download as pdf option.)

About the design I think the small geometry is cute, but it looks off when it intersects with your main content. Either move it to the sides or set a background (opacity/blur etc) for your main content to improve legibility.

Good job with the site, thanks for sharing!

Collapse
rahmathirshad profile image
Rahmath Irshad
  1. Favicon & title needs to be change
  2. Left-side menu bar hovering needs to be solve
  3. Instagram link is not working
  4. Jayant logo width & height needs to reduce
  5. In projects section, projects layouts are of different sizes, it needs to be one size.
Collapse
wadecodez profile image
Wade Zimmerman • Edited on

Pretty good! Although, if you are planning to use this on your resume I think you should optimize it for people who have a busy schedule (people who skim-read).

In my opinion, the navigation should be flawless and redundant. Not going to lie, I thought the scroll was broken for a split second. IMO you should put everything on one page and keep the navigation.

Also, adding a proper write up for each project can make a huge difference. If you can explain what you learned from each project and tell people why you are including it in your portfolio, you will demonstrate your critical thinking skills.

TL;DR: Keep it simple. Don't add too many projects, information, or features. Only keep the absolute essentials.

Collapse
jay818 profile image
Jayant Author

Thnx for the Feedback bro, I will change it accordingly πŸ™‚.

Collapse
georgewl profile image
George WL

Accesibility is very important in the Modern Web, for two major reasons:

  1. Google ranks pages with high lighthouse scores as higher in search

  2. It makes the website readable by those with accessibility issues (such as vision problems, inability to navigate using a mouse, etc.)

And I'll be honest, your website doesn't rank particularly high on accessibility.

Collapse
saarsa profile image
saarsa

Looks good
But there is a strange behavior I think
It stays on text on the first click and returns to the icon on the second click
Image description

Collapse
jay818 profile image
Jayant Author

onMouseEnter it reveals the name and onMouseLeave it will show the icon again
But I think on mobile it's not working.
will correct it πŸ™‚

Collapse
glanshima profile image
Gande Jethlans Lanshima

But note that mouseover events don't auto work on mobile until you touch the element. So I think that is why.

Collapse
georgewl profile image
George WL

I'll be honest I don't like the site nav for two reasons:

  1. Site nav should be static, always the same size and shape no matter what page

  2. It completely dissapears and is replaced with just "Go Back" on every page that isn't the home page

Collapse
isrealoparanti6542 profile image
Isreal Oparanti (JSON)

Really captivating, nice one

Collapse
jay818 profile image
Jayant Author

Thnx

Collapse
isrealoparanti6542 profile image
Isreal Oparanti (JSON)

How did you achieve the animations, most expecially the typing.
I really want to know how you did that

Thread Thread
jay818 profile image
Jayant Author

I have Actually Used this Package
npmjs.com/package/react-typical

Thread Thread
isrealoparanti6542 profile image
Isreal Oparanti (JSON)

Oh thanks bro πŸ™Œ

Collapse
ishanbagchi profile image
Ishan Bagchi

Nice to see another Colt's student. πŸ˜‹

Collapse
jay818 profile image
Jayant Author

😁

Collapse
jakubpradeniak profile image
Jakub Pradeniak • Edited on

Hi πŸ‘‹, I have only one comment - the geometric shapes on the background looks cool, bud on some screen sizes it makes text a little bit difficult to read. If someone with some eye disorded would visit your page it woldu meake bigger issue for him/her.

Otherwise it looks good, I like the design And loading is rly cool 😁

Collapse
atenad86 profile image
Atena • Edited on

My advice is to make it slightly less fancy.
I'm not saying remove every animation and icon but I mean some box-shadows are too much or you can reduce some hover options .

Collapse
yuvrajsood profile image
yuvraj sood

It's really a great website but just try to make it a parallex site you know the home page is nice but it should be looking better with it

Collapse
csaba79coder profile image
Csaba VadΓ‘sz

I like your portfolio, good site! Congrat!

Collapse
ade_sholly11 profile image
Ibrahim L..

Great work @jay818.
I have seen some nice comments regarding the flaws, I just want to add that the blog page is breaking on refresh, I haven't check the other pages though. In all nice work πŸ‘

Collapse
yuvrajkaushal profile image
Yuvraj Kaushal

Great work bro!

Collapse
jay818 profile image
Jayant Author

Thnx bro

Collapse
obaino82 profile image
Obaino82

Cool

Collapse
kevalmiistry profile image
Keval Mistry

It looks very similar to slobadan's portfolio,
Did you took inspiration from him??

Collapse
jay818 profile image
Jayant Author

Nothing is Original bro , but you should how to steal it perfectly.
Maybe I lack that πŸ₯²

Collapse
jay818 profile image
Jayant Author

Yes

Collapse
redhcp profile image
redhcp • Edited on

great!

I post my website for e.g

Collapse
petecapecod profile image
Peter Cruckshank

Hey great site πŸ™ŒπŸ» I might lower the opacity of the circles and squares that appear behind the text.
Right now they make it a little hard to read where they cross.

Love all the animations! πŸŽ‰

Collapse
jay818 profile image
Jayant Author • Edited on

Thanks Sir

Collapse
harshrathod50 profile image
Harsh Rathod

It is better than mine. πŸ˜‚

Collapse
jay818 profile image
Jayant Author

πŸ˜‚πŸ˜‚πŸ˜‚

Collapse
mohitm15 profile image
Mohit Maroliya

You had done a great job.

Please check out my website also, I developed it 6months ago but not able to complete my blog on this.

Mywebsite

Collapse
daud99 profile image
daud99

Nice <3

Collapse
georgewl profile image
George WL

Are the triangles meant to be overlapping with the text on mobile?

Collapse
jay818 profile image
Jayant Author

No , I will fix them

Collapse
joset98 profile image
joset98

Holy crap man, it ia quite gorgepus, keep doing it

Collapse
jay818 profile image
Jayant Author

thnx broπŸ™‚

🌚 Life is too short to browse without dark mode