Create your own portfolio website (My website Demo) 🌿🌿

Hi everyone, today I want to share my portfolio website and some ideas to create your own. Official Website

Explaination

As you can see in above website, I used dark and light mode, some buttons to social media accounts, one page for my GitHub projects and one for all blogs I wrote yet. also there is a page to contact me. all the backend functionality are handled by firebase and there is nothing static.

So let's see what are we covering today -

1. Basics of Html and CSS
2. JavaScript and React.js
3. Styles Component
4. use Context and Redux

1. Basics of html and CSS -
If you want to create any website so first of all you need to have knowledge of html and CSS. Html is used as a skeleton of website and CSS is the design part. They are not difficult to learn but can be complicated to understand.

Best way to learn basics of html and css are from w3schools

2. React.js -
Next part is React.js which is a framework of JavaScript, but why use React.js. well the answer is easy if your website have complex logics which can only be handled by JavaScript then react.js will make your task easy.
To learn react.js , you want to learn JavaScript first. There are some references to learn it.

Firebase (optional)-
In my portfolio, I used react to connect firebase firstore and get database from firebase.

JavaScript -

1. w3school
2. code with mosh

React.js -

1. react docs
2. code with mosh

3. Styled Component -
If you familiar to CSS then you know that there are some limitation there like you can't use conditions directly there but in Styled component which is a module , you can use inline css and can use conditions in css. It's optional but still i want you to have a look. styled docs

4. use Context and Redux -
At last but my favorite part is Redux , without going in details if you want to use same value in different component(files) then you can use Redux or use Context in Reactjs. Both will do the job but if your project is large then go for Redux or go for use Context.
I used it to give dark and light mode functionality in my website
Ref - Redux

Conclusion

Well, That's all I used in my website yet and yet trying to improve it furthermore. So I need your valuable feedback.