styles

package.json

@@ -10,16 +10,15 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/svelte": "^5.0.3",
-    "@astrojs/tailwind": "^5.1.0",
-    "@iconify-json/mdi": "^1.1.64",
-    "@iconify-json/simple-icons": "^1.1.87",
-    "astro": "^4.1.2",
-    "astro-icon": "^1.0.2",
+    "@astrojs/svelte": "^5.7.2",
+    "@astrojs/tailwind": "^5.1.2",
+    "@iconify-json/simple-icons": "^1.2.9",
+    "astro": "^4.16.7",
+    "astro-icon": "^1.1.1",
     "pixi-live2d-display": "^0.4.0",
     "pixi.js": "^6.5.10",
-    "svelte": "^4.2.8",
-    "tailwindcss": "^3.4.1"
+    "svelte": "^4.2.19",
+    "tailwindcss": "^3.4.14"
   },
   "devDependencies": {
     "@catppuccin/tailwindcss": "^0.1.6"

src/components/Centerpiece.astro

@@ -1,12 +1,12 @@
 ---
-import blobHeart from "../assets/blobheart.png";
+import maomao from "../assets/maomao.webp";
 ---
 
 <div class="text-center">
   <h1
-    class="group text-ctp-pink font-semibold lg:text-5xl text-4xl hover:scale-110 transition duration-50"
+    class="group text-ctp-green font-semibold lg:text-5xl text-4xl hover:scale-110 transition duration-50"
   >
-    hiya, I'm <span class="text-ctp-red relative"
+    hiya, I'm <span class="text-ctp-teal relative"
       >artie<span
         class="absolute lg:bottom-[3.25rem] bottom-10 z-50 lg:text-xl text-lg lg:left-7 left-4 text-ctp-lavender opacity-0 group-hover:opacity-80 hover:opacity-50 transition duration-50"
         >/ˈarti/</span
@@ -14,9 +14,8 @@ import blobHeart from "../assets/blobheart.png";
     >
     {" "}
     <img
-      class="align-top lg:w-12 w-10 inline-block pointer-events-none select-none"
-      src={blobHeart.src}
-      alt="blob heart"
+      class="align-top mt-[-4px] rounded-b-md lg:w-12 w-10 inline-block pointer-events-none select-none"
+      src={maomao.src}
     />
   </h1>
   <p

src/components/Icons.astro

@@ -4,14 +4,14 @@ import { Icon } from "astro-icon/components";
 
 <div class="flex flex-wrap justify-center gap-x-3 lg:mt-6 mt-5">
   <a href="https://github.com/artiemis" target="_blank">
-    <Icon name="mdi:github" />
+    <Icon name="simple-icons:github" />
   </a>
   <a
     class="group relative"
     href="https://discord.com/users/134306884617371648"
     target="_blank"
   >
-    <Icon class="hover:text-[#5865F2]" name="mdi:discord" />
+    <Icon class="hover:text-[#5865F2]" name="simple-icons:discord" />
     <div
       class="absolute xl:w-[28rem] top-10 left-8 z-10 xl:group-hover:opacity-100 transition-opacity opacity-0 pointer-events-none"
     >
@@ -22,15 +22,15 @@ import { Icon } from "astro-icon/components";
       />
     </div>
   </a>
-  <a rel="me" href="https://infosec.exchange/@artie" target="_blank">
+  <a href="https://bsky.app/profile/artie.moe" target="_blank">
     <Icon
-      class="hover:text-[#6364FF]"
-      title="@artie@infosec.exchange"
-      name="mdi:mastodon"
+      class="hover:text-[#1084fe]"
+      title="@artie.moe"
+      name="simple-icons:bluesky"
     />
   </a>
   <a href="https://twitter.com/artiebun" target="_blank">
-    <Icon class="hover:text-[#1DA1F2]" name="mdi:twitter" />
+    <Icon class="hover:text-[#1DA1F2]" name="simple-icons:twitter" />
   </a>
   <a href="https://anilist.co/user/artie" target="_blank">
     <Icon class="hover:text-[#02A9FF]" name="simple-icons:anilist" />

src/components/Prompt.astro

@@ -1,5 +1,7 @@
-<div class="artie font-mono fixed top-4 left-6 text-xl font-bold text-slate-300">
-  &gt; <span class="text-ctp-pink">art</span>ie
+<div
+  class="artie font-mono fixed top-4 left-6 text-xl font-bold text-slate-300"
+>
+  &gt; <span class="text-ctp-sapphire">art</span>ie
 </div>
 
 <style>
@@ -27,5 +29,4 @@
       opacity: 1;
     }
   }
-  </style>
-  
+</style>

src/pages/index.astro

@@ -13,5 +13,5 @@ import Model from "../components/Model.svelte";
 
   <script is:inline src="/vendors/live2dcubismcore.min.js"></script>
   <script is:inline src="/vendors/live2d.min.js"></script>
-  <Model client:only />
+  <Model client:only="svelte" />
 </Layout>