DEV Community 👩‍💻👨‍💻

Cover image for 🔥Build a Stunning Portfolio website with React JS
CodeBucks
CodeBucks

Posted on • Updated on

🔥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 (34)

Collapse
 
lukeshiru profile image
Luke Shiru • Edited on

You might want to update it to be more keyboard interactive. I tried to tab to the logo and I wasn't able. The current tab order goes first to the button in the top center, and then to it again for some reason, then the social links on the left, then to "Say hi", "Blog", "Work", "About", "My Skills", and that's it. A11y is a key part of web design nowadays, so the site should play nicely with both keyboard interactions and screen readers. Initially i would suggest to change the order of the elements in the HTML to match the order in the screen, that way the tab order will make sense. After that I would make anything that needs a focus, focusable (not using tabindex but actually using focusable elements such as button, a and so on). Third I would make sure a screen reader reads everything correctly. Finally I would make use of the prefers-reduced-motion media query to disable animations for folks that are sensible to that.

Other than that, the site looks pretty nice. A visual suggestion I could add is to change your image to be an SVG instead of a PNG, so it looks sharper in high DPI screens, and maybe update the title from "React App" to "Portfolio".

Cheers!

Collapse
 
danbmky profile image
Dan Bamikiya • Edited on

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
 
lukeshiru profile image
Luke Shiru

Hi @danbamikiya ! YouTube is made using Web Components (as several other Alphabet products), and for web Assembly you have stuff like Figma or Squoosh.

TBH, me personally, wouldn't favor Web Components in any scenario, yet. As devs we need a better API (like we had when we went from XMLHttpRequest to fetch), and the libraries for Web Component development that we have (like lit) aren't as good as the ones that work with plain HTML (such as Vue, Preact, Svelte, Angular and so on). You can take a look at this article by the creator of Svelte which still applies to this day.

About Web Assembly, I see some practical uses for stuff that was originally developed in languages other than JS, but we want to port them to the web. Not only that, but we have great uses like for example StackBlitz which literally runs a Node instance in the browser, so you can have a "desktop like dev environment" directly in the browser.

My advice is to keep an eye on it, but don't switch focus unless you see actual traction on those, and keep investing your time in tech that is more widely used. This applies not only to WASM and Web Components, but to any "emerging" features.

Cheers!

Thread Thread
 
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. 🙏🏽

Collapse
 
codebucks profile image
CodeBucks Author

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😄

Collapse
 
jack_garrus profile image
Nadia Guarracino

Love it, great job!
One little detail I have to point out, in the case you didn't notice: you are missing a proper favicon (you still have the React one) and a change to the site's name in the tab (it is still called 'React App').

Collapse
 
codebucks profile image
CodeBucks Author

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
 
jack_garrus profile image
Nadia Guarracino

Np! I also would love to see the tutorial; where can I find it?

Thread Thread
 
codebucks profile image
CodeBucks Author

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

Here is the link👇
youtu.be/jcohAIaSy2M

Thread Thread
 
jack_garrus profile image
Nadia Guarracino

Oh, damn, sorry I missed it and went straight to your portfolio :p Thanks!

Thread Thread
 
codebucks profile image
CodeBucks Author

No problem!😄

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 Author

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
 
lukeshiru profile image
Luke Shiru

Suggestion for the language toggle on top: Set the default value to be based in navigator.language. If the navigator.language value starts with es then set it to Spanish, and if not then default to english. I know both languages, but is way more common don't know Spanish, so that shouldn't be the default.

Same for the light/dark theme, ideally you should default to the current theme of the user, you can get it like this:

const darkTheme = globalThis?.matchMedia("(prefers-color-scheme:dark)")?.matches ?? false;
Enter fullscreen mode Exit fullscreen mode

darkTheme will be true if the user has dark theme in their system, so you can default to that.

Cheers!

Collapse
 
codebucks profile image
CodeBucks Author

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 Author

Thanks😄

Collapse
 
fauziferdiansyah profile image
Fauzi Ferdiansyah

I still have doubts about SEO

Collapse
 
lukeshiru profile image
Luke Shiru

Search engines nowadays can read the text on your site either if is generated with JS or SSR, so that shouldn't be a problem. Maybe CodeBucks should add meta tags or similar, but the content will be picked by search engines.

Collapse
 
codebucks profile image
CodeBucks Author

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
 
jstncno profile image
Justin Cano • Edited on

Very cool, neat design!

Collapse
 
codebucks profile image
CodeBucks Author

Thank you 😇

Collapse
 
rohitcodes profile image
👨‍💻Rohit 🪄

This is Awesome bro😎

Collapse
 
codebucks profile image
CodeBucks Author

Hey, Thanks bro👊😎

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 Author

I'm glad it helped!😄

Collapse
 
gitkat profile image
GitKat

Really nice

Collapse
 
codebucks profile image
CodeBucks Author

hey, Thanks😄

Collapse
 
thititongumpun profile image
thititongumpun

cool

Collapse
 
codebucks profile image
CodeBucks Author

🍻

Collapse
 
dev_emmy profile image
nshimiye_emmy

woww, this is cool

Collapse
 
codebucks profile image
CodeBucks Author

Thanks😄

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await