Creating your portfolio on React

Now i got the idea to update my own website because:

1. Looks so old (the last update was 2 years ago)
2. I need show better my abilities
3. I want update my website to React
4. Need polish the speed of navigation

Frameworks used:

• ReactJS (Javascript)

Actually looks like this, obviously need a fresh

For this series i will upload 4 articles so you can see what and how on every step.

• Describing the idea and tools
• Wireframing the idea
• Creating the pages
• Other integrations

Describing the idea and tools

This is the first article, so we talk about the idea and tools that i will use on my brand new website.

I will try describe all the process on the easy way, so will be better understand the idea.

I will upload to git, so you can star and check the code for understanding what i do and what libraries i used.

Whatever we see all of them on this and on the next articles, for now don’t worry about it.

The website

I want all in one page, for now i got homepage, contact and blog but im blogging on medium so basically i dont need that.

I need show my abilities and information about me (CV), animations and integrations, good speed and all as i know.

I want it a text font that looks modern and good. For that i will use fontpair and Google fonts so i can know what fonts have good combination and it looks as i think on my website.

I picked this combination

At this moment fontpair are not redirecting to the fonts so basically i ignore them and i will go to Google Fonts website to use the fonts as i need.

Because i know about Google has very good speed and they serve the fonts very well i use them on my website directly.

This is the link for the IBM Plex Sans Condensed

This is the link for the IBM Plex Sans

For now save it, we use later this two.

The tools

Remember, we need define the tools that we use on the creation of the website, on the top of this article we decide using ReactJS and is all but we need to know what we use for creating the web and what integrations we use.

At this moment i must use:

• Visual Studio Code (IDE)
• Asana (project planning [is a small project, for larger i use Jira but now is not needed])
• Miro (for doing the Wireframing [again, is a small project so i just need know where put that or that on web and mobile… if is larger i use Figma])
• Github (for version control)

For S.O i must use macOS (i’m not married with anyone because i use the three everyday) because the performance of M1 is very good and i love it working on the Mac.

For testing the responsive i use Responsively, so im sure how it looks the website all the time on the different screens sizes.

And at this moment is all, when we touch bases on the project i will write the packages and how install them.

For now is all, please mantain connected so you can track and know how i created all on my personal website.