DEV Community

Cover image for šŸ”„Build a Stunning Portfolio website with React JS
CodeBucks
CodeBucks

Posted on • Updated on • Originally published at devdreaming.com

šŸ”„Build a Stunning Portfolio website with React JS

Hi therešŸ‘‹,

I wanted to build a portfolio which is different and unique with design and little bit animations.
Here is the Demo Link:
https://react-portfolio-sigma.vercel.app/

For this project I have used these libraries,
ā–¶ļø React JS
ā–¶ļø Framer-motion for Cool transitions and animations
ā–¶ļø Styled-Components
ā–¶ļø Particle JS
ā–¶ļø React Router

First I have created design in Figma, and used some of it's awesome plugins and resources. I have listed all the resources used in this website in the github ReadMe file.

Here is the tutorial how I have created this website!

Things that I have learned building this project,
ā–¶ļø Complex Styling with Styled-components
ā–¶ļø How to create Page Transition effects using Framer-motion
ā–¶ļø How we can leverage advantages of component structure
ā–¶ļø How to use ParticleJS in React JS for awesome background effects
ā–¶ļø Uses of Lazy and suspence in reactJS to make components load faster
ā–¶ļø Many awesome pure CSS animations.

You can use this portfolio and if you want to use it else where small credit would be appreciated (not compulsory), just check license of all images and other assets before using it commercially.

I will try to improve it's speed and performance.
Feel free to try different designs and animations with it and you can also tag me or share your link in the comments.

Any suggestions are welcomed!

Share your portfolio in the comments, So that all the other people/beginners can get the different ideas as well as inspiration.

You might also like these website templates:

  • A beautiful portfolio template in ReactJS => here
  • NFT collection landing page in ReactJS => here

Thanks For ReadingšŸ˜„

Feel free to visit my youtube channel:

@CodeBucks

Follow me on Instagram where I'm sharing lot's of useful resources!

@code.bucks šŸ˜‰

Top comments (30)

Collapse
 
vcnsiqueira profile image
VinĆ­cius Siqueira

Congratulations! Very beautiful portfolio and layout!

Collapse
 
flowerf profile image
Flower-F

You are such an amazing coder!

Collapse
 
codebucks profile image
CodeBucks

Thank youšŸ˜„

Collapse
 
roninjosue profile image
Reynaldo JosuƩ Cano BƔrcenas

Very nice portfolio

My Portfolio It's simple, I'm going to divide it into pages, if you have any advice it will be welcome

Collapse
 
codebucks profile image
CodeBucks

Hey,

For minimal portfolio this looks good.
If you want to make it more interactive later then I suggest you to add some elements which looks cool as well as some interactive scrolling animations/parallax effects (You can use GSAP).šŸ»

Collapse
 
tim012432 profile image
Timo

Very nice and clean.
Like it!

Collapse
 
codebucks profile image
CodeBucks

ThanksšŸ˜„

Collapse
 
danbmky profile image
Dan Bamikiya • Edited

Hey @lukeshiru I have some questions concerning Web Components and Web Assembly. What type of projects would you favour Web Components over the common frameworks and libraries such as React, Next, Vue, Angular e.t.c
I've been seeing lots of hype around them but I haven't really seen it in practical production use.

Also the same for Web Assembly, all hype and I haven't seen a production use case and what problem it solves. Hope to hear from you! Thanks!

Collapse
 
fauziferdiansyah profile image
Fauzi Ferdiansyah

I still have doubts about SEO

Collapse
 
codebucks profile image
CodeBucks

Actually, I haven't keep the SEO part in mind as for this tutorial. But You can add meta tags as well as some text/keywords based on your skills for SEO.šŸ»

Collapse
 
codebucks profile image
CodeBucks

Thank you so much for pointing that out.šŸ„‚
Initially I thought to make a tutorial for this and maybe that's why forgot to change it.
I'll change it lateršŸ˜„

Collapse
 
codebucks profile image
CodeBucks

Hey,

Thank you so much for all the suggestions!šŸ„‚
Also, I haven't made logo interactive and clickable yet so that's why you can't use keyboard for that.
I'll see where I can improve it. Thanks againšŸ˜„

 
danbmky profile image
Dan Bamikiya

Whoa thanks a lot for this informative response! I didn't know about these apps that use it.
Thanks a lot for the article you linked, it answers a lot of questions concerning Web Components. šŸ™šŸ½

 
codebucks profile image
CodeBucks

There is a video in this post, the video tutorial that I was talking about.

Here is the linkšŸ‘‡
youtu.be/jcohAIaSy2M

Collapse
 
shahzaib_ali profile image
Aliā„¢

This legit is very nice :0 gave me many ideas for a future project of mine thanks ā™„

Collapse
 
codebucks profile image
CodeBucks

I'm glad it helped!šŸ˜„