-
+
-
-
-
- 
+
+
About me
- GitHub
- Discord
- Copy my nickname and tag
- Plays music in the voice channel
- Processes an attached image
- Downloads torrent-files from Rutor without VPN
- Scans a file or a URL on VirusTotal
- Send an email
- My Youtube channel (coming soon)
- Minecraft
-
-
-
-
Copied!
+ +
+
-
-
+
- -
+
- + + + +
- + + + +
- + + + +
- + + + +
-
+
- + + +
-
-
- Hi! I'm Andrew
-@DarkCat09
+
+
+
+
+
+ Hi! I'm Andrew.
+
+
+
+
+
+
+
+ Birthday: July, 2009 ()
+
+
+
+
+
+
+
+ Russia, Ulyanovsk
+
+
+
+
+
+
+
+ One Direction,
+ Linkin Park,
+ Imagine Dragons +
+ + Linkin Park,
+ Imagine Dragons +
+
+
+
+
+
+ Manjaro KDE
+
+
+
+
+
+
+
+ +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 ++
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Python
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I know:
+
+ -
+
- Basics +
- OOP +
- PEP8, MyPy +
- Unpacking, filter/map +
- List/dict comprehension +
- Flask +
- PyPI packaging +
- Unittests +
- MkDocs +
- Lots of modules +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ HTML & CSS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I know:
+
+ -
+
-
+
+
+ - HTML, CSS basics +
- Forms, inputs +
- Animations +
- Flexboxes +
- Grid (learning) +
+
+
+
+
+
+
+ JavaScript
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I know:
+
+ -
+
- Basics +
- Loops, conditions +
- Sort, filter, etc. +
- Classes +
- Arrow expresions +
- Destructuring +
- Promises, async/await +
- How to optimize code +
- DOM, Event Handlers +
- 2D Canvas +
- SweetAlert2 +
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ Kotlin
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I know:
+
+ -
+
- Basics +
- If, when +
- Loops, ranges +
- Lists, Maps +
- OOP, data classes +
- Lambdas +
- Vararg +
- Null safety operators +
+
+
+
+
+
+
+
+
+
+
+ CSharp
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I know:
+
+ -
+
- Syntax +
- Loops, conditions +
- WinForms + // +
+
+
+
+
+
+
+ VBScript
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I know:
+
+ -
+
- Syntax +
- Arrays +
- Loops, conditions +
- Message boxes +
- WScript.Shell +
- FileSystemObject +
- Registry Editing +
+
+
+
+
+
+
+
+
+
+
+
+
+ Bash
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I know:
+
+ -
+
- Basics +
- Loops and conditions +
- Functions +
- Crontab +
- Some escape codes +
- Arrays (learning) +
+
+
+
+
+
+
+
+
+
+
+
+
+ Java
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I know:
+
+ -
+
- Syntax +
- Loops, conditions +
- Lists, HashMap +
- JavaFX + SceneBuilder +
+
+
+
+
+
+
+
+
+
+
+
+
+ PHP
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I know:
+
+ -
+
- Variables +
- Arrays +
- Conditions, loops +
- Headers +
- Drawing images +
- MySQLi +
- Bcrypt +
+
+
+
+
+
+
+
+
+
+ Smali
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I know:
+
+ -
+
- Syntax +
+ I can:
+
+ -
+
- Read non-obfuscated code +
- Change simple code +
+
+
+
+
+
+
-
\ No newline at end of file
+
diff --git a/js/age.js b/js/age.js
deleted file mode 100644
index de066bd..0000000
--- a/js/age.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// Computing My Age
-// Вычисление моего возраста
-var birthday = new Date(2009, 7, 13, 13);
-try {
- // https://ru.stackoverflow.com/questions/576478/javascript-Вычисление-возраста-по-дате-рождения
- document.getElementById('age-js').innerHTML = Math.floor((Date.now() - birthday.getTime()) / (24 * 3600 * 365.25 * 1000));
-}
-catch (ex) {
- console.log('Произошла ошибка при попытке рендеринга моего возраста! Подробнее:\n' + ex.message);
-}
diff --git a/js/anim.js b/js/anim.js
new file mode 100644
index 0000000..a54a789
--- /dev/null
+++ b/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',
+]
diff --git a/js/control.js b/js/control.js
new file mode 100644
index 0000000..0694765
--- /dev/null
+++ b/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()
+}
diff --git a/js/handlers.js b/js/handlers.js
new file mode 100644
index 0000000..7be6c51
--- /dev/null
+++ b/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)
diff --git a/js/init.js b/js/init.js
new file mode 100644
index 0000000..e57cdc6
--- /dev/null
+++ b/js/init.js
@@ -0,0 +1,69 @@
+function init() {
+ initStars()
+ computeAge()
+}
+
+function initStars() {
+
+ const colors = [
+ '#999','#9999ac','#ac9999','#acac99',
+ '#bbb','#bbbbcf','#cfbbbb','#cfcfbb',
+ '#eee','#e5e5ff','#ffe5e5','#ffffe5',
+ '#fff'
+ ]
+ const len = colors.length
+
+ const canvas = document.querySelector('canvas#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)
+}
diff --git a/js/menu.js b/js/menu.js
new file mode 100644
index 0000000..bf40863
--- /dev/null
+++ b/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)
+}
diff --git a/js/script.js b/js/script.js
index 44abaa9..0eb6820 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,128 +1,32 @@
-function setupUi() {
- // Context Menu
- document.body.addEventListener('contextmenu', (e) => {
- var menu = document.querySelector('.context-menu');
- menu.style.top = e.pageY + 'px';
- menu.style.left = e.pageX + 'px';
- togglePopup(menu);
- e.preventDefault();
- return false;
- });
- // Hide Pop-ups
- document.body.addEventListener('click', () => {
- var popups = document.querySelectorAll('.popup');
- for (var i = 0; i < popups.length; i++) {
- togglePopup(popups[i], 0);
- }
- });
- // Initialize Hints
- var itemswh = document.querySelectorAll('.withhint');
- for (var j = 0; j < itemswh.length; j++) {
- itemswh[j].addEventListener('mouseover', showHint);
- //itemswh[j].addEventListener('mousemove', showHint);
- itemswh[j].addEventListener('mouseleave', hideHint);
- }
-};
+const body = document.body
-function initStars() {
- var colors = ['#aaa','#ddd','#eee','#fff'];
- var canvas = document.querySelector('canvas#stars');
- var w = canvas.width;
- var h = canvas.height;
- var ctx = canvas.getContext('2d');
- ctx.clearRect(0, 0, w, h);
- for (var star = 0; star < 200; star++) {
- ctx.fillStyle = colors[Math.floor(Math.random()*colors.length)];
- ctx.fillRect(Math.round(Math.random()*w), Math.round(Math.random()*h), 1, 1);
- }
-};
+function copyLink(/** @type {Event} */ ev) {
-function togglePopup(el, mode=1) {
- var displaying = (el.accessKey.trim() != '' && el.accessKey != '0');
+ /** @type {HTMLSpanElement} */
+ let elem = ev.currentTarget
- if (mode != 1 && !displaying)
- return;
+ navigator.clipboard.writeText(elem.dataset.link)
- if (!displaying) {
- el.style.animation = 'tdExpandInBounce 0.3s ease 0s forwards';
- el.style.pointerEvents = 'auto';
- el.accessKey = '1';
- }
- else {
- el.style.animation = 'tdShrinkOutBounce 0.3s ease 0s forwards';
- el.style.pointerEvents = 'none';
- el.accessKey = '0';
- }
-};
+ let wrapper = elem.parentElement.parentElement.parentElement
+ let msg = wrapper.querySelector('.copied')
-function showDiscordSubmenu(e) {
- var submenu = document.querySelector('li#item-discord').querySelector('nav.submenu');
- togglePopup(submenu);
- e.stopPropagation();
-};
+ msg.classList.add(...fadeAnimIn)
-function showAboutCard(e) {
- var about = document.querySelector('div.about-card-wrapper');
- togglePopup(about);
- e.stopPropagation();
-};
-
-function copyDiscordTag(e) {
- var dtag = e.target.innerText;
- var text = document.createElement('textarea');
- text.style.position = 'absolute';
- text.style.left = '-9999px';
- text.style.top = '0';
- text.innerHTML = dtag;
- text.classList.add('copyarea');
- e.target.append(text);
- text.select();
-
- document.execCommand('copy');
setTimeout(() => {
- document.querySelector('textarea.copyarea').remove();
- togglePopup(document.querySelector('li#item-discord').querySelector('nav.submenu'));
- }, 100);
- togglePopup(document.querySelector('.msg-wrapper'));
- setTimeout(() => {
- togglePopup(document.querySelector('.msg-wrapper'), 0);
- }, 1500);
- e.stopPropagation();
-};
+ msg.classList.remove(...fadeAnimIn)
-function changePicture(e, num) {
- var img = document.querySelector('.space-obj > img');
- switch (num) {
- case 0:
- img.src = 'img/earth.gif';
- break;
- case 1:
- img.src = 'img/moon.gif';
- break;
- case 2:
- img.src = 'img/sun.gif';
- break;
- }
- togglePopup(document.querySelector('.context-menu'));
-};
+ msg.classList.add('show')
+ msg.classList.add(...fadeAnimOut)
-function spaceObjSpeed(spd) {
- document.querySelector('.space-obj>img').style.animationDuration = `${spd}s`;
-};
+ setTimeout(() => {
+ msg.classList.remove(...fadeAnimOut)
+ msg.classList.remove(...fadeAnimIn)
+ }, 600)
-function showHint(e) {
- var elid = e.target.id;
- var hintid = 'hint-' + (elid.startsWith('item-') ? elid.slice(5) : 'elem');
- var hintel = document.getElementById(hintid);
- if (hintel)
- hintel.style.opacity = '1';
-};
+ }, 1500)
+}
-function hideHint(e) {
- var elid = e.target.id;
- var hintid = 'hint-' + (elid.startsWith('item-') ? elid.slice(5) : 'elem');
- var hintel = document.getElementById(hintid);
- if (hintel)
- hintel.style.opacity = '0';
-};
+function styleValue(/** @type {string} */ prop) {
+ return prop.replace('px', '') * 1
+}
diff --git a/logo/dc09logo.svg b/logo/dc09logo.svg
deleted file mode 100644
index e556341..0000000
--- a/logo/dc09logo.svg
+++ /dev/null
@@ -1,96 +0,0 @@
-
-
-
-
diff --git a/styles.less b/styles.less
new file mode 100644
index 0000000..3678dd9
--- /dev/null
+++ b/styles.less
@@ -0,0 +1,486 @@
+@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;
+ font-size: 1.25rem;
+ }
+
+ .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: 100%;
+ text-align: center;
+ }
+ }
+ }
+
+ #code {
+
+ .card {
+
+ & > div {
+ margin-top: 0;
+ padding: 4px 3px;
+ }
+
+ .icon {
+ i {
+ width: 1.1rem;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ }
+ img {
+ width: 1rem;
+ }
+ }
+
+ .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;
+ }
+ }
+ }
+ }
+ }
+}
+
+.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); }
+}
diff --git a/svg/kotlin.svg b/svg/kotlin.svg
new file mode 100644
index 0000000..41f2c59
--- /dev/null
+++ b/svg/kotlin.svg
@@ -0,0 +1,11 @@
+
+
+