bloons project WAFS project pokemon project roger project NS project hackaton project Framer framed project

Loonsworld

WAFS

Pokemon Guesser

Roger

NS

Woman of the Web

Framer Framed

A project made with CSS only. NO Javascript. NO Images.

Starting with my journey

At the beginning of my journey to Loonsworld, I had wild ideas, but I wasn’t sure if I would ever get there. The first two weeks were quite calm and chill, and I didn’t yet realize how short the time actually was. I took my time with the balloon and did a lot of experimenting until it finally worked.

From that point on, things got easier, but I only had one week left. With good naps and some all-nighters, I eventually reached the final result I had been aiming for. Still, it feels like I could’ve gotten even more out of it — and that’s probably true.

Nevertheless, I’m really proud of myself.

What did I use in my code?

  • display: flex / grid

  • position: relative / absolute – left / top / right / bottom

  • ::before / ::after – content:''

  • :has, :checked, :not, :hover

  • Custom Properties

  • CSS nesting

  • calc()

  • box-shadow / inset

  • Gradients – linear / radial

  • transform: translate / scale / rotate

  • @keyframes

  • --index

  • mask

  • @container

What have i achieved?

  • A better understanding of code

  • Confidence that I can code

  • Knowledge of a part of CSS

  • Coding is actually fun

Source list

Visit website Visit Github

Preview

  • Start

  • Up and down

    loonsworld op en neer buttons

  • Day and night cycle

  • Mountain

A beginning portfolio starting this minor.

My journey

In totaal heb ik drie portfolios proberen te maken. Dat is dus deze website, eentje met een raketje en natuurlijk de eerste met de scroll driven animation.

De reden waarom ik zovaak ben gewisseld van project was natuurlijk zodat ik meer dingen kon experimenteren en ervaren. Dit heeft mij geholpen bij het ervaren van verschillende soorten manieren van code schrijven.

Visit WAFS 1 Visit WAFS 2 Visit WAFS 3

Preview

  • WAFS 1

    WAFS 1

  • WAFS 2

    WAFS 2

  • WAFS 3

    WAFS 3

A pokemon guessing game made with liquid.js

My journey

During this project, I built an interactive Pokémon web app over the course of four weeks. What started as a simple Pokédex evolved into a full game experience including a "Guess the Pokémon" feature, a team builder, Pokédex, and a collection system based on user interaction.

Features

  • Interactive Pokédex with detailed Pokémon info.
  • Animated Pokémon sprites from the PokéAPI.
  • Filtering by Pokémon name and type.
  • Hover effect on Pokéball (opening animation).
  • Reset button to clear your team.
  • "Guess the Pokémon" game using brightness filter and localStorage tracking.
  • Pokémon List that tracks caught Pokémon visually.
  • Detailed Pokédex showing only captured Pokémon.
  • Intro sequence mimicking Pokémon Fire Red (with skip option).
  • User system with generation and gender selection.
  • Progress tracking: correct answers, mistakes, streaks, best streak.
  • Paginated Pokédex and Pokémon List for easier navigation.
  • Filtering for only caught Pokémon.
  • Developer tools including "Guess All" cheat button for testing.
  • Personalized winner screen with a summary card.

What have i achieved?

  • Working with APIs
  • Using localStorage
  • Data fetching
  • Working with json format
  • A better understanding in working together with ChatGPT
Visit website Visit Github

Preview

  • PokeGuesser

  • Pokedex

    loonsworld op en neer buttons

  • Pokemonlist

  • Streak count

  • Username

  • Winners screen

A custom made screenreader unique to Roger's preferences

My journey with Roger

Throughout this project, I developed a screen reader application tailored specifically to Roger, a visually impaired user with a hereditary eye condition. Close collaboration with Roger highlighted the importance of accessibility and energy management in designing digital reading aids. Key features such as annotation retrieval, customizable fonts and colors, and speech functionalities proved essential for an optimal reading experience.

Who is Roger actually?

Roger is a 58-year-old man who began losing his sight at the age of 43 due to a hereditary eye condition that causes progressive central vision loss. Despite his visual impairment, Roger is very active and creative—he is involved in philosophy studies, serves as a board member at a local organization, and enjoys sculpting.

He has adapted to his limited vision by using screen readers, braille, and audio materials, but struggles with efficiently finding and managing annotations in digital texts. Roger values tools that help him read more easily without excessive energy expenditure and prefers customizable options such as dark mode, adjustable fonts, and speech features to support his reading experience.

Features

  • Adjustable font type
  • Adjustable font size
  • Adjustable line height
  • Adjustable font thickness
  • Light/dark mode (preference for dark mode with yellow-on-black contrast)
  • Focus highlights for easy tracking
  • Add annotations linked to specific words or sentences
  • Edit existing annotations
  • Delete annotations
  • Keyboard navigation through annotations
  • Speech-to-text input for annotations
  • Screenreader reads annotations aloud
  • Select words for annotation using arrow keys
  • Reads text out loud
  • Reads commands out loud
  • Reads annotations out loud
  • Highlights words as they are read
  • Customizable keyboard shortcuts
  • Settings menu for personalizing the experience
  • Fully operable via keyboard only
  • WCAG compliant contrast settings
  • Adjustable mouse pointer size
  • Overview of headings for quick navigation
  • Import books via Word files (planned)
  • Search function for annotations (planned)
  • Search function for heading structure (planned)
  • Voice commands for navigation and search (planned)

