ho-code hocode

website/assets/style.css

@@ -133,11 +133,26 @@ h6 {
     grid-area: lastfm;
     display: flex;
     align-items: center;
+    flex-direction: column;
+    gap: 20px;
+    justify-content: center;
+
+}
+.lastfm > .inner {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width:100%;
+    gap: 20px;
+}
+.lastfm > .inner > .inner-inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     flex-direction: row;
     gap: 20px;
 }
-
+.lastfm > div, .lastfm > .inner > .inner-inner > div {
-.lastfm > div {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -151,11 +166,11 @@ h6 {
 .order {
     display: grid;
     grid-template-areas:
-        "details   skills"
+        "details   lastfm"
-        "details    donations"
+        "details    lastfm"
         "projects    commit"
-        "projects    lastfm"
+        "projects    webrings"
-        "webrings   webrings"
+        "donations   donations"
         "status     binkies"
         "blog   blog";
     grid-gap: 5px;
@@ -253,9 +268,6 @@ h6 {
     transition: color 0.2s;
 }
 
-.skills {
-    grid-area: skills;
-}
 
 .status {
     grid-area: status;
@@ -275,7 +287,6 @@ webring-container {
         grid-template-areas:
             "details  "
             "status"
-            "skills "
             "projects "
             "donations  "
             "lastfm"

website/index.html

@@ -67,6 +67,16 @@ __TEMPLATE_HEAD__
 </a>
             </pre>
             </div>
+
+            <h1>Skills</h1>
+            <ul>
+                <li>Around 9 years of near constant JS/TS development. Full-Stack, including discord bots.</li>
+                <li>4 years of TSX</li>
+                <li>SQL and PostgreSQL(pSQL) since I started development.</li>
+                <li>Lots of webdev build tools and more. <a href="https://git.sad.ovh/sophie/website">This site uses my
+                        own build tools.</a></li>
+                <li>10 years of Java development. Mostly Bukkit plugins and fabric mods, and MC related projects.</li>
+            </ul>
         </div>
         <div class="paper projects">
             <ul class="projects-list">
@@ -213,17 +223,6 @@ __TEMPLATE_HEAD__
                 </li>
             </ul>
         </div>
-        <div class="paper skills">
-            <h1>Skills</h1>
-            <ul>
-                <li>Around 9 years of near constant JS/TS development. Full-Stack, including discord bots.</li>
-                <li>4 years of TSX</li>
-                <li>SQL and PostgreSQL(pSQL) since I started development.</li>
-                <li>Lots of webdev build tools and more. <a href="https://git.sad.ovh/sophie/website">This site uses my
-                        own build tools.</a></li>
-                <li>10 years of Java development. Mostly Bukkit plugins and fabric mods, and MC related projects.</li>
-            </ul>
-        </div>
         <div class="paper blog" id="root"></div>
         <div class="paper status" id="status">
         </div>

website/scripts/lastfm.ts

@@ -1,32 +1,33 @@
 import { timeAgo } from "./util";
 
+interface Track {
+  artist: {
+    mbid: string;
+    "#text": string;
+  };
+  streamable: string;
+  image: Array<{
+    size: string;
+    "#text": string;
+  }>;
+  mbid: string;
+  album: {
+    mbid: string;
+    "#text": string;
+  };
+  name: string;
+  "@attr"?: {
+    nowplaying: string;
+  };
+  url: string;
+  date?: {
+    uts: string;
+    "#text": string;
+  };
+}
 interface GetRecentTracksType {
   recenttracks: {
-    track: Array<{
+    track: Array<Track>;
-      artist: {
-        mbid: string;
-        "#text": string;
-      };
-      streamable: string;
-      image: Array<{
-        size: string;
-        "#text": string;
-      }>;
-      mbid: string;
-      album: {
-        mbid: string;
-        "#text": string;
-      };
-      name: string;
-      "@attr"?: {
-        nowplaying: string;
-      };
-      url: string;
-      date?: {
-        uts: string;
-        "#text": string;
-      };
-    }>;
     "@attr": {
       user: string;
       totalPages: string;
@@ -61,18 +62,13 @@ const lastFM = {
   },
   getRecentTracks: async (user: string): Promise<GetRecentTracksType> => {
     const request = await fetch(
-      lastFM.constructUrl("User.getrecenttracks", { user, limit: 1 })
+      lastFM.constructUrl("User.getrecenttracks", { user, limit: 4 })
     );
     return await request.json();
   },
 };
 
-(async () => {
+function renderTrack(element: HTMLDivElement, track: Track) {
-  const recentTracks = await lastFM.getRecentTracks("fucksophie");
-  const track = recentTracks.recenttracks.track[0];
-  if (!track) return;
-  const lastFMElement = document.getElementById("lastfm")!;
-  lastFMElement.innerHTML = "";
   const img = document.createElement("img");
   img.width = 174;
   img.height = 174;
@@ -81,7 +77,7 @@ const lastFM = {
   if (!imageUrl) imageUrl = track.image.at(-1)?.["#text"]!;
 
   img.src = imageUrl;
-  lastFMElement?.appendChild(img);
+  element?.appendChild(img);
 
   const div = document.createElement("div");
   const h1 = document.createElement("h1");
@@ -102,5 +98,27 @@ const lastFM = {
   div.appendChild(h1);
   div.appendChild(spanArtist);
   div.appendChild(spanTitle);
-  lastFMElement?.appendChild(div);
+  element?.appendChild(div);
+
+}
+(async () => {
+  const recentTracks = await lastFM.getRecentTracks("fucksophie");
+  const track = recentTracks.recenttracks.track.shift();
+  const lastFMElement = document.getElementById("lastfm") as HTMLDivElement;
+  lastFMElement.innerHTML = "";
+  if (track) {
+    renderTrack(lastFMElement, track)
+
+    const div = document.createElement('div');
+
+    div.className = "inner";
+    for (let i = 0; i < 2; i++) {
+      const div2 = document.createElement('div');
+      div2.className = "inner-inner";
+      renderTrack(div2, recentTracks.recenttracks.track[i])
+      div.appendChild(div2)
+    }
+
+    lastFMElement.appendChild(div);
+  }
 })();

website/scripts/webrings.ts

@@ -2,11 +2,6 @@ document.addEventListener("DOMContentLoaded", () => {
   const webringsElement = document.querySelector(".webrings");
   if (!webringsElement) return;
 
-  const pmoringScript = document.createElement("script");
-  pmoringScript.src = "https://palette.nekoweb.org/pmoring.js";
-  pmoringScript.setAttribute("data-type", "noir");
-  webringsElement.appendChild(pmoringScript);
-
   const bucketIframe = document.createElement("iframe");
   bucketIframe.title = "the bucket webring";
   bucketIframe.id = "bucket-webring";