This is a submission for Weekend Challenge: Earth Day Edition
“I’m not asking for much. Just… stop lighting me on fire, okay?” — Earth, probably.
So… I had no plans for the weekend, and as someone who genuinely loves nature (and occasionally touches grass 🌱), the Earth Day theme felt like the perfect excuse to build something meaningful.
Instead of creating just another webpage, I wanted to try something different:
- What if Earth could speak?
- What would it say to us?
- And… would we actually listen?
That’s how this project was born.
🌎 What I Built
I created an interactive storytelling webpage where Earth narrates its own story from its birth to today.
The goal wasn’t just design or code; it was to create an emotional connection between users and the planet.
The experience walks through:
- 👋🏻 “Who Am I?”: Earth introduces itself
- ⏳ “My Life Story”: A timeline from 4.5 billion years ago to today
- 💌 “Dear Humans”: A message from Earth (yes, slightly sarcastic 😄)
- 🛡️ “How to Protect Me”: Simple actionable steps
- 🌿 “Life on Earth”: Showcasing biodiversity
- 📊 “Earth in Numbers”: Powerful stats that hit hard
- ✍🏻 “Make Your Pledge”: Turning awareness into action
I also focused heavily on visual storytelling, clean UI, and smooth UX to make the experience feel immersive.
✨ Key Features
- Modern UI/UX with a strong storytelling approach
- Fully responsive design (mobile → desktop)
- Optimized performance & fast loading
- Glassmorphism navbar with blur-on-scroll effect
- Smooth navigation & section transitions
- Alternating timeline layout for better readability
- Engaging visuals & animations
- Emotion-driven copywriting (Earth literally talks to you)
📺 Demo
Take a quick journey through the experience; scroll, explore, and let Earth tell its story.
If you enjoy the project or the idea behind it, I’d really appreciate it if you could ⭐ the repo; it genuinely means a lot 💚
🛤️ My Journey
This project started as a simple idea… and quickly became something deeper.
At first, I was focused on:
- layout
- sections
- responsiveness
But then I found myself spending just as much time on:
- the tone of the content
- the personality of Earth
- the emotional flow of the page
One of the most fun (and challenging) parts was:
- making the timeline feel clean and readable
- balancing design with performance
- optimizing images to fix LCP issues (that took a minute 😅)
This wasn’t just building UI; it felt like crafting a narrative experience.
🛠️ Tech Stack
Nothing overcomplicated; just kept the stack modern, lightweight, and performance-focused, choosing tools that let me move fast while keeping the experience smooth and scalable.
| Category | Technology |
|---|---|
| Frontend |  |
| Build Tool |  |
| Deployment |  |
📈 Performance
I put a lot of effort into optimization, especially around LCP and image loading.
Here are the results:
- 🚀 Performance: 100
- ✅ Best Practices: 100
- 🔍 SEO: 100
- ♿ Accessibility: 96
💭 Reflections
This project reminded me why I love building.
It wasn’t just about shipping something quickly for a challenge.
It became about telling a story through code.
Also… it made me think a lot about how we interact with our planet.
Sometimes, a simple interface can carry a powerful message.
🌱 Final Thoughts
Huge thanks to the DEV team for organizing this challenge. It’s honestly one of the most fun ways to build something meaningful in such a short time.
This pushed me to:
- be more creative
- think beyond UI
- and build something with a message
And yeah…
maybe next weekend I’ll go outside instead of coding about Earth 😄
And always remember: There is no Planet B 💚
| Thanks for reading! 🙏🏻 I hope you found this useful ✅ Please react and follow for more 😍 Made with 💙 by Hadil Ben Abdallah |
  
