|
A high-end, editorial-style web archive dedicated to Park Jihyo. Built with a focus on aesthetic luxury, seamless transitions, and a "classified file" narrative. This project blends a cinematic user experience with a modern technical stack. "Because I gave it my all and did my best, I don't have any regrets." |
|
The archive features a custom-built asymmetric layout, mirroring the feel of a high-fashion digital magazine. It includes a dynamic discography retrieved from a custom backend and a deep-dive biography with scroll-reveal storytelling.
Soon will be updated~
Designed for performance and smooth motion:
- Framework: Astro (Static Site Generation for speed)
- UI Library: React (for interactive components)
- Styling: Tailwind CSS
- Animations: Framer Motion (Custom quint-ease transitions)
- Database: Supabase (Real-time discography & gallery management)
- Icons: Lucide React
- Editorial Layout: Asymmetric grids and extreme whitespace for a "Luxury" feel.
- Dynamic Discography: Automatically pulls the latest releases from Supabase with a dedicated archive page.
- Smooth Navigation: Custom-built Navbar with absolute centering and smart-anchor scrolling.
- Biography Journey: A chapter-based narrative with staggered scroll-reveal animations.
- The Vault: A restricted-access area for premium content (Work in Progress).
-
Clone the repo:
git clone [https://github.com/FarrelApriandry/jihyo-archive.git](https://github.com/FarrelApriandry/jihyo-archive.git)
-
Install dependencies:
npm install
-
Set up environment variables: Create a
.envfile and add your Supabase credentials:PUBLIC_SUPABASE_URL=your_url PUBLIC_SUPABASE_ANON_KEY=your_key
-
Run development server:
npm run dev
As a Data Engineer and Game Developer, I approached this project by treating the UI as a "narrative system."
- Modular Components: Everything is mapped via React props for scalability.
- Motion Logic: Used custom easing functions to mimic the "heavy/premium" feel of high-end cinematography.
- Data Flow: Structured Supabase tables to allow easy updates for future TWICE/Jihyo eras.
Rel Game Developer | Data Engineer | Web Explorer Medium | GitHub
Disclaimer: This is a fan-made project. All images and intellectual property related to Jihyo/TWICE belong to JYP Entertainment.