Interior Harmony

Static Website

Interior Harmony is a React-based landing page for the furniture industry, featuring image carousels, an infinite image looper, and a responsive contact form with EmailJS integration. Optimized for all devices, it ensures a seamless user experience.

Screenshots

Why this 🤔

This landing page was developed as a project to refresh my CSS knowledge and to experiment with EmailJS integration for handling form submissions. Before this, my work was heavily concentrated on React's data management, Rest API integrations, and other data-centric tasks in front-end development. 📑

Building this landing page allowed me to re-engage with the design and styling aspects of web development, and to experiment with implementing a new tool in the process. 🎨

Key Features

  • Image CarouselsThe website includes sleek image carousels built using the slick-carousel package. These carousels enable a dynamic and responsive display of furniture designs, ensuring a seamless user experience across different devices.
  • Custom Infinite Image LooperIt is a custom-designed infinite image looper, reminiscent of a marquee. This feature creates a continuous scrolling effect, allowing images to flow in an endless loop. It was crafted to challenge and expand my CSS abilities, adding a unique, eye-catching element to the site.
  • Email.js IntegrationThe site's form is integrated with EmailJS. This form allows users to easily submit their details, which are then sent directly to a designated email address. It showcases my ability to combine frontend form design with backend email handling.
  • Fully Responsive DesignThe entire site is built to be fully responsive, providing a smooth and consistent experience across all screen sizes. This aspect of the project was particularly focused on mastering CSS media queries and responsive layout techniques.
  • Modern Technology StackDeveloped using React and Vite, the project leverages the latest web technologies to ensure fast load times and a responsive interface. This project served as a platform to experiment with and apply advanced CSS techniques in a modern development environment.

Technology stack

ReactReactHTMLHTMLCSSCSSJavascriptJavascriptGITGITEmail JSEmail JS