About

Digital explorer

My name is Gwen, I'm a web developer based in Belgium and I like to call myself a digital explorer. Always scanning the bit-and-byte area to discover new digital wells, learning the local dialects along the way. Whether it's taking me up the byte-mountain or deep into some bit-cave, my mind is always set on adventure.

When I'm going on a new digital expedition, I mostly rely on my basic logics, my curiosity and a healthy dose of imagination. I definitely need my Survivor-Kit, including common programming languages and of course I wouldn't forget my Swiss Pocket Knife with a regularly updated array of functionalities. Feel free to have a look at them on the .

My roadmap

As of I have enrolled in a full-time course to become a front-end PHP developer. Learning basic programming logics, concepts like OOP, mobile-first, content-first, SEO and data analysis. My ambition is to go full-stack one day. Letting the internet have no secrets is a little too far-fetched, I am afraid, but that won't disencourage me to reach my destination. Please see my resume for more details.

Bucket List

  • React
  • Python
  • Three.js
  • Figma
  • GraphQL

Works

Collection of works

Image folder showing pictures with a 3D flipping effect.
Customized audioplayer with all common functionalities and playlist manager
Treasure Hunt game (OOP project)
Voting application where people can vote for ideas
Sandwichbar webshop index page main picture
Music library with playlist manager
Photo 3D expo revealing entrance hall displaying with wall of picture

image folder

Image folder with a three dimensional "flipping effect"

From a previous assignment I was looking for an image slider. Unfortunately, not all of them are easily customizable. So, I was wondering if I could build an one from scratch. The main idea was to make the images fold like if you would turn a page of a book. The biggest challenge here was responsiveness and to preserve the 3D aspect of flipping images. The theme of the images here expresses my passion for travelling and my love for Croatia in particular.

Screenshots

Image folder view on mobile
Image folder desktop flip effect
Image folder desktop fullscreen view
Image folder tablet info view
Image folder main picture
  • {HTML}
  • {JavaScript}
  • {CSS}

  • Features

  • Carousel
  • Random images
  • 3D flip effect
  • Swipe and click
  • Fullscreen background
  • Background animation
  • Information dropdown

  • Up next

  • Extend picture ratios
  • Extra animation
  • Suggestions are welcome

audio player

Custom audio player with playlist manager and song information

A huge part of my life revolves around music and managing playlists is one of the derived hobbies. However, in my experience, some audio players, offer a rather limited range of possibilities when it comes to a music lover's experience. I started off experimenting with the HTML Audio API, which is reasonable, but like I said, limited... Certainly the visuals could be a bit dusted off and there is no support for playlists. This is how I would make a player look like. A big inspiration to me was my car radio for the actual player design.

Screenshots

Audioplayer main picture
Audioplayer cover art
Audioplayer playing mode
Audioplayer songs added modal
Audioplayer playlist drag and drop
  • {HTML}
  • {JavaScript}
  • {CSS}
  • {PHP}

  • Features

  • Search and filter
  • Auto-update folder
  • Cover art extraction
  • ID3v2 tags
  • Remember favorites
  • Make playlists
  • Frequency visualizer
  • Missing cover art API

  • Up next

  • Extend audio formats
  • Mobile app
  • API implementations

treasure hunt

Treasure Hunt game. Collect all the treasures before the enemy catches you

This fun little board game was part of a school project. Take all the treasures before the enemy gets a hold of you. Each time the enemy hits the hunter, the player loses one life. The player can choose the board dimensions and level of difficulty. The enemy is getting smarter each difficulty level. The hunter is moved by using keyboard arrow keys, by swiping or by using the on-screen buttons.

Screenshots

Treasure hunt instructions
Schattenjacht main picture
Schattenjacht view tablet
Treasure hunt game over notification
Schattenjacht view mobile
  • {HTML}
  • {JavaScript}
  • {CSS}

  • Features

  • Responsive
  • Smart enemy
  • Variable dimensions
  • Difficulty levels
  • Animations

  • Up next

  • Progressive levels
  • Keep highscores
  • Character icons
  • Multiplayer
  • Improve for mobile

voting app

App to create ideas, vote and comment on them, as well as sorting and filtering results

