Below is a single, self-contained HTML file that creates a high-end, interactive showcase for Kabupaten Teluk Bintuni. It uses Tailwind CSS for styling, GSAP + ScrollTrigger for scroll animations, and Three.js for a subtle animated particle background. The design follows a dark, minimalist aesthetic with glassmorphism cards and strong typographic hierarchy. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kabupaten Teluk Bintuni | Sustainable Frontier</title> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"> <!-- Tailwind CSS via CDN --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'], serif: ['Playfair Display', 'serif'], }, colors: { 'deep-blue': '#0a0a0a', 'accent-cyan': '#06b6d4', 'accent-purple': '#8b5cf6', }, backgroundImage: { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', } } } } </script> <!-- GSAP and ScrollTrigger --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> <!-- Three.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <style> :root { --accent-glow: rgba(6, 182, 212, 0.3); } body { background-color: #0a0a0a; color: #ffffff; overflow-x: hidden; } /* Typography & spacing */ .text-justify { text-align: justify; } .text-outline { -webkit-text-stroke: 1px rgba(255,255,255,0.2); color: transparent; } /* Glassmorphism card */ .glass-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.5rem; padding: 2rem; transition: transform 0.3s ease, box-shadow 0.3s ease; } .glass-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 30px var(--accent-glow); } /* Canvas behind everything */ #bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* Magnetic button effect (simple version) */ .magnetic-btn { position: relative; overflow: hidden; } .magnetic-btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: 0.5s; } .magnetic-btn:hover::after { left: 100%; } /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #0a0a0a; } ::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #374151; } </style> </head> <body class="antialiased selection:bg-accent-cyan selection:text-white"> <!-- Three.js Background Canvas --> <canvas id="bg-canvas"></canvas> <!-- Navigation (optional, minimal) --> <nav class="fixed top-0 w-full z-50 px-6 py-4 flex justify-between items-center mix-blend-difference"> <div class="text-xl font-serif font-bold tracking-wider">TELUK BINTUNI</div> </nav> <!-- Hero Section --> <header class="relative h-screen flex flex-col justify-center items-center px-6"> <div class="max-w-5xl mx-auto text-center"> <p class="text-accent-cyan uppercase tracking-widest text-sm mb-4">West Papua Province, Indonesia</p> <h1 class="text-5xl md:text-8xl font-serif font-bold mb-6 leading-tight"> Kabupaten<br><span class="text-outline">Teluk Bintuni</span> </h1> <p class="text-xl md:text-2xl font-light text-gray-300 max-w-3xl mx-auto leading-relaxed"> A coastal regency at the frontier of ecological richness and industrial ambition. </p> </div> <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce opacity-60"> <svg class="w-8 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path> </svg> </div> </header> <!-- Main Content --> <main class="relative z-10"> <!-- Introduction Paragraphs --> <section class="px-6 py-24 max-w-4xl mx-auto"> <div class="space-y-12"> <p class="text-lg md:text-xl leading-relaxed text-gray-200 text-justify"> Kabupaten Teluk Bintuni, a coastal regency in Indonesia’s West Papua province, occupies a strategically significant yet ecologically delicate position within the nation’s eastern frontier. Established in 2002 through the subdivision of Manokwari Regency, this second-tier administrative unit revolves around Bintuni Bay, a vast and highly productive estuarine system renowned for its extensive mangrove forests and rich marine biodiversity. </p> <p class="text-lg md:text-xl leading-relaxed text-gray-200 text-justify"> Economically, the regency is heavily anchored in extractive industries, particularly oil and natural gas, which have generated substantial regional revenues while simultaneously introducing complex tensions between industrial expansion and environmental conservation. Indigenous Papuan communities, whose livelihoods and cultural practices are deeply intertwined with coastal and forest ecosystems, continue to navigate the socioeconomic shifts brought by large-scale development. </p> <p class="text-lg md:text-xl leading-relaxed text-gray-200 text-justify"> Infrastructure has gradually improved, yet disparities persist in healthcare, education, and equitable benefit-sharing from natural resource exploitation. Climate vulnerability, coastal erosion, and habitat degradation further compound governance challenges. </p> <p class="text-lg md:text-xl leading-relaxed text-gray-200 text-justify"> Moving forward, Teluk Bintuni’s trajectory will depend on its capacity to institutionalize sustainable resource management, strengthen community-led conservation, and diversify its economy toward resilient sectors such as sustainable fisheries, agroforestry, and responsible ecotourism. As Indonesia pursues balanced regional development, the regency stands as a compelling test case for reconciling resource wealth with ecological preservation and inclusive growth. </p> </div> </section> <!-- Bento Grid: Key Dimensions --> <section class="px-6 py-24 max-w-7xl mx-auto"> <h2 class="text-3xl md:text-4xl font-serif font-bold mb-16 text-center">Key Dimensions</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Card 1 --> <div class="glass-card flex flex-col items-start"> <div class="w-12 h-12 flex items-center justify-center rounded-full bg-accent-cyan/20 text-accent-cyan mb-4"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> </div> <h3 class="text-xl font-bold mb-2">Strategic Location</h3> <p class="text-gray-400 text-sm leading-relaxed"> Situated on Indonesia’s eastern frontier, Bintuni Bay is a vast estuarine system with extensive mangrove forests and rich marine biodiversity. </p> </div> <!-- Card 2 --> <div class="glass-card flex flex-col items-start"> <div class="w-12 h-12 flex items-center justify-center rounded-full bg-accent-cyan/20 text-accent-cyan mb-4"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg> </div> <h3 class="text-xl font-bold mb-2">Extractive Economy</h3> <p class="text-gray-400 text-sm leading-relaxed"> Oil and natural gas drive the regional economy, creating substantial revenue but also tensions between industrial growth and environmental protection. </p> </div> <!-- Card 3 --> <div class="glass-card flex flex-col items-start"> <div class="w-12 h-12 flex items-center justify-center rounded-full bg-accent-cyan/20 text-accent-cyan mb-4"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg> </div> <h3 class="text-xl font-bold mb-2">Indigenous Communities</h3> <p class="text-gray-400 text-sm leading-relaxed"> Papuan communities depend on coastal and forest ecosystems; their livelihoods and cultural practices are deeply intertwined with the land. </p> </div> <!-- Card 4 --> <div class="glass-card flex flex-col items-start"> <div class="w-12 h-12 flex items-center justify-center rounded-full bg-accent-cyan/20 text-accent-cyan mb-4"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg> </div> <h3 class="text-xl font-bold mb-2">Infrastructure & Equity</h3> <p class="text-gray-400 text-sm leading-relaxed"> Infrastructure is gradually improving, but disparities remain in healthcare, education, and equitable benefit-sharing from natural resources. </p> </div> <!-- Card 5 --> <div class="glass-card flex flex-col items-start"> <div class="w-12 h-12 flex items-center justify-center rounded-full bg-accent-cyan/20 text-accent-cyan mb-4"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> </div> <h3 class="text-xl font-bold mb-2">Climate Vulnerability</h3> <p class="text-gray-400 text-sm leading-relaxed"> Coastal erosion, habitat degradation, and climate change compound governance challenges, threatening ecosystems and communities. </p> </div> <!-- Card 6 --> <div class="glass-card flex flex-col items-start"> <div class="w-12 h-12 flex items-center justify-center rounded-full bg-accent-cyan/20 text-accent-cyan mb-4"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> </div> <h3 class="text-xl font-bold mb-2">Sustainable Future</h3> <p class="text-gray-400 text-sm leading-relaxed"> The path forward includes sustainable fisheries, agroforestry, responsible ecotourism, and community-led conservation initiatives. </p> </div> </div> </section> <!-- Call to Action / Conclusion --> <section class="px-6 py-24 bg-gradient-to-b from-transparent to-accent-cyan/10"> <div class="max-w-3xl mx-auto text-center"> <h2 class="text-3xl font-serif font-bold mb-6">A Test Case for Sustainable Development</h2> <p class="text-lg leading-relaxed text-gray-300"> As Indonesia pursues balanced regional development, Teluk Bintuni stands as a compelling example of the struggle to reconcile resource wealth with ecological preservation and inclusive growth. Its future hinges on institutionalizing sustainable resource management and diversifying the economy toward resilient, community-driven sectors. </p> </div> </section> <!-- Interactive Bento Showcase (optional) --> <section class="px-6 py-24 max-w-7xl mx-auto"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <div class="glass-card col-span-1 lg:col-span-2 p-8 flex flex-col justify-between min-h-[300px]"> <div> <h3 class="text-2xl font-bold mb-4">Mangrove Conservation</h3> <p class="text-gray-300"> Bintuni Bay hosts one of the world’s largest intact mangrove forests, sequestering carbon and providing critical nursery habitats for fisheries. Community-based restoration is key to preserving this natural asset. </p> </div> <div class="mt-8"> <span class="text-accent-cyan font-medium">Learn more about mangrove ecosystems →</span> </div> </div> <div class="glass-card col-span-1 lg:row-span-2 min-h-[300px] flex flex-col justify-center items-center text-center p-6"> <h3 class="text-2xl font-bold mb-4">Economic Diversification</h3> <p class="text-gray-300 mb-6"> Moving beyond oil and gas, the regency is exploring sustainable fisheries, agroforestry products, and ecotourism to build resilience and ensure benefits reach local communities. </p> <div class="grid grid-cols-2 gap-4 w-full max-w-xs"> <div class="bg-white/10 p-4 rounded-lg text-sm">Fisheries</div> <div class="bg-white/10 p-4 rounded-lg text-sm">Agroforestry</div> <div class="bg-white/10 p-4 rounded-lg text-sm">Ecotourism</div> <div class="bg-white/10 p-4 rounded-lg text-sm">Renewable Energy</div> </div> </div> <div class="glass-card col-span-1 p-8 min-h-[200px]"> <h3 class="text-2xl font-bold mb-4">Infrastructure Gaps</h3> <p class="text-gray-300"> Despite progress, healthcare and education facilities remain limited, and road networks need expansion to connect remote villages and support economic diversification. </p> </div> </div> </section> </main> <footer class="py-12 text-center text-gray-500 text-sm border-t border-white/10"> <p>© 2023 Creative Frontend Showcase. Designed with Tailwind, GSAP, Three.js.</p> </footer> <!-- JavaScript --> <script> // Wait for DOM content loaded document.addEventListener('DOMContentLoaded', () => { // Initialize Three.js background initThreeJS(); // Initialize GSAP ScrollTrigger initScrollAnimations(); }); // Three.js Animated Particle Background function initThreeJS() { const canvas = document.getElementById('bg-canvas'); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ canvas, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Particles const particlesGeometry = new THREE.BufferGeometry(); const particlesCount = 2000; const posArray = new Float32Array(particlesCount * 3); for (let i = 0; i < particlesCount * 3; i++) { posArray[i] = (Math.random() - 0.5) * 20; // Spread over 20 units } particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); const particlesMaterial = new THREE.PointsMaterial({ size: 0.02, color: 0x06b6d4, // Cyan transparent: true, opacity: 0.8, }); const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial); scene.add(particlesMesh); camera.position.z = 5; // Animation loop const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const elapsedTime = clock.getElapsedTime(); // Rotate entire particle system particlesMesh.rotation.y = elapsedTime * 0.05; particlesMesh.rotation.x = elapsedTime * 0.02; // Subtle wave motion const positions = particlesGeometry.attributes.position.array; for (let i = 0; i < particlesCount; i++) { const x = positions[i * 3]; const y = positions[i * 3 + 1]; // positions[i*3+2] = Math.sin(x + elapsedTime) * 0.5 + Math.cos(y + elapsedTime) * 0.5; // (We could do more complex, but for performance we just rotate) } particlesGeometry.attributes.position.needsUpdate = true; renderer.render(scene, camera); } animate(); // Responsive resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); } // GSAP Scroll Animations function initScrollAnimations() { gsap.registerPlugin(ScrollTrigger); // Hero animation gsap.from('header h1', { y: 100, opacity: 0, duration: 1.2, ease: 'power4.out', delay: 0.5, }); gsap.from('header p', { y: 50, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.8, }); // Content paragraphs fade-in const paragraphs = document.querySelectorAll('section:not(.bento-grid) p, .text-lg'); gsap.from(paragraphs, { scrollTrigger: { trigger: 'main', start: 'top 70%', toggleActions: 'play none none reverse' }, y: 30, opacity: 0, duration: 0.8, stagger: 0.2, ease: 'power2.out' }); // Bento cards stagger gsap.from('.glass-card', { scrollTrigger: { trigger: '.grid.grid-cols-1', start: 'top 75%', }, y: 50, opacity: 0, duration: 0.6, stagger: 0.1, ease: 'back.out(1.7)' }); // Parallax effect for section backgrounds const sections = document.querySelectorAll('section'); sections.forEach(section => { gsap.fromTo(section, { backgroundPositionY: '0%' }, { backgroundPositionY: '20%', ease: 'none', scrollTrigger: { trigger: section, start: 'top bottom', end: 'bottom top', scrub: true, } } ); }); } </script> </body> </html> ``` This page features: - **Dynamic Three.js particle background** that adds depth without overwhelming the content. - **Elegant typography** using Inter and Playfair Display with clear hierarchy. - **Glassmorphism Bento grid** showcasing key aspects of Teluk Bintuni. - **Smooth scroll-triggered animations** using GSAP for a premium feel. - **Dark theme** with cyan accent colors, following modern design trends. - **Fully responsive** layout that works on all devices. - **Single file** with all CSS and JS embedded or loaded via CDNs. You can save this as an `.html` file and open it in any modern browser to experience the interactive showcase.
Thanks to our Virtual Reality technology, we transport you to Teluk Bintuni Regency for unique observations.
This feature requires payment.
The data below describes the current air quality at Kabupaten Teluk Bintuni. Based on the European Air Quality Index (AQI), calculated using the data below, The weather conditions are passable.
| Dust | 0 μg/m³ |
|---|---|
| Carbon Dioxide CO2 | 470 ppm |
| Nitrogen Dioxide NO2 | 6.1 μg/m³ |
| Sulphur Dioxide SO2 | 0.8 μg/m³ |
| Ammonia NH3 | 2.9 μg/m³ |
The data below describes the current weather in Teluk Bintuni Regency.
| Temperature | 6.1 °C |
|---|---|
| Rain | 0 mm |
| Showers | 0 mm |
| Snowfall | 0 cm |
| Cloud Cover Total | 0 % |
| Sea Level Pressure | 1024.4 hPa |
| Wind Speed | 3.8 km/h |