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
- Create a base react template by opening a command line, and inputting the following command:
npx create-react-app tiukenywil11_portfolio
- Navigate to the project.
cd tiukenywil11_portfolio
- 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
- 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