Taejae University (EN)
DESCRIPTION
Global Hybrid University — International Admissions Landing
DURATION
May 2026 - Jul 2026
MY ROLE
- Full planning and UI/UX design of the English landing page, including a narrative rebuilt from an international student's point of view.
- Responsive Next.js frontend publishing: crossfade, accordion and duration-proportional comparison chart implementation.
- Sole ownership of interview video encoding, image optimisation, and flag and logo asset production.
- Automated Puppeteer QA and pixel-measured accessibility contrast; second-round client feedback fully incorporated.
TECH
Next.js 16 (App Router) · React 19 · TypeScript · Tailwind CSS v4
Lenis · GSAP · ScrollTrigger
Supabase · Resend
FFmpeg (H.264 transcoding) · Puppeteer
Anton · Playfair Display · Space Grotesk · Kaushan Script
Project Purpose
"The World is Your Campus." Taejae University rotates students through seven cities in five countries and teaches entirely in English. This page addresses applicants outside Korea, built on one proposition: a university is no longer a place but a trajectory. It covers the same curriculum as the Korean edition, but its decisive persuasive device is a duration-proportional vertical timeline that answers the question an international student actually asks — how many years does all of this movement really take? Taejae's four years are set directly against the traditional route: a four-year degree plus a working holiday plus language study plus living in each country, eight years and counting.
Scope
- · International Applicant Landing Planning & UI/UX Design
- · Responsive Frontend (Next.js 16 · React 19 · TypeScript)
- · Lenis & GSAP Scroll Interaction
- · Photo Crossfade Hero · Accordion Detail Structure · Duration-proportional Timeline Chart
- · Self-hosted Interview Video Encoding
- · Application Inquiry Form (Resend · Supabase)
Key Technical Features
Duration-proportional Timeline Chart
- · The "How Long Would It Take to Do All This?" section contrasts Taejae's four years with a traditional eight-year-plus route as two vertical columns.
- · Each semester bar's height is bound to CSS variables — `--span` (in six-month units) multiplied by `--unit` — so height is proportional to actual duration. This structurally removes the inversion a flex-grow layout produced, where the column with more items simply grew longer regardless of time.
Photo Crossfade Hero
- · Six stacked photographs of the hanok campus and student life crossfade beneath the hero.
- · At six images × 3.5s the keyframe hold was too short, letting the background show through on every cycle; a 16.7% hold with `linear` easing fixed it, and opacity was calculated to sum to 1.00 across all 24 sample points.
Self-measuring Accordion
- · Opening accordion bodies to a fixed `max-height` clipped the bottom once the comparison chart was added.
- · A `ResizeObserver` now measures actual `scrollHeight` to set max-height dynamically and recalculates on image load and resize — clipping reduced to zero.
Muted Autoplay Interview Videos
- · Four international student interviews (458MB of masters) were reduced to 2.0–3.4MB by stripping the audio track and encoding at 720p CRF26 with faststart.
- · The source has questions and answers burned in as subtitles, so the message survives without sound; IntersectionObserver plays on scroll entry and pauses on exit.
Automated QA Pipeline
- · The production build is checked across the full 320–1920px range for console errors, HTTP failures, horizontal overflow, out-of-viewport elements and accordion clipping.
- · Navigation behaviour is verified per state (top, scrolling down, scrolling up) and text contrast is measured pixel by pixel.
Design Points
Typographic Poster Composition
Anton's compressed uppercase is set against Playfair Display italic, with two full-bleed dark poster sections placed to form the peaks of the scroll rhythm. Each headline line is fixed as a block so the line count does not shift with viewport width.
Ink Landscape CTA
The closing CTA sets "At Taejae University, design your own future." over a sunrise photograph where Gyeongbokgung and Namsan overlap, combining an East Asian motif with the university's message. Widening the radial scrim kept the sky and Namsan exposed while holding heading contrast at 8.68:1.
Brand Purple System
For an international audience the original dancheong red was rebalanced onto a purple base (#6C27D8), contrasted against an off-white (#F1F4F2) ground to keep the editorial mood.
Consistent Media Framing
Each accordion label was promoted to a single heading line and image shadows removed, so photography and video sit on the same plane as the body text.