major update

static/css/index.css

@@ -0,0 +1,312 @@
+:root {
+    --primary-color: #5cdd8b;
+    --text-color: #b1b8c0;
+    --background-color: #020205;
+    --secondary-background-color: #090914;
+    --font-size: 0.5cm;
+    --font-family: 'Roboto Mono', sans-serif;
+}
+
+body {
+    background-color: var(--background-color);
+    background-image: url("https://blinkies.cafe/purple-stars-bg.gif");
+    color: var(--text-color);
+    font-size: var(--font-size);
+    font-family: var(--font-family);
+    margin: 0;
+    display: grid;
+    grid-template-columns: 7fr 1.3fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: "main sidebar";
+    padding: 7% 25% 7% 25%;
+    gap: 1rem;
+}
+
+#sidebar {
+    grid-area: sidebar;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+#sidebar section {
+    backdrop-filter: blur(2px) brightness(0.6);
+    border: var(--secondary-background-color) 2px solid;
+    border-radius: 10px;
+    padding: 10px;
+}
+
+#sidebar ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;  
+}
+
+#sidebar ul li {
+    width: fit-content;
+}
+
+#sidebar ul li a {
+    color: var(--text-color);
+    text-decoration: none;
+    font-weight: 100;
+    font-family: 'Impact', sans-serif;
+    transition: all 0.2s ease-in-out
+}
+
+#sidebar ul li a:hover {
+    color: var(--primary-color);
+    font-weight: 900;
+}
+
+#sidebar ul li img {
+    transition: all 0.2s ease-in-out;
+}
+
+#sidebar ul li img:hover {
+    transform: scale(1.1);
+}
+
+#sidebar h1 {
+    font-size: 1.5rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+}
+
+#sidebar h6 {
+    font-weight: 100;
+    margin: 0;
+    padding: 0;
+}
+
+#buttons {
+    text-align: center;
+}
+
+#buttons h1 {
+    font-size: 1.3rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+    text-shadow: var(--text-color) 1px 0 10px;
+}
+
+#buttons ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    margin-top: 5px;
+    align-items: center;
+}
+
+.vsmoltext {
+    font-size: 0.5rem;
+}
+
+main {
+    grid-area: main;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+header {
+    backdrop-filter: blur(2px) brightness(0.6);
+    border: var(--secondary-background-color) 2px solid;
+    border-radius: 10px;
+    padding: 15px;
+}
+
+header div.row {
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+    gap: 1.5rem;
+}
+
+header div.column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 0;
+}
+
+header img {
+    width: 9rem;
+    height: 9rem;
+}
+
+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 {
+    backdrop-filter: blur(2px) brightness(0.6);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    border: var(--secondary-background-color) 2px solid;
+    border-radius: 10px;
+    padding: 15px;
+    box-sizing: border-box;
+}
+
+main section h1 {
+    font-size: 3rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+}
+
+main section h2 {
+    font-size: 1.5rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+}
+
+main section p {
+    font-size: 1rem;
+    margin: 0;
+    padding: 0;
+    font-weight: 300;
+}
+
+main section a {
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+#furry {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0.1;
+    background-image: url('/static/content/background.png');
+    background-repeat: no-repeat;
+    background-position: 50% 0;
+    background-size: cover;
+    z-index: -1;
+    display: none;
+}
+
+.blinkies {
+    justify-content: center;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.blinkies img {
+    width: 150px;
+    height: 20px;
+    transition: all 0.2s ease-in-out;
+}
+
+.blinkies img:hover {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.blinkies img:nth-child(odd):hover {
+    transform: scale(1.1) rotate(-5deg);
+}
+
+section.rowsect {
+    width: 100%;
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 1rem;
+    backdrop-filter: none;
+    border: none;
+    padding: 0;
+}
+
+section.rowsect>div {
+    backdrop-filter: blur(2px) brightness(0.6);
+    border: var(--secondary-background-color) 2px solid;
+    border-radius: 10px;
+}
+
+.stamps {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 10px;
+    gap: 5px;
+    justify-content: center;
+    align-content: center;
+}
+
+.stamps img {
+    width: 99px;
+    height: 56px;
+    transition: all 0.2s ease-in-out;
+}
+
+.stamps img:hover {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.stamps img:nth-child(odd):hover {
+    transform: scale(1.1) rotate(-5deg);
+}
+
+#spotify {
+    background-image: none;
+    background-color: var(--secondary-background-color);
+    backdrop-filter: blur(2px) brightness(0.6);
+    border: var(--secondary-background-color) 2px solid;
+    border-radius: 10px;
+    padding: 15px;
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+    background-size: contain;
+    height: 300px;
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+}
+
+#spotify-title {
+    font-size: 1.5rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+    mix-blend-mode: difference;
+    color: white;
+}
+
+#spotify-artist {
+    color: white;
+    font-size: 1rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+    mix-blend-mode: difference;
+}
+
+.haj {
+    width: 100%;
+    filter: drop-shadow(0 0 0.5rem rgb(88, 214, 245));
+}

