add more text

src/lib/index.ts

@@ -48,8 +48,8 @@ export default {
     title: "satr14's site",
     quote: "sometimes you just gotta implement it yourself",
     name: "satr14",
-    roles: ["Web Dev", "Sys Admin", "Hobbyist", "Student"],
+    roles: ["Web Developer", "Sysadmin", "Hobbyist", "Student"],
-    description: "Welcome to my over-engineered corner of the Internet! I'm Satria, Im a self-taught hobbyist web developer and homelaber sysadmin from Indonesia. I've been programming since 2021 and spend my free time working on personal projects and experimenting with new technologies.",
+    description: "I'm Satria, Im a self-taught hobbyist web developer and homelaber sysadmin from Indonesia. I've been programming since 2021 and spend my free time working on personal projects and experimenting with new technologies.",
     skills: ["Tailwind", "SvelteKit", "TypeScript", "Bun", "Express", "PocketBase", "Linux", "Nginx", "Docker", "Git", "Bash", "Proxmox", "Nix"],
     timezone: "Asia/Jakarta",
     location: "Indonesia",

src/routes/+layout.svelte

@@ -20,7 +20,6 @@
 <svelte:head>
     <title>{data.title}</title>
     <meta name="description" content={data.quote} />
-    <script defer src="https://a.satr14.my.id/script.js" data-website-id="6af23546-b65d-43d0-88cb-87fe863ea753"></script>
     <!-- <meta name="theme-color" content="#00e1ff" /> -->
 </svelte:head>
 

src/routes/+page.svelte

@@ -52,9 +52,9 @@
 <nav class="flex flex-col gap-0 items-center z-50 fixed top-24 sm:top-12 md:top-4 right-0 font-semibold bg-ctp-surface0 pr-4 pl-2 py-1 rounded-l-xl border-y border-l border-ctp-sky">
     <a href="https://nixwebr.ing" class="no-underline text-sm text-ctp-text">nix-webring</a>
     <div class="text-2xl">
-        <a href="https://nixwebr.ing/prev/satr14" class="no-underline text-ctp-text">&lt;</a>
+        <a href="https://nixwebr.ing/prev/satr14" class="no-underline text-ctp-text">&larr;</a>
         <a href="https://nixwebr.ing/rand" class="no-underline text-ctp-text">&#9858;</a>
-        <a href="https://nixwebr.ing/next/satr14" class="no-underline text-ctp-text">&gt;</a>
+        <a href="https://nixwebr.ing/next/satr14" class="no-underline text-ctp-text">&rarr;</a>
     </div>
 </nav>
 
@@ -79,24 +79,34 @@
 <div class="fixed top-0 left-0 w-full h-full overflow-hidden flex justify-center items-center select-none" transition:blur={{
     duration: 1000, easing: cubicOut,
 }}>
-    <div class="font-[Stray,monospace] group whitespace-nowrap text-center text-5xl my-4 cursor-default -rotate-6 leading-10 text-ctp-overlay1 hover:text-ctp-base">
+    <div class="font-[Stray,monospace] group whitespace-nowrap text-center text-5xl my-4 cursor-default -rotate-6 leading-10 text-ctp-overlay1 hover:text-ctp-surface2">
+        {#each Array(10) as _,i}
             <div class="inline-flex relative overflow-hidden">
-            <span class="animate-[marquee_10s_linear_infinite] whitespace-nowrap">
+                <span class="whitespace-nowrap" style="opacity: {i*0.1}; animation: marquee {5 + i * 3}s linear infinite;">
                     {randomStr(charAmount)}
                 </span>
-            <span class="absolute top-0 animate-[marquee2_10s_linear_infinite] whitespace-nowrap">
+                <span class="absolute top-0 whitespace-nowrap" style="opacity: {i*0.1}; animation: marquee2 {5 + i * 3}s linear infinite;">
                     {randomStr(charAmount)}
                 </span>
             </div><br>
-        <span class="block">{randomStr(Math.round(charAmount-data.name.length/2))}<a href="https://git.satr14.my.id/satr14/5th-site-expanded" target="_blank" class="group-hover:px-8 no-underline text-ctp-subtext1 group-hover:text-ctp-text">{data.name.toUpperCase()}</a>{randomStr(Math.round(charAmount-data.name.length/2))}</span>
+        {/each}
+        <span class="block">
+            {randomStr(Math.round(charAmount-data.name.length/2), false)}
+            <a href="https://git.satr14.my.id/satr14/5th-site-expanded" target="_blank" class="no-underline text-ctp-subtext1 group-hover:text-ctp-text">
+                {data.name.toUpperCase()}
+            </a>
+            {randomStr(Math.round(charAmount-data.name.length/2), false)}
+        </span>
+        {#each Array(9) as _,i}
             <div class="inline-flex relative overflow-hidden">
-            <span class="animate-[marquee_10s_linear_infinite_reverse] whitespace-nowrap">
+                <span class="whitespace-nowrap" style="opacity: {(9-i)*0.1}; animation: marquee {26 - i * 3}s linear infinite reverse;">
                     {randomStr(charAmount)}
                 </span>
-            <span class="absolute top-0 animate-[marquee2_10s_linear_infinite_reverse] whitespace-nowrap">
+                <span class="absolute top-0 whitespace-nowrap" style="opacity: {(9-i)*0.1}; animation: marquee2 {26 - i * 3}s linear infinite reverse;">
                     {randomStr(charAmount)}
                 </span>
             </div><br>
+        {/each}
     </div>
 </div>