Taejae University (KR)
DESCRIPTION
Global Hybrid University — Domestic Admissions Landing
DURATION
May 2026 - Jul 2026
MY ROLE
- Full planning and UI/UX design of the Korean landing page — section narrative, type system, colour operation.
- Responsive Next.js frontend publishing, with scroll, crossfade and custom video player implementation.
- Sole ownership of the asset pipeline: video transcoding, webp image optimisation, official CI application.
- Automated Puppeteer QA and accessibility contrast verification; 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
Pretendard · Nanum Brush Script
Project Purpose
"If you only plan to show up and graduate, this is not your university." Taejae University opened in 2023 as Korea's first global hybrid university — students rotate through seven cities across five countries and every class is a live discussion held in English. This page is a conversion-first one-page landing aimed at domestic applicants. Rather than listing information the way a university homepage does, it puts provocation, reversal, four proofs (global rotation, discussion and projects, self-designed majors, AI-centred education), the kind of student Taejae wants, and the call to action on a single scroll axis — so that by the time a reader reaches the admissions consultation form, the argument is already finished.
Scope
- · Domestic Admissions One-page Landing Planning & UI/UX Design
- · Responsive Frontend (Next.js 16 · React 19 · TypeScript)
- · Lenis & GSAP Scroll Interaction
- · Self-hosted Campus Video Encoding & Custom Player
- · Official Brand CI Application
- · Consultation Inquiry API (Resend · Supabase)
Key Technical Features
Scroll-driven Narrative Structure
- · Lenis inertial smooth scrolling combined with IntersectionObserver reveals ties eleven sections into one continuous read.
- · The hero headline enters as a GSAP word-level stagger, so the message imprints in sequence rather than all at once.
- · Scroll lag caused by double smoothing — CSS `scroll-behavior` on top of Lenis — was removed by tuning `lerp` instead of dropping either layer.
Self-hosted Custom Video Player
- · Student interview masters (1080p60, 38Mbps, up to 300MB) were re-encoded with FFmpeg H.264 CRF24 and faststart down to 3.7–8.6MB, then served from our own host with no YouTube embed.
- · Autoplay is disabled: playback starts from a poster and a play button, then hands over to native controls for sound and fullscreen.
Country Rotation Crossfade
- · In the global rotation section, photography from Korea, Japan, the US, China and Europe is stacked at a fixed 4:3 ratio and crossfaded on a 3.6s cycle.
- · `prefers-reduced-motion` is respected — motion-sensitive visitors get a still frame instead.
Automated QA Pipeline
- · A Puppeteer script runs against the production build across five viewports (1920 · 1440 · 768 · 390 · 360), checking console errors, HTTP 4xx/5xx, horizontal overflow, out-of-viewport elements and broken images.
- · Background contrast for key text is measured pixel by pixel, so WCAG AA compliance is asserted in code rather than assumed.
Design Points
Official Brand Identity
The horizontal lockup from the university's official logo kit is used as supplied, with brand purple (#502880) as the primary and teal (#18A090) as the secondary accent — the web design and the institutional brand guide stay in agreement.
Editorial Poster Typography
Large Korean display type set in Pretendard Black at -0.055em tracking and 1.29 line height, so the headline reads as a single mass even over graffiti photography.
Contrast-verified Photography
Every white text block over a photograph gets a locally designed scrim gradient, with contrast measured on the result (hero 6.13:1, CTA slogan 5.48:1) — the colour and mood of the image survive without costing legibility.
Brush Script Accent
The poster band's core keywords — skill, experience, competitiveness — are set in coral Nanum Brush Script on a slant, laying handwritten feeling over an otherwise disciplined grid.