update

aizcutei · Oct 31, 2022 · 047aec7 · 047aec7
1 parent c804386
commit 047aec7
Show file tree

Hide file tree

Showing 10 changed files with 337 additions and 205 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Aizcutei</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="aizcutei's homepage. Developer and creator." />
+  <meta name="keywords" content="aizcutei">
+  <title>aizcutei's Home</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -16,6 +16,6 @@
   "dependencies": {
     "svelte-navigator": "^3.2.2",
     "svelte-typewriter": "^3.0.4",
-    "unocss": "^0.45.22"
+    "unocss": "^0.46.1"
   }
 }
diff --git a/src/assets/soundcloud.svg b/src/assets/soundcloud.svg
diff --git a/src/assets/twitter.svg b/src/assets/twitter.svg
diff --git a/src/assets/youtube.svg b/src/assets/youtube.svg
diff --git a/src/lib/About.svelte b/src/lib/About.svelte
@@ -16,13 +16,12 @@
   <div class="m-10" transition:slide={{ duration: 500, easing: expoInOut }}>
     <div
       id="about"
-      class="bg-[#6edcff] h-60 rounded-lg rotate-0 mx-auto max-w-lg"
+      class="bg-[#6edcff] h-50 rounded-lg rotate-0 mx-auto max-w-lg"
     >
       <Typewriter mode="cascade">
         <div class="text-white text-lg font-800 p-5">
           <p>Hi, I am aizcutei.</p>
-          <p>DEV PRODUCE TRANSLATE</p>
-          <p>You can find me in by</p>
+          <p>You can find me by</p>
           <p>i_AT_aizcutei.com</p>
         </div>
       </Typewriter>

diff --git a/src/lib/Banner.svelte b/src/lib/Banner.svelte
@@ -22,15 +22,14 @@
         class="px-1 text-left font-800 text-6 md:text-8 lg:text-10 xl:text-14 lg:w-1024px transition duration-300 ease-in-out"
       >
         <Typewriter
-          mode="loop"
+          mode="cascade"
           interval="50"
           delay="500"
           keepCursorOnFinish="true"
           wordInterval="1500"
         >
           <p>
             <span id="id" class="text-white font-mono">aizcutei</span>
-            <span id="id" class="text-white font-mono">is this real?</span>
           </p>
         </Typewriter>
       </div>

diff --git a/src/lib/Projects.svelte b/src/lib/Projects.svelte
@@ -16,15 +16,40 @@
   <div class="m-10" transition:slide={{ duration: 500, easing: expoInOut }}>
     <div
       id="projects"
-      class="bg-[#6edcff] h-60 rounded-lg rotate-0 mx-auto max-w-lg"
+      class="bg-[#6edcff] h-80 rounded-lg rotate-0 ma max-w-lg items-center"
     >
-      <Typewriter mode="cascade">
-        <div class="text-white text-lg font-800 p-5">
-          <p>Sorry</p>
-          <p>This page is under constraction.</p>
-          <p>Please come back later.</p>
-        </div>
-      </Typewriter>
+      <div class="text-white text-lg font-800 p-5">
+        <p class="text-10 text-shadow-lg tracking-wide">Projects</p>
+        <ul>
+          <li>
+            <a
+              href="https://music-theory.aizcutei.com"
+              class="transition duration-200 text-white no-underline op80 text-shadow-sm hover:op100"
+              >自由派音乐理论——中文翻译</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://github.com/aizcutei/pixelite"
+              class="transition duration-200 text-white no-underline op80 text-shadow-sm hover:op100"
+              >Pixelite: Make you image to pixel art.</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://github.com/aizcutei/Lyrecs"
+              class="transition duration-200 text-white no-underline op80 text-shadow-sm hover:op100"
+              ><span>Lyrecs: A lyric displayer for Apple Music.</span></a
+            >
+          </li>
+          <li>
+            <span
+              class="transition duration-200 text-white no-underline op99 text-shadow-sm "
+              >Working on more...</span
+            >
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 {/if}

diff --git a/src/lib/works.svelte b/src/lib/works.svelte
@@ -3,6 +3,9 @@
   import { fade, slide, fly } from "svelte/transition";
   import { expoInOut, expoOut } from "svelte/easing";
   import Typewriter from "svelte-typewriter";
+  import twitter from "../assets/twitter.svg";
+  import youtube from "../assets/youtube.svg";
+  import soundcloud from "../assets/soundcloud.svg";
   let visible = false;
 
   onMount(() => {
@@ -16,15 +19,40 @@
   <div class="m-10" transition:slide={{ duration: 500, easing: expoInOut }}>
     <div
       id="works"
-      class="bg-[#6edcff] h-60 rounded-lg rotate-0 mx-auto max-w-lg"
+      class="bg-[#6edcff] h-80 rounded-lg rotate-0 mx-auto max-w-lg"
     >
-      <Typewriter mode="cascade">
+      <div>
         <div class="text-white text-lg font-800 p-5">
-          <p>Sorry</p>
-          <p>This page is under constraction.</p>
-          <p>Please come back later.</p>
+          <p class="text-10 text-shadow-lg tracking-wide">Works</p>
+          <p class="mx-10">
+            This page is under constraction, more content should be here later.
+          </p>
+          <p>Follow me on:</p>
+          <div class="grid grid-cols-3 gap-4 mx-30 self-center">
+            <a href="https://youtube.com/aizcutei" target="_blank"
+              ><img
+                src={youtube}
+                class="h8 w8 transition duration-200 ease-in-out hover:skew-y-12"
+                alt="youtube"
+              /></a
+            >
+            <a href="https://soundcloud.com/aizcutei" target="_blank"
+              ><img
+                src={soundcloud}
+                class="h8 w8 transition duration-200 ease-in-out hover:scale-120 hover:-rotate-12"
+                alt="soundcloud"
+              /></a
+            >
+            <a href="https://twitter.com/aizcutei" target="_blank"
+              ><img
+                src={twitter}
+                class="h8 w8 transition duration-200 ease-in-out hover:-scale-x-100"
+                alt="twitter"
+              /></a
+            >
+          </div>
         </div>
-      </Typewriter>
+      </div>
     </div>
   </div>
 {/if}