update

static/css/index.css

@@ -4,7 +4,7 @@
     --background-color: #090c10;
     --secondary-background-color: #0d1117;
     --font-size: 0.5cm;
-    --font-family: 'Helvetica', sans-serif;
+    --font-family: 'Roboto Mono', sans-serif;
 }
 
 body {
@@ -118,7 +118,7 @@ nav ul li#music div#music-progress {
     margin-top: auto;
     height: 1rem;
     background-color: var(--primary-color);
-    transition: all 1s ease;
+    transition: all 3s ease;
 }
 
 main {
@@ -179,10 +179,97 @@ header h2 {
 
 main section {
     width: 100%;
-    height: 100vh;
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: center;
     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.3s ease-in-out;
+}
+
+.links a img:hover {
+    transform: scale(1.1);
+}
+
+.blinkies {
+    display: flex;
+    flex-direction: column;
+}
+
+.blinkies a img {
+    height: 60px;
+    transition: all 0.3s ease-in-out;
+}
+
+img.btn {
+    height: 50px !important;
+    transition: all 0.3s ease-in-out;
+} 

static/js/music.js

@@ -40,7 +40,8 @@ function musicOut() {
 }
 
 function fetchData() {
-    let data = fetch('https://alfieking.dev/api/v1/current_song')
+    // allow cors
+    let data = fetch('https://alfieking.dev/api/nowplaying')
     .then(response => response.json()).then(data => { return data; }) 
     .catch(error => { return null;});
     return data;
@@ -49,10 +50,10 @@ function fetchData() {
 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-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 + '%';
 }
 
@@ -63,13 +64,8 @@ function hideUi() {
 
 function update() {
     fetchData().then(data => { 
-        console.log(data);
-        if (data != null) {
-            if (data.idle)  {
-                hideUi();
-            } else {
-                updateUi(data);
-            }
+        if (data.item != null) {
+            hideUi();
         }
         else {
             hideUi();
@@ -78,4 +74,4 @@ function update() {
 }
 
 update();
-setInterval(update, 10000);
+setInterval(update, 3000);