Designo Agency
This project is a response to a FrontendMentor challenge, focusing on replicating a Figma design into a functional, responsive 7-page agency website. Users can seamlessly experience optimal layouts on various screen sizes, explore hover states, and utilize a fully integrated email contact form.
Front End Development / Interactive Design / Back End Development
HTML / CSS(Sass) / TailwindCSS / Typescript / React.Js / Formik / Next.js / Node.js / Nodemailer
Project Background
In response to a FrontendMentor challenge, this project undertook the meticulous task of translating a complex Figma design into a functional 7-page agency website. The user experience is prioritized, ensuring optimal layout views across different devices and interactive elements, complete with hover states. A noteworthy feature is the fully operational email contact form, seamlessly integrated with an API for direct communication to the provided website owner's email. Users receive clear error or success messages, courtesy of robust input validation. Behind the scenes, the website stands out for its technical prowess. Built with HTML, CSS, TailwindCSS, Typescript, Reactjs, Formik, Nextjs, Nodemailer, and Eslint, it combines a mix of technologies for a smooth and efficient performance. The achievement of a perfect 100% score on Chrome Lighthouse metrics underscores its commitment to best practices, accessibility, and SEO. This project represents a balanced blend of design fidelity and technical excellence, meeting the challenges posed by both the Figma design and the FrontendMentor guidelines.
Static Preview
