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 consoles with fields: title, year, description, and image
• Inside the game page, I used a consoles block 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

---