What have i achieved?

  • Developed an accessible screen reader.
  • Implemented customizable reading settings.
  • Created an efficient annotation system.
  • Enhanced navigation through intuitive hotkeys.
  • Iteratively improved the application based on Roger’s direct feedback.

Controls

For optimal use, please familiarize yourself with the available hotkeys.

Visit website Visit Github

Preview

  • Annotation

  • Controls

  • Screenreader

  • Wordselection

  • Wordselection deleted

NS belastingsforumilier

My journey

Over the course of this project, I built a form interface that follows the NS style and focused on making it both accessible and user-friendly. I started with light/dark mode and basic HTML structure, then moved on to styling using things like :has selectors. Halfway through, I changed my approach to better match the NS design by rebuilding components like buttons and inputs one by one. In the final phase, I added some JavaScript so users can save, load, and delete their input. I worked step by step, improving things as I went based on feedback and what I learned along the way.

Features of this project

  • Light and dark mode toggle for better accessibility
  • NS-styled components (buttons, inputs, etc.) based on official brand guidelines
  • Clean HTML form structure using <fieldset> for semantic grouping
  • Styled interactive elements using modern CSS selectors like :has()
  • Input field feedback (hover, target, popover) for better user experience
  • JavaScript buttons to save, load, and delete form data
  • Modular and reusable styling approach for consistency and scalability
  • Progressive enhancement: started with HTML/CSS, then added JavaScript

What have i achieved?

  • I worked a lot with :has selectors
  • How to make a form
  • Worked with different types of inputs
  • Using the .gitignore
  • NS styling knowledge
Visit website Visit Github

Preview

  • NS index

  • Vraag 1

  • Vraag 2

  • Vraag 3

A project that celebrates women in tech

My journey

This project was a 4-day sprint in which we, as a team, had to build a website to honor women in tech. Our first idea was to create a temple where women would be admired through rituals, but that turned out to be too ambitious given the limited time. So instead, we built a stage where the women are showcased along with information about them.

My role in the team was Front-End Developer. I mainly focused on the layout and creating interactive animations.

Features

  • Smooth curtain animation using sibling index.
  • Interactive curtain open/close on hover.
  • Stage and background screen for displaying info.
  • Spotlights reposition with anchor positioning.
  • Clean UI transitions for better focus on content.

What have i achieved?

  • Used sibling index for smooth, wavy curtain animations
  • Created interactive curtains that open and close on hover
  • Built a background screen to display women’s information
  • Implemented spotlights that hide on hover and return with anchor positioning

Conclusion

This project helped me experiment with creative UI interactions using advanced CSS. The combination of animation timing and layout control resulted in a smooth and engaging experience, all built within a tight sprint.

Visit website Visit Github

Preview

  • Gordijnen wavy

  • Gordijnen open

  • WotW

  • Scherm

  • Anchors spotlights

An dynamic website made with liquid.js and vite

Intro

This project was a team assignment where we had to create a solution for a client in 6 weeks. My role in the team was front-end developer and my main page is the archive page. I helped with the design and translating those designs into code. I also created many tests to gather feedback, which helped our team improve step by step.

In collaboration with Cas Bool, the creator of Framer Framed, we worked on a better visualizing of the database of Framer Framed and made sure to consider users with cognitive impairments.

My journey

During the testing phase, I explored and refined various features to find the best fit for the website. I experimented with archive folders but found they didn’t suit the project’s artistic style.

I attempted a 3D z-axis scroll effect, which was a valuable learning experience despite not working out.

I developed customizable settings including light/dark mode and font sliders, and focused on making the navigation responsive with integrated settings.

For the archive section, I iterated through two versions based on feedback, improving usability and design elements like category switching and footer effects.

Finally, I collaborated with teammates to merge features such as category selection and pagination, and enhanced the user experience with color-coded hovers, legends, and dynamic settings across pages.

Features

  • Light & Dark mode support in both list and grid views.
  • Responsive layout for optimal use on all screen sizes.
  • Category switcher via a <select> dropdown for easier navigation.
  • Pagination system built with Liquid and JavaScript, including item count control per page.
  • Category-based hover styling using background opacity and colored borders.
  • Legend explaining category color codes for clarity.
  • Global settings component dynamically applied across all pages.

What have i achieved?

  • Experience collaborating with a real client
  • Working with HTML tables and their functionality
  • Using Liquid.js for templating
  • Data fetching and filtering implementation
  • Team collaboration and communication
  • Building pagination and adding dynamic features
Visit website Visit Github

Preview

  • Hovers

  • Pagination list

  • Pagination grid

  • Per page

  • Settings

  • Footer