GWK Cultural Park

Project Overview

This website was built using Next.js and Sanity.io as core technologies, ensuring optimal performance and a seamless user experience. It serves as a platform to introduce GWK Cultural Park , a cultural tourism destination committed to educating visitors on the importance of preserving global cultural heritage, especially for younger generations. The park’s iconic landmark is the Garuda Wisnu Kencana statue , a symbol of spiritual strength and the richness of Balinese Hindu philosophy and mythology. The development also included integrating Firestore and collaborating with Viar M Suganda as a fellow developer.

Role & Responsibilities

As a Front-End Developer working alongside Viar M Suganda , my responsibilities included:

1. User Interface (UI/UX) Development

• Responsive Design: Implemented responsive layouts using Next.js to ensure optimal display across devices, prioritizing a mobile-first approach for visitors accessing the site via smartphones.
• Key Components Built:
  • Hero Section featuring visuals of the Garuda Wisnu Kencana statue.
  • Photo galleries showcasing destinations and events like KecakGaruda Wisnu .
  • Contact forms and location details for GWK Cultural Park (Uluwatu, Bali).
• Performance Optimization:
  • Applied lazy loading , image compression, and code splitting to enhance loading speed and user experience.

2. Sanity.io CMS Integration

• Content Structure Setup: Configured content schemas in Sanity.io to enable the editorial team to manage cultural descriptions, event schedules, and promotions efficiently.
• Custom Schema Development: Created dynamic schemas for data such as ticket information, testimonials, and location details.
• API Integration: Connected Sanity data to the frontend via API, ensuring real-time synchronization between the CMS and the website.

3. Technical Collaboration

• Shared development of complex components (e.g., interactive animations on the homepage) and cross-browser testing.
• Prepared technical documentation to guide the team in maintaining and expanding features.

Technologies Used

• Next.js: A React framework for server-side rendering (SSR) and static-site generation (SSG).
• Sanity.io: A flexible headless CMS for managing content easily accessible to non-technical teams.
• Tailwind CSS: Utility-first CSS framework for consistent and efficient styling.

Challenges & Solutions

Image Optimization for GWK Statue:

• Used Next.js Image Component to display high-resolution visuals of the landmark without compromising loading speed.

Mobile Responsiveness:

• Ensured intuitive navigation and action buttons (e.g., "Buy Tickets") remained functional on mobile screens using flexible grid designs .

Real-Time Data Sync:

• Integrated Sanity Webhooks to update content automatically without requiring redeployment.

Achievements

• The GWK Cultural Park website now offers an engaging, visually appealing interface with loading times under 2 seconds .
• Operational teams can independently update event details or promotions via the Sanity dashboard .
• Dynamic components like the KecakGaruda Wisnu Event Section and contact/location modules (Uluwatu, Bali) enhance user engagement.

Personal Reflection

Collaborating with Viar M Suganda on this project allowed me to merge my passion for Balinese culture with modern technology. Ensuring the digital presence aligns with GWK Cultural Park’s educational and spiritual values was both a challenge and a rewarding experience.

You can look this website on link below:

https://gwkbali.com/