|
|---|
Top comments (31)
This is a beautiful way to spend a weekend — turning raw environmental data into something that tells a story people can actually feel.
What's your pipeline for the data ingestion? I'm curious how you handled the temporal resolution — hourly vs daily vs monthly data shapes what kind of patterns you can surface, and the right granularity for climate data isn't always obvious upfront.
Also: have you thought about making this interactive? A timeline scrubber that lets readers jump to specific events (volcanic eruptions, El Niño years, etc.) could make the storytelling even stronger.
Thank you so much! 😍 I really appreciate the thoughtful feedback 💚
Just to clarify, this project isn’t driven by real-time or external datasets. I leaned more into storytelling and narrative design rather than building a data pipeline. The timeline and content are intentionally simplified to keep the experience approachable and focused on the message instead of raw data complexity.
That said, your point about temporal resolution is spot on. If I were to evolve this into a more data-driven version, choosing between hourly, daily, or monthly granularity would definitely shape the kind of insights you can surface; it’s a really interesting challenge.
And I love your idea about interactivity. A timeline scrubber with key events would add a whole new layer to the experience, definitely something I’d be excited to explore next.
Thanks again for the great suggestions
That's a great approach for a first version — keeping it narrative-focused makes it accessible rather than overwhelming. The storytelling-first design is actually smart for this kind of project.
For the interactive timeline idea, even a simple version with clickable decade markers could be powerful. Sometimes the most impactful data viz is one that lets people find their own connection to the data — like picking out the year they were born or when a major event happened in their region.
Looking forward to seeing where this goes!
This is a really smart take on the Earth Day theme.
Instead of building just another landing page,
you turned it into a narrative experience. The focus on Earth’s voice, tone, and emotional storytelling is what truly makes this stand out. Great balance between design, performance, and meaning.
Thank you so much; I really appreciate this 💚
That’s exactly what I was aiming for, going beyond a typical landing page and making it feel more like an experience than just a layout.
I’m especially glad the storytelling and Earth’s “voice” came through, because that’s where I spent most of my time refining things.
Cyber Daemon has entered the chat.
Okay, first of all, a 100 Lighthouse score across Performance, Best Practices, AND SEO? You didn't just build a website, Hadil, you performed digital witchcraft (and maybe by my presence, summoned me...the digital "Daemon" 😅). I didn't even know you could hit 100 without sacrificing at least three npm packages to the latency gods.
I love the premise though. "Earth, what's your story?"
Earth: "Well, I started as a hot rock, things cooled down, the dinosaurs were pretty chill, and now I'm basically a giant server rack overheating because someone trained an AI on 4 billion pictures of cats."
Also, the UI looks so clean I almost forgot I haven't been outside since Tuesday. The blur-on-scroll glassmorphism? Chef's kiss. That right there is the exact kind of UI that makes me feel immense guilt while I continue to sit in a dark room generating carbon emissions by rendering React components.
Jokes aside, taking a hackathon challenge and turning it into something with actual emotional resonance (and not just another generic weather app or to-do list) is genuinely awesome. Kudos.
This might be one of my favorite comments so far 😍 “digital witchcraft” really made my day 💚
I promise no npm packages were harmed in the making of that Lighthouse score… just a lot of trial, error, and a few late-night optimizations 😅
And that “giant server rack overheating” line? Way too accurate. I might have to borrow that one.
Really glad you liked the premise and the UI; the blur-on-scroll was one of those small details I almost overthought, so “chef’s kiss” is high praise.
Also… I fully relate to the “haven’t been outside since Tuesday” part. Slightly ironic for an Earth Day project 😄
Jokes aside, I appreciate you taking the time to write this; comments like this make the whole challenge even more fun.
love the premise - 'what if earth could speak' is a much better hook than most hackathon ideas. genuinely clever framing for earth day.
Thank you; I really appreciate that! 💚
That idea just kind of clicked early on, and everything else started building around it.
I wanted something simple but a bit different from the usual Earth Day angle.
Thanks again for the kind words! 😍
yeah, when the framing clicks that early it usually means the core idea is solid. good luck with it.
Thank you so much, Mykola 😍
anytime - curious to see where it goes
Great job! This is really impressive 😍
Thank you so much! 😍 This really means a lot 💚
Wow, you totally smashed this challenge! 🚀 I am really impressed with both the idea and the outcome. GJ!
Thank you so much, Klaudia 😍
Great job! Important message, and the page is visually really pleasant. I really liked the color palette choices. The “There is no Planet B” headline stands out the most 🙂
Thank you so much, Marina 😍 That really means a lot! 💚
I’m glad the message came through; that was honestly the main goal behind the project.
And happy you liked the color palette too! I spent a good amount of time trying to get that balance right without making it feel too heavy.
The “There is no Planet B” line is one of my favorites as well; it's simple, but it says everything.
Fantastic! 👏🏻👏🏻👏🏻 Wish you all the best in the challenge
Thank you so much! 😍
Wow! So creative 😍
Thank you so much, Sheory 😍 Glad you liked it 💚
rak 3ajbna Great job
Thanks!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.