React-Portfolio App

Personal portfolio page www.fdaviz.com built in React.

Building Process

1. Installed New React App using Node JS.

2. Migrated my VanillaJS Portfolio Version and migrated it into a new React Application.

3. 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.

4. Used React Props to manage components references in the application and share components details to create SmoothScroll usign my own code.

5. Most of the page uses Bootstrap, except for the modal gallery that has my own CSS3 flex-box code.

6. Created different modals for the gallery project and using React Event Handlers I could show each project modal.

7. The form uses formsfree.io for the backend submission.

8. I used images from unsplash which are free to use and icons from flaticon which are also free to use.

9. 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.

Challenges that took me some time to solve

1. 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.

2. 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.

3. After using Bootstrap for a while I had to re learn some CSS3 tricks like flex-box and how to use @keyframes + animation.

Updating NPMs

1. Removed node-sass(deprecated) library to use sass for bootstrap compatibility.

Conclusion

Thanks for visiting my react-portfolio-website and for taking time to read this!