MindReach
DESCRIPTION
Bio Platform — Corporate Website
DURATION
Jun 2026
MY ROLE
- Full website planning and bilingual UI/UX design aligned to the corporate brand identity.
- React responsive frontend publishing; scroll interaction and helix canvas motion implementation.
- Full-stack build — Supabase admin CMS, inquiry automation, SEO/GA4, Vercel deployment.
TECH
React 18 · TypeScript · Vite · Tailwind CSS 3
GSAP · ScrollTrigger · Lenis
Supabase (Auth · Postgres · Storage · RLS) · Resend
GA4 · Vercel
Project Purpose
"Beyond the barrier of disease, connecting the hope of treatment." MindReach Inc. develops therapies for intractable brain disease on B-REACH™, its own blood-brain barrier drug delivery platform. The site had to make deeply technical work — BBB opening mechanism, Dextran validation data, a two-track pipeline — legible and credible to non-specialists, while carrying enough authority to support global licensing-out and investment. A light editorial system in off-white, navy and teal holds the trust of the bio industry and the precision of the technology at the same time.
Scope
- · Corporate Website UI/UX Planning & Design
- · Bilingual (KO/EN) Responsive Frontend
- · Supabase Admin CMS Build
- · Inquiry Automation, SEO & Analytics
Key Technical Features
Scroll-driven Editorial Interaction
- · Lenis inertial smooth scrolling combined with GSAP ScrollTrigger drives section entrances from the DNA helix hero through company, platform, pipeline, PR and contact.
- · Heading mask reveals throughout, with prefers-reduced-motion respected so the whole sequence degrades cleanly for accessibility.
Bilingual Content Architecture
- · Every string lives in a { ko, en } data layer switched by language context at runtime — no duplicated markup.
- · Display heading sizes, hero height and typefaces (KoPubWorld Dotum / Syne) are tuned per language so neither reads as a translation of the other.
Admin CMS on Supabase
- · Auth, Postgres, Storage and RLS back an admin surface for greetings, vision, history, imagery, PR posts with attachments, pipeline rows, footer and inquiries.
- · The client edits all of it without touching code or waiting on a deploy.
Inquiry Automation & Analytics
- · A Postgres trigger with pg_net fires a Resend email the moment an inquiry lands.
- · GA4 route tracking plus per-page dynamic SEO — title, description, OG, sitemap.
Mobile Performance Optimization
- · Render load was profiled on real iOS Safari; the helix canvas and heavy blurs are conditionally disabled on touch.
- · Non-blocking font loading and code splitting keep low-spec devices and slow networks usable.
Design Points
Light Editorial Bio Identity
An off-white (#f3f8f7) base with navy text and a teal (#83cbc5) accent — a fully light editorial direction that carries pharmaceutical trust and refined technology at once. Generous whitespace and strict typographic hierarchy do the work of signalling expertise.
Evidence-first Storytelling
BBB mechanism, Dextran validation data, safety and the two-track pipeline are pushed to the front as diagrams, figure cards and an interactive table — built to persuade pharma partners and investors rather than to decorate.
Signature Helix Hero
A DNA helix canvas animation recoloured in deep teal and ocean blue anchors the hero, giving the brand narrative — crossing the barrier to connect treatment — a single symbolic image.