Personal portfolio page www.fdaviz.com built in React.
-
Installed New React App using Node JS.
-
Migrated my VanillaJS Portfolio Version and migrated it into a new React Application.
-
The first approach was to use libraries to create animations because creating my own was time consuming. For that reason, I decided to use Wow.js and Animate.css libraries.
-
Used React Props to manage components references in the application and share components details to create SmoothScroll usign my own code.
-
Most of the page uses Bootstrap, except for the modal gallery that has my own CSS3 flex-box code.
-
Created different modals for the gallery project and using React Event Handlers I could show each project modal.
-
The form uses formsfree.io for the backend submission.
-
I used images from unsplash which are free to use and icons from flaticon which are also free to use.
-
I wanted to create an amazing animated background at the top of the page, so I used some help from codepen.io and adapted the code to my website.
-
Implementing Wow.js + Animate.css was difficult at the beginning, but worth it. It takes time to make it work with your app, yet it takes less time than building your own libraries.
-
Sharing DOM component details such as height, offsetTops, etc, between other components was a bit difficult because React Refs had to match parent containers' ids. That took me the long time to figure out.
-
After using Bootstrap for a while I had to re learn some CSS3 tricks like flex-box and how to use @keyframes + animation.
- Removed node-sass(deprecated) library to use sass for bootstrap compatibility.
Thanks for visiting my react-portfolio-website and for taking time to read this!