Music Production

A webpage about music production! It lists some of the equipment I use and a bit of information regarding my workflow. I used flexbox for the first time here and separated all the sections into columns. I've also added in embedded SoundCloud players.

Comment Box

A very simple comment box with 2 inputs for Name and Email Address as well as a text area input for the comment field with placeholders in each field. The comment text area has a character limit of 140 that will turn red when exceeded, as well as a required attribute in all fields. On submit, comments are displayed below and persist when a new comment is added.

Project Gallery

A card interface gallery of all my projects. Included in each card is an image, a description and links to the relevant GitHub pages and repository. The amount of cards per row is reduced depending on screen width and each card expands to reveal the description text.

Movie Data

A simple interface that displays film posters in a slider with plot, cast, rating etc. displayed on the left. The films can be sorted alphabetically and navigated through using arrows either side. The user can add or edit their own review which persists when navigating and sorting.

Website

A single page portfolio with tab navigation and dynamic content. When navigating, panels are displayed on the left containing information for each project. This is my second attempt at a portfolio page, this time around I aimed to make the page more dynamic by repositioning elements and by utilising a variety of animations.

Reflex Game

A reaction time-based game with each rounding lasting 30 seconds. The goal is to click as many targets within the allotted time while the targets randomly resize and reposition, with a bonus accumulator for streaks. On the right is a panel that display the time remaining, the current score, current streak high score.