Rebeca Paula

Overview

This portfolio site was built for Rebeca Paula, a designer based in São Paulo, Brazil. The project showcases her design work through an immersive, animation-rich experience that prioritizes visual impact and smooth user interactions.

The site features a unique project viewing experience where hovering over projects dynamically updates the hero section with project details, and clicking opens an elegant modal with auto-scrolling content that creates an infinite loop effect for seamless browsing of case studies.

Key highlights:

• Dark, minimal aesthetic with a neon green accent (#9eff00)
• Character-by-character text scramble animations on hover
• Smooth scrolling powered by Lenis
• Infinite auto-scroll in project modals
• Fully responsive with Swiper carousel on mobile
• Content managed through embedded Sanity Studio

Key Features

1. Dynamic Hero Section

The hero section responds to user hover state, displaying either the designer's name or the hovered project title with smooth text scramble animations.

2. Project Modal with Auto-Scroll

An innovative modal experience featuring:

• Smooth height animation on open/close
• Auto-scrolling content with pause-on-interaction
• Duplicated content for seamless infinite scroll loop
• Desktop sidebar with project details
• Mobile expandable info panel

3. Character Animation System

Custom animated text component that reveals text character-by-character using Framer Motion variants with configurable duration and stagger delays.

4. Responsive Design

• Desktop: 10-column grid layout with up to 5 featured projects
• Mobile: Touch-friendly Swiper carousel with pagination
• Dashed grid overlay for visual consistency

5. Lenis Smooth Scrolling

Butter-smooth scrolling experience with custom easing and configurable wheel/touch multipliers.

6. Embedded Sanity Studio

Full CMS integration accessible at /admin route for managing projects with rich text content, images, credits, and metadata.

7. Live Clock Display

Real-time clock showing São Paulo timezone, adding a personal touch to the hero section.

8. Interactive Project Grid

Grid items with subtle blur effect that clears on hover, reveal brackets on interaction, and seamless navigation to project modals.

Tech Stack

Architecture

Folder Structure

Data Flow

Technical Challenges & Solutions

1. Infinite Auto-Scroll with Seamless Loop

Challenge: Creating a continuous auto-scrolling experience for project case studies without visible jumps or stuttering.

Solution: Implemented a custom useAutoScroll hook that:

• Duplicates content to create seamless looping
• Uses requestAnimationFrame for smooth animation
• Accumulates sub-pixel scroll amounts for buttery movement
• Resets scroll position when reaching the midpoint (half of duplicated content)

2. Hover State Synchronization

Challenge: Keeping the hero section in sync with project hover state while preventing updates during modal interactions.

Solution: Used Jotai for lightweight atomic state management with a lock mechanism:

• hoveredProjectAtom tracks the currently hovered project
• isProjectLockedAtom prevents hover updates when modal is open
• Mobile carousel syncs with activeIndex instead of hover events

3. Character-by-Character Animation

Challenge: Creating smooth text scramble animations that work with dynamic content changes.

Solution: Built a custom AnimatedText component using Framer Motion:

• Splits text into words and characters with unique keys
• Uses staggered variants for sequential reveal
• Triggers re-animation on text change via React key prop
• Configurable duration and stagger delays

4. Route-Based Modal Pattern

Challenge: Implementing modals that can be directly linked while maintaining smooth transitions from the home page.

Solution: Used Next.js parallel routes with route interception:

• /work/[slug] route renders the modal
• Modal animates height from 0 to 100vh
• Content fades in after height animation completes
• Close animation reverses the sequence before navigation

Screenshots

Desktop - Home Page

What I Learned

Advanced Animation Patterns

• Creating seamless infinite scroll loops with content duplication
• Orchestrating multi-phase animations (height → content → ready states)
• Building reusable animation variants with Framer Motion

Next.js App Router Deep Dive

• Leveraging route groups for shared layouts
• Implementing route interception for modal patterns
• Server components for data fetching with client state management

Performance Optimization

• Using requestAnimationFrame with sub-pixel accumulation
• Implementing pause/resume patterns for scroll interactions
• Efficient state updates with atomic Jotai stores

Headless CMS Integration

• Designing flexible Sanity schemas with portable text
• GROQ query optimization
• Embedding Sanity Studio within a Next.js application