pierożki 2

* wip

* wip2

* trying to trigger netflify preview

* prepared files for htmz

* ready for styling

* fix nav?

* htmz nav2

* fix nav

* custom built css

* bring back logo

02/khinkills.audio.worklet.js

@@ -0,0 +1,213 @@
+/**************************************************************************/
+/*  audio.worklet.js                                                      */
+/**************************************************************************/
+/*                         This file is part of:                          */
+/*                             GODOT ENGINE                               */
+/*                        https://godotengine.org                         */
+/**************************************************************************/
+/* Copyright (c) 2014-present Godot Engine contributors (see AUTHORS.md). */
+/* Copyright (c) 2007-2014 Juan Linietsky, Ariel Manzur.                  */
+/*                                                                        */
+/* Permission is hereby granted, free of charge, to any person obtaining  */
+/* a copy of this software and associated documentation files (the        */
+/* "Software"), to deal in the Software without restriction, including    */
+/* without limitation the rights to use, copy, modify, merge, publish,    */
+/* distribute, sublicense, and/or sell copies of the Software, and to     */
+/* permit persons to whom the Software is furnished to do so, subject to  */
+/* the following conditions:                                              */
+/*                                                                        */
+/* The above copyright notice and this permission notice shall be         */
+/* included in all copies or substantial portions of the Software.        */
+/*                                                                        */
+/* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,        */
+/* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF     */
+/* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. */
+/* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY   */
+/* CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,   */
+/* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE      */
+/* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.                 */
+/**************************************************************************/
+
+class RingBuffer {
+	constructor(p_buffer, p_state, p_threads) {
+		this.buffer = p_buffer;
+		this.avail = p_state;
+		this.threads = p_threads;
+		this.rpos = 0;
+		this.wpos = 0;
+	}
+
+	data_left() {
+		return this.threads ? Atomics.load(this.avail, 0) : this.avail;
+	}
+
+	space_left() {
+		return this.buffer.length - this.data_left();
+	}
+
+	read(output) {
+		const size = this.buffer.length;
+		let from = 0;
+		let to_write = output.length;
+		if (this.rpos + to_write > size) {
+			const high = size - this.rpos;
+			output.set(this.buffer.subarray(this.rpos, size));
+			from = high;
+			to_write -= high;
+			this.rpos = 0;
+		}
+		if (to_write) {
+			output.set(this.buffer.subarray(this.rpos, this.rpos + to_write), from);
+		}
+		this.rpos += to_write;
+		if (this.threads) {
+			Atomics.add(this.avail, 0, -output.length);
+			Atomics.notify(this.avail, 0);
+		} else {
+			this.avail -= output.length;
+		}
+	}
+
+	write(p_buffer) {
+		const to_write = p_buffer.length;
+		const mw = this.buffer.length - this.wpos;
+		if (mw >= to_write) {
+			this.buffer.set(p_buffer, this.wpos);
+			this.wpos += to_write;
+			if (mw === to_write) {
+				this.wpos = 0;
+			}
+		} else {
+			const high = p_buffer.subarray(0, mw);
+			const low = p_buffer.subarray(mw);
+			this.buffer.set(high, this.wpos);
+			this.buffer.set(low);
+			this.wpos = low.length;
+		}
+		if (this.threads) {
+			Atomics.add(this.avail, 0, to_write);
+			Atomics.notify(this.avail, 0);
+		} else {
+			this.avail += to_write;
+		}
+	}
+}
+
+class GodotProcessor extends AudioWorkletProcessor {
+	constructor() {
+		super();
+		this.threads = false;
+		this.running = true;
+		this.lock = null;
+		this.notifier = null;
+		this.output = null;
+		this.output_buffer = new Float32Array();
+		this.input = null;
+		this.input_buffer = new Float32Array();
+		this.port.onmessage = (event) => {
+			const cmd = event.data['cmd'];
+			const data = event.data['data'];
+			this.parse_message(cmd, data);
+		};
+	}
+
+	process_notify() {
+		if (this.notifier) {
+			Atomics.add(this.notifier, 0, 1);
+			Atomics.notify(this.notifier, 0);
+		}
+	}
+
+	parse_message(p_cmd, p_data) {
+		if (p_cmd === 'start' && p_data) {
+			const state = p_data[0];
+			let idx = 0;
+			this.threads = true;
+			this.lock = state.subarray(idx, ++idx);
+			this.notifier = state.subarray(idx, ++idx);
+			const avail_in = state.subarray(idx, ++idx);
+			const avail_out = state.subarray(idx, ++idx);
+			this.input = new RingBuffer(p_data[1], avail_in, true);
+			this.output = new RingBuffer(p_data[2], avail_out, true);
+		} else if (p_cmd === 'stop') {
+			this.running = false;
+			this.output = null;
+			this.input = null;
+			this.lock = null;
+			this.notifier = null;
+		} else if (p_cmd === 'start_nothreads') {
+			this.output = new RingBuffer(p_data[0], p_data[0].length, false);
+		} else if (p_cmd === 'chunk') {
+			this.output.write(p_data);
+		}
+	}
+
+	static array_has_data(arr) {
+		return arr.length && arr[0].length && arr[0][0].length;
+	}
+
+	process(inputs, outputs, parameters) {
+		if (!this.running) {
+			return false; // Stop processing.
+		}
+		if (this.output === null) {
+			return true; // Not ready yet, keep processing.
+		}
+		const process_input = GodotProcessor.array_has_data(inputs);
+		if (process_input) {
+			const input = inputs[0];
+			const chunk = input[0].length * input.length;
+			if (this.input_buffer.length !== chunk) {
+				this.input_buffer = new Float32Array(chunk);
+			}
+			if (!this.threads) {
+				GodotProcessor.write_input(this.input_buffer, input);
+				this.port.postMessage({ 'cmd': 'input', 'data': this.input_buffer });
+			} else if (this.input.space_left() >= chunk) {
+				GodotProcessor.write_input(this.input_buffer, input);
+				this.input.write(this.input_buffer);
+			} else {
+				this.port.postMessage('Input buffer is full! Skipping input frame.');
+			}
+		}
+		const process_output = GodotProcessor.array_has_data(outputs);
+		if (process_output) {
+			const output = outputs[0];
+			const chunk = output[0].length * output.length;
+			if (this.output_buffer.length !== chunk) {
+				this.output_buffer = new Float32Array(chunk);
+			}
+			if (this.output.data_left() >= chunk) {
+				this.output.read(this.output_buffer);
+				GodotProcessor.write_output(output, this.output_buffer);
+				if (!this.threads) {
+					this.port.postMessage({ 'cmd': 'read', 'data': chunk });
+				}
+			} else {
+				this.port.postMessage('Output buffer has not enough frames! Skipping output frame.');
+			}
+		}
+		this.process_notify();
+		return true;
+	}
+
+	static write_output(dest, source) {
+		const channels = dest.length;
+		for (let ch = 0; ch < channels; ch++) {
+			for (let sample = 0; sample < dest[ch].length; sample++) {
+				dest[ch][sample] = source[sample * channels + ch];
+			}
+		}
+	}
+
+	static write_input(dest, source) {
+		const channels = source.length;
+		for (let ch = 0; ch < channels; ch++) {
+			for (let sample = 0; sample < source[ch].length; sample++) {
+				dest[sample * channels + ch] = source[ch][sample];
+			}
+		}
+	}
+}
+
+registerProcessor('godot-processor', GodotProcessor);

02/khinkills.html

