Web Application

(주)투엘바이오 Aborted Renewal Website
2L Bio Co., Ltd."
Corporate Website Renewal (Aborted Deployment)
[Highlight Project]

1. Introduction

I made the renewed main page for 2L Bio Co., Ltd., a biotech company. Although the renewal project was discontinued due to internal decisions, the completed main page demonstrated advanced UX engineering and performance-conscious frontend work.

This project showcases my ability to build low-level user interactions and fine-tuned animations by hand to ensure cross-device UX excellence.

Key Features
  • Smooth Cross-Platform Section Navigation
    • Mouse wheel & keyboard navigation for desktop.
    • Touch & swipe gestures for mobile.
    • No animation libraries used — implemented all transitions using raw JavaScript and CSS.
    • Support for arrow keys, Home/End keys.
  • Custom Scroll Snap System

    Replaced native CSS scroll-snap due to jitter issues with a manually calculated scroll snapping system for precise, fluid page transitions.

  • Frontend Stack
    • Built with Next.js
    • Zero external animation dependencies
    • Fully responsive and performance-optimized
Demonstration
  • Large screen (mouse wheel)
  • Medium screen (keyboard arrow keys)
  • Medium screen (keyboard home / end keys)
  • Mobile screen (drag swipe)

2. Techs

  • Language / Script

  • Framework

  • Library

  • IDE

  • VCS

  • Compiler / Transpiler / Bundler / Build Tool

  • Linter / Formatter

  • Package Manager / Dependency Manager

  • Deployment / Process Management / Containerization

  • Etc.

3. Screenshots

© 2025 hansf14. All Rights Reserved.