commit 3443cb80013565aa119e3e1d93228de82d198eca Author: Alfie King Date: Tue Aug 27 16:48:30 2024 +0100 init diff --git a/index.html b/index.html new file mode 100644 index 0000000..cb75ee9 --- /dev/null +++ b/index.html @@ -0,0 +1,62 @@ + + + + + + Alfieking.dev + + + + + + + + + + + + + + + + + +

Alfie King

server backend survivor

+ +

+ + + + \ No newline at end of file diff --git a/static/content/icon.webp b/static/content/icon.webp new file mode 100644 index 0000000..f215385 Binary files /dev/null and b/static/content/icon.webp differ diff --git a/static/css/index.css b/static/css/index.css new file mode 100644 index 0000000..ae47aee --- /dev/null +++ b/static/css/index.css @@ -0,0 +1,188 @@ +:root { + --primary-color: #5cdd8b; + --text-color: #b1b8c0; + --background-color: #090c10; + --secondary-background-color: #0d1117; + --font-size: 0.5cm; + --font-family: 'Helvetica', sans-serif; +} + +body { + background-color: var(--background-color); + color: var(--text-color); + font-size: var(--font-size); + font-family: var(--font-family); + padding: 0; + margin: 0; + display: flex; + overflow-y: hidden; +} + +nav { + height: 100vh; + width: 4rem; +} + +nav ul { + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + height: 100%; +} + +nav ul li { + writing-mode: vertical-lr; + text-orientation: upright; + padding: 2rem 0rem 0rem 1.4rem; + width: fit-content; +} + +nav ul li a { + color: var(--text-color); + text-decoration: none; + font-weight: 100; + font-family: 'Impact', sans-serif; + transition: all 0.3s ease-in-out +} + +nav ul li a img { + width: 1.5rem; + height: 1.5rem; + transition: all 0.3s ease-in-out; + border-radius: 50%; +} + +nav ul li a:hover { + color: var(--primary-color); + font-weight: 900; +} + +nav ul li a:hover img { + border-radius: 35%; +} + +nav ul li#music { + margin-top: auto; + padding-bottom: 2rem; + display: none; + transition: all 0.3s ease-in-out; + align-items: center; + flex-direction: column; +} + +nav ul li#music img { + width: 1.5rem; + height: 1.5rem; + transition: all 0.3s ease-in-out; + border-radius: 50%; +} + +nav ul li#music div#music-expand { + display: none; + width: 0rem; + height: 0rem; + border-radius: 0 500px 500px 0; + background-color: var(--secondary-background-color); + display: flex; + flex-direction: row; + box-sizing: border-box; + transition: all 0.3s ease-in-out; + overflow: hidden; +} + +nav ul li#music h1 { + display: none; + font-size: 100%; + max-width: 90%; + writing-mode: horizontal-tb; + margin: 0.5rem 0 0 0.5rem; + transition: all 0.3s ease-in-out; +} + +nav ul li#music h2 { + display: none; + font-size: 1rem; + max-width: 90%; + writing-mode: horizontal-tb; + margin: 0; + font-weight: 100; + margin: 0.5rem 0 0 0.5rem; + transition: all 0.3s ease-in-out; +} + +nav ul li#music div#music-progress { + display: none; + width: 100%; + margin-top: auto; + height: 1rem; + background-color: var(--primary-color); + transition: all 1s ease; +} + +main { + width: 100%; + height: 100vh; + overflow: scroll; + scrollbar-width: none; + scroll-behavior: smooth; +} + +header { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +header div.row { + position: relative; + left: -3rem; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin: 0; + gap: 1.5rem; +} + +header div.column { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0; +} + +header img { + width: 13rem; + height: 13rem; +} + +header h1 { + font-size: 5rem; + font-weight: 900; + padding: 0; + margin: 0; +} + +header h2 { + font-size: 1.75rem; + font-weight: 100; + padding: 0; + margin: 0; + position: relative; + top: -1rem; +} + +main section { + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + box-sizing: border-box; +} \ No newline at end of file diff --git a/static/js/music.js b/static/js/music.js new file mode 100644 index 0000000..244adcb --- /dev/null +++ b/static/js/music.js @@ -0,0 +1,81 @@ +var enableMusic = true; + +document.getElementById('music').addEventListener('mouseover', function() { musicHover(); }); + +function musicHover() { + if (!enableMusic) { + return; + } + let icon = document.getElementById('music-icon'); + icon.style.width = '8rem'; + icon.style.height = '8rem'; + icon.style.borderRadius = '500px 0 0 500px'; + let div = document.getElementById('music-expand'); + div.style.display = 'flex'; + div.style.width = '20rem'; + div.style.height = '8rem'; + let title = document.getElementById('music-title'); + title.style.display = 'block'; + let info = document.getElementById('music-info'); + info.style.display = 'block'; + let progress = document.getElementById('music-progress'); + progress.style.display = 'block'; +} + +document.getElementById('music').addEventListener('mouseout', function() { musicOut(); }); + +function musicOut() { + let icon = document.getElementById('music-icon'); + icon.style.width = '1.5rem'; + icon.style.height = '1.5rem'; + icon.style.borderRadius = '50%'; + let div = document.getElementById('music-expand'); + div.style = ''; + let title = document.getElementById('music-title'); + title.style.display = 'none'; + let info = document.getElementById('music-info'); + info.style.display = 'none'; + let progress = document.getElementById('music-progress'); + progress.style.display = 'none'; +} + +function fetchData() { + let data = fetch('https://alfieking.dev/api/v1/current_song') + .then(response => response.json()).then(data => { return data; }) + .catch(error => { return null;}); + return data; +} + +function updateUi(data) { + enableMusic = true; + document.getElementById('music').style.display = 'flex'; + document.getElementById('music-icon').src = data.image; + document.getElementById('music-title').innerText = data.title; + document.getElementById('music-info').innerText = data.artist + ' - ' + data.album; + let progress = data.progress / data.length * 100; + document.getElementById('music-progress').style.width = progress + '%'; +} + +function hideUi() { + enableMusic = false; + document.getElementById('music').style.display = 'none'; +} + +function update() { + fetchData().then(data => { + console.log(data); + if (data != null) { + if (data.idle) { + hideUi(); + } else { + updateUi(data); + } + } + else { + hideUi(); + } + }); +} + +update(); +setInterval(update, 10000); \ No newline at end of file diff --git a/static/js/typing.js b/static/js/typing.js new file mode 100644 index 0000000..562162d --- /dev/null +++ b/static/js/typing.js @@ -0,0 +1,42 @@ +const values = ["Web developer", "Pc games enjoyer", "Server backend survivor", "python programmer", "Javascript disliker"]; +var direction = 1; +var text = ""; +var speed = 100; +var selectedValue = 0; +var currentValueIndex = 0; + +function type() { + if (direction == 1) { + if (currentValueIndex < values[selectedValue].length) { + text += values[selectedValue][currentValueIndex]; + currentValueIndex++; + } else { + direction = -1; + speed = 1500; + } + } else { + if (currentValueIndex > 0) { + text = text.slice(0, -1); + currentValueIndex--; + } else { + direction = 1; + selectedValue++; + if (selectedValue >= values.length) { + selectedValue = 0; + } + } + } +} + +function typing() { + type(); + document.getElementById("typing").innerHTML = "$ " + text; + if (direction == 1) { + speed = 80 + Math.random() * 100; + } else { + speed = 60 + (Math.random() * 100) / 2; + } + setTimeout(typing, speed); +} + +typing(); \ No newline at end of file