@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no">
+		<title>KhinKills</title>
+		<style>
+body {
+	touch-action: none;
+	margin: 0;
+	border: 0 none;
+	padding: 0;
+	text-align: center;
+	background-color: black;
+}
+
+#canvas {
+	display: block;
+	margin: 0;
+	color: white;
+}
+
+#canvas:focus {
+	outline: none;
+}
+
+.godot {
+	font-family: 'Noto Sans', 'Droid Sans', Arial, sans-serif;
+	color: #e0e0e0;
+	background-color: #3b3943;
+	background-image: linear-gradient(to bottom, #403e48, #35333c);
+	border: 1px solid #45434e;
+	box-shadow: 0 0 1px 1px #2f2d35;
+}
+
+/* Status display */
+
+#status {
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	/* don't consume click events - make children visible explicitly */
+	visibility: hidden;
+}
+
+#status-progress {
+	width: 366px;
+	height: 7px;
+	background-color: #38363A;
+	border: 1px solid #444246;
+	padding: 1px;
+	box-shadow: 0 0 2px 1px #1B1C22;
+	border-radius: 2px;
+	visibility: visible;
+}
+
+@media only screen and (orientation:portrait) {
+	#status-progress {
+		width: 61.8%;
+	}
+}
+
+#status-progress-inner {
+	height: 100%;
+	width: 0;
+	box-sizing: border-box;
+	transition: width 0.5s linear;
+	background-color: #202020;
+	border: 1px solid #222223;
+	box-shadow: 0 0 1px 1px #27282E;
+	border-radius: 3px;
+}
+
+#status-indeterminate {
+	height: 42px;
+	visibility: visible;
+	position: relative;
+}
+
+#status-indeterminate > div {
+	width: 4.5px;
+	height: 0;
+	border-style: solid;
+	border-width: 9px 3px 0 3px;
+	border-color: #2b2b2b transparent transparent transparent;
+	transform-origin: center 21px;
+	position: absolute;
+}
+
+#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
+#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
+#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
+#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
+#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
+#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
+#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
+#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
+
+#status-notice {
+	margin: 0 100px;
+	line-height: 1.3;
+	visibility: visible;
+	padding: 4px 6px;
+	visibility: visible;
+}
+		</style>
+		<link id='-gd-engine-icon' rel='icon' type='image/png' href='khinkills.icon.png' />
+<link rel='apple-touch-icon' href='khinkills.apple-touch-icon.png'/>
+
+	</head>
+	<body>
+		<canvas id="canvas">
+			HTML5 canvas appears to be unsupported in the current browser.<br >
+			Please try updating or use a different browser.
+		</canvas>
+		<div id="status">
+			<div id="status-progress" style="display: none;" oncontextmenu="event.preventDefault();">
+				<div id ="status-progress-inner"></div>
+			</div>
+			<div id="status-indeterminate" style="display: none;" oncontextmenu="event.preventDefault();">
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+				<div></div>
+			</div>
+			<div id="status-notice" class="godot" style="display: none;"></div>
+		</div>
+
+		<script src="khinkills.js"></script>
+		<script>
+const GODOT_CONFIG = {"args":[],"canvasResizePolicy":2,"executable":"khinkills","experimentalVK":false,"fileSizes":{"khinkills.pck":15195536,"khinkills.wasm":35708238},"focusCanvas":true,"gdextensionLibs":[]};
+const engine = new Engine(GODOT_CONFIG);
+
+(function () {
+	const INDETERMINATE_STATUS_STEP_MS = 100;
+	const statusProgress = document.getElementById('status-progress');
+	const statusProgressInner = document.getElementById('status-progress-inner');
+	const statusIndeterminate = document.getElementById('status-indeterminate');
+	const statusNotice = document.getElementById('status-notice');
+
+	let initializing = true;
+	let statusMode = 'hidden';
+
+	let animationCallbacks = [];
+	function animate(time) {
+		animationCallbacks.forEach((callback) => callback(time));
+		requestAnimationFrame(animate);
+	}
+	requestAnimationFrame(animate);
+
+	function animateStatusIndeterminate(ms) {
+		const i = Math.floor((ms / INDETERMINATE_STATUS_STEP_MS) % 8);
+		if (statusIndeterminate.children[i].style.borderTopColor === '') {
+			Array.prototype.slice.call(statusIndeterminate.children).forEach((child) => {
+				child.style.borderTopColor = '';
+			});
+			statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
+		}
+	}
+
+	function setStatusMode(mode) {
+		if (statusMode === mode || !initializing) {
+			return;
+		}
+		[statusProgress, statusIndeterminate, statusNotice].forEach((elem) => {
+			elem.style.display = 'none';
+		});
+		animationCallbacks = animationCallbacks.filter(function (value) {
+			return (value !== animateStatusIndeterminate);
+		});
+		switch (mode) {
+		case 'progress':
+			statusProgress.style.display = 'block';
+			break;
+		case 'indeterminate':
+			statusIndeterminate.style.display = 'block';
+			animationCallbacks.push(animateStatusIndeterminate);
+			break;
+		case 'notice':
+			statusNotice.style.display = 'block';
+			break;
+		case 'hidden':
+			break;
+		default:
+			throw new Error('Invalid status mode');
+		}
+		statusMode = mode;
+	}
+
+	function setStatusNotice(text) {
+		while (statusNotice.lastChild) {
+			statusNotice.removeChild(statusNotice.lastChild);
+		}
+		const lines = text.split('\n');
+		lines.forEach((line) => {
+			statusNotice.appendChild(document.createTextNode(line));
+			statusNotice.appendChild(document.createElement('br'));
+		});
+	}
+
+	function displayFailureNotice(err) {
+		const msg = err.message || err;
+		console.error(msg);
+		setStatusNotice(msg);
+		setStatusMode('notice');
+		initializing = false;
+	}
+
+	const missing = Engine.getMissingFeatures();
+	if (missing.length !== 0) {
+		const missingMsg = 'Error\nThe following features required to run Godot projects on the Web are missing:\n';
+		displayFailureNotice(missingMsg + missing.join('\n'));
+	} else {
+		setStatusMode('indeterminate');
+		engine.startGame({
+			'onProgress': function (current, total) {
+				if (total > 0) {
+					statusProgressInner.style.width = `${(current / total) * 100}%`;
+					setStatusMode('progress');
+					if (current === total) {
+						// wait for progress bar animation
+						setTimeout(() => {
+							setStatusMode('indeterminate');
+						}, 500);
+					}
+				} else {
+					setStatusMode('indeterminate');
+				}
+			},
+		}).then(() => {
+			setStatusMode('hidden');
+			initializing = false;
+		}, displayFailureNotice);
+	}
+}());
+		</script>
+	</body>
+</html>
+

02/khinkills.worker.js

@@ -0,0 +1,161 @@
+/**
+ * @license
+ * Copyright 2015 The Emscripten Authors
+ * SPDX-License-Identifier: MIT
+ */
+
+// Pthread Web Worker startup routine:
+// This is the entry point file that is loaded first by each Web Worker
+// that executes pthreads on the Emscripten application.
+
+'use strict';
+
+var Module = {};
+
+// Thread-local guard variable for one-time init of the JS state
+var initializedJS = false;
+
+function assert(condition, text) {
+  if (!condition) abort('Assertion failed: ' + text);
+}
+
+function threadPrintErr() {
+  var text = Array.prototype.slice.call(arguments).join(' ');
+  console.error(text);
+}
+function threadAlert() {
+  var text = Array.prototype.slice.call(arguments).join(' ');
+  postMessage({cmd: 'alert', text: text, threadId: Module['_pthread_self']()});
+}
+// We don't need out() for now, but may need to add it if we want to use it
+// here. Or, if this code all moves into the main JS, that problem will go
+// away. (For now, adding it here increases code size for no benefit.)
+var out = () => { throw 'out() is not defined in worker.js.'; }
+var err = threadPrintErr;
+self.alert = threadAlert;
+
+Module['instantiateWasm'] = (info, receiveInstance) => {
+  // Instantiate from the module posted from the main thread.
+  // We can just use sync instantiation in the worker.
+  var module = Module['wasmModule'];
+  // We don't need the module anymore; new threads will be spawned from the main thread.
+  Module['wasmModule'] = null;
+  var instance = new WebAssembly.Instance(module, info);
+  // TODO: Due to Closure regression https://github.com/google/closure-compiler/issues/3193,
+  // the above line no longer optimizes out down to the following line.
+  // When the regression is fixed, we can remove this if/else.
+  return receiveInstance(instance);
+}
+
+// Turn unhandled rejected promises into errors so that the main thread will be
+// notified about them.
+self.onunhandledrejection = (e) => {
+  throw e.reason ?? e;
+};
+
+function handleMessage(e) {
+  try {
+    if (e.data.cmd === 'load') { // Preload command that is called once per worker to parse and load the Emscripten code.
+
+    // Until we initialize the runtime, queue up any further incoming messages.
+    let messageQueue = [];
+    self.onmessage = (e) => messageQueue.push(e);
+
+    // And add a callback for when the runtime is initialized.
+    self.startWorker = (instance) => {
+      Module = instance;
+      // Notify the main thread that this thread has loaded.
+      postMessage({ 'cmd': 'loaded' });
+      // Process any messages that were queued before the thread was ready.
+      for (let msg of messageQueue) {
+        handleMessage(msg);
+      }
+      // Restore the real message handler.
+      self.onmessage = handleMessage;
+    };
+
+      // Module and memory were sent from main thread
+      Module['wasmModule'] = e.data.wasmModule;
+
+      // Use `const` here to ensure that the variable is scoped only to
+      // that iteration, allowing safe reference from a closure.
+      for (const handler of e.data.handlers) {
+        Module[handler] = function() {
+          postMessage({ cmd: 'callHandler', handler, args: [...arguments] });
+        }
+      }
+
+      Module['wasmMemory'] = e.data.wasmMemory;
+
+      Module['buffer'] = Module['wasmMemory'].buffer;
+
+      Module['workerID'] = e.data.workerID;
+
+      Module['ENVIRONMENT_IS_PTHREAD'] = true;
+
+      if (typeof e.data.urlOrBlob == 'string') {
+        importScripts(e.data.urlOrBlob);
+      } else {
+        var objectUrl = URL.createObjectURL(e.data.urlOrBlob);
+        importScripts(objectUrl);
+        URL.revokeObjectURL(objectUrl);
+      }
+      Godot(Module);
+    } else if (e.data.cmd === 'run') {
+      // Pass the thread address to wasm to store it for fast access.
+      Module['__emscripten_thread_init'](e.data.pthread_ptr, /*isMainBrowserThread=*/0, /*isMainRuntimeThread=*/0, /*canBlock=*/1);
+
+      // Await mailbox notifications with `Atomics.waitAsync` so we can start
+      // using the fast `Atomics.notify` notification path.
+      Module['__emscripten_thread_mailbox_await'](e.data.pthread_ptr);
+
+      assert(e.data.pthread_ptr);
+      // Also call inside JS module to set up the stack frame for this pthread in JS module scope
+      Module['establishStackSpace']();
+      Module['PThread'].receiveObjectTransfer(e.data);
+      Module['PThread'].threadInitTLS();
+
+      if (!initializedJS) {
+        initializedJS = true;
+      }
+
+      try {
+        Module['invokeEntryPoint'](e.data.start_routine, e.data.arg);
+      } catch(ex) {
+        if (ex != 'unwind') {
+          // The pthread "crashed".  Do not call `_emscripten_thread_exit` (which
+          // would make this thread joinable).  Instead, re-throw the exception
+          // and let the top level handler propagate it back to the main thread.
+          throw ex;
+        }
+      }
+    } else if (e.data.cmd === 'cancel') { // Main thread is asking for a pthread_cancel() on this thread.
+      if (Module['_pthread_self']()) {
+        Module['__emscripten_thread_exit'](-1);
+      }
+    } else if (e.data.target === 'setimmediate') {
+      // no-op
+    } else if (e.data.cmd === 'checkMailbox') {
+      if (initializedJS) {
+        Module['checkMailbox']();
+      }
+    } else if (e.data.cmd) {
+      // The received message looks like something that should be handled by this message
+      // handler, (since there is a e.data.cmd field present), but is not one of the
+      // recognized commands:
+      err('worker.js received unknown command ' + e.data.cmd);
+      err(e.data);
+    }
+  } catch(ex) {
+    err('worker.js onmessage() captured an uncaught exception: ' + ex);
+    if (ex && ex.stack) err(ex.stack);
+    if (Module['__emscripten_thread_crashed']) {
+      Module['__emscripten_thread_crashed']();
+    }
+    throw ex;
+  }
+};
+
+self.onmessage = handleMessage;
+
+

about_me.html

@@ -1,71 +1,54 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dreat - Music & Code</title>
-        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
-    <link rel="stylesheet" href="styles.css">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
-<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
-<link rel="manifest" href="manifest.json">
-</head>
-<body>
-
-<div id="layout">
-    <div id="menu">
-        <div class="pure-menu">
-            <a class="pure-menu-heading" href="index.html">
-        <img alt="logo" src="./images/logo.png" width="80%"/>
-                </a>
-
-            <ul class="pure-menu-list">
-                <li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
-                <li class="pure-menu-item"><a href="projects.html" class="pure-menu-link">Projects</a></li>
-                <li class="pure-menu-item"><a href="about_me.html" class="pure-menu-link">About me</a></li>
-                <li class="pure-menu-item"><a href="about_website.html" class="pure-menu-link">About website</a></li>
-                <li class="pure-menu-item"><a href="cv.html" class="pure-menu-link">Resume</a></li>
-                <li class="pure-menu-item"><a href="https://blog.dreat.info" class="pure-menu-link">Blog</a></li>
-            </ul>
-        </div>
-    </div>
-
-    <div id="main">
+<div id="tab-panel" role="tabpanel">
     <div class="header">
         <h1>About me</h1>
     </div>
 
