Project Background
This project was based on the Single-page developer portfolio chalenge from the Frontend Mentor website.
The goal was to build this single-page portfolio and make it look as close to the design as possible, while also having users be able to:
- Receive an error message when the form is submitted if:
- any field is empty
- the email address is not formatted correctly
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
To achieve the goal, I used the following tools to develop the website:
- React - JS library
- Tailwind CSS - For styles
- Framer Motion - For animations
This was a great project to discover some new things using the Framer Motion library. I added: an animation that reveal the content as soon as it appears on the screen; an alert animation on form error message; a toast message that appears when submitting the form, which can show a success or error message.
Static Previews
