Richard Empleo トリビュートサイト — Humfurie Projects — Humfurie

実績・プロジェクト/Richard Empleo トリビュートサイト

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

Richard Empleo トリビュートサイト

live · maintained

言語を切り替える:

Lenisキネティックスクロール、GSAPアニメーション、そして動的なGoogle Drive API連携を備えたインタラクティブなトリビュートショーケース。

本番サイト ↗

richard-empleo.vercel.app

Cover

滑らかなLenis慣性スクロール、GSAPタイムライン演出、環境的なCanvasパーティクル演出、そして公式REST API v3経由での堅牢なGoogle Driveライブメディア自動同期(パブリックスクレイピングによるフォールバック機能付き)を特徴とする、インタラクティブで高性能なマルチメディアトリビュート&ギャラリープラットフォーム。

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.