-        <div class="content">
-                    <div class="font-i-want">
+    <div class="about">
+        <div>
             <p>
-                Some folks (especially those that work with me professionally with code) know me as Łukasz, I use "dreat" on the web. I'm a:
+                Some folks (especially those that work with me professionally with code)
+                know me as Łukasz, I use "dreat" on the web. I'm a:
             </p>
             <ul>
-                <li>Software monk with 9+ years of experience (formerly .Net, currently Elixir) </li>
-                <li>Drummer. I've been playing for a long time and my experience is mostly with local garage bands. Slowly growing into bigger ponds.</li>
-                <li>Music producer. Mostly Dark Ambient but I can (and sometimes do) other genres as well. Most experience with Ableton, but learning more hardware oriented setup now</li>
-                <li>Rollerskater and roller derby player</li>
-                <li>Conference speaker (Open Source Summit 2019, NTPM 2020, ABE 2021 as for now)</li>
-                <li>One of the driving forces behind <a href="https://hs3.pl">HS3city</a> and 3city Elixir User Group</li>
-                <li>mediocre Norwegian, beginner Korean and Czech speaker</li>
+                <li>
+                    Software monk with 9+ years of experience (formerly .Net, currently
+                    Elixir)
+                </li>
+                <li>
+                    Drummer. I've been playing for a long time and my experience is mostly
+                    with local garage bands. Slowly growing into bigger ponds.
+                </li>
+                <li>
+                    Music producer. Mostly Dark Ambient but I can (and sometimes do) other
+                    genres as well. Most experience with Ableton, but learning more
+                    hardware oriented setup now
+                </li>
+                <li>Rollerskater</li>
+                <li>
+                    Conference speaker (Open Source Summit 2019, NTPM 2020, ABE 2021 as
+                    for now)
+                </li>
+                <li>
+                    One of the driving forces behind
+                    <a href="https://hs3.pl">HS3city</a> and 3city Elixir User Group
+                </li>
+                <li>Beginner Korean and Czech speaker</li>
                 <li>Huge nerd</li>
             </ul>
 
-            <p>
-                Feel free to contact me @
+            <p>Feel free to contact me @</p>
+
             <ul>
                 <li>EMail: contact@dreat.info</li>
                 <li>Twitter: @dreat_</li>
                 <li><a href="https://linkedin.com/in/dreat">LinkedIn</a></li>
                 <li>Instagram: @dreat_nihil</li>
-                    <li>You can always drop by for a chat on my <a href="https://whereby.com/dreat">whereby room</a> (be sure to notify me earlier)</li>
+                <li>
+                    You can always drop by for a chat on my
+                    <a href="https://whereby.com/dreat">whereby room</a> (be sure to
+                    notify me earlier)
+                </li>
             </ul>
-
-
         </div>
     </div>
 </div>
-</div>
-
-</body>
-</html>

about_website.html

@@ -1,36 +1,4 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dreat - Music & Code</title>
-        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
-    <link rel="stylesheet" href="styles.css">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
-<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
-<link rel="manifest" href="manifest.json">
-</head>
-<body>
-
-<div id="layout">
-    <div id="menu">
-        <div class="pure-menu">
-            <a class="pure-menu-heading" href="index.html">
-        <img alt="logo" src="./images/logo.png" width="80%"/>
-                </a>
-
-            <ul class="pure-menu-list">
-                <li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
-                <li class="pure-menu-item"><a href="projects.html" class="pure-menu-link">Projects</a></li>
-                <li class="pure-menu-item"><a href="about_me.html" class="pure-menu-link">About me</a></li>
-                <li class="pure-menu-item"><a href="about_website.html" class="pure-menu-link">About website</a></li>
-                <li class="pure-menu-item"><a href="cv.html" class="pure-menu-link">Resume</a></li>
-                <li class="pure-menu-item"><a href="https://blog.dreat.info" class="pure-menu-link">Blog</a></li>
-            </ul>
-        </div>
-    </div>
-
-    <div id="main">
+<div id="tab-panel" role="tabpanel">
     <div class="header">
         <h1>About this website</h1>
     </div>
@@ -39,15 +7,11 @@
         <h2 class="font-i-want">This website is pure html&css</h2>
         <div class="font-i-want">
             <p>
-                There is no js, no trackers, no adds. I see no point in basically business card to track visitors or execute any code on their browsers. <br />
-                I built this using <a href="https://purecss.io/">one of PureCSS's templated</a> and deploy it using <a href="https://netlify.com">Netlify</a>
+                There is no js, no trackers, no ads, no cookies. I see no point in basically
+                business card to track visitors or execute any code on their browsers.
+                <br />
+                I built this using my own CSS classes (I know, <i>weird</i>) and deploy it using <a href="https://netlify.com">Netlify</a>
             </p>
         </div>
-
-
     </div>
 </div>
-</div>
-
-</body>
-</html>

cv.html

@@ -1,67 +1,70 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dreat - Music & Code</title>
-        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
-    <link rel="stylesheet" href="styles.css">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
-<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
-<link rel="manifest" href="manifest.json">
-</head>
-<body>
-
-<div id="layout">
-    <div id="menu">
-        <div class="pure-menu">
-            <a class="pure-menu-heading" href="index.html">
-        <img alt="logo" src="./images/logo.png" width="80%"/>
-                </a>
-
-            <ul class="pure-menu-list">
-                <li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
-                <li class="pure-menu-item"><a href="projects.html" class="pure-menu-link">Projects</a></li>
-                <li class="pure-menu-item"><a href="about_me.html" class="pure-menu-link">About me</a></li>
-                <li class="pure-menu-item"><a href="about_website.html" class="pure-menu-link">About website</a></li>
-                <li class="pure-menu-item"><a href="cv.html" class="pure-menu-link">Resume</a></li>
-                <li class="pure-menu-item"><a href="https://blog.dreat.info" class="pure-menu-link">Blog</a></li>
-            </ul>
-        </div>
-    </div>
-
-    <div id="main">
+<div id="tab-panel" role="tabpanel">
           <div class="header">
               <h1>Resume - software</h1>
           </div>
 
           <div class="content">
               <div class="font-i-want">