static/css/main.css

@@ -1,318 +0,0 @@
-:root {
-    --primary-color: #5cdd8b;
-    --text-color: #b1b8c0;
-    --background-color: #090c10;
-    --secondary-background-color: #0d1117;
-    --font-size: 0.5cm;
-    --font-family: 'Roboto Mono', 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 {
-    z-index: 100;
-    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 3s 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%;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    padding: 4rem;
-}
-
-main section h1 {
-    font-size: 4.5rem;
-    font-weight: 900;
-    margin: 0;
-    padding: 0;
-}
-
-main section h2 {
-    font-size: 1.75rem;
-    margin: 0;
-    padding: 0;
-}
-
-main section p {
-    font-size: 1.25rem;
-    margin: 0;
-    padding: 0;
-    font-weight: 300;
-}
-
-main section a {
-    color: var(--primary-color);
-    text-decoration: none;
-    transition: all 0.3s ease-in-out;
-}
-
-main section a:hover {
-    text-decoration: underline;
-}
-
-.projects {
-    display: flex;
-    flex-direction: row;
-    gap: 2rem;
-    margin-top: 2rem;
-    flex-wrap: wrap;
-}
-
-.project {
-    width: 30%;
-    display: flex;
-    flex-direction: column;
-}
-
-.project img {
-    width: 100%;
-    aspect-ratio: 5/2;
-    border-radius: 1rem 1rem 0 0;
-}
-
-.project .project-info {
-    padding: 0 1rem 1rem 1rem;
-    background-color: var(--secondary-background-color);
-    border-radius: 0 0 1rem 1rem;
-}
-
-.links {
-    display: flex;
-    flex-direction: row;
-    gap: 2rem;
-    margin-top: 2rem;
-    flex-wrap: wrap;
-}
-
-.links a img {
-    height: 120px;
-    transition: all 0.2s ease-in-out;
-}
-
-.links a:nth-child(even) img:hover {
-    transform: scale(1.1) rotate(5deg);
-}
-
-.links a:nth-child(odd) img:hover {
-    transform: scale(1.1) rotate(-5deg);
-}
-
-.links iframe {
-    height: 120px;
-    transition: all 0.2s ease-in-out;
-}
-
-.links iframe:hover {
-    transform: scale(1.1);
-}
-
-.blinkies {
-    display: flex;
-    flex-direction: column;
-}
-
-.blinkies a img {
-    height: 60px;
-    transition: all 0.2s ease-in-out;
-}
-
-.blinkies a {
-    height: 60px;
-}
-
-img.btn {
-    height: 60px !important;
-    transition: all 0.2s ease-in-out;
-}
-
-#links h2 {
-    margin-top: 2rem;
-}
-
-.btns {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-top: 2rem;
-}
-
-.btns img {
-    height: 40px;
-    transition: all 0.2s ease-in-out;
-}
-
-.btns img:hover:nth-child(even) {
-    transform: scale(1.3) rotate(5deg);
-}
-
-.btns img:hover:nth-child(odd) {
-    transform: scale(1.3) rotate(-5deg);
-}

static/js/index.js

@@ -1,3 +1,5 @@
+// TYPERWRITER
+
 const values = [
     "Web developer", 
     "Pc games enjoyer", 
@@ -68,4 +70,35 @@ function typing() {
     }
 }
 
-typing();
+typing();
+
+// HIDDEN STUFF (shh don't tell anyone >:3)
+
+var last5Chars = "";
+
+document.addEventListener('keydown', function(event) {
+    last5Chars += event.key;
+    if (last5Chars == "furry") {
+        console.log("owo, whats this?");
+        document.getElementById('furry').style.display = 'block';
+    }
+    while (last5Chars.length >= 5) {
+        last5Chars = last5Chars.slice(1);
+    }
+});
+
+// Spotify API
+
+function getSpotify() {
+    fetch('https://api.alfieking.dev/spotify/nowplaying/xz02oolstlvwxqu1pfcua9exz').then(response => {
+        return response.json();
+    }).then(data => {
+        document.getElementById('spotify').style.backgroundImage = "url(" + data.item.album.images[0].url + ")";
+        document.getElementById('spotify-title').innerHTML = data.item.name;
+        document.getElementById('spotify-artist').innerHTML = data.item.artists[0].name;
+        document.getElementById('spotify-link').href = data.item.external_urls.spotify;
+    });
+}
+
+getSpotify();
+setInterval(getSpotify, 15000);

static/js/music.js

@@ -1,78 +0,0 @@
-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() {
-    // allow cors
-    let data = fetch('https://alfieking.dev/api/nowplaying')
-    .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.item.album.images[0].url;
-    document.getElementById('music-title').innerText = data.item.name;
-    document.getElementById('music-info').innerText = data.item.artists[0].name + ' - ' + data.item.album.name;
-    let progress = data.progress_ms / data.item.duration_ms * 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.item != null) {
-            updateUi(data);
-        }
-        else {
-            hideUi();
-        }
-    });
-}
-
-update();
-setInterval(update, 3000);