3D Floating Sky Island — Immersive Web Experience Shaping the Future | React, Three.js, Tailwind CSS, Node.js, Express.js, Vercel, Render

Project Period:
Aug 2024 – Sep 2024

Welcome to My Floating Sky Island 🏝️🕊️😇

Over the past month, I embarked on a journey to bring a dream to life—creating a website that feels like pure magic. The result? A floating sky island rendered beautifully using Three.js and React. This project turned my desk into a creative lab, where I explored immersive technologies and discovered how they’re shaping the future of human-computer interaction.

Building this project reignited my passion for software engineering and reminded me why I love what I do. The web is evolving fast, and it's clear to me that interactive 3D environments like this one are at the forefront of that transformation. They represent more than just fun—they are a glimpse into the future of the internet.

Ready to fly? Let's take off 🚀

The Stack

Here’s a quick breakdown of the technologies I used to bring this project to life:

  • Frontend: React, Three.js, TailwindCSS
    These tools helped me build a fast, interactive, and visually stunning UI. TailwindCSS made it easy to style, while Three.js handled all the 3D magic.
  • Backend: Node.js, Express.js, Resend Email API
    For the backend, I went with a lightweight stack that allowed smooth handling of server requests and seamless email functionality.
  • Deployment: Vercel, Render
    With Vercel for the frontend and Render for the backend, deployment was a breeze—and, more importantly, both platforms offer free tiers for personal websites! This meant I could focus entirely on development, without worrying about the cost of hosting or scaling.

Gratitude & Appreciation

A big thanks to Adrian Hajdin for his incredible tutorials and ideas on "learning by content creation." His YouTube channel, JavaScript Mastery, inspired me to approach learning in a more hands-on way, which made this entire process even more enjoyable. If you're a fellow developer looking to level up, his resources are a must!

I hope this project can inspire others to experiment with Three.js and push the boundaries of web development. The future is full of possibilities, and I’m excited to see where this journey leads!