-                        <h4>2022-now - Hawku</h4>
-                        <p>Working mainly in Phoenix LiveView, doing all that needs to be done. Turns out I'm a code quality/software engineering nerd</p>
-                        <p><i>main tech: Elixir, Phoenix LiveView (apparently that's different)</i>¯\_(ツ)_/¯</p>
+                <h4>2024-2024 Stealth Startup (NDA prohibits me from naming the client)</h4>
+                <p>
+                  Elixir work, mostly backend, with progressively more LiveView. Learning a bit of the SRE related topics as I go. Helped deliver new functionality that decreased core business costs by 44%.
+                </p>
+                  <p>
+                      <i>main tech: Elixir, DataDog</i>
+                  </p>
+                  <h4>2018-2024 - Freelance</h4>
+                      <ul class="freelance">
+                        <li>
+                          written frontend in Elm for recycling kiosk
+                        </li>
+                        <li>
+                          helped stealth startup with Elixir code
+                        </li>
+                        <li>
+                          created few art and tech pieces for Science Museum
+                        </li>
+                        <li>
+                          working with CarMagic, fixing and expanding their core system
+                        </li>
+                      </ul>
+                  <p><i>main tech: Elm, Elixir, MicroPython, Python, whatever else is needed to get the job done</i></p>
+                  <h4>2022-2023 - Hawku</h4>
+                  <p>
+                      Working mainly in Phoenix LiveView, doing all that needs to be
+                      done. Turns out I'm a code quality/software engineering nerd
+                  </p>
+                  <p>
+                      <i>main tech: Elixir, Phoenix LiveView (apparently that's
+                          different)</i>¯\_(ツ)_/¯
+                  </p>
                   <h4>2019-2022 - BlockFi</h4>
-                        <p>Started out as a software engineer, grown to be a tech lead. As a tech lead I was responsible for project from it's concept to deploy to prod. I've been in a few teams before that, writing both core and marketing related code.</p>
+                  <p>
+                      Started out as a software engineer, grown to be a tech lead. As a
+                      tech lead I was responsible for project from it's concept to
+                      deploy to prod. I've been in a few teams before that, writing both
+                      core and marketing related code.
+                  </p>
                   <p><i>main tech: Elixir</i></p>
-                        <h4>2018-2022 - Freelance</h4>
-                        <p>Not a regular thing, most notably written frontend in Elm for recycling machine and helped one cool company with Elixir.</p>
-                        <p>Finished for now, but maybe will do some in the future.</p>
-                        <p><i>main tech: Elm&Elixir</i></p>
                   <h4>2018-2019 - Lyreco (formerly Staples Solutions)</h4>
-                                <p>I was helping to maintain, develop and improve internal legacy system and make users happy.</p>
+                  <p>
+                      I was helping to maintain, develop and improve internal legacy
+                      system and make users happy.
+                  </p>
                   <p><i>main tech: C#</i></p>
                   <h4>2017-2018 - Iver (formerly DGC Software)</h4>
-                                <p>I got there just in time to make an impact on creating new system. Afterwards I worked on complete rewrite of a legacy system, which was successfully delivered</p>
+                  <p>
+                      I got there just in time to make an impact on creating new system.
+                      Afterwards I worked on complete rewrite of a legacy system, which
+                      was successfully delivered
+                  </p>
                   <p><i>main tech: C#</i></p>
                   <h4>2014-2017 - Volue (formerly Powel)</h4>
-                                <p>I was working in a number of projects, greenfield, ongoing and legacy, mostly integration projects. This is where my journey began.</p>
+                  <p>
+                      I was working in a number of projects, greenfield, ongoing and
+                      legacy, mostly integration projects. This is where my journey
+                      began.
+                  </p>
                   <p><i>main tech: C#</i></p>
               </div>
-
-
           </div>
       </div>
-</div>
-
-</body>
-</html>

home.html

@@ -0,0 +1,22 @@
+<div id="tab-panel" role="tabpanel">
+        <div class="img">
+            <img src="./images/logo.png">
+        </div>
+
+        <div class="content">
+            <h2>Hello to dreat.info</h2>
+            <div>
+                <p>
+                    Welcome to my little place on the web. You will find here info about yours truly and projects I made/I am working on. <br />
+                    Feel free to look around and explore links on the left.
+                </p>
+            </div>
+
+            <div>
+                <div class="main-img">
+                    <img src="./images/dd.jpg" alt="Dreat on drums">
+                </div>
+            </div>
+
+        </div>
+</div>

index.html

@@ -1,62 +1,49 @@
 <!doctype html>
 <html lang="en">
+
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Dreat - Music & Code</title>
-        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
     <link rel="stylesheet" href="styles.css">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
-<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
-<link rel="manifest" href="manifest.json">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
 </head>
+
 <body>
-
-<div id="layout">
-    <div id="menu">
-        <div class="pure-menu">
-            <a class="pure-menu-heading" href="index.html">
-        <img alt="logo" src="./images/logo.png" width="80%"/>
-                </a>
-
-            <ul class="pure-menu-list">
-                <li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
-                <li class="pure-menu-item"><a href="projects.html" class="pure-menu-link">Projects</a></li>
-                <li class="pure-menu-item"><a href="about_me.html" class="pure-menu-link">About me</a></li>
-                <li class="pure-menu-item"><a href="about_website.html" class="pure-menu-link">About website</a></li>
-                <li class="pure-menu-item"><a href="cv.html" class="pure-menu-link">Resume</a></li>
-                <li class="pure-menu-item"><a href="https://blog.dreat.info" class="pure-menu-link">Blog</a></li>
-            </ul>
-        </div>
+    <link rel="manifest" href="manifest.json" />
+    <div role="tablist" class="navbar">
+        <a role="tab" href="/home.html#tab-panel" target=htmz>Home</a>
+        <a role="tab" href="/projects.html#tab-panel" target=htmz>Projects</a>
+        <a role="tab" href="/cv.html#tab-panel" target=htmz>Resume</a>
+        <a role="tab" href="/about_me.html#tab-panel" target=htmz>About me</a>
+        <a role="tab" href="/about_website.html#tab-panel" target=htmz>About website</a>
     </div>
 
-    <div id="main">
-        <div class="header">
-            <h1>Dreat - Music&Code</h1>
+    <div id="tab-panel" role="tabpanel">
+        <div class="img">
+            <img src="./images/logo.png">
         </div>
 
         <div class="content">
-            <h2 class="font-i-want">Hello to dreat.info</h2>
-                    <div class="font-i-want">
+            <h2>Hello to dreat.info</h2>
+            <div>
                 <p>
                     Welcome to my little place on the web. You will find here info about yours truly and projects I made/I am working on. <br />
-                Feel free to look around and explore links on the left.
+                    Feel free to look around and explore links on the top.
                 </p>
             </div>
 
-            <div class="pure-g">
-                <div class="pure-u-1-4">
-                </div>
-                <div class="pure-u-1-2">
-                    <img class="pure-img-responsive" src="./images/dd.jpg" alt="Dreat on drums">
-                </div>
-                <div class="pure-u-1-4">
+            <div>
+                <div class="main-img">
+                    <img src="./images/dd.jpg" alt="Dreat on drums">
                 </div>
             </div>
 
         </div>
     </div>
-</div>
 
+    <iframe hidden name="htmz" onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe>
 </body>
+
 </html>

musicjam/CNAME

@@ -1 +0,0 @@
-musicjam.pl

musicjam/bootstrap-4.3.1-dist/css/bootstrap-reboot.css

@@ -1,331 +0,0 @@
-/*!
- * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
- * Copyright 2011-2019 The Bootstrap Authors
- * Copyright 2011-2019 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
- */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: sans-serif;
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
-  display: block;
-}
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #212529;
-  text-align: left;
-  background-color: #fff;
-}
-
-[tabindex="-1"]:focus {
-  outline: 0 !important;
-}
-
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-}
-
-p {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-abbr[title],
-abbr[data-original-title] {
-  text-decoration: underline;
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
-  cursor: help;
-  border-bottom: 0;
-  -webkit-text-decoration-skip-ink: none;
-  text-decoration-skip-ink: none;
-}
-
-address {
-  margin-bottom: 1rem;
-  font-style: normal;
-  line-height: inherit;
-}
-
-ol,
-ul,
-dl {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-  margin-bottom: 0;
-}
-
-dt {
-  font-weight: 700;
-}
-
-dd {
-  margin-bottom: .5rem;
-  margin-left: 0;
-}
-
-blockquote {
-  margin: 0 0 1rem;
-}
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-small {
-  font-size: 80%;
-}
-
-sub,
-sup {
-  position: relative;
-  font-size: 75%;
-  line-height: 0;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -.25em;
-}
-
-sup {
-  top: -.5em;
-}
-
-a {
-  color: #007bff;
-  text-decoration: none;
-  background-color: transparent;
-}
-
-a:hover {
-  color: #0056b3;
-  text-decoration: underline;
-}
-
-a:not([href]):not([tabindex]) {
-  color: inherit;
-  text-decoration: none;
-}
-
-a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
-  color: inherit;
-  text-decoration: none;
-}
-
-a:not([href]):not([tabindex]):focus {
-  outline: 0;
-}
-
-pre,
-code,
-kbd,
-samp {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 1em;
-}
-
-pre {
-  margin-top: 0;
-  margin-bottom: 1rem;
-  overflow: auto;
-}
-
-figure {
-  margin: 0 0 1rem;
-}
-
-img {
-  vertical-align: middle;
-  border-style: none;
-}
-
-svg {
-  overflow: hidden;
-  vertical-align: middle;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-caption {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  color: #6c757d;
-  text-align: left;
-  caption-side: bottom;
-}
-
-th {
-  text-align: inherit;
-}
-
-label {
-  display: inline-block;
-  margin-bottom: 0.5rem;
-}
-
-button {
-  border-radius: 0;
-}
-
-button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
-input,
-button,
-select,
-optgroup,
-textarea {
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-button,
-input {
-  overflow: visible;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-select {
-  word-wrap: normal;
-}
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-button:not(:disabled),
-[type="button"]:not(:disabled),
-[type="reset"]:not(:disabled),
-[type="submit"]:not(:disabled) {
-  cursor: pointer;
-}
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
-  -webkit-appearance: listbox;
-}
-
-textarea {
-  overflow: auto;
-  resize: vertical;
-}
-
-fieldset {
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-legend {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  padding: 0;
-  margin-bottom: .5rem;
-  font-size: 1.5rem;
-  line-height: inherit;
-  color: inherit;
-  white-space: normal;
-}
-
-progress {
-  vertical-align: baseline;
-}
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-[type="search"] {
-  outline-offset: -2px;
-  -webkit-appearance: none;
-}
-
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-::-webkit-file-upload-button {
-  font: inherit;
-  -webkit-appearance: button;
-}
-
-output {
-  display: inline-block;
-}
-
-summary {
-  display: list-item;
-  cursor: pointer;
-}
-
-template {
-  display: none;
-}
-
-[hidden] {
-  display: none !important;
-}
-/*# sourceMappingURL=bootstrap-reboot.css.map */

musicjam/bootstrap-4.3.1-dist/css/bootstrap-reboot.min.css

@@ -1,8 +0,0 @@
-/*!
- * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
- * Copyright 2011-2019 The Bootstrap Authors
- * Copyright 2011-2019 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
- */*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
-/*# sourceMappingURL=bootstrap-reboot.min.css.map */

musicjam/index.html

@@ -1,319 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <script src="https://pixel.fasttony.es/162526164373492/" async defer></script>
-        <!-- <a href="https://www.freepik.com/free-photos-vectors/music">Music vector created by freepik - www.freepik.com</a> -->
-        <!--
-       auto 
-       to credit: <a href="https://visualhunt.co/a4/7330ae39">dejankrsmanovic</a> on <a href="https://visualhunt.com/re6/de9eac7d">Visual hunt</a> / <a href="http://creativecommons.org/licenses/by/2.0/"> CC BY</a>
-        -->
-        <link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.css" type="text/css" />
-        <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
-        <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
-        <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
-        <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
-        <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
-        <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
-        <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
-        <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
-        <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
-        <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-        <link rel="manifest" href="/manifest.json">
-        <meta name="msapplication-TileColor" content="#ffffff">
-        <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
-        <meta name="theme-color" content="#ffffff">
-        <style type="text/css">
-
-@font-face { font-family: WorkSans; src: url('WorkSans-Regular.ttf'); } 
-.bgimg {
-    background-image: url('IMG_0732.jpg');
-    background-repeat: no-repeat;
-    background-size: 100% 800px;
-    width: 100%;
-    height: 500px;
-}
-.titlefont {
-    font-size: 2em;
-    font-weight: bold;
-    color: white;
-    text-align: center;
-    font-family: "work sans";
-}
-.bgst {
-    background-color: #FFF;
-        margin: 0;
-}
-ul.custom li:before { content: ":computer: ";}
-</style>
-    </head>
-    <body class="bgst">
-        <div class="bgimg" style="display:flex;justify-content:center;align-items:center;">
-            <div class="titlefont" style="background-color: rgba(0,0,0,0.3);padding: 1em 0;">
-                <!--<p> -->
-                <p>
-                    <img src='mj.png' width='60%'>
-                </p>
-                <!-- </p> -->
-                <img scr="mj.png" style="z-index:1000" width="200">
-                <p style="font-weight: normal;margin-top:-25px;margin-bottom:20px">The Sound of Shipyard</p>
-                <p style="font-weight:normal;margin-bottom:30px">26-27.10.2021 // Stocznia Cesarska</p>
-<form action="https://www.facebook.com/MusicJam.hackathon">
-    <input type="submit" value="Bądź na bieżąco" style="font-size:0.8em; font-weight:500;padding:10px;background-color:#FF962F;color:white;border:1px solid #FF962F; border-radius:10px;"/>
-            </div>
-        </div>
-        <div style="height:60px">
-        </div>
-        <!-- #e8631c -->
-                    <h3 style="background-color:#101010;text-align:center;color:white;font-weight:bold;padding:0.2em 0;">CO JEST GRANE?</h3>
-        <div class="container" style="text-align:center">
-            <div class="row">
-                <div class="col-md-12" style="margin-top:30px;margin-bottom:30px">
-                    <p style="font-size:1.5em">Music Jam to hackathon, święto muzyki i technologii w jednym. Już w październiku odbędzie się jego kolejna edycja. Tym razem spotykamy się na Stoczni Cesarskiej, gdzie podczas 24h maratonu będziemy tworzyć, remiksować i bawić się muzyką i kodem niezależnie od ich postaci - czy będą to nowe utwory, wizualizacje, instrumenty czy aplikacje. Ważne jest , aby każdy z projektów łączył muzykę i nowe technologie.</p>
-                </div>
-                </div>
-                </div>
-                    <h3 style="background-color:#101010;text-align:center;color:white;font-weight:bold;padding:0.2em 0;">DO KOGO KIEROWANE JEST WYDARZENIE?</h3>
-        <div class="container" style="text-align:center">
-            <div class="row">
-                <div class="col-md-12" style="margin-top:60px;margin-bottom:60px">
-                    <p style="font-size:1.5em">Do każdego fana muzyki. I tyle. Jeśli muzyka daje Ci radość, to technologia z pewnością nie będzie problemem. Ważne, abyś miał tylko ukończone 16 lat.</p>
-                </div>
-            </div>
-        </div>
-                    <h3 style="background-color:#101010;text-align:center;color:white;font-weight:bold;padding:0.2em 0;">DLACZEGO WARTO WZIĄĆ UDZIAŁ?</h3>
-        <div class="container">
-            <div class="row">
-                <div class="col-md-12" style="margin-top:60px;margin-bottom:60px">
-                    <ul style="line-height:200%">
-                        <li style="font-size:1.5em"><b>Świetni goście</b> - tym roku mamy 3 znakomitych jurorów, którzy aktywnie udzielają się w polskiej scenie muzycznej!</li>
-                        <li style="font-size:1.5em"><b>Nagrody!</b> Vouchery do sklepu muzycznego!</li>
-                        <li style="font-size:1.5em"><b>Dobra zabawa</b>, bo na MusicJam zawsze wszystko gra ;) </li>
-                        <li style="font-size:1.5em"><b>Wstęp na urodzinowy koncert Fundacji CUMY</b></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div>
-                    <h3 style="background-color:#101010;text-align:center;color:white;font-weight:bold;padding:0.2em 0;">GDZIE?</h3>
-                    </div>
-        <div class="container">
-            <div class="row">
-                <div class="col-md-12" style="margin-top:60px;margin-bottom:60px">
-                    <h4 style="text-align: center;">Koncert + sala głośna -> CUMY</h4>
-                    <p style="font-size:1.5em"><a href="https://www.facebook.com/cumy.stocznia">Fundacja CUMY</a> (<a href="https://goo.gl/maps/EWjJ7XQ9rTovcLUs7"> lokalizacja </a> ) to Fundacja wspierająca środowisko rzemieślnicze, łącząca wytwórców z różnych pokoleń, której celem jest skupienie społeczności nowego rzemiosła. CUMY to miejsce - warsztat otwarty, w koncepcji MakerSpace, oferujący przestrzeń do współpracy, edukacji, wymiany informacji. Pracownia usytuowana w XX wiecznym budynku Hartowni w Stoczni Cesarskiej, podzielona jest na przestrzenie do pracy z metalem, drewnem, kompozytami i biomateriałami. </p>
-                        <p style="font-size:1.5em"> Podczas Music Jamu przygotujemy dla Was specjalne strefy do rozstawienia instrumentów i hałasowania! Nie mamy żadnych sąsiadów </p>
-                        <h4 style="text-align: center;">Rozpoczęcie + przestrzeń do "pracy cichej" -> Dyrekcja</h4>
-                        <p style="font-size:1.5em">Budynek Dyrekcji (<a href="https://goo.gl/maps/jjf3gWKSTNKk8tcb9">lokalizacja</a>) jest jednym najstarszych budynków na terenie Stoczni Cesarskiej, którego historia sięga 1878 roku. Był świadkiem wielu wydarzeń historycznych, m.in. strajków stoczniowców protestujących pod jego drzwiami w imię swoich praw i wartości. Do 2002 roku biuro Dyrektora Stoczni mieściło się na pierwszym piętrze budynku. </p>
-                            <p style="font-size:1.5em">Po renowacji z 2019 roku to nowoczesna przestrzeń biurowa - do Waszej dyspozycji będzie sala bankietowa DOK, której wejście znajduje się z tyłu budynku. </p>
-
-
-                </div>
-            </div>
-        </div>
-        <div>
-                    <h3 style="background-color:#101010;text-align:center;color:white;font-weight:bold;padding:0.2em 0;">HARMONOGRAM</h3>
-                    </div>
-        <div class="container">
-            <div class="row" style="margin-top:60px;margin-bottom:20px">
-                <div class="col-md-6">
-                    <div class="card border-warning text-center  mb3" style="color:#FF962F">
-                        <div class="card-body">
-                            <p class="card-text">Piątek 17:30-18:00</p>
-                            <h3 class="card-text" style="margin-top:-4%">Networking i przygotowania</h3>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-6">
-                    <div class="card border-warning text-center  mb3" style="color:#FF962F">
-                        <div class="card-body">
-                            <p class="card-text">Piątek 18:00-18:15</p>
-                            <h3 class="card-text" style="margin-top:-4%">Rozpoczęcie</h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row" style="margin-top:2%">
-                <div class="col-md-6">
-                    <div class="card border-warning text-center  mb3" style="color:#FF962F">
-                        <div class="card-body">
-                            <p class="card-text">Piątek 18:15-19:15</p>
-                            <h3 class="card-text" style="margin-top:-4%">Team building i prezentacje pomysłów</h3>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-6">
-                    <div class="card border-warning text-center  mb3" style="color:#FF962F">
-                        <div class="card-body">
-                            <p class="card-text">Piątek 19:15-...</p>
-                            <h3 class="card-text" style="margin-top:-4%">Maraton tworzenia</h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row" style="margin-top:2%">
-                <div class="col-md-6">
-                    <div class="card border-warning text-center  mb3" style="color:#FF962F">
-                        <div class="card-body">
-                            <p class="card-text">Sobota 9:00-10:00</p>
-                            <h3 class="card-text" style="margin-top:-4%">Przygotowanie do dalszej pracy i konsultacje</h3>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-6">
-                    <div class="card border-warning text-center  mb3" style="color:#FF962F">
-                        <div class="card-body">
-                            <p class="card-text">Sobota 10:00-17:00</p>
-                            <h3 class="card-text" style="margin-top:-4%">Działamy: praca w zespołach</h3><br />
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row" style="margin-top:2%">
-                <div class="col-md-6">
-                    <div class="card border-warning text-center  mb3" style="color:#FF962F">
-                        <div class="card-body">
-                            <p class="card-text">Sobota 17:00-18:00</p>
-                            <h3 class="card-text" style="margin-top:-4%">Prezentacja projektów</h3>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-6">
-                    <div class="card border-warning text-center  mb3" style="color:#FF962F">
-                        <div class="card-body">
-                            <p class="card-text">Sobota 20:00-...</p>
-                            <h3 class="card-text" style="margin-top:-4%">Koncert BLED</h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div style="height:60px">
-        </div>
-        <div style="text-align:center">
-<form action="https://evenea.pl/event/musicjam/">
-    <input type="submit" value="zapisz się" style="font-size:1.5em; font-weight:500;padding:10px;background-color:#FF962F;color:white;border:1px solid #FF962F; border-radius:10px;"/>
-</form>
-        </div>
-        <div style="height:50px">
-        </div>
-        <div>
-                    <h3 style="background-color:#101010;text-align:center;color:white;font-weight:bold;padding:0.2em 0;">Let's reUSE MUSIC!</h3>
-            <div class="container">
-                <div class="row" style="margin-top:60px;margin-bottom:60px">
-                    <div class="col-md-12">
-                        <h4 style="text-align: center;">Brakuje materiałów muzycznych do projektu? IKM poleca zajrzeć w te źródła!</h4>
-                        <p>Zbiory cyfrowe i domena publiczna to niekończące się pasmo inspiracji dla twórców. Na potrzeby MUSICJAM - proponujemy wam wykorzystanie muzyki dawnej z domeny publicznej i tej na wolnych licencjach - np. kompozycje największych klasyków lub utwory udostępnione przez twórców na wolnych licencjach. Zawsze zwróćcie uwagę czy wykonanie nie jest objęte prawami autorskimi majątkowymi!</p><br />
-                        <p>W Medialab Gdańsk zrekonstruowaliśmy XVIII wieczne zaśpiewy gdańskich ulicznych sprzedawców - są do pobrania i wykorzystania podczas hackathonu - udostępnione na CC-BY-SA na http://pracownia.medialabgdansk.pl/rekonstrukcja-zaspiewow-gdanskich-wywolywaczy/</p><br />
-                        <b>Skąd wziąć muzykę/nuty do wykorzystania:</b>
-                        <ul>
-                            <li>polona.pl - wpisując nazwisko dowolnego kompozytora w wynikach wyszukiwania zawsze trafią się jakieś nuty np. Bach</li>
-                            <li>Europeana Music - europejska biblioteka cyfrowa i jej zbiory nagrań. Z części z nich możecie korzystać zupełnie swobodnie.</li>
-                            <li> Archive.org - internetowe archiwum;</li>
-                            <li> bogatą kolekcję np sampli wpisując np Baroque - https://archive.org</li>
-                            <li>Free Music Archive - internetowe archiwum muzyczne. https://freemusicarchive.org</li>
-                            <li>MUSOPEN - serwis internetowy oferujący bogatą kolekcję muzyki klasycznej - w darmowej opcji konta możecie pobrać 5 plików dziennie :) https://musopen.org/</li>
-                            <li>Przede wszystkim nasze XVIII wieczne zaśpiewy. Mogą być np. elementem dźwiękowego pejzażu lub zostać wplecione w nieoczywisty sposób w wasz utwór muzyczny.</li>
-                    </ul>
-        </div>
-        </div>
-        </div>
-        <div>
-                    <h3 style="background-color:#101010;text-align:center;color:white;font-weight:bold;padding:0.2em 0;">FAQ</h3>
-            <div class="container">
-                <div class="row" style="margin-top:60px;margin-bottom:60px">
-                    <div class="col-md-12">
-        <b><p> Jaka jest cena za bilety? </p></b>
-        <p> Opłata rejestracyjna wynosi symbolicznie 30 zł. Dzięki tej kwocie mamy pewność, że zajmujemy miejsca tylko dla osob zainteresowanych i przeznaczymy ją na nagordy dla uczestników</p>
-        <b><p> Czy muszę mieć zespół? </p></b>
-        <p>Rywalizacja odbywa sie max 5 osobowych zespołach. Nie jest jednak wymagane posiadanie drużyny przed rozpoczęciem wydarzenia. Wiele zespołów dobiera się na miejscu, w trakcie prezentacji pomysłów.</p>
-        <b><p> Co będzie mi potrzebne?</p></b>
-        <p> Cokolwiek potrzebujesz do realizacji swojego pomysłu, ale absolutne minimum to laptop ze słuchawkami.</p>
-        <p><b>Jaki jest temat przewodni hackathonu?</b></p>
-        <p>Tematem przewodnim jest "The Sound of Shipyard". Nie jest to warunek konieczny, jednak gorąco zachęcamy do wykorzystania tematu.</p>
-        <p><b>Jak będzie wyglądała przestrzeń hackathonu?</b></p>
-        <p>Będziemy mieli do dyspozyji dwie przestrzenie: cichą i głośną. W głośnej części możesz spokojnie hałasować i nagrywać. W cichej obowiązują słuchawki :)</p>
-        <b><p> Mam pytanie, na które nie ma tutaj odpowiedzi. Gdzie mogę je zadać? </p></b>
-        <p>Zapraszamy do kontaktu na kontakt@codeme.pl </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div style="height:60px">
-        </div>
-        <div>
-            <div class="container" style="text-align:center;">
-                <div class="row" style="height:70px;display:table">
-                    <div class="col-md-4 w-25" style="display:table-cell;vertical-align:middle;text-align:left;">
-                        <p style="width:100px"><b> Organizatorzy </b></p>
-                    </div>
-                    <div class="col-md-4 w-25" style="display:table-cell;vertical-align:middle;">
-                        <a href="https://ikm.gda.pl/en/"><img src='IKM_logo.jpg' width=100px></a>
-                    </div>
-                    <div class="col-md-4 w-25" style="display:table-cell;vertical-align:middle;">
-                        <a href="https://codeme.pl/"><img src='codeme.png' width=180px></a>
-                    </div>
-                    <div class="col-md-4 w-25" style="display:table-cell;vertical-align:middle;">
-                        <a href="https://hs3.pl/?fbclid=IwAR25mjdF7x3wxpFn8fKlVgmfPOY_Cu6L0PXyeSrx9N7x8y280c4D2zsi9R0"><img src='hs.png' width=180px></a>
-                    </div>
-                    <div class="col-md-4 w-25" style="display:table-cell;vertical-align:middle;">
-                        <a href="https://www.facebook.com/cumy.stocznia"><img src='cumy_logo.png' width=180px></a>
-                    </div>
-                </div>
-                <!--<div class="row" style="height:70px;display:table">
-                    <div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;text-align:left;">
-                        <p style="width:100px"><b>Partnerzy</b></p>
-                    </div>
-                    <div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
-                        <img src='./logo_czarne_krzywe_napis.svg' width=180px>
-                    </div>
-                    <div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
-                       <a href="https://www.inkubatorstarter.pl/"><img src='starter.jpg' width=180px></a>
-                    </div>
-                    <div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
-                        <a href="https://gpnt.pl/"><img src='gpnt.png' width=180px></a>
-                    </div>
-                </div>
-                <div class="row" style="height:70px;display:table">
-                    <div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;text-align:left;">
-                        <p style="width:100px"></p>
-                    </div>
-                    <div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
-                        <img src='./psi_psse2.png' width=180px>
-                    </div>
-                    <div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
-                      <a href="https://radiogdansk.pl/"><img src='./Radio_Gdansk_75_lat_znak.png' width=180px></a>
-                    </div>
-                    <div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
-                       <a href="https://best.gdansk.pl/"><img src='./Best.jpg' width=180px></a>
-                    </div>
-                </div>
-                <div class="row" style="height:70px;display:table">
-                    <div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;text-align:left;">
-                        <p style="width:100px">      </p>
-                    </div>
-                    <div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
-                        <img src='./mors-logo-new.png' width=80px>
-                    </div>
-                    <div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
-                        <!--<img src='./Radio_Gdansk_75_lat_znak.png'  width=180px>-->
-                   <!-- </div>
-                    <div class="col-md-3 w-25" style="display:table-cell;vertical-align:middle;">
-                        <!--<img src='./Best.jpg' width=180px>
-                    </div>
-                </div> -->
-            </div>
-        </div>
-        <div style="height:40px">
-        </div>
-            <hr style="border-top: 1px solid #9c9c9c">
-           <div style="height:60px">
-        </div>
-            <h5 style="text-align:center;"><a href="regulamin2.pdf" style="color:#FF962F; text-decoration: underline;">REGULAMIN W FORMACIE PDF</a></h5>
-                <div style="height:60px">                                                                                                  </div>     
-        </div>
-    </body>
-</html>

