An editorial personal platform combining corporate manufacturing leadership with fine-art photographic curation, presenting a 25-year operations career alongside visual arts in a single fluid experience.Platform digital bergaya editorial yang menyatukan kepemimpinan manufaktur korporat dengan kurasi seni fotografi, merangkum perjalanan karier operasional 25 tahun dan karya visual dalam satu alur terpadu.
Harya Pranatreshna directs production operations in industrial manufacturing and pursues photography across automotive design, wildlife, and regional cultures. The interface was designed to reflect the compositional precision of his visual work while maintaining immediate clarity for industry peers and executive visitors.Harya Pranatreshna memimpin operasional produksi manufaktur sekaligus menekuni fotografi otomotif, satwa liar, dan budaya nusantara. Antarmuka ini dirancang untuk merefleksikan presisi komposisi karya visualnya, sembari mempertahankan keterbacaan yang ringkas bagi rekan industri dan pengunjung profesional.
Built with Next.js, GSAP ScrollTrigger, and Lenis, styled with scoped CSS Modules. Motion is designed to support the visual narrative: subtle scroll-driven transitions align with the photography, while animation respects user accessibility and reduced-motion preferences.Dibangun menggunakan Next.js, GSAP ScrollTrigger, dan Lenis, dengan styling scoped CSS Modules. Animasi dirancang untuk mendukung narasi visual secara halus dan fungsional, serta mematuhi preferensi reduced-motion pengguna.
Narrative Dualism: Executive Legacy and Artistic VisionDualisme Narasi: Rekam Jejak Eksekutif dan Visi Artistik
Structuring corporate leadership experience and fine-art photography into a cohesive editorial layout that balances professional background with creative work.Menyusun rekam jejak kepemimpinan profesional dan karya fotografi seni ke dalam tata letak editorial yang seimbang dan mudah dipahami.
Hero ViewportHero Viewport
Layered typographic identity positioned behind a cutout portrait, moving with differential scroll velocity.Identitas tipografi berlapis di balik potret cut-out, bergerak dengan diferensial kecepatan scroll.
Narrative PrologueProlog Narasi
First-person autobiographical journey tracing operational leadership across dairy and greenfield cocoa manufacturing.Perjalanan autobiografis sudut pandang pertama yang merangkum kepemimpinan operasional industri susu hingga pabrik kakao greenfield.
Executive ChronologyKronologi Eksekutif
A quarter-century career trajectory structured as an interactive index with scroll-pinned visual previews.Rekam jejak karier seperempat abad yang disusun sebagai indeks interaktif dengan pratinjau visual ter-pin.
Curated Visual WorksKarya Visual Terkurasi
Eight fine-art photographs composed into high-density editorial duets and full-bleed panoramas.Delapan karya fotografi seni yang ditata dalam komposisi duet editorial dan panorama layar penuh.
Perspective FooterFooter Perspektif
Direct contact channels revealed smoothly from beneath the document flow with cursor-reactive gradients.Kanal kontak langsung yang tersingkap mulus dari balik alur dokumen dengan gradien reaktif kursor.
The experience section as it runs on the live site.Bagian pengalaman sebagaimana berjalan di situs produksi.
Interactive Motion: Content-Driven TransitionsAnimasi Interaktif: Transisi Berbasis Konten
Motion is designed to support visual context rather than decoration, with each animation purposeful and performant.Animasi dirancang untuk mendukung konteks visual secara terarah, dengan performa yang tetap terjaga.
Architectural Cohesion: Purpose-Led Creative EngineeringKohesi Arsitektural: Rekayasa Kreatif Berorientasi Tujuan
A creative web experience succeeds when technical complexity directly reinforces narrative clarity. In this project, depth parallax establishes personal identity, the pinned frame provides immediate executive context, and editorial spreads grant photography the room it demands. Explorations that introduced computational drag without proportional narrative value, including WebGL particle reveals, were deliberately discarded to maintain rapid page responsiveness.Pengalaman web kreatif berhasil ketika kompleksitas teknis secara langsung memperkuat kejelasan narasi. Pada proyek ini, parallax kedalaman memperkenalkan identitas personal, bingkai ter-pin memberikan konteks eksekutif secara instan, dan spread editorial memberi ruang yang layak bagi fotografi. Eksplorasi yang membebani komputasi tanpa nilai naratif sepadan, termasuk partikel WebGL, sengaja disingkirkan demi mempertahankan responsivitas halaman yang prima.
Strategic TakeawaysPelajaran Strategis
- Ensure every animation supports the narrative and avoid unnecessary motion that distracts from the content.Pastikan setiap animasi mendukung penyampaian konten dan hindari efek berlebih yang mengalihkan perhatian.
- Build smooth scrolling and motion effects as progressive enhancements, respecting accessibility preferences and hardware capabilities by default.Rancang smooth scrolling dan efek animasi sebagai progressive enhancement, menghormati preferensi aksesibilitas dan kemampuan perangkat secara default.
- Load assets progressively: render the primary hero viewport immediately and defer heavy media until needed.Muat aset secara bertahap: tampilkan bagian hero utama secara instan dan tunda media berukuran besar hingga diperlukan.