Rasa Kenangan: The art of web development without frameworks

The evolution of web design: Beyond templates

In a digital ecosystem saturated with heavy frameworks and external dependencies, the Rasa Kenangan project emerges as a reminder of the power of native JavaScript. This conceptual landing page, designed for a fictional Indonesian restaurant, breaks away from the traditional "three-column grid" structure to embrace an immersive, scroll-based narrative.

The project proves that it is not always necessary to resort to complex libraries to achieve a high-level user experience. Much like when we analyze how to optimize development through AI Benchmarking in programming: Beyond synthetic tests, the key lies in understanding technical fundamentals before adding layers of abstraction.

A technical deployment with zero dependencies

The architecture of Rasa Kenangan is an example of efficiency. Built entirely with plain HTML, CSS, and JavaScript, the site achieves a perfect 100/100 score across all Lighthouse metrics (Performance, Accessibility, Best Practices, and SEO).

Interface innovations

The site stands out for several technical implementations that elevate the visual narrative:

• Sticky narrative scroll: The main image remains fixed while the text scrolls, creating a cinematic effect.
• Kinetic typography: Word-by-word reveal animations with 3D rotations that guide the user's focus.
• Horizontal menu with scroll-snap: A fluid, tactile experience that mimics the act of turning the pages of a physical menu.
• GPU optimization: Intensive use of will-change and translate3d() to ensure all animations are smooth without compromising performance.

"Immersive design is not about overwhelming the user, but rather guiding them through a coherent story where the technology disappears behind the experience."

The philosophy of clean code

By opting for an open source and minimalist approach, the author bypassed tools like React or Tailwind, relying on CSS Custom Properties to manage the entire design system. The use of oklch for color management allows for a perceptual uniformity that traditional color models like HSL do not offer.

Accessibility has been a central pillar of the development, always respecting system motion preferences (prefers-reduced-motion) and ensuring full keyboard navigation. This project is a masterclass in how conscious programming can result in web products that are faster, lighter, and more accessible to all users, regardless of the device they use.