This project is part of the laracasts series for learning the Laravel framework. The tutorial builds the app from scratch with the TALL stack. I chose to use Smarty template engine instead of the built-in Blade templates. Because Livewire is not compatible with Smarty, the same-page rendering is done with AJAX calls through JQuery. The application is similar to UserVoice and allows users to create ideas, vote and comment on them, sort and filter the results. Users get notifications when the status of their idea got updated and when someone has left a comment. The administrator can update the status and is also able to delete ideas and comments that were marked as spam.

Screenshots

Voting application create new idea modal mobile view
Voting application dropdown functionality desktop view
Voting application comments on idea desktop view
Voting application single idea page desktop view
Voting application edit idea modal view on mobile
  • {Tailwind}
  • {AlpineJs}
  • {Laravel}
  • {Smarty}

  • Features

  • CRUD operations
  • Leave comments
  • Mark as spam
  • Admin rights
  • Authentication
  • Notifications
  • Sort & filter
  • Confirmations
  • Responsive

  • Up next

  • More filters
  • Likes
  • Nested replies

sandwich bar

Webshop with login and sign up to order some sandwiches

This is a school assignment for learning to program in PHP. The setup is to make a webshop where people can order sandwiches. The visitors should first sign up or login before they can order anything. The page exchanges data with a custom built database, where information about users, orders and sandwiches are stored. The e-mail address is stored in memory of the visitor's pc. There's a distinction between regular users and a superuser, who has more access rights. While normal users are only able to order, the superuser can modify prices, see all orders, and add or delete sandwiches.

Screenshots

Sandwichbar webshop login form view on mobile
Sandwichbar webshop order page view on desktop
Sandwichbar webshop index page view on desktop
Sandwichbar webshop login form view on desktop
Sandwichbar webshop index page view on mobile
  • {PHP}
  • {HTML}
  • {JavaScript}
  • {CSS}

  • Features

  • Login
  • Register
  • Database storage
  • Orders
  • Image sliders
  • Add sandwiches
  • User roles

  • Up next

  • English version
  • Superuser functionalities

music library

Music library manager playlist manager

Coming soon...

Screenshots

Music library main view on mobile
Music library main view on mobile
Music library main view on mobile
Music library main view on mobile
Music library main view on mobile
  • {Laravel}
  • {Alpine}
  • {Livewire}
  • {HTML}
  • {CSS}

  • Features

  • Search
  • Sorting
  • Filtering
  • Manage playlists
  • Tag songs
  • CRUD

  • Up next

  • Add album
  • Superuser functionalities

other projects

Experiments, smaller projects and works in progress...

More projects and experiments, mostly from school exercises and assignments as well as assisting interfaces for starting up new projects.

Screenshots

Project euro 2021 duels statistics tool
Gastenboek PHP project
Project moving background with svg trace
Photo 3D expo revealing entrance hall displaying with wall of picture
Project map of croatia in svg with detailed view of provinces
  • Croatian territories
  • Football stats
  • Moving background
  • Covid Belgium
  • Photo Expo 3D

  • Next challenges

  • ...
  • ...
  • ...

This is just a pubke

Service

Custom and unique

I develop websites and application software with a customized design and functionalities. Special focus is given to user experience (UI/UX) and accessibility. Designs will be responsive (mobile first), SEO-compliant and maximized for maintenance. Feel free to if you have something in mind.

  • Webdevelopment
  • Webdesign
  • Application software
  • Database implementation

Programming ethics

  • Accessibility
  • SEO
  • Mobile first
  • UI/UX
  • Maintainability
  • Adaptability

Coding languages

    • SASS
    • Tailwind
    • Angular
    • Typescript
    • Node
    • Alpine
    • jQuery
    • Laravel
    • Livewire
    • Smarty

Swiss pocket knife

  • Laravel
  • REST API
  • Docker
  • Angular
  • TypeScript
  • Alpine
  • Livewire
  • Loopback
  • Greensock (GSAP)
  • SVG
  • GIT
  • jQuery
  • HTML Canvas

Favorite trends

Contact

Contact info

Leave a message





Special thanks to

Follow me on