PORTFOLIO

THE TEXAS A&M FOOTBALL HALL OF FAME

Journey through Aggie football history with a single click. Hear their stories. Celebrate the longstanding tradition of good old fashioned traditional traditions. Take pride in feeling proud of your pride. Visit THE TEXAS A&M FOOTBALL HALL OF FAME.

OpenAI GPT-4.1_nano DALL-E 3 Convex Vite React TypeScript Tailwind Three.js React Three Fiber Stripe Workers


  • The Story of Jiggs “BIG BASS” a La Vodka
  • The Story of Jack “Election Day” Danforth
  • The Story of Pablo “The Other Metatron” Cavet
  • The Story of Christy “The Planter” Stanton
  • The Story of Edward “The Grout Doctor” Clingman
  • The Story of Ensign “Big Duck” Ness
  • The Story of Grover “Suddenly I Am a Tortoise” Myers
  • The Story of Louie “Flee to Denmark” Danforth
  • The Story of Hank “Two Middle Fingers” McLaughlin
  • The Story of Cezar “Lil Mountain” Tannehil
1/10
1/10
Slide 1 of 10
  • Football at the Zoo
  • Football at Christmas
  • Football at Church
1/3
1/3
Slide 1 of 3
  • Twelfth Man Rating
1/1
1/1
Slide 1 of 1
  • Stripe Payment Processing
1/1
1/1
Slide 1 of 1
Visit Site

OVERVIEW

Step into the hallowed halls of the most storied football program in College Station, TX. Click the TELL ME A STORY button and learn about the heroic exploits of an Aggie football legend. Every visitor receives a totally unique story, a “Twelfth Man Rating,” and a bespoke, AI-generated image of their Aggie football legend. All served in realtime.

EXPERIENCE

  • TELL ME A STORY: One click procedurally generates a unique player's biography line‑by‑line.
  • TWELFTH MAN RATING: When the story ends, the player receives a “Twelfth Man Rating” via a 3D visualizer that renders the rating as a series of zero to twelve 3D models of football players.
  • BESPOKE IMAGE: The app extracts key details from the biography, adds a random activity via unseen backend logic, concatenates the results, and generates a 1024×1024 image via OpenAI (DALL·E 3).
  • DONATE: A Stripe‑powered tip jar offers various donation options. Completed checkouts show a thank‑you screen and return users to the experience.

HOW IT WORKS

  • FRONTEND: React 19 + TypeScript + Vite, styled with Tailwind.
  • 3D: The Twelfth Man Rating visualizer and other 3D assets were built using Blender and are rendered with Three.js via React Three Fiber and Drei with guarded fallbacks.
  • BACKEND: Convex for data, queries / actions, and storage; handles structured randomization, image orchestration, and retrieval.
  • AI: GPT-4.1_nano & (DALL·E 3) for generating bespoke prompts & images. Prompts are engineered and sanitized to preserve uniform fidelity and safety.
  • PAYMENTS: Stripe Checkout with signed webhooks; a small Express service verifies signatures, rate‑limits the endpoint, and forwards events for finalization.
  • RELIABILITY: Error boundaries for 3D visualizer, prompt sanitization, base64 image handling, and careful sequencing of the story → rating → image UX flow.

WHAT MAKES IT DIFFERENT

  • Hybrid Creativity Model: Stories use deterministic, structured randomization — fast, coherent, and low-cost — to ensure reliability. API calls are reserved for generative tasks where they matter most.
  • Seamless Flow: One click advances story → rating → image automatically — no fiddly controls.
  • Brand Fidelity: Image prompts and biography randomization engine copy always enforces Texas A&M themes, colors, and other identifiable school characteristics for ultra-specific identity.
  • Embodied Humor in 3D: The Twelfth Man Rating isn’t just text — it’s a living formation with emissive maroon highlights, subtle rotation, and paced timing to help the effect land reliably.
  • Production Polish: Prompt sanitization, error boundaries, base64 handling, signed Stripe webhooks, and endpoint rate limiting.

MY ROLE

  • Concept, interaction design, narrative constraints, and copywriting
  • Frontend engineering (React, R3F), 3D integration, and hall of fame UX design
  • Backend functions, real‑time data model, randomization engine, prompt engineering & sanitization, and Stripe integration
  • Performance tuning and type‑safe refactors across the codebase

OUTCOME

A fast, delightful, and shareable fan experience that blends tradition with modern web tech—engineered for reliability today and room to grow (social sharing, galleries, auth, analytics).

TECH STACK

  • React 19, TypeScript, Vite, Tailwind CSS
  • Three.js + React Three Fiber + Drei
  • Convex (Real-Time DB / Serverless Functions / Anonymous Auth)
  • OpenAI Responses API (GPT-4.1_nano) + Images API (DALL·E 3)
  • Stripe Checkout + Webhooks
  • Cloudflare Workers