π 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.
Live Demo π
GitHub Repository π
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 π
Earth Journey website preview. Hadil Ben Abdallah's dev weekend challenge submission
π€οΈ 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.
π 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
Hadil Ben Abdallah's website lighthouse scores
π 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 π
Happy earth day image