From 1b759173b0f0deeba398b182cbeb1767218860c2 Mon Sep 17 00:00:00 2001
From: SX-9 <90962949+SX-9@users.noreply.github.com>
Date: Tue, 12 Nov 2024 19:54:48 +0700
Subject: [PATCH] change link, fix ui

---
 src/lib/index.ts        |  2 +-
 src/routes/+page.svelte | 23 +++++++++++------------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/lib/index.ts b/src/lib/index.ts
index 55e3c47..f433976 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -180,7 +180,7 @@ export default {
     birthday: [12,6],
     timezone: "Asia/Jakarta",
     links: {
-        "Blog website": "https://blog.satr14.my.id/",
+        "NixOS Flake": "https://github.com/SX-9/nix-conf",
         "Terminal portfolio": "https://github.com/SX-9/term-port/",
         "Project part-of.my.id": "https://part-of.my.id/",
         "DVD logo bounce": "https://sx-9.github.io/dvd-bounce/",
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1691e97..29cf1ce 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -33,7 +33,7 @@
         </p>
         <p class="flex flex-wrap gap-2 text-sm">
             {#each data.skills as skill}
-                <a href={'https://google.com/search?q='+skill} target="_blank" class="bg-slate-900 text-sky-100 hover:bg-slate-800 px-2 py-1 rounded-full no-underline">{skill}</a>
+                <a href={'https://google.com/search?q='+skill} target="_blank" class="bg-slate-900 text-sky-100 hover:bg-slate-800 px-2 py-1 rounded-full no-underline text-xs sm:text-sm">{skill}</a>
             {/each}
         </p>
         <p class="flex flex-wrap gap-1">
@@ -44,12 +44,12 @@
         </p>
     </article>
     <section>
-        <h2 class="text-base italic m-0">Latest blog post</h2>
+        <h2 class="text-sm sm:text-base italic m-0">Latest blog post</h2>
         <h1 class="m-0 font-normal"><a class="no-underline" href={data.fetched.blog.url} target="_blank">{data.fetched.blog.title}</a></h1>
         <p class="text-lg m-0">{months[created.getMonth()]} {created.getDate()}, {created.getFullYear()} - {data.fetched.blog.desc}</p>
     </section>
     <section>
-        <h2 class="text-base italic m-0 mt-8">GitHub repositories</h2>
+        <h2 class="text-sm sm:text-base italic m-0 mt-8">GitHub repositories</h2>
         <div class="flex flex-col gap-4 mt-2">
             {#each data.fetched.github as repo, i}
                 <div class="flex justify-between items-center ">
@@ -66,18 +66,18 @@
         </div>
     </section>
     <section>
-        <h2 class="text-base italic m-0 mt-8">Discord status</h2>
-        <div class="flex flex-wrap my-4">
+        <h2 class="italic font-normal mt-8 text-base sm:text-lg">@<span class="underline">{data.fetched.discord.username}</span> is <span class="data-[status=idle]:text-yellow-200 data-[status=dnd]:text-red-200 data-[status=online]:text-green-200" data-status={data.fetched.discord.status}>{data.fetched.discord.status}</span> on discord</h2>
+        <div class="flex flex-wrap sm:justify-evenly my-4">
             {#if data.fetched.discord.spotify.song}
                 <div class="m-4">
                     <div class="flex gap-2 items-center">
                         <img class="size-12 rounded-md" src={data.fetched.discord.spotify.art} alt="album art">
-                        <div>
-                            <h3 class="my-0"><a href={data.fetched.discord.spotify.link}>{data.fetched.discord.spotify.song}</a></h3>
-                            <span class="italic">{data.fetched.discord.spotify.artist}</span>
+                        <div class="max-w-64 truncate">
+                            <h3 class="my-0 inline"><a href={data.fetched.discord.spotify.link}>{data.fetched.discord.spotify.song}</a></h3>
+                            <br><span class="italic">{data.fetched.discord.spotify.artist}</span>
                         </div>
                     </div>
-                    <span class="italic text-sm">Listening to Spotify</span>
+                    <span class="italic text-sm">Listening to <b>Spotify</b></span>
                 </div>
             {/if}
             {#each data.fetched.discord.activity as activity}
@@ -91,7 +91,7 @@
                             <img class="size-6 rounded-full absolute -bottom-1 -right-1" src={activity.images.small} alt="small">
                             {/if}
                         </div>
-                        <span class="italic">
+                        <span class="italic text-sm">
                             Started {timeAgo(activity.started)}
                             {#if activity.state}
                             <br>{activity.state}
@@ -101,11 +101,10 @@
                             {/if}
                         </span>
                     </div>
-                    <span class="italic text-sm">Playing {activity.name}</span>
+                    <span class="italic text-sm">Playing <b>{activity.name}</b></span>
                 </div>
             {/each}
         </div>
-        <h3 class="italic my-0 font-normal text-xl">@<span class="underline">{data.fetched.discord.username}</span> is <span class="data-[status=idle]:text-yellow-200 data-[status=dnd]:text-red-200 data-[status=online]:text-green-200" data-status={data.fetched.discord.status}>{data.fetched.discord.status}</span> in discord</h3>
     </section>
 </main>
 <footer class=" mt-8">