This is a submission for the Storyblok Challenge
💡 What I Built
My project is a visual timeline of video game consoles, where each card displays the name, release year, image, and description of a classic console.
The goal was to create a responsive and visually engaging experience, without needing to update the code every time I wanted to add or edit consoles.
All content is powered by Storyblok, which serves as a headless CMS to feed the timeline with console data.
I used Swiper.js to build the visual carousel and enable smooth slide transitions.
Demo
Storyblok Space:
👉 https://app.storyblok.com/#/me/spaces/342145/stories/0/0/689686892
Code Repository:
👉 https://github.com/jamesrmoro/timeline
Live Demo:
👉 https://timeline.jamesrmoro.me/game
The domain is custom for personal use, with public mode enabled for viewing.
Demo Video:
🛠 Tech Stack
- HTML + CSS + Vanilla JavaScript
- Swiper.js for the responsive carousel
- Storyblok as CMS
- Deployed via Vercel
🧩 How I Used Storyblok
- Created a component called
consoleswith fields:title,year,description, andimage - Inside the
gamepage, I used aconsolesblock to store all items - Used the Storyblok CDN public API to load data on the frontend without a backend
- Content can be edited visually, and updates are reflected in real-time
🤖 AI Integration
This project does not use any AI integration.
📚 Learnings and Takeaways
- I learned how to integrate Storyblok with a pure frontend project, no frameworks involved
- Understood how to build a modular and scalable structure for visual content
- I’m happy with the result and see potential to apply this structure to timelines of books, movies, biographies, or historical events
Top comments (14)
Nice submission
Thanks @ben :)
pretty cool seeing all the consoles laid out like that - i always wonder if stuff like storyblok actually makes it easier long-term or if it’s just shiny at first. you think the motivation sticks once the timeline gets even bigger?
Storyblok definitely makes everything easier. Once the structure is ready, all you have to do is focus on the content. Even as the timeline grows, it remains easy to maintain.
Very nice!
Thanks @ansellmaximilian
nice
Thanks @chaitanya_chopde_dd0642ed
This timeline looks super slick, love how easy it is to add new consoles without touching code! Have you thought about making a similar one for video game history moments or game titles?
How cool you enjoyed! 😄
And yes, this idea of making a timeline with historical moments of games or iconic games would be too much! I'm even thinking of setting up such a version 👾🔥
Nice
Thanks @spoidy_12
My first (and only) console doesn't appear! The Binatone TV Master
How cool, I didn’t know this console! Thanks for the heads-up — I’ve updated the timeline. :)