Moved root page to space/

space/fontawesome/LICENSE.txt

@@ -0,0 +1,165 @@
+Fonticons, Inc. (https://fontawesome.com)
+
+--------------------------------------------------------------------------------
+
+Font Awesome Free License
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+--------------------------------------------------------------------------------
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+
+The Font Awesome Free download is licensed under a Creative Commons
+Attribution 4.0 International License and applies to all icons packaged
+as SVG and JS file types.
+
+--------------------------------------------------------------------------------
+
+# Fonts: SIL OFL 1.1 License
+
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+Copyright (c) 2022 Fonticons, Inc. (https://fontawesome.com)
+with Reserved Font Name: "Font Awesome".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+SIL OPEN FONT LICENSE
+Version 1.1 - 26 February 2007
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting — in part or in whole — any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+Copyright 2022 Fonticons, Inc.
+
+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.
+
+--------------------------------------------------------------------------------
+
+# Attribution
+
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+--------------------------------------------------------------------------------
+
+# Brand Icons
+
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**

space/fontawesome/css/solid.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}

space/inxi.txt

@@ -0,0 +1,23 @@
+System:
+  Kernel: 5.19.1-3-MANJARO arch: x86_64 bits: 64 compiler: gcc v: 12.1.1
+  Desktop: KDE Plasma v: 5.24.6 Distro: Manjaro Linux base: Arch Linux
+CPU:
+  Info: 6-core model: Intel Core i5-10400 bits: 64 type: MT MCP
+  arch: Comet Lake rev: 3 cache: L1: 384 KiB L2: 1.5 MiB L3: 12 MiB
+Graphics:
+  Device-1: Intel CometLake-S GT2 [UHD Graphics 630] vendor: ASUSTeK
+    driver: i915 v: kernel arch: Gen-9.5 bus-ID: 00:02.0
+  Display: x11 server: X.Org v: 21.1.4 driver: X: loaded: modesetting
+    gpu: i915 resolution: 1920x1080~60Hz
+  OpenGL: renderer: Mesa Intel UHD Graphics 630 (CML GT2) v: 4.6 Mesa
+  22.1.6 direct render: Yes
+Drives:
+  Local Storage: total: 1.36 TiB used: 180.51 GiB (12.9%)
+  ID-1: /dev/nvme0n1 vendor: Western Digital model: WD Blue SN570 500GB
+    size: 465.76 GiB temp: 37.9 C
+  ID-2: /dev/sda vendor: Western Digital model: WD10EZEX-00BBHA0
+    size: 931.51 GiB
+Info:
+  Processes: 291 Uptime: 1h 37m Memory: 30.21 GiB used: 4.49 GiB (14.9%)
+  Init: systemd Compilers: gcc: 12.1.1 clang: 14.0.6 Packages: 1479
+  Shell: Zsh v: 5.9 inxi: 3.3.21

space/js/anim.js

@@ -0,0 +1,22 @@
+const fadeAnimIn = [
+	'show',
+	'animated',
+	'tdFadeIn',
+]
+
+const fadeAnimOut = [
+	'animated',
+    'tdFadeOut',
+]
+
+
+const bounceAnimIn = [
+    'show',
+    'animated',
+    'tdExpandInBounce',
+]
+
+const bounceAnimOut = [
+    'animated',
+    'tdShrinkOutBounce',
+]

space/js/control.js

@@ -0,0 +1,19 @@
+/** @type {HTMLImageElement} */
+const spaceObj = document.querySelector('#space-obj')
+
+/** @type {HTMLDivElement} */
+const space = document.querySelector('.space')
+
+
+function changePicture(/** @type {Event} */ ev) {
+	spaceObj.src = ev.target.dataset.img || 'img/earth.gif'
+	hideContextMenu()
+}
+
+function changeSpeed(/** @type {Event} */ ev) {
+	spaceObj.style.animationDuration = `${1200 - ev.target.value}s`
+}
+
+function landToEarth() {
+	hideContextMenu()
+}

space/js/handlers.js

@@ -0,0 +1,24 @@
+context.addEventListener('mousedown', ev => ev.stopPropagation())
+
+space.addEventListener('mousedown', ev => ev.preventDefault())
+space.addEventListener('contextmenu', contextMenu)
+
+document.querySelectorAll('.copylink>.profile-link').forEach(
+	elem => elem.addEventListener('click', copyLink)
+)
+
+document.querySelectorAll('li.change-img>a').forEach(
+	elem => elem.addEventListener('click', changePicture)
+)
+
+document.querySelector('li.change-speed a').addEventListener('mousedown', ev => ev.preventDefault())
+document.querySelector('li.change-speed input').addEventListener('input', changeSpeed)
+document.querySelector('li.change-speed input').addEventListener('mousedown', ev => ev.stopPropagation())
+document.querySelector('li.land-to').addEventListener('click', landToEarth)
+
+move.addEventListener('mousedown', moveMenu)
+move.addEventListener('mouseup', moveMenu)
+move.addEventListener('mousemove', moveMenu)
+body.addEventListener('mousemove', moveMenu)
+body.addEventListener('mouseup', moveMenu)
+body.addEventListener('mousedown', hideContextMenu)

space/js/init.js

@@ -0,0 +1,86 @@
+function init() {
+	initStars()
+	computeAge()
+	insertSystemInfo()
+}
+
+function initStars() {
+
+	const colors = [
+		'#999','#9999ac','#ac9999','#acac99',
+		'#bbb','#bbbbcf','#cfbbbb','#cfcfbb',
+		'#eee','#e5e5ff','#ffe5e5','#ffffe5',
+		'#fff'
+	]
+	const len = colors.length
+
+	const canvas = document.getElementById('stars')
+	const css = getComputedStyle(canvas)
+
+	const w = canvas.width  = styleValue(css.getPropertyValue('width'))
+	const h = canvas.height = styleValue(css.getPropertyValue('height'))
+
+	// if CSS hasn't been loaded yet
+	// (w and h contains NaN)
+	const err = [w,h].some(n => isNaN(n))
+	if (err) {
+		setTimeout(init, 200)
+		return
+	}
+
+	const ctx = canvas.getContext('2d')
+	const radius = 3
+	const circle = 2 * Math.PI
+
+	ctx.clearRect(0, 0, w, h)
+	for (let star = 0; star < 200; star++) {
+
+		let color = Math.floor(Math.random() * len)
+		ctx.fillStyle = colors[color]
+
+		ctx.beginPath()
+		ctx.arc(
+			Math.round(Math.random() * w),
+			Math.round(Math.random() * h),
+			radius, 0, circle, false
+		)
+		ctx.fill()
+	}
+}
+
+function computeAge() {
+
+	const birthday = new Date(2009, 7, 13, 12, 30)
+	const timedelta = Date.now() - birthday.getTime()
+
+	/*
+		The line below is equivalent to:
+			const age = timedelta / 1000 / 60 / 60 / 24 / 365.25
+		where:
+			1000: convert milliseconds -> seconds
+			60: secs -> minutes
+			60: minutes -> hours
+			24: hours -> days
+			365.25: average count of days in a year:
+				(366 + (365 * 3)) / 4 = 365.25
+	*/
+	const age = timedelta / (1000 * 60 * 60 * 24 * 365.25)
+
+	document.getElementById('age-js').textContent = Math.floor(age)
+}
+
+function insertSystemInfo() {
+
+	const inxi = document.getElementById('inxi')
+
+	let xhr = new XMLHttpRequest()
+	xhr.open('GET', '/inxi.txt')
+
+	xhr.onreadystatechange = () => {
+		if (xhr.readyState != xhr.DONE) return
+		if (xhr.status != 200) return
+		inxi.textContent = xhr.response
+	}
+	
+	xhr.send()
+}

space/js/menu.js

@@ -0,0 +1,76 @@
+/** @type {HTMLDivElement} */
+const menu = document.querySelector('.about-menu')
+
+/** @type {HTMLLIElement} */
+const move = document.querySelector('.about-menu li#move')
+
+/** @type {HTMLDivElement} */
+const context = document.querySelector('.context-menu')
+
+
+var contextShown = false
+var contextTimeout
+
+var menuDragging = false
+var mousePos = {x: 0, y: 0}
+
+
+function moveMenu(/** @type {MouseEvent} */ ev) {
+	switch (ev.type) {
+
+		case 'mousedown':
+			menuDragging = true
+			mousePos.y = ev.clientY - styleValue(menu.style.top)
+			mousePos.x = ev.clientX - styleValue(menu.style.left)
+			menu.classList.add('dragging')
+			ev.preventDefault()
+			break
+
+		case 'mouseup':
+			menuDragging = false
+			menu.classList.remove('dragging')
+			break
+
+		case 'mousemove':
+			if (menuDragging) {
+				let top  = ev.clientY - mousePos.y
+				let left = ev.clientX - mousePos.x
+				menu.style.top  = `${top}px`
+				menu.style.left = `${left}px`
+			}
+			break
+	}
+}
+
+function contextMenu(/** @type {MouseEvent} */ ev) {
+
+	clearTimeout(contextTimeout)
+	context.classList.remove(...bounceAnimOut)
+	
+	context.style.top  = `${ev.clientY + 5}px`
+	context.style.left = `${ev.clientX + 5}px`
+
+	context.classList.add(...bounceAnimIn)
+	contextShown = true
+
+	ev.preventDefault()
+	return false
+}
+
+function hideContextMenu(/** @type {MouseEvent} */ ev) {
+
+	if (!contextShown) return
+	if (ev && ev.button != 0) return
+
+	context.classList.remove(...bounceAnimIn)
+
+	context.classList.add('show')
+	context.classList.add(...bounceAnimOut)
+	contextShown = false
+
+	// animation-duration: 0.6s;
+	contextTimeout = setTimeout(() => {
+		context.classList.remove('show')
+		context.classList.remove(...bounceAnimOut)
+	}, 600)
+}

space/js/script.js

@@ -0,0 +1,32 @@
+const body = document.body
+
+function copyLink(/** @type {Event} */ ev) {
+
+	/** @type {HTMLSpanElement} */
+	let elem = ev.currentTarget
+
+	navigator.clipboard.writeText(elem.dataset.link)
+
+	let wrapper = elem.parentElement.parentElement.parentElement
+	let msg = wrapper.querySelector('.copied')
+
+	msg.classList.add(...fadeAnimIn)
+
+	setTimeout(() => {
+
+		msg.classList.remove(...fadeAnimIn)
+
+		msg.classList.add('show')
+		msg.classList.add(...fadeAnimOut)
+
+		setTimeout(() => {
+			msg.classList.remove(...fadeAnimOut)
+			msg.classList.remove(...fadeAnimIn)
+		}, 600)
+
+	}, 1500)
+}
+
+function styleValue(/** @type {string} */ prop) {
+	return prop.replace('px', '') * 1
+}

space/styles.less

@@ -0,0 +1,502 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');
+
+@spacebg: #000015;
+@menubg:  rgba(0,0,0,0.65);
+@menuhl:  lighten(@menubg, 14%);
+@menusel: lighten(@menubg, 30%);
+@textfg:  #fff;
+@linkfg:  #fff;
+@linkhl:  #b0bfff;
+@popup:   #223;
+
+body {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	padding: 0;
+	margin: 0;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: @spacebg;
+	color: @textfg;
+	font-family: 'Montserrat', sans-serif;
+}
+
+a {
+	text-decoration: none;
+	color: @linkfg;
+}
+
+.link:hover {
+	cursor: pointer;
+	color: @linkhl;
+}
+
+
+.hidden {
+	display: none;
+	&:target {
+		display: block;
+	}
+}
+
+.separator {
+	width: 100%;
+	height: 0;
+	border-top: 1px solid #aaa;
+}
+
+.row-fill {
+	flex-grow: 1;
+	background: @menubg;
+}
+
+
+.menu {
+
+	position: absolute;
+	z-index: 999;
+	border-radius: 5px;
+
+	ul {
+		background-color: @menubg;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+
+		li, li label {
+			cursor: pointer;
+		}
+	}
+
+	.top-menu {
+		border-radius: 5px;
+	}
+}
+
+.about-menu {
+
+	top: 15px;
+	left: 15px;
+	display: flex;
+	flex-direction: column;
+	z-index: 998;
+
+	transition: opacity 0.32s ease 0s;
+	&.dragging {
+		opacity: 0.6;
+	}
+
+	.top-menu {
+
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+
+		ul {
+			&:nth-child(1) {
+				border-top-left-radius: 5px;
+				border-bottom-left-radius: 5px;
+			}
+			&:nth-last-child(1) {
+				border-top-right-radius: 5px;
+				border-bottom-right-radius: 5px;
+			}
+		}
+	}
+
+	ul.section {
+
+		display: flex;
+		flex-direction: row;
+
+		li {
+			display: block;
+			label {
+				display: block;
+				border-radius: 5px;
+				a {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					padding: 10px;
+					width: 1.3rem;
+					font-size: 1.2rem;
+					border-radius: 5px;
+				}
+			}
+		}
+
+		#move, #move label, #move a {
+			cursor: move !important;
+		}
+
+		input[type=radio] {
+			display: none;
+		}
+		input[type=radio]:checked ~ label {
+			background-color: @menusel;
+		}
+
+		label:hover {
+			background-color: @menuhl;
+		}
+	}
+
+	.card {
+
+		background-color: @menubg;
+		border-radius: 5px;
+		margin-top: 5px;
+		padding: 5px;
+
+		.title {
+			font-size: 1.8rem;
+			font-weight: 700;
+		}
+
+		&.profiles {
+
+			margin: 0;
+			padding: 0;
+
+			& > div {
+
+				position: relative;
+
+				align-items: center;
+				border-radius: 5px;
+				padding: 5px;
+
+				&:hover {
+					background-color: @menuhl;
+				}
+
+				.content {
+
+					width: 100%;
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					align-items: center;
+
+					a.name {
+						display: block;
+						width: 100%;
+					}
+
+					.copylink {
+
+						display: flex;
+						flex-direction: row;
+						margin-left: 6px;
+
+						.link {
+							display: block;
+							padding: 4px;
+							padding-right: 5px;
+							font-size: 1.1rem;
+						}
+					}
+				}
+
+				.icon {
+					width: 1.5rem !important;
+					font-size: 1.25rem !important;
+				}
+
+				.inline-popup {
+
+					display: none;
+
+					position: absolute;
+					left: 100%;
+					margin-left: 10px;
+
+					cursor: default;
+					font-size: 0.85rem;
+					padding: 3px 6px;
+					background: @popup;
+					border-radius: 5px;
+
+					box-shadow: 0 0 15px #000;
+
+					animation-duration: 0.6s;
+
+					&.show {
+						display: flex !important;
+						flex-direction: row;
+						align-items: center;
+					}
+
+					&.right::before {
+						content: '';
+						position: absolute;
+						width:  0.5rem;
+						height: 0.5rem;
+						rotate: z 45deg;
+						left: -0.25rem;
+						background: @popup;
+						z-index: -1;
+					}
+				}
+			}
+		}
+
+		& > div:not(.title) {
+
+			display: flex;
+			flex-direction: row;
+			margin-top: 5px;
+			gap: 10px;
+
+			.content {
+				width: 100%;
+			}
+		}
+
+		&.about-card {
+			.icon {
+				margin-left: 2px;
+			}
+		}
+
+		.icon {
+
+			width: 1.1rem;
+			margin-top: 1px;
+			font-size: 1rem;
+			display: flex;
+			justify-content: center;
+
+			i {
+				width: 1.1rem;
+				text-align: center;
+				display: flex;
+				flex-direction: row;
+				justify-content: center;
+			}
+
+			img {
+				width: 1rem;
+			}
+		}
+	}
+
+	#code {
+
+		.card {
+
+			& > div {
+				margin-top: 0;
+				padding: 4px 3px;
+			}
+
+			.content {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				gap: 15px;
+			}
+
+			.details {
+				display: flex;
+				flex-direction: row;
+				gap: 5px;
+			}
+
+			.lang-wrapper {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				gap: 10px;
+			}
+
+			.lang-skills {
+
+				ol {
+
+					list-style: disc;
+					margin: 0;
+					padding: 0;
+
+					.less-logo {
+
+						margin: 0;
+						padding: 0;
+						
+						img {
+							margin: 0;
+							padding: 0;
+							display: block;
+							height: 1.16rem;
+						}
+					}
+				}
+			}
+
+			.projects:not(:empty) {
+
+				border: 2px solid shade(@linkhl, 40%);
+				border-radius: 5px;
+
+				.repo {
+
+					display: grid;
+					grid-template-columns: 6fr repeat(2, 1fr);
+					grid-column-gap: 5px;
+	
+					border-radius: 5px;
+					padding: 5px;
+	
+					&:hover {
+						background-color: @menuhl;
+					}
+	
+					a {
+						padding-right: 5px;
+					}
+				}
+			}
+		}
+	}
+
+	#selfhosted {
+
+		.card {
+
+			& > div {
+
+				margin-top: 0;
+				padding: 5px;
+				border-radius: 5px;
+
+				a {
+					display: block;
+				}
+
+				&:hover {
+					background-color: @menuhl;
+				}
+			}
+		}
+	}
+}
+
+.context-menu {
+
+	display: none;
+	animation-duration: 0.6s;
+
+	&.show {
+
+		display: flex;
+		flex-direction: column;
+
+		ul {
+			border-radius: 5px;
+		}
+
+		li {
+
+			padding: 7px;
+			border-radius: 5px;
+			
+			&:hover {
+				background-color: @menuhl;
+			}
+
+			a {
+				display: flex;
+				flex-direction: row;
+				gap: 5px;
+			}
+
+			.icon {
+
+				width: 1.2rem;
+				margin-top: 1px;
+				font-size: 1.1rem;
+				display: flex;
+				justify-content: center;
+	
+				i {
+					width: 100%;
+					height: 100%;
+					text-align: center;
+				}
+			}
+		}
+	}
+}
+
+
+.expand-wrapper {
+
+	display: flex;
+	flex-direction: column;
+	align-items: end;
+
+	.expand {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	input[type=checkbox] {
+
+		display: none;
+
+		&:checked ~ .hidden {
+			display: block;
+		}
+
+		& ~ label > i {
+			margin-right: 5px;
+		}
+
+		&:checked ~ label > i {
+			rotate: z 180deg;
+		}
+	}
+}
+
+
+.space {
+
+	position: fixed;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	z-index: 997;
+
+	#stars {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: -1;
+		filter: blur(2px);
+	}
+
+	img {
+		width: auto;
+		max-width: 100%;
+		z-index: 0;
+		animation: rotate 480s linear 0s infinite normal;
+		user-select: none;
+	}
+}
+
+@keyframes rotate {
+	0%   { transform: rotate(0deg);   }
+	100% { transform: rotate(360deg); }
+}

space/svg/kotlin.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g id="Logotypes">
+	<polygon class="st0" points="500,500 0,500 0,0 500,0 250,250 	"/>
+</g>
+</svg>

space/webpage.json

@@ -0,0 +1,16 @@
+{
+    "html": ["index.html"],
+    "less": ["styles.less"],
+    "css": [],
+    "js": [
+        "js/anim.js",
+        "js/script.js",
+        "js/init.js",
+        "js/menu.js",
+        "js/control.js",
+        "js/handlers.js"
+    ],
+    "other": [
+        "img/", "svg/", "fontawesome/"
+    ]
+}