Check out the completed website here: My Portfolio.
Discover some features of my project:
This was a project developed with React, built using .jsx components. Visit react.dev to learn more about React.
Create React App doesn't include page routing.
React Router is the most popular solution and I used it in my code. React Router for more information.
I built a responsive navbar with a sandwich icon and a side window..
One cool detail is that the background remains hidden and only appears when scrolling the page. To achieve this, I created a changeColor function, which can be found in the code here on GitHub, in the Navbar.js file.
I obtained some icons as .png images, but for the GitHub and LinkedIn icons, I used the Font Awesome library, which I installed in my project following the instructions provided on fontawasome.com.
This website was created with a lot of care to showcase my efforts and also to learn various things. That's why I invested time in styling details.
The animation on the edges of my photo on the Homepage was created using CSS. This code is clearly highlighted in the Hero.module.css file as MY BUBBLE FACE.
Some titles and images have a fade-in transition, and for that, I learned to use the library AOS. Click and learn more if you're interested.
Throughout the project, I took user satisfaction into consideration on any device and screen size used.
Most of the modifications were made using CSS @media queries.
Notice that the image in the career timeline on the About tab is adjusted for better visibility on smaller screens.
With the help of some components found online, I built and customized an image carousel showcasing the friendships I have made at work.
In this work, I created a constant and placed the objects inside the Carousel.js file.
It was created using the mui.com library.
In this component, I used a method to retrieve information from a data.json file, making the addition of new projects dynamic.
Interesting to note that in this component, I organized the styling using the MUI library within the Album.js file.
Thank you for reaching this point. I am loving working on website development, and I hope you feel the same way.