POTR POTS landing page

Overview

POTR POTS is a responsive landing page created as part of my web development portfolio. The page is designed for a UK-based company that produces sustainable, self-watering plant pots made from recycled materials. The goal of the project was to create an engaging and modern web presence that highlights the company’s eco-friendly mission and innovative products.

check LIVE

Role – Front End Developer.

Completed from scratch a responsive landing page for a company, using HTML, CSS, BEM and Sass (SCSS). The landing page follows a Mobile First approach, ensuring optimal user experience across devices, including mobile, tablet, and desktop.

Key Contributions:

• Translated the Figma design into a functional web page, resulting in a 20% decrease in development time for subsequent features.

• Utilised CSS Flexbox and Grid to structure the page sections, which enhanced page load performance by 15% through efficient layout structuring and cut down page render time by 30%, enhancing overall user experience.

• Achieved 100% responsiveness across various screen sizes and devices, significantly improving user satisfaction.

view code

Design Reference, provided by Mate academy – Figma.

Technologies Used:

HTML5: Semantic and accessible markup.
CSS3 / SCSS: Modular and maintainable styles with responsive design principles.
JavaScript (ES6+): Dynamic interaction and Swiper carousel integration.
SwiperJS: Smooth, customizable sliders for showcasing products.
GitHub Pages: Deployed and hosted for easy access and testing.

Features:

Responsive Design: Ensures seamless user experience across desktops, tablets, and mobile devices.
Swiper Integration: Interactive and smooth product sliders powered by SwiperJS.
Dynamic Elements: Engaging animations and transitions for an enhanced user experience.
Optimised Performance: Clean and efficient code with a focus on speed and accessibility.
Cross-Browser Compatibility: Ensures consistent functionality across modern browsers.

Contributing

Contributions, issues, and feature requests are welcome! Feel free to open a pull request or submit feedback. Also, if you have any questions or suggestions, feel free to reach out.