Introduction

       I have decided to start with the front-end and follow a Youtube tutorial from freeCodeCamp called “React Project Tutorial – Build a Portfolio Website w/ Advanced Animations”, the link can be found here. I will customize the graphics later on to fit my preference.

       The reason for this is that I prefer beginning with a template, to speed up my development time. It will take a long time to create a front-end UI and UX design. For me the quote “make it work, then make it good” applies here.

Steps

For this day I decided to just take it easy and create a base template, and to install the dependencies needed for the projects to work.

Creating a base ReactJS template

  1. Create a base react template by opening a command line, and inputting the following command:
npx create-react-app tiukenywil11_portfolio
  1. Navigate to the project.
cd tiukenywil11_portfolio
  1. Install the following dependencies.
  • emailjs: Library to implement the contact form.
npm i @emailjs/browser
  • fortawesome: Library to get free icons.
npm i @fortawesome/free-brands-svg-icons
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome
  • animate.css: CSS library to animate objects and fonts
npm i animate.css
  • gsap-trial: For advanced animations
npm i gsap-trial
  • loaders.css: Package for loaders
npm i loaders.css
  • react-leaflet: Library for maps
npm i react-leaflet
  • react-loaders: Loaders with react integrations
npm i react-loaders
  • react-router-dom: Standard ReactJS package for routing
npm i react-router-dom
  • sass: A CSS extension language.
npm i sass
  1. Test if ReactJS app is still working.
npm start

Outro

       This is the progress I have made today, the changes can be found in my GitHub repository here.

Read More:
Previous:
Decentralized Portfolio: Introduction

Next:
Decentralized Portfolio: Part 2
Decentralized Portfolio: Part 3
Decentralized Portfolio: Part 4
Decentralized Portfolio: Part 5
Decentralized Portfolio: Part 6