My personal website, showcasing my projects and skills. It consists of three parts:

• The website itself, found at jonaskuske.com and jonaskuske.de
• The colorpicker, a little self-contained web app that acts as a remote for the main website
• A server handling the connection betweeen the website and the colorpicker using WebSockets

The main website is built as an SPA and rendered client-side using the microframework hyperapp.

The site is available both from https://jonaskuske.com and https://jonaskuske.de, English will automatically be set as default language if accessed through the .com domain, while German will be set if accessed through .de.
You can toggle the language on the fly in the menu on the left (new localized assets will be imported when needed courtesy of dynamic imports and webpack's code splitting) or set the default you want by specifying a lang URL parameter.

The website uses dynamic background- and theme colors thanks to CSS variables (custom properties) and client-side rendering. You can change the color by hitting "Random Color" or - if your browser supports the color picker element <input type="color"> - you can choose your own color by clicking "Select color".
Colors can also be set using an URL parameter or remotely using your phone.

Apart from selecting the color you want by clicking the random button or using the native color picker, you can also use your phone as a remote. Navigate to https://jonaskuske.com/connect (or click the respective button to go there) and a QR code as well as an ID will be shown. Open the colorpicker on your phone and pair it using the QR code or ID. You'll then be able to remotely adjust the theme color in real time.

project: ... when visiting the route /detail, specify the project you want to look at
lang: de|en Specify the language you want to see the page in
color: #xxxxxx Specify the color (Hex) you want to see the page in initially - please not that this always has to be the last parameter because of the way hashes in URLs are treated

Example: https://jonaskuske.com/detail?project=typro&lang=de&color=#000000 will open the detail page for my project »typro« in German and with black set as theme color.

The colorpicker is accessible at jonaskuske.com/colorpicker and jonaskuske.de/colorpicker, depending on the language you want.
Once you open the colorpicker, you can scan the unique QR code generated by the main website right in your browser, or manually enter your session ID. After the connection is established, a colorpicker will appear, where you can tap or slide and the colors on the website will update in real time thanks to a connection through WebSockets.

The colorpicker is set up as a Progressive Web App, so you can open it while you're offline and install it on your phone. It also gracefully handles connection loss, then once e.g. your phone has service again, it'll prompt you to re-establish the previous connection – without having to scan the QR code another time.

💡 Hint: You can also scan the unique code with any QR code scanner of your choice. The link that will appear will open the colorpicker and connect you the the website immediately.

A very simple Node server handling the WebSocket connections between the main site and the paired remotes. Note that the server code in this repository only exists so development can happen independently from the production server. The actual server code on the production server looks different.

The website, colorpicker and server all live in their own subdirectories with their own npm scripts. But to save time, these scripts are available in the project root for convenience:

npm install – install all neccessary dependencies including those of the subdirectories
npm run serve – run all serve commands (see below) simultaneously
npm run build – build the website and the colorpicker into a single directory dist

npm run serve:website – serve the website in development mode on localhost:8080
npm run serve:colorpicker – serve the colorpicker in development mode localhost:8081
npm run serve:server – start the development server handling color sync on localhost:8082

The main website is tested in Chrome, Firefox, Edge, Opera, Safari and Internet Explorer 11 - if you encounter any issues, please let me know.
(known restrictions: color changes are only permitted once every 1.2s in IE, no colorpicker in Safari and IE because of lacking browser support, no "glass" visuals for the menu in Firefox)
The colorpicker uses many modern browser features (like WebRTC), so browser support is less broad there.

✨ PS: Colors are fun and there might be an easteregg... 🔮