About

Digitale verkenner

Mijn naam is Gwen, ik ben een webontwikkelaar uit België en ik zou mezelf een digitale verkenner noemen. Steevast zoek ik het bit-and-byte universum af naar nieuwe digitale bronnen, en ondertussen probeer ik zoveel mogelijk de lokale dialecten te absorberen. Het maakt niet uit of de reis me leidt naar een byte-berg of naar een bit-grot, mijn geest is altijd ingesteld op avontuur.

Wanneer ik begin aan een nieuwe digitale expeditie, baseer ik me op mijn basislogica, m'n nieuwsgierigheid en een gezonde dosis verbeelding. Ik breng altijd mijn Survivor-Kit mee, met programmeertalen en natuurlijk mag ik mijn Swiss Pocket Knife niet vergeten. Deze bevat een reeks frequent geüpdate functionaliteiten. Neem gerust een kijkje op de voor meer details.

Mijn routeplan

Sinds ben ik een full-time opleiding gestart voor frontend webontwikkelaar met als specialisatie PHP. In deze opleiding wordt ingegaan op concepten als programmatielogica, OOP, mobile-first, SEO en databanken. Mijn ambitie is om ooit full-stack developer te worden. Het wordt uiteraard moeilijk om alle geheimen van het internet te ontrafelen, maar dat zal me niet weerhouden om m'n doelen te bereiken. Raadpleeg eventueel mijn cv voor meer informatie.

Bucket List

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

Projecten

Projecten collectie

Image folder die afbeeldingen toont door middel van 3D effect.
Aangepaste audioplayer met tal van functionaliteiten en playlist manager
Schattenjacht bordspel (OOP project)
Voting applicatie waar men kan stemmen op ideeën
Sandwichbar webshop indexpagina main picture
Music library met playlist manager
Photo 3D expo revealing entrance hall displaying with wall of picture

image folder

Image folder met een driedimensionaal "flip-effect"

Voor een eerdere opdracht was ik op zoek naar een image-slider. Jammergenoeg zijn degene die ik vond niet gemakkelijk aan te passen. Daarom besloot ik om er een van nul op te bouwen. Het idee was om de beelden te laten vouwen alsof je bladert in een boek. De grootste uitdaging hierbij was om de slider responsief te maken en om het 3D-aspect te behouden. Het thema van de afbeeldingen weerspiegelt mijn passie voor reizen en mijn voorliefde voor Kroatië in het bijzonder.

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

  • Uitbreiden picture ratios
  • Extra animatie
  • Suggesties zijn welkom

audio player

Aangepaste audio player met playlist manager en song-details

Muziek heeft een belangrijke plaats in m'n leven en het beheren van playlists is daar een soort afgeleide hobby van. Sommige audio players bieden weliswaar slechts beperkte mogelijkheden om te voldoen aan de noden van een ware muziekliefhebber. Ik heb wat geëxperimenteerd met de HTML Audio API, maar deze is zoals gezegd, wat beperkt. Zeker kunnen de visualisaties een stuk beter en playlists worden nauwelijks ondersteund. Dit resulteerde in dit project met mijn idee over hoe een audio player er mag uitzien. Voor het ontwerp heb ik mij deels laten inspireren door mijn autoradio.

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

  • Meerdere audio formats
  • Mobile app
  • API implementaties

schattenjacht

Schattenjacht bordspel. Verzamel alle schatten vooraleer de vijand je te pakken krijgt

Dit leuke bordspel was een opdracht tijdens de opleiding. Verzamel alle schatten en blijf weg van de vijand. Iedere keer de vijand tegen de jager botst, verliest de speler een leven. De speler kan de moeilijkheidsgraad bepalen alsook de grootte van het bord. De vijand wordt slimmer naarmate de moeilijkheidsgraad stijgt. De jager wordt voortbewogen door middel van de pijltjestoetsen, door te swipen of door te klikken op de knoppen op het scherm.

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

  • Progressieve levels
  • Highscores bijhouden
  • Icons voor karakters
  • Multiplayer
  • Optimaliseren voor mobile

voting app

