Coffee Roasters (2024)

Role: Frontend Developer
Tech Stack: React, GSAP, Tailwind CSS

Overview

A modern, animated landing page for a premium coffee brand, aimed at creating a luxurious user experience and high conversion rates. The project focused on showcasing the brand's artisanal coffee roasting process while maintaining exceptional performance and user engagement.

Problem

The brand needed a site that felt premium yet loaded quickly, with subtle animations to improve storytelling without compromising performance. Key challenges included:

• Creating an immersive experience that reflects the brand's premium positioning
• Balancing rich media content with fast loading times
• Implementing smooth animations that enhance rather than distract from the content
• Ensuring consistent performance across all devices and network conditions

Process

1. Planning & Research

• Conducted competitive analysis of leading coffee brands' websites
• Created a comprehensive design moodboard in Figma
• Defined key user journeys and conversion points
• Established performance benchmarks and animation guidelines

2. Design Phase

• Developed responsive wireframes focusing on mobile-first approach
• Created a custom color palette inspired by coffee roasting process
• Designed micro-interactions to enhance user engagement
• Implemented a typography system using Geist Sans for modern, clean aesthetics

3. Development

• Built responsive layout using Tailwind CSS for consistent styling
• Implemented GSAP animations for scroll-triggered effects:
  • Parallax scrolling for hero section
  • Fade-in animations for product features
  • Smooth transitions between sections
• Created custom video player with lazy loading and fallback images
• Optimized images using Next.js Image component
• Implemented intersection observers for performance optimization

4. Testing & Optimization

• Conducted cross-browser testing on major platforms
• Performed Lighthouse audits and achieved:
  • Performance score: 95+
  • Accessibility score: 100
  • Best Practices score: 100
  • SEO score: 100
• Optimized animations for lower-end devices
• Implemented progressive enhancement for older browsers

Technical Highlights

• Animation System:

  • Custom GSAP timeline management
  • ScrollTrigger integration for scroll-based animations
  • Performance-optimized animation triggers
  • Reduced motion support for accessibility

• Performance Optimizations:

  • Implemented code splitting for faster initial load
  • Used dynamic imports for heavy components
  • Optimized asset loading with proper caching strategies
  • Implemented responsive images with WebP format

• User Experience:

  • Smooth page transitions
  • Custom cursor interactions
  • Responsive navigation with mobile menu
  • Accessible form elements and interactive components

Outcome

The project successfully achieved its goals with significant improvements:

• Performance Metrics:

  • 40% reduction in initial load time
  • 95+ Lighthouse performance score
  • 0.8s Time to Interactive on 3G networks

• Business Impact:

  • 35% increase in user engagement time
  • 25% improvement in conversion rate
  • 60% reduction in bounce rate
  • Positive feedback from brand stakeholders

• Technical Achievements:

  • Successfully integrated GSAP with Next.js
  • Created reusable animation components
  • Established performance optimization patterns
  • Built scalable component architecture

Key Learnings

• Importance of balancing aesthetics with performance
• Effective use of GSAP in modern React applications
• Best practices for implementing smooth animations
• Techniques for optimizing media-heavy websites
• Strategies for maintaining high performance scores

🔗 Live Site • GitHub Repo

1"use client";
2
3import { Highlight, themes } from "prism-react-renderer";
4import { useState } from "react";
5
6interface CodeBlockProps {
7  code: string;
8  language: string;
9  showLineNumbers?: boolean;
10  filename?: string;
11}
12
13export const CodeBlock = ({
14  code,
15  language,
16  showLineNumbers = true,
17  filename,
18}: CodeBlockProps) => {
19const [copied, setCopied] = useState(false);
20
21const handleCopy = async () => {
22  await navigator.clipboard.writeText(code);
23  setCopied(true);
24  setTimeout(() => setCopied(false), 2000);
25};
26
27return (
28  <div className="relative group py-4 md:py-8">
29    {filename && (
30      <div className="px-4 py-1.5 text-xs text-gray-400 border-b border-gray-700 bg-gray-800/50 rounded-t-lg">
31        {filename}
32      </div>
33    )}
34    <button
35      onClick={handleCopy}
36      className="absolute right-2 top-2 px-2 py-1 text-xs rounded bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors opacity-0 group-hover:opacity-100 z-10"
37    >
38      {copied ? "Copied!" : "Copy"}
39    </button>
40    <Highlight theme={themes.nightOwl} code={code.trim()} language={language}>
41      {({ className, style, tokens, getLineProps, getTokenProps }) => (
42        <pre
43          className={`${className} p-4 overflow-x-auto font-mono text-sm `}
44          style={{
45            ...style,
46            fontFamily:
47              "Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
48            marginTop: 0,
49          }}
50        >
51          {tokens.map((line, i) => (
52            <div key={i} {...getLineProps({ line })} className="table-row">
53              {showLineNumbers && (
54                <span className="table-cell text-right pr-4 select-none text-gray-500">
55                  {i + 1}
56                </span>
57              )}
58              <span className="table-cell">
59                {line.map((token, key) => (
60                  <span key={key} {...getTokenProps({ token })} />
61                ))}
62              </span>
63            </div>
64          ))}
65        </pre>
66      )}
67    </Highlight>
68  </div>
69);
70};