BaconStacks

Overview

BaconStacks is a freelance project for a bacon-themed lifestyle brand that sells apparel and a monthly subscription box. The site has two pages: a homepage with several sections (hero, product box, about, founders, a blog carousel, and a photo collage) and a subscribe page. It is built with Next.js 15, React 19, TypeScript, and Tailwind CSS v4. Sections animate as you scroll using Motion. The subscribe form uses React Hook Form and Zod for validation and sends emails through EmailJS, so the site needs no backend.

Highlights

• Next.js 15 App Router with React 19. Sections are server components by default, and only the ones that need animation or form state run on the client.

• Scroll animations with Motion. Sections fade and slide in as they enter the viewport, the hero character floats on a loop, and reveals are staggered.

• A scroll-linked photo collage. Five cards spread apart while the BACON and STACKS text slides in opposite directions as you scroll.

• Subscribe form with React Hook Form and Zod. On submit it sends two emails through EmailJS, one to the customer and one to the brand, with loading and error states.

• Responsive blog carousel with Keen Slider. Breakpoints adjust how many cards are visible at each screen size.

• Diagonal section edges with CSS clip-path. The navbar also turns from transparent to red with a blur as you scroll.

• Smaller touches. A full-screen mobile menu that opens with a circle reveal, a Lottie animation on the subscribe page, and a random character image in the footer.