Embedded Files
about this project
about this project
The Duck Advent Calendar is a playful web project built with Svelte and TypeScript as a way to explore the framework, its Runes, and modern front-end workflows. Developed together with one teammate, we shared responsibilities equally between programming and design.
The site is simple by design, but includes multiple interactive features such as language switching, dark/light mode, and image content dynamically pulled from APIs.
Quickfacts
Quickfacts
Role: Programming & design within a team of 2
Tech: Svelte, TypeScript, HTML, CSS, APIs
Development time: ~1 week
Pages: Frontpage, Calendar, Doors
Language: German and English
Development
Development
Light mode
Dark mode
Inside a door
Light/Dark mod toggle
Project Scope
Project Scope
Advent calendar concept with duck-themed content
Implementation of language switcher (German/English)
Dark/Light mode toggle
Background images loaded dynamically via two APIs
Equal focus on coding and design to learn Svelte workflows
Controls & Challenges
Controls & Challenges
Learning and applying Svelte’s Runes for reactivity
Working with TypeScript for type safety in a front-end context
Integrating multiple APIs while keeping the app simple and lightweight
Balancing scope to keep the project manageable as a learning exercise
Reflection & Learnings
Reflection & Learnings
This project gave me my first practical experience with Svelte and TypeScript. I learned how reactive programming with Runes works, how to set up multi-language support, and how to integrate APIs into a lightweight front-end project. The experience also showed me how important it is to balance experimentation with clear design decisions when working with new frameworks.
Due to the usage of copyrighted material you may need to contact me before gaining access to everything.
Page updated
Google Sites
Report abuse