Project Details

Knowledge Gained

Through this project, I honed my skills in CSS-based layouts, responsive design, and GSAP scroll-triggered animations—all without relying on frameworks. I deepened my understanding of animation timing, visual storytelling, and UI/UX detailing, creating an immersive website that’s engaging and functional across devices

Live Demo Git Repo

Project information

    Kapicraft - Frontend Project

    A visually appealing frontend for a fictional coffee shop, built with HTML, CSS and JavaScript. It showcases menu sections, special offers, a contact form and responsive design suitable for desktop and mobile devices.

  • Category: Web Application
  • Tech Stack:
      • HTML5 & CSS3 – Fully custom layout, responsive design without frameworks.
      • JavaScript (ES6) – DOM manipulation, event handling and interactive features.
      • GSAP & ScrollTrigger – Smooth scroll-based animations and pinning effects.
  • Features:
    • Interactive Hero Section – Animated heading, coffee cup and stamp using GSAP ScrollTrigger.
    • Responsive Layout – Works seamlessly across desktop, tablet, and mobile without frameworks.
    • Ingredients Log – Handcrafted section displaying coffee components with quantities and descriptions.
    • Timeline Section – Shows the journey of coffee with visually engaging entries and alternating layout.
    • Smooth Scroll Animations – Scroll-based effects that guide the user naturally through the content.
    • Custom Fonts & Typography – Unique headings and text styling to give a vintage coffee feel.
    • Social Sidebar – Sticky sidebar with interactive social media links.
    • Lightweight & Framework-Free – Pure HTML, CSS, and JS, optimized for performance.