https://github.com/jonaskuske/homepage
✨ My personal website. Might be a little overengineered, but I'm having fun with it.
https://github.com/jonaskuske/homepage
Last synced: 11 months ago
JSON representation
✨ My personal website. Might be a little overengineered, but I'm having fun with it.
- Host: GitHub
- URL: https://github.com/jonaskuske/homepage
- Owner: jonaskuske
- Created: 2018-10-26T04:43:33.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-06-05T15:00:45.000Z (about 1 year ago)
- Last Synced: 2025-06-10T09:05:21.223Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://jonaskuske.com
- Size: 44.6 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Personal Homepage
My personal website, showcasing my projects and skills. It consists of three parts:
- The website itself, found at [jonaskuske.com](https://jonaskuske.com) and [jonaskuske.de](https://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 Website
The main website is built as an SPA and rendered client-side using the microframework [hyperapp](https://hyperapp.js.org/).
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**.
#### Select your color
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 `` - you can choose your own color by clicking **"Select color"**.
Colors can also be set using an **URL parameter** or remotely using your phone.
#### Pair 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](#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.
#### Query string parameters
`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
The colorpicker is accessible at [jonaskuske.com/colorpicker](https://jonaskuske.com/colorpicker) and [jonaskuske.de/colorpicker](https://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.
## The Server
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.
## Build instructions
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`
#### Thanks for checking out my site!
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... 🔮