projects/Richard Empleo Tribute Website

Next.js 16React 19TypeScriptTailwind CSS v4Google Drive API v3GSAPLenisCanvas API

Richard Empleo Tribute Website

live · maintained

Read this in:

A tribute gallery with smooth animated scrolling that updates itself: the family adds photos to a shared Google Drive folder and they appear on the site, no redeploy needed.

Live Site ↗

richard-empleo.vercel.app

Richard Empleo Tribute Website screenshot 1

Cover

The problem. The client wanted a tribute site that family members could add photos to at any time, without anyone having to ask a developer to upload files or republish the site.

What I built. An interactive gallery that reads directly from a shared Google Drive folder. It uses the official Drive API and automatically falls back to a public-folder reader if the API is unavailable, so the gallery keeps working. The page itself features smooth inertia scrolling and timeline-style animations tuned to stay fluid on phones.

The result. Adding a photo is as simple as dropping it into the shared folder: it shows up on the live site without a redeployment or developer involvement.

Featured Engineering & Architecture

How the Hardest Problems Were Solved

Key architectural decisions, concrete code implementations, and performance wins behind this project.

Backendapp/src/app/api/photos/route.ts

Dual-Strategy Google Drive Media Synchronization Engine

The Challenge

Client requested zero-maintenance photo updates directly through a shared Google Drive folder without requiring manual redeployments, static asset bundling, or complete service disruptions during API quota depletion or key misconfigurations.

The Architectural Solution

Engineered a resilient dual-layer Next.js API route that queries the Google Drive REST API v3 using field mask filtering (`fields=files(id,name,mimeType,thumbnailLink)`). Implemented an automatic zero-config fallback parser that queries public drive folder payloads, categorizes media by metadata heuristics, and delivers CDN-accelerated direct streaming URLs (`lh3.googleusercontent.com/d/{id}`).

Impact:Zero redeployments needed for gallery updates, sub-250ms dynamic content retrieval, and 100% uptime resilience with fallback scrapers.

app/src/app/api/photos/route.ts

export const dynamic = "force-dynamic";

export const revalidate = 0;

const GOOGLE_DRIVE_FOLDER_ID = "1mgcGSjHW9QIZ04wHjUYfFHNGzsR1c_rj";

export async function GET() {

const apiKey = process.env.GOOGLE_DRIVE_API_KEY;

// Method 1: Official Google Drive REST API v3

if (apiKey) {

try {

const apiUrl = `https://www.googleapis.com/drive/v3/files?q='${GOOGLE_DRIVE_FOLDER_ID}'+in+parents+and+trashed=false&fields=files(id,name,mimeType,thumbnailLink)&pageSize=100&key=${apiKey}`;

const res = await fetch(apiUrl, { cache: "no-store" });

if (res.ok) {

const data = await res.json();

if (data.files && Array.isArray(data.files)) {

const drivePhotos = data.files

.filter((f) => /\.(jpg|jpeg|png|webp|gif|mp4|mov|dng)$/i.test(f.name) || f.mimeType.startsWith("image/") || f.mimeType.startsWith("video/"))

.map((f) => ({

id: f.id,

src: `https://lh3.googleusercontent.com/d/${f.id}`,

videoSrc: f.mimeType.startsWith("video/") ? `https://drive.google.com/uc?export=download&id=${f.id}` : undefined,

type: f.mimeType.startsWith("video/") ? "video" : "image",

title: f.name.replace(/\.[^/.]+$/, "").replace(/[_-]/g, " "),

category: f.name.toLowerCase().includes("dji") ? "travel" : "candid",

filename: f.name,

}));

return NextResponse.json({ success: true, source: "google-drive-api", count: drivePhotos.length, photos: drivePhotos });

}

} catch (apiErr) {

console.warn("Google Drive API failed, falling back to public folder scraper:", apiErr);

}

// Method 2: Public Google Drive Scraper Fallback omitted for brevity

}

Discuss this snippet (app/src/app/api/photos/route.ts)

Architectureapp/src/components/DynamicHero.tsx

GPU-Accelerated Smooth Scroll & Kinetic Layout Choreography

The Challenge

Rendering high-resolution multi-aspect photography and video assets alongside rich particle canvases frequently induces frame drops, layout thrashing, and scroll stutter.

The Architectural Solution

Integrated Lenis smooth scrolling with GSAP ScrollTrigger timeline interpolation, offloading transformations directly to GPU compositing layers with CSS hardware acceleration (`will-change`, `transform: translate3d`).

Impact:Consistent 60+ FPS animation benchmarks on desktop and mobile viewports with zero layout shifts.

// community_discussion

Architecture Feedback & Questions

Have thoughts, questions, or ideas regarding this system's architecture? Leave a comment below with your GitHub account.