Portfolio Page

Personal portfolio page www.fdaviz.com

Building Process

1. Imported starter VanillaJS/Webpack template from 4GeeksAcademy.
2. The first approach was to create a single page portfolio to start building what is known as SmoothScroll using my own code.
3. After setting up some variables, I created fade-in animations from right, left, top, and bottom position using CSS3+JS.
4. I used Bootstrap and JS to create the fillingBar effect in the skill section.
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 JavaScript onclick event could show each project modal.
7. The form uses formsfree.io for the backend.
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. First, doing SmoothScroll + CSSAnimations was my biggest challenge because all I found was JS animation libraries to use in my code. I wanted to created my own animations, so I found a method in MDN that solved most of my scrolling problems.
2. After using Bootstrap for a while I had to re learn some CSS3 tricks like flex-box and how to use @keyframes + animation.

Conclusion

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