University Search Web Application

Working in a small team, I was primarily responsible for frontend architecture and API integration. The application consumes and processes external API data to enable dynamic filtering and exploration of study programs.

The user interface was first prototyped in Figma and then implemented using Vue.js with a modular, component-based architecture. Parent–child communication and application state were structured to maintain a scalable and maintainable frontend architecture.

Filtering and search functionality are handled through client-side data processing based on the retrieved API data, enabling fast interaction without repeated server requests.

The application also integrates user authentication and server-side storage to persist user-specific preferences such as saved universities.

A responsive, mobile-first design approach was used to ensure usability across desktop, tablet, and mobile devices.

Full-Stack Web Application with Hybrid Rendering

This project explored full-stack web application architecture using Astro as the core framework, combining server-side rendering with client-side interactivity through Solid.js.

The user interface was built with TailwindCSS following a mobile-first and fully responsive design approach inspired by the Spotify interface. The primary focus was not on visual uniqueness but on developing a reusable, component-based design system.

Designed a relational database schema in SQLite, defining structured entity relationships with primary and foreign keys. Contributed to the data modeling and frontend integration, while database setup was handled by a team member.

Architected dynamic page templates that retrieve and render backend-stored content via UUID-based routing. This enabled scalable content management while maintaining efficient rendering performance.

Procedural Animation and Behaviour Simulation

This project focuses on combining mathematical modelling, procedural generation, and behavioural algorithms to create a small interactive ecosystem of salamanders. Each salamander is created using a chain of connected body segments defined through distance constraints and linear algebra.

The system is implemented using an object-oriented architecture with JavaScript classes to manage entity behaviour, animation logic, and environmental interaction.

The body shape emerges from varying segment radii, allowing the creatures to be procedurally generated rather than manually designed.

Movement is simulated through simple flocking behaviours, enabling the salamanders to navigate their environment while searching for berries and avoiding obstacles such as leaves and other creatures. This creates an emergent sense of life similar to fish moving within a pond.

Leg movement is generated using an inverse kinematics approach based on the FABRIK algorithm, allowing the limbs to dynamically adjust to the body motion.

Interactive Web Experience with Dynamic Animations

Dreaming Plants is an interactive web experience designed as a relaxing second-screen environment for studying or unwinding. The application presents a hand-drawn apartment scene where animated elements create a calm, living atmosphere and allow for small user interactions.

The environment combines passive ambient animations with interactive elements. Objects within the room react to user input, such as a computer that launches a built-in Pomodoro timer for focused study sessions. Randomized animation delays and event-driven interactions help simulate a natural, dynamic environment.

This project explores how web technologies can be used to create interactive, game-like browser experiences that blend animation, environmental simulation, and user interaction

A key feature of the project is a dynamic lighting system based on the user's real-world time of day. Using the SunCalc library together with browser geolocation, the application calculates solar positions and adjusts the scene lighting accordingly. Five different lighting states simulate the transition from midnight to midday, including sunrise and sunset phases, creating an immersive ambient effect.

All animations were created in Adobe Animate and exported as HTML5 canvas objects. JavaScript and CreateJS were used to control animation timing, trigger mouse events, and manage dynamic scene behaviour.

Mobile Application for Artists to Manage and Archive Artworks

This project explored Flutter’s widget-based architecture through the development of a mobile application that allows artists to securely document and manage their artworks. The user interface was designed using Google's Material Design component system and implemented with Flutter’s widget structure.

The application focuses on a clean, component-driven UI architecture and responsive interaction patterns typical for modern mobile applications.

The application implements full CRUD functionality for artwork records using Firebase, enabling a simple but functional archive system.

The main technical challenge of the project was understanding Flutter’s widget hierarchy and establishing efficient communication between parent and child widgets while maintaining a modular UI structure.

Developed in a two-person team. I was primarily responsible for UI architecture, widget implementation, and backend integration, while also contributing to the data structure design. The Firebase backend setup was implemented by my teammate.

NGO Website Design and Development

This project involved the redesign and development of the website for the youth center anyway e.V. following a new branding initiative. The goal was to translate the updated visual identity into a modern and accessible website while restructuring a large amount of existing content.

Working in collaboration with the organization, the project began with an analysis of the existing website structure. The information architecture was reorganized to improve accessibility and clarity, resulting in a nested navigation system that better supports the site's diverse content.

A key design challenge was balancing the needs of multiple user groups. The website needed to address both young visitors participating in activities and external stakeholders such as sponsors and supporters. The design therefore focuses on clear navigation, strong visual hierarchy, and accessible content presentation.

Particular emphasis was placed on promoting the youth center’s activity groups and their events. Events are displayed using a timeline-based layout with color coding to differentiate activity groups, combined with strong visual elements and clear scheduling information.

Additional interface elements such as countdowns were introduced to highlight upcoming events and help users plan participation.

Clear calls-to-action were integrated throughout the site to encourage engagement, including donations, program participation, and community involvement.

The website was implemented using WordPress with the Bricks builder to allow the organization to manage and update content independently within a familiar CMS environment.