App om ideëen te creëren, te stemmen en reacties te plaatsen met filter- en sorteerfunctie

Dit project maakt deel uit van de laracasts series om het Laravel framework te leren kennen. In de tutorial wordt de applicatie van nul opgebouwd met behulp van de TALL stack. Ik heb gekozen om gebruik te maken van Smarty template engine in plaats van de ingebouwde Blade templates. Omdat Livewire niet compatibel is met Smarty, wordt de same-page rendering gedaan door AJAX calls via JQuery. Deze voting app is vergelijkbaar met UserVoice en laat gebruikers toe om ideëen te creëren, ervoor te stemmen en om reacties te plaatsen. De resultaten kunnen worden gefilterd en gesorteerd. De gebruiker krijgt notificaties wanneer de status van hun idee werd aangepast of wanneer iemand een reactie geplaatst heeft. De administrator kan de status veranderen en kan ook ideën en reacties verwijderen indien ze bijvoorbeeld als spam werden gemarkeerd.

Screenshots

Voting applicatie creëer nieuw idee mobile view
Voting applicatie dropdown functionaliteit desktop view
Voting applicatie reacties op idee desktop view
Voting applicatie idee pagina desktop view
Voting applicatie idee aanpassen view on mobile
  • {Tailwind}
  • {AlpineJs}
  • {Laravel}
  • {Smarty}

  • Features

  • CRUD operaties
  • Reacties plaatsen
  • Spam melden
  • Administrator
  • Authenticatie
  • Notificaties
  • Sorteren & filteren
  • Bevestigingen
  • Responsive

  • Up next

  • Filters uitbreiden
  • Likes
  • Nested comments

broodjes bar

Webshop met klantlogin en registratie om broodjes te bestellen

Dit is een schoolopdracht om te leren programmeren in PHP. Het opzet is om een webshop te maken waar klanten broodjes kunnen bestellen. Om dit te kunnen doen, moeten de bezoekers eerst registreren en ingeloggen. De pagina wisselt gegevens uit met een databank, waar informatie over users, bestellingen en broodjes worden opgeslagen. Het e-mailadres van de bezoeker wordt ook bijgehouden op z'n pc. Tevens is er een onderscheid gemaakt tussen reguliere users en een superuser, die meerdere rechten heeft. Terwijl normale users enkel broodjes kunnen bestellen, kan de superuser prijzen aanpassen, de bestellingslijst zien en broodjes aanmaken of verwijderen.

Screenshots

Broodjes bar webshop inlogformulier mobile view
Broodjes bar webshop bestelpagina desktop view
Broodjes bar webshop indexpagina desktop view
Broodjes bar webshop inlogformulier desktop view
Sandwichbar webshop indexpagina view on mobile
  • {PHP}
  • {HTML}
  • {JavaScript}
  • {CSS}

  • Features

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

  • Up next

  • English version
  • Responsive design
  • Superuser functionalities

music library

Music library met playlist manager

Binnenkort...

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

andere projecten

Experimenten, kleinere projecten en works in progress...

Andere projecten en experimenten, meestal schoolopdrachten en oefeningen maar ook gebruiksinterfaces die dienen als hulpmiddel bij de opstart van nieuwe projecten.

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

  • Volgende uitdagingen

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

meldingen

Service

Op maat en uniek

Ik ontwikkel websites en applicaties met op maat gemaakte designs en functionaliteiten. Speciale aandacht gaat uit naar gebruikservaring (UI/UX) en toegankelijkheid. Designs zijn responsief (mobile-first), SEO-geöptimaliseerd en gemakkelijk te onderhouden. Neem vrijblijvend op indien je een idee hebt.

  • Webdevelopment
  • Webdesign
  • Application software
  • Database implementation

Principes

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

Programmeertalen

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

Swiss pocket knife

  • Laravel
  • REST API
  • Greensock (GSAP)
  • SVG
  • GIT
  • JQuery
  • Tailwind
  • AlpineJs
  • HTML Canvas

Favoriete trends

Contact

Contact info

Stuur een bericht





Special thanks to

Volg mij op