musicjam/logo_czarne_krzywe_napis.svg

@@ -1,67 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 192 108" style="enable-background:new 0 0 192 108;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#020202;}
-	.st1{fill:#FFFFFF;}
-	.st2{enable-background:new    ;}
-	.st3{fill:#020203;}
-</style>
-<path class="st0" d="M34.2,30.3c-2,1.1-5.5,3.1-8.4,6.8c-1.2,1.5-5.6,7.1-5.6,15.4c0,1.4,0,8.3,4.3,14.6c2.9,4.3,6.9,6.9,8.9,8.1
-	c0-1.1,0-2.8,0.1-3.9c-1-0.6-8.5-5.7-9.7-15.5c-0.4-2.9,0.1-6.2,0.1-6.2c0.2-1.7,0.7-2.9,0.8-3.2c0.4-1.2,0.9-2.7,1.8-4.3
-	c1.4-2.6,3.1-4.3,4.3-5.4c0,3.1,0,6.2,0,9.3c0,3.2,0,6.3,0,9.3c0.8,0,1.5,0,2.3,0c1.8-1.9,3.6-3.8,5.4-5.7c0,9.1,0,18.7-0.1,27.8
-	c0.5,0.2,1,0.3,1.6,0.4c0.8,0.2,1.3,0.3,1.8,0.3c0-11.1-0.1-22.6-0.1-33.8l-2.9,0c-1.6,1.7-3.1,3.4-4.7,5.1
-	C34.2,43,34.2,36.7,34.2,30.3z"/>
-<path class="st0" d="M22.1,57.1"/>
-<path class="st0" d="M48.6,78.2c0-11.2,0-22.7,0-33.9l3.2,0l5.2,5.4c0-6.5,0-12.8,0-19.3c0.6,0.3,1,0.6,1.7,1
-	c0.7,0.4,0.9,0.6,1.4,0.9c-0.1,7.7,0,15.4,0,23c-0.9,0-1.8,0-2.7,0c-2-1.9-3.5-3.8-5.5-5.7c0,8.2-0.1,16.3-0.1,24.4
-	c1-0.3,11.1-3.4,14.6-14.1c2.9-9.2-1-16.4-1.7-17.6c0.4-1.3,1.1-2.8,1.4-4.1c1.3,1.8,3.3,5,4.3,9.8c1.2,6.3-0.2,11.3-0.7,12.8
-	c-2.2,6.4-6.2,10.4-8.7,12.3C56.3,76.8,51.1,77.9,48.6,78.2z"/>
-<path class="st1" d="M60.7,32.6"/>
-<g class="st2">
-	<path class="st3" d="M97.4,38.2V54h-2.4v-8.8l-5.4,7.6h0l-5.2-7.2V54h-2.4V38.2h0L89.6,49L97.4,38.2L97.4,38.2z"/>
-	<path class="st3" d="M110.1,45.1V54h-2.4v-1.3c-0.3,0.4-0.8,0.7-1.3,1c-0.5,0.3-1.2,0.5-1.9,0.5c-0.9,0-1.6-0.2-2.3-0.5
-		c-0.7-0.4-1.2-0.9-1.6-1.6c-0.4-0.7-0.6-1.5-0.6-2.5c0-1,0.2-1.8,0.6-2.6s0.9-1.3,1.6-1.7c0.7-0.4,1.4-0.6,2.2-0.6
-		c1.4,0,2.5,0.5,3.2,1.6l0.2-1.2H110.1z M106.9,51.8c0.4-0.3,0.8-0.8,0.9-1.4v-1.9c-0.2-0.5-0.5-1-1-1.3s-1-0.5-1.7-0.5
-		c-0.7,0-1.4,0.3-1.9,0.8c-0.5,0.5-0.8,1.2-0.8,2c0,0.5,0.1,1,0.4,1.4c0.3,0.4,0.6,0.8,1,1s0.9,0.4,1.4,0.4
-		C105.9,52.3,106.4,52.1,106.9,51.8z"/>
-	<path class="st3" d="M122.8,45.1V54c0,0.8-0.2,1.6-0.7,2.2s-1.1,1.2-1.8,1.6c-0.8,0.4-1.7,0.6-2.7,0.6c-1,0-1.8-0.2-2.4-0.5
-		c-0.6-0.3-1.3-0.7-2-1.3l1.4-1.6c0.4,0.4,0.9,0.7,1.4,1c0.5,0.2,1,0.3,1.6,0.3c0.9,0,1.6-0.2,2.1-0.6c0.5-0.4,0.8-1,0.8-1.7v-1.5
-		c-0.3,0.5-0.8,0.9-1.4,1.3c-0.6,0.3-1.3,0.5-2.1,0.5c-0.8,0-1.6-0.2-2.2-0.6c-0.7-0.4-1.2-1-1.6-1.7c-0.4-0.7-0.6-1.5-0.6-2.4
-		c0-0.9,0.2-1.7,0.6-2.4c0.4-0.7,1-1.3,1.7-1.7c0.7-0.4,1.5-0.6,2.3-0.6c0.7,0,1.4,0.1,2,0.4c0.6,0.3,1.1,0.6,1.4,1l0.2-1H122.8z
-		 M119.4,51.8c0.5-0.3,0.8-0.8,1-1.4v-1.9c-0.2-0.6-0.5-1-1-1.3s-1.1-0.5-1.8-0.5c-0.8,0-1.5,0.3-2,0.8c-0.5,0.5-0.8,1.2-0.8,2
-		c0,0.5,0.1,1,0.4,1.4c0.3,0.4,0.6,0.8,1,1c0.4,0.3,0.9,0.4,1.4,0.4C118.3,52.3,118.9,52.1,119.4,51.8z"/>
-	<path class="st3" d="M135,45.1V54h-2.4v-1.3c-0.3,0.4-0.8,0.7-1.3,1c-0.5,0.3-1.2,0.5-1.9,0.5c-0.9,0-1.6-0.2-2.3-0.5
-		c-0.7-0.4-1.2-0.9-1.6-1.6s-0.6-1.5-0.6-2.5c0-1,0.2-1.8,0.6-2.6c0.4-0.7,0.9-1.3,1.6-1.7c0.7-0.4,1.4-0.6,2.2-0.6
-		c1.4,0,2.5,0.5,3.2,1.6l0.2-1.2H135z M131.8,51.8c0.4-0.3,0.8-0.8,0.9-1.4v-1.9c-0.2-0.5-0.5-1-1-1.3c-0.5-0.3-1-0.5-1.7-0.5
-		c-0.7,0-1.4,0.3-1.9,0.8c-0.5,0.5-0.8,1.2-0.8,2c0,0.5,0.1,1,0.4,1.4c0.3,0.4,0.6,0.8,1,1s0.9,0.4,1.4,0.4
-		C130.8,52.3,131.3,52.1,131.8,51.8z"/>
-	<path class="st3" d="M140.8,52.1h4.7V54H137l4.8-7h-2.6c-0.5,0-0.9-0.2-1.2-0.5c-0.3-0.3-0.5-0.7-0.5-1.3v-1h1.8v0.3
-		c0,0.2,0.1,0.4,0.2,0.5c0.1,0.1,0.3,0.1,0.6,0.1h5.7L140.8,52.1z"/>
-	<path class="st3" d="M156.8,45.1l-5.7,13.1h-2.3l2.1-4.6l-4.1-8.5h2.6L152,51l2.6-5.9H156.8z"/>
-	<path class="st3" d="M166.3,45.5c0.6,0.5,0.8,1.1,0.9,1.9V54h-2.4v-5.8c0-0.5-0.2-0.8-0.4-1.1s-0.6-0.4-1.1-0.4
-		c-0.7,0-1.3,0.3-1.8,0.9c-0.5,0.6-0.7,1.4-0.7,2.4V54h-2.4v-8.9h2.1l0.2,1.6c0.3-0.6,0.8-1.1,1.4-1.4c0.6-0.3,1.3-0.5,2.1-0.5
-		C165.1,44.7,165.8,45,166.3,45.5z"/>
-</g>
-<g class="st2">
-	<path class="st3" d="M94.7,59.5v15.1h-0.1L84.1,64.4l0.1,9.7h-2.4V59H82l10.5,10.3l0-9.8H94.7z"/>
-	<path class="st3" d="M98.3,61.8c0.3-0.2,0.6-0.3,0.9-0.3c0.3,0,0.6,0.1,0.9,0.3s0.4,0.5,0.4,0.8c0,0.3-0.1,0.6-0.4,0.8
-		s-0.5,0.3-0.9,0.3c-0.3,0-0.6-0.1-0.9-0.3s-0.4-0.5-0.4-0.8C97.9,62.3,98,62,98.3,61.8z M100.3,65.6v8.5H98v-8.5H100.3z"/>
-	<path class="st3" d="M103.8,73.9c-0.6-0.2-1.1-0.6-1.4-1l0.9-1.3c0.7,0.7,1.4,1,2.2,1c0.4,0,0.7-0.1,1-0.2c0.3-0.2,0.4-0.4,0.4-0.7
-		c0-0.3-0.1-0.6-0.4-0.7c-0.3-0.2-0.6-0.3-0.9-0.4c-0.3-0.1-0.5-0.2-0.6-0.2c-0.7-0.2-1.3-0.6-1.6-1c-0.4-0.4-0.5-0.9-0.5-1.5
-		c0-0.5,0.1-0.9,0.3-1.3c0.2-0.4,0.6-0.7,1.1-1c0.5-0.3,1.1-0.4,1.7-0.4c0.6,0,1.2,0.1,1.7,0.2c0.5,0.1,0.9,0.4,1.3,0.7l-0.9,1.3
-		c-0.2-0.2-0.5-0.4-0.9-0.5c-0.3-0.1-0.6-0.2-0.9-0.2c-0.3,0-0.6,0.1-0.9,0.2s-0.3,0.4-0.3,0.6c0,0.3,0.1,0.5,0.3,0.7
-		c0.2,0.2,0.6,0.3,1.2,0.5c0.2,0.1,0.4,0.1,0.4,0.1c0.7,0.2,1.2,0.5,1.6,0.9s0.6,0.9,0.6,1.5c0,0.8-0.3,1.5-0.9,2.1
-		c-0.6,0.6-1.4,0.8-2.5,0.8C105,74.3,104.4,74.1,103.8,73.9z"/>
-	<path class="st3" d="M113.9,72.2h4.5v1.8h-8.1l4.6-6.6h-2.5c-0.5,0-0.8-0.2-1.2-0.5s-0.5-0.7-0.5-1.2v-1h1.7v0.3
-		c0,0.2,0,0.4,0.2,0.4c0.1,0.1,0.3,0.1,0.5,0.1h5.4L113.9,72.2z"/>
-	<path class="st3" d="M129.7,65.6v8.5h-2.2v-1.2c-0.3,0.4-0.7,0.7-1.2,1c-0.5,0.3-1.1,0.5-1.8,0.5c-0.8,0-1.5-0.2-2.2-0.5
-		c-0.6-0.3-1.1-0.8-1.5-1.5c-0.4-0.7-0.6-1.5-0.6-2.4c0-0.9,0.2-1.7,0.6-2.4c0.4-0.7,0.9-1.2,1.6-1.6c0.6-0.4,1.4-0.6,2.1-0.6
-		c1.4,0,2.4,0.5,3.1,1.5l0.2-1.1H129.7z M126.5,72c0.4-0.3,0.7-0.8,0.9-1.3v-1.8c-0.2-0.5-0.5-0.9-0.9-1.3c-0.5-0.3-1-0.5-1.6-0.5
-		c-0.7,0-1.3,0.3-1.8,0.8s-0.7,1.1-0.7,1.9c0,0.5,0.1,1,0.4,1.4c0.2,0.4,0.6,0.7,1,1c0.4,0.2,0.8,0.4,1.3,0.4
-		C125.6,72.5,126.1,72.3,126.5,72z"/>
-	<path class="st3" d="M131.9,72c0.2-0.2,0.5-0.4,0.8-0.4c0.3,0,0.6,0.1,0.8,0.4c0.2,0.2,0.4,0.5,0.4,0.9c0,0.3-0.1,0.6-0.4,0.9
-		c-0.2,0.2-0.5,0.3-0.8,0.3c-0.3,0-0.6-0.1-0.8-0.3c-0.2-0.2-0.4-0.5-0.4-0.9C131.5,72.5,131.6,72.2,131.9,72z"/>
-</g>
-</svg>

netlify.toml

@@ -0,0 +1,6 @@
+[[headers]]
+for = "/*"
+
+[headers.values]
+Cross-Origin-Opener-Policy = "same-origin"
+Cross-Origin-Embedder-Policy = "require-corp"

projects.html

@@ -1,84 +1,91 @@
-
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dreat - Music & Code</title>
-        <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
-    <link rel="stylesheet" href="styles.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com"> 
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
-<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
-<link rel="manifest" href="manifest.json">
-</head>
-<body>
-
-<div id="layout">
-    <div id="menu">
-        <div class="pure-menu">
-            <a class="pure-menu-heading" href="index.html">
-        <img alt="logo" src="./images/logo.png" width="80%"/>
-                </a>
-
-            <ul class="pure-menu-list">
-                <li class="pure-menu-item"><a href="index.html" class="pure-menu-link">Home</a></li>
-                <li class="pure-menu-item"><a href="projects.html" class="pure-menu-link">Projects</a></li>
-                <li class="pure-menu-item"><a href="about_me.html" class="pure-menu-link">About me</a></li>
-                <li class="pure-menu-item"><a href="about_website.html" class="pure-menu-link">About website</a></li>
-                <li class="pure-menu-item"><a href="cv.html" class="pure-menu-link">Resume</a></li>
-                <li class="pure-menu-item"><a href="https://blog.dreat.info" class="pure-menu-link">Blog</a></li>
-            </ul>
-        </div>
-    </div>
-
-    <div id="main">
+<div id="tab-panel" role="tabpanel">
   <div class="header">
     <h1>This stuff keeps me busy</h1>
   </div>
 
-        <div class="content">
-            <div class="pure-g">
-                <div class="pure-u-11-24">
-                    <div class="font-i-want">
+  <div>
+    <table>
+      <tr>
+        <th>
           <h2>Software projects</h2>
-                    <hr>
-                    <h4>Fulltime jobs</h4>
-                    <p>I worked mainly with backend (thou I thouched early React and Angular 4 at some point), 5 years with C#, 4 years and counting with Elixir. Along the way I wrote integration systems, backends for web interfaces, rewrote a legacy project or two (that's surprisingly fun!). Now I'm also running my own team, building a project I'm responsible of.</p>
-                    <h4>Freelance</h4>
-                    <p>I did a frontend for a recycling kiosk. You can put waste there and get points to exchange for points to use across the city. I did it using Elm 0.13 and it's still running in production without hiccups. CSS was a big pain thou.</p>
-                    <h4>e-ink badge games</h4>
-                    <p>Created a small quiz and simple "pick your own adventure" game for an e-ink badge. It was used for event that promotes science and technology among kids in 2022</p>
-                </div>
-                </div>
-                <div class="pure-u-2-24">
-                </div>
-                <div class="pure-u-11-24">
-                    <div class="font-i-want">
+        </th>
+        <th class="middle-row"></th>
+        <th>
           <h2>Music projects</h2>
-                    <hr>
+        </th>
+      </tr>
+      <tr>
+        <td>
+          <h4>Building now</h4>
+          <p>
+            I'm building <a href="https://www.tonetastic.studio/">ToneTastic</a>, a fun way of learning Sound Design.
+          </p>
+          <h4>Fulltime jobs</h4>
+          <p>
+            I worked mainly with backend (thou I thouched early React and Angular 4 at some point), 5 years with C#, 4 years and counting with Elixir. Along the way I wrote integration systems, backends for web interfaces,
+            rewrote a legacy project or two (that's surprisingly fun!). Now I'm also running my own team, building a project I'm responsible of.
+          </p>
+          <h4>Freelance</h4>
+          <p>
+            I did a frontend for a recycling kiosk. You can put waste there and get points to exchange for points to use across the city. I did it using Elm 0.13 and it's still running in production without hiccups. CSS was a
+            big pain thou.
+          </p>
+          <h4>e-ink badge games</h4>
+          <p>
+            Created a small quiz and simple "pick your own adventure" game for an e-ink badge. It was used for event that promotes science and technology among kids in 2022
+          </p>
+          <h4>Talk with a robot (twice)</h4>
+          <p>
+            With <a href="https://doomhammer.info/">my good friend</a> we brought Nao robot to life, wiring it to LLM. Once, as a generic personality for Night of Scientists, second time for Jan Heweliusz birthday. Kids really liked it.
+          </p>
+        </td>
+        <td class="middle-row"></td>
+        <td>
           <h4>Drumming</h4>
-                    <p>I currently play drums with a local band: Lucha Beaver. We're working on EP which I'm slowly mixing.</p>
-                    <p>I composed and recorded drums for <a href="https://album.link/pl/i/1570284078"> a prog rock album</a>. </p>
+          <p>
+            I currently play drums with a local band: Lucha Beaver. We're working on EP which I'm slowly mixing.
+          </p>
+          <p>
+            I composed and recorded drums for
+            <a href="https://album.link/pl/i/1570284078"> a prog rock album</a>.
+          </p>
           <h4>Music production</h4>
-                    <p>There is some stuff at <a href="https://soundcloud.com/dreat_nihil">on my soundcloud page</a> - a bit of dark ambient + some music challenges.</p>
-                    <p> In May 2022 I performed debut MonoChromancer ambient concert in front of 600 people at <a href="https://festiwalswiatla.hs3.pl">Festival of Light</a></p>
-                    <p> In May 2023 I performed as MonoChromancer again at FoL in Gdańsk. This time I also <a href="https://album.link/s/2YVFDSW2w99MUYaijNaytQ">released a debut album</a></p>
+          <p>
+            There is some stuff at
+            <a href="https://soundcloud.com/dreat_nihil">on my soundcloud page</a>
+            - a bit of dark ambient + some music challenges.
+          </p>
+          <p>
+            In May 2022 I performed debut MonoChromancer ambient concert in front of 600 people at
+            <a href="https://festiwalswiatla.hs3.pl">Festival of Light</a>
+          </p>
+          <p>
+            In May 2023 I performed as MonoChromancer again at FoL in Gdańsk. This time I also
+            <a href="https://album.link/s/2YVFDSW2w99MUYaijNaytQ">released a debut album</a>
+          </p>
           <h4>SonicPi workshops</h4>
-                    <p>I did a SonicPi workshops for IKM Gdańsk and Starter. This was aimed for total beginners to start making music with code.</p>
+          <p>
+            I did a SonicPi workshops for IKM Gdańsk and Starter. This was aimed for total beginners to start making music with code.
+          </p>
           <h4>Music for Metabow (wip)</h4>
-                    <p>I'm making music for <a href="https://aerloth.itch.io/metabow">Metabow, a VR Game</a>. There's already a build with some music by me, there's a need for some battle music as well.</p>
+          <p>
+            I'm making music for
+            <a href="https://aerloth.itch.io/metabow">Metabow, a VR Game</a>. There's already a build with some music by me, there's a need for some battle music as well.
+          </p>
           <h4>Gamejam music</h4>
-                    <p>I made a music for a <a href="https://satolas.itch.io/spacelinks">Spacelinks</a>, game made for GMTK Gamejam 2021. I had 48hrs to work on this. While our idea for final piece was much more ambitious (and music was made), folks who made the game didn't have time to properly implement complex layering system. What's in the game is cool as well, it's just the idea that sparked during last 8 hours of work. I'm really glad how it went. Definitely will work with guys in the future, it was a blast.</p>
+          <p>
+            I made a music for a
+            <a href="https://satolas.itch.io/spacelinks">Spacelinks</a>, game made for GMTK Gamejam 2021. I had 48hrs to work on this. While our idea for final piece was much more ambitious (and music was made), folks who made
+            the game didn't have time to properly implement complex layering system. What's in the game is cool as well, it's just the idea that sparked during last 8 hours of work. I'm really glad how it went. Definitely will
+            work with guys in the future, it was a blast.
+          </p>
           <h4>Music for astrophotography themed YouTube channel</h4>
-                    <p>Intro music + music in background for talking. <a href="https://youtu.be/4XapHq_uKG4">(link)</a></p>
+          <p>
+            Intro music + music in background for talking.
+            <a href="https://youtu.be/4XapHq_uKG4">(link)</a>
+          </p>
+        </td>
+      </tr>
+    </table>
   </div>
 </div>
-            </div>
-
-        </div>
-    </div>
-</div>
-
-</body>
-</html>

styles.css

@@ -1,254 +1,79 @@
+
 body {
   color: #000;
-    font-family: 'Montserrat', sans-serif;
+  font-family: "Montserrat", sans-serif;
+  margin: 0;
+  background-color: rgba(255, 243, 224, 0.3);
 }
 
-.pure-img-responsive {
+h1 {
+  text-align: center;
+}
+
+.img {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  text-align: center;
+  max-width: 100%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.main-img {
+  text-align: center;
+  align-items: center;
   max-width: 100%;
   height: auto;
 }
 
-.font-i-want {
-    font-family: 'Montserrat', sans-serif;
-    color: #000;
-}
-
-/*
-Add transition to containers so they can push in and out.
-*/
-#layout,
-#menu,
-.menu-link {
-    -webkit-transition: all 0.2s ease-out;
-    -moz-transition: all 0.2s ease-out;
-    -ms-transition: all 0.2s ease-out;
-    -o-transition: all 0.2s ease-out;
-    transition: all 0.2s ease-out;
-}
-
-/*
-This is the parent `<div>` that contains the menu and the content area.
-*/
-#layout {
-    position: relative;
-    left: 0;
-    padding-left: 0;
-}
-    #layout.active #menu {
-        left: 150px;
-        width: 150px;
-    }
-
-    #layout.active .menu-link {
-        left: 150px;
-    }
-/*
-The content `<div>` is where all your content goes.
-*/
 .content {
-    margin: 0 auto;
-    padding: 0 2em;
-    /*max-width: 800px;*/
-    margin-bottom: 50px;
-    line-height: 1.6em;
+  text-align: center;
 }
 
-.header {
-     margin: 0;
-     color: #333;
-     /*text-align: center;*/
-     padding: 2.5em 2em 0;
-     /*border-bottom: 1px solid #eee;*/
- }
-    .header h1 {
-        margin: 0.2em 0;
-        font-size: 3em;
-        font-weight: 600;
-    }
-     .header h2 {
-        font-weight: 300;
-        color: #ccc;
-        padding: 0;
-        margin-top: 0;
-    }
-
-.content-subhead {
-    margin: 50px 0 20px 0;
-    font-weight: 300;
-    color: #000;
-}
-
-
-
-/*
-The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
-appears on the left side of the page.
-*/
-
-#menu {
-    margin-left: -150px; /* "#menu" width */
-    width: 150px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    z-index: 1000; /* so the menu or its navicon stays above all content */
-    background: #191818;
-    overflow-y: auto;
-}
-    /*
-    All anchors inside the menu should be styled like this.
-    */
-    #menu a {
-        color: #999;
-        border: none;
-        padding: 0.6em 0 0.6em 0.6em;
-    }
-
-    /*
-    Remove all background/borders, since we are applying them to #menu.
-    */
-     #menu .pure-menu,
-     #menu .pure-menu ul {
-        border: none;
-        background: transparent;
-    }
-
-    /*
-    Add that light border to separate items into groups.
-    */
-    #menu .pure-menu ul,
-    #menu .pure-menu .menu-item-divided {
-        border-top: 1px solid #333;
-    }
-        /*
-        Change color of the anchor links on hover/focus.
-        */
-        #menu .pure-menu li a:hover,
-        #menu .pure-menu li a:focus {
-            background: #333;
-        }
-
-    /*
-    This styles the selected menu item `<li>`.
-    */
-    #menu .pure-menu-selected,
-    #menu .pure-menu-heading {
-        background: #36b575;
-    }
-        /*
-        This styles a link within a selected menu item `<li>`.
-        */
-        #menu .pure-menu-selected a {
-            color: #fff;
-        }
-
-    /*
-    This styles the menu heading.
-    */
-    #menu .pure-menu-heading {
-        font-size: 110%;
-        color: #fff;
-        margin: 0;
-    }
-
-/* -- Dynamic Button For Responsive Menu -------------------------------------*/
-
-/*
-The button to open/close the Menu is custom-made and not part of Pure. Here's
-how it works:
-*/
-
-/*
-`.menu-link` represents the responsive menu toggle that shows/hides on
-small screens.
-*/
-.menu-link {
-    position: fixed;
-    display: block; /* show this only on small screens */
-    top: 0;
-    left: 0; /* "#menu width" */
-    background: #000;
-    background: rgba(0,0,0,0.7);
-    font-size: 10px; /* change this value to increase/decrease button size */
-    z-index: 10;
-    width: 2em;
-    height: auto;
-    padding: 2.1em 1.6em;
-}
-
-    .menu-link:hover,
-    .menu-link:focus {
-        background: #000;
-    }
-
-    .menu-link span {
-        position: relative;
-        display: block;
-    }
-
-    .menu-link span,
-    .menu-link span:before,
-    .menu-link span:after {
-        background-color: #fff;
-        pointer-events: none;
+.navbar {
+  background-color: #000;
+  color: #177700;
+  height: 50px;
+  display: flex;
   width: 100%;
-        height: 0.2em;
+  align-items: center;
+  justify-content: center;
 }
 
-        .menu-link span:before,
-        .menu-link span:after {
-            position: absolute;
-            margin-top: -0.6em;
-            content: " ";
+.navbar a {
+  padding: 15.25px;
+  width: 20%;
+  color: #FFF3E0;
+  text-decoration: none;
+  text-align: center;
+  margin: 0px;
 }
 
-        .menu-link span:after {
-            margin-top: 0.6em;
+.navbar a:hover {
+  background-color: rgba(23, 119, 0, 0.5);
 }
 
-
-/* -- Responsive Styles (Media Queries) ------------------------------------- */
-
-/*
-Hides the menu at `48em`, but modify this based on your app's needs.
-*/
-@media (min-width: 8em) {
-
-    .header,
-    .content {
-        padding-left: 2em;
-        padding-right: 2em;
+.middle-row {
+  width: 10%;
 }
 
-    #layout {
-        padding-left: 150px; /* left col width "#menu" */
-        left: 0;
-    }
-    #menu {
-        left: 150px;
+h4 {
+  text-decoration: underline;
 }
 
-    .menu-link {
-        position: fixed;
-        left: 150px;
-        display: none;
+a {
+  color: #177700;
 }
 
-    #layout.active .menu-link {
-        left: 150px;
-    }
+.about {
+  align-items: center;
+  justify-content: center;
+  display: flex;
 }
 
-/*@media (max-width: 48em) {
-    /* Only apply this when the window is small. Otherwise, the following
-    case results in extra padding on the left:
-        * Make the window small.
-        * Tap the menu to trigger the active state.
-        * Make the window large again.
-    */
-  /*  #layout.active {
-        position: relative;
-        left: 150px;
+ul.freelance {
+  list-style-type: none;
 }
-}*/
+