
A music player using two decks. The project was made using React, Bootstrap, SCSS, and React DnD. Songs can be loaded to the decks via context menu (on click) or drag and drop. The current state of the songs is kept on refresh / reload via local storage.

[Github repo](https://github.com/Toww/two-decks-player) / [Online version](https://two-decks-player.vercel.app/)

[![Two decks player screenshot](/img/two-decks-player/two-decks-player.png)](https://github.com/Toww/two-decks-player)

Two Decks Player


A step sequencer exercise made with vanilla JS.

[Github repo](https://github.com/Toww/step-sequencer) / [Online version](https://toww.github.io/step-sequencer/)

[![Step sequencer screenshot](/img/step-sequencer/step-sequencer.png)](https://toww.github.io/step-sequencer/)






Step Sequencer


A color picker for Tailwind CSS, developed with React and Tailwind CSS.

[Github repo](https://github.com/Toww/tailwind-color-picker) / [Online version](https://tailwind-color-picker.vercel.app/)

[![Tailwind Color Picker screenshot](/img/tailwind-color-picker/tailwind-color-picker.png)](https://tailwind-color-picker.vercel.app/)






Tailwind Color Picker


The website you are visiting! The project was developed with Next.Js, MDX, Tailwind CSS and Vercel.

[Github repo](https://github.com/Toww/droplab)

[![Drop screenshot](/img/drop/drop.png)](https://github.com/Toww/droplab)

Drop


Webdesign for Piñata when it was a magazine and a radio. Another version is now online since it is only focused on the radio and is not a magazine anymore.

![Pinata Radio](/img/pinata/pinata-01.jpg)

Piñata Radio


VJing / Mapping for the Bassodrome Festival 3.0 realised in collaboration with SuperSuper.

<VimeoEmbed videoUrl="https://player.vimeo.com/video/107347491" />



Bassodrome Festival 3.0


Final diploma thesis (in french) about simplicity and sobriety in design. It focuses on the challenges it represents to bring the light on information and emotion throught simplicity.

[Download as PDF](/files/memoire.pdf)

![Diploma Thesis - 01](/img/memoire/memoire-01.jpg)

<div className="two-imgs">
  <img src="/img/memoire/memoire-02.jpg" alt="Diploma Thesis - 02" />
  <img src="/img/memoire/memoire-03.jpg" alt="Diploma Thesis - 03" />
</div>

![Diploma Thesis - 04](/img/memoire/memoire-04.jpg)

<div className="two-imgs">
  <img src="/img/memoire/memoire-05.jpg" alt="Diploma Thesis - 05" />
  <img src="/img/memoire/memoire-06.jpg" alt="Diploma Thesis - 06" />
</div>

![Diploma Thesis - 07](/img/memoire/memoire-07.jpg)

<div className="two-imgs">
  <img src="/img/memoire/memoire-08.jpg" alt="Diploma Thesis - 08" />
  <img src="/img/memoire/memoire-09.jpg" alt="Diploma Thesis - 09" />
</div>

![Diploma Thesis - 10](/img/memoire/memoire-10.jpg)
