From c19451789991814052d76ee2dcbcf1744472e85d Mon Sep 17 00:00:00 2001
From: Chris <hizyyv@gmail.com>
Date: Wed, 15 May 2024 17:05:37 +0800
Subject: [PATCH] refactor: some page

---
 components/Bg.vue            |  6 +--
 components/Cursor.vue        |  2 +-
 components/PersonInfo.vue    | 96 ++++++++++++++++++------------------
 components/nav/NavFooter.vue | 20 ++++----
 composables/dark.ts          | 48 ------------------
 layouts/default.vue          | 18 +++----
 nuxt.config.ts               |  2 +-
 pages/index.vue              | 51 ++-----------------
 styles/main.css              | 26 +++-------
 9 files changed, 82 insertions(+), 187 deletions(-)
 delete mode 100644 composables/dark.ts

diff --git a/components/Bg.vue b/components/Bg.vue
index bd8fb5e..3dd8f17 100644
--- a/components/Bg.vue
+++ b/components/Bg.vue
@@ -57,8 +57,8 @@ const afterStyle_1_animate = computed(() => afterStyles.value[0].animation)
   </div>
 </template>
 
-<style lang="scss" scoped>
-// @unocss-skip-start
+<style scoped>
+/* @unocss-skip-start */
 .bg-stars::after {
   content: '';
   display: block;
@@ -69,5 +69,5 @@ const afterStyle_1_animate = computed(() => afterStyles.value[0].animation)
   box-shadow: v-bind(afterStyle_1_boxShadow);
   animation: v-bind(afterStyle_1_animate);
 }
-// @unocss-skip-end
+/* @unocss-skip-end */
 </style>
diff --git a/components/Cursor.vue b/components/Cursor.vue
index 1f368b0..b7af2d3 100644
--- a/components/Cursor.vue
+++ b/components/Cursor.vue
@@ -77,7 +77,7 @@ watch(() => route.fullPath, () => {
 }
 </style>
 
-<style>
+<style scoped>
 html * {
   --uno: important-cursor-none;
 }
diff --git a/components/PersonInfo.vue b/components/PersonInfo.vue
index f7ca75f..a33c842 100644
--- a/components/PersonInfo.vue
+++ b/components/PersonInfo.vue
@@ -3,54 +3,54 @@ const { data: user } = await useFetch('/api/user')
 </script>
 
 <template>
-  <div flex flex-col items-center md="gap-10 flex-row">
-    <ImgBlurHash
-      :src="user!.avatar_url"
-      blurhash="U8B4RsM[08%j00og?ZR.%io$s:jVo$oeM^RP"
-      alt="Avatar"
-      w-10
-      h-10
-      md="w-10 h-10"
-      rounded-full
-    />
-    <div>
-      <h2 fic justify-center md="justify-start">
-        {{ user?.name }}
-      </h2>
-      <p text-lg text-center md="text-left">
-        {{ user?.bio }}
+  <div flex items-center md="gap-10 flex-row">
+    <h1 fsc gap-5>
+      <UserAvatar />
+    </h1>
+    <section>
+      <p>
+        I'm <strong c-primary>{{ user?.name }}</strong>, front-end engineer 🧑🏻‍💻 & open source enthusiast.
       </p>
-      <div fic gap-4 justify-center md="justify-start">
-        <div fic gap-2>
-          <div class="text-3.5" i-carbon-building />
-          {{ user?.company }}
-        </div>
-        <div fic gap-2>
-          <div class="text-3.5" i-carbon-location />
-          {{ user?.location }}
-        </div>
-        <div fic gap-2>
-          <div class="text-3.5" i-carbon-campsite />
-          {{ user?.blog }}
-        </div>
-      </div>
-      <div my-4 fic justify-center md="justify-start">
-        <div i-carbon-user-favorite-alt-filled mr2 />
-        <span>
-          {{ user?.followers }}
-          <span class="text-xs">
-            followers
-          </span>
-        </span>
-        <span mx-2>·</span>
-        <span>
-          {{ user?.following }}
-          <span class="text-xs">
-            following
-          </span>
-        </span>
-      </div>
-      <p />
-    </div>
+      <p italic font-dm mt-2>
+        「 {{ user?.bio }} 」
+      </p>
+      <ul my-6 space-y-2>
+        <li>
+          <i i-fluent-emoji-sports-medal mr-1 />
+          Team member of:
+          <IconsUnoCSS />
+          ,
+          <IconsElk />
+        </li>
+        <li>
+          <i i-fluent-emoji-sparkles mr-1 />
+          Creator of:
+          <IconsOnuUI />
+          ,
+          <IconsUnPreset />
+        </li>
+        <li>
+          <i i-fluent-emoji-party-popper mr-1 />
+          Contributor of:
+          <IconsVite />
+          、
+          <IconsVue />
+          、
+          <IconsNuxt /> & etc.
+        </li>
+        <li>
+          <i i-fluent-emoji-party-popper mr-1 />
+          Find me on:
+          <IconsBilibili />
+          & etc.
+        </li>
+      </ul>
+      <p>
+        <a trans text-p-r class="group" hover-op-75 :href="`mailto:${user?.email ?? 'hizyyv@gmail.com'}`">
+          Hire Me
+          <i trans group-hover="ml-2" i-ri:arrow-right-up-line bg-gradient-to-r />
+        </a>
+      </p>
+    </section>
   </div>
 </template>
diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index 2bc2bb1..dd5328f 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -1,15 +1,13 @@
 <template>
-  <div
-    backdrop-blur
-    py-2
-    fbc
-    prose
-    ma
-  >
-    <div text="xs gray4" flex justify-center gap-3>
+  <footer backdrop-blur py-2 fbc min-w-65ch w-fit ma gap-6 pos-sticky bottom-0>
+    <div font-dm text="xs gray4" fsc flex-wrap gap-3>
       <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2022005364号</a>
-      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>2023-PRESENT © Chris
+      <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>
+      <span>2023-PRESENT © Chris</span>
     </div>
-    <i i-fluent-emoji:ghost />
-  </div>
+    <div fcc gap-3>
+      <!-- <Timer /> -->
+      <i i-fluent-emoji:ghost />
+    </div>
+  </footer>
 </template>
diff --git a/composables/dark.ts b/composables/dark.ts
deleted file mode 100644
index 29c90e5..0000000
--- a/composables/dark.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-export const isDark = useDark()
-
-/**
- * Credit to [@hooray](https://github.com/hooray)
- * @see https://github.com/vuejs/vitepress/pull/2347
- */
-export function toggleDark(event: MouseEvent) {
-  const isAppearanceTransition = document.startViewTransition
-    && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
-
-  if (!isAppearanceTransition) {
-    isDark.value = !isDark.value
-    return
-  }
-
-  const x = event.clientX
-  const y = event.clientY
-  const endRadius = Math.hypot(
-    Math.max(x, innerWidth - x),
-    Math.max(y, innerHeight - y),
-  )
-  // @ts-expect-error: Transition API
-  const transition = document.startViewTransition(async () => {
-    isDark.value = !isDark.value
-    await nextTick()
-  })
-  transition.ready
-    .then(() => {
-      const clipPath = [
-        `circle(0px at ${x}px ${y}px)`,
-        `circle(${endRadius}px at ${x}px ${y}px)`,
-      ]
-      document.documentElement.animate(
-        {
-          clipPath: isDark.value
-            ? [...clipPath].reverse()
-            : clipPath,
-        },
-        {
-          duration: 400,
-          easing: 'ease-out',
-          pseudoElement: isDark.value
-            ? '::view-transition-old(root)'
-            : '::view-transition-new(root)',
-        },
-      )
-    })
-}
diff --git a/layouts/default.vue b/layouts/default.vue
index d3d629d..9e60e0a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,8 +1,7 @@
 <template>
-  <div>
-    <NavHeader />
-    <main px-7 pt-10 pb-18>
-      <!-- <router-view v-slot="{ Component, route }">
+  <NavHeader />
+  <main>
+    <!-- <router-view v-slot="{ Component, route }">
         <transition
           enter-active-class="animate-fade-in animate-duration-500"
           leave-active-class="animate-fade-out animate-duration-500"
@@ -13,10 +12,9 @@
           </keep-alive>
         </transition>
       </router-view> -->
-      <slot />
-    </main>
-    <NavFooter />
-    <Cursor />
-    <!-- <Bg /> -->
-  </div>
+    <slot />
+  </main>
+  <NavFooter />
+  <!-- <Cursor /> -->
+  <!-- <Bg /> -->
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 722237a..19b7c2f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -18,7 +18,7 @@ export default defineNuxtConfig({
     '~/styles/vars.css',
   ],
   devtools: {
-    enabled: true,
+    enabled: false,
   },
   // content: {
   //   highlight: {
diff --git a/pages/index.vue b/pages/index.vue
index a1b432b..173772a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,45 +2,11 @@
 useHead({
   title: 'Chris',
 })
-const { data: user } = await useFetch('/api/user')
 </script>
 
 <template>
-  <div prose ma c-primary text-op-64>
-    <!-- <PersonInfo /> -->
-    <h1 fsc gap-5>
-      <UserAvatar />
-    </h1>
-    <p>
-      I'm <strong c-primary>{{ user?.name }}</strong>, front-end engineer 🧑🏻‍💻 & open source enthusiast.
-    </p>
-    <p italic font-dm>
-      「 {{ user?.bio }} 」
-    </p>
-    <p>
-      <i i-fluent-emoji-sports-medal mr-1 />
-      Team member of:
-      <IconsUnoCSS />
-      ,
-      <IconsElk />
-    </p>
-    <p>
-      <i i-fluent-emoji-sparkles mr-1 />
-      Creator of:
-      <IconsOnuUI />
-      ,
-      <IconsUnPreset />
-    </p>
-    <p>
-      <i i-fluent-emoji-party-popper mr-1 />
-      Contributor of:
-      <IconsVite />
-      、
-      <IconsVue />
-      、
-      <IconsNuxt /> & etc.
-    </p>
-
+  <div ma w-fit>
+    <PersonInfo />
     <!-- <p>
       I have diverse interests, including watching anime, mountain climbing, music appreciation, foreign language acquisition, gaming,
       and recently, I have embarked on video editing with the goal of becoming a content
@@ -48,15 +14,8 @@ const { data: user } = await useFetch('/api/user')
       .
     </p> -->
 
-    <div v-if="user" lt-sm-fcc>
-      <GC :username="user.login" :month="8" borderable />
-    </div>
-
-    <p>
-      <a trans text-p-r class="group" hover-op-75 :href="`mailto:${user?.email ?? 'hizyyv@gmail.com'}`">
-        Hire Me
-        <i trans group-hover="ml-2" i-ri:arrow-right-up-line bg-gradient-to-r />
-      </a>
-    </p>
+    <!-- <div v-if="user" lt-sm-fcc>
+      <GC :username="user.login" borderable />
+    </div> -->
   </div>
 </template>
diff --git a/styles/main.css b/styles/main.css
index 7d371fe..b05c827 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,5 +1,11 @@
+html,
+body,
+#__nuxt {
+  min-height: 100%;
+}
+
 body{
-  --uno: h-full trans text bg;
+  --uno: text text-op-64 bg;
 }
 
 body::-webkit-scrollbar {
@@ -10,24 +16,6 @@ body::-webkit-scrollbar {
   --uno: text-primary;
 }
 
-::view-transition-old(root),
-::view-transition-new(root) {
-  animation: none;
-  mix-blend-mode: normal;
-}
-::view-transition-old(root) {
-  z-index: 1;
-}
-::view-transition-new(root) {
-  z-index: 9999;
-}
-.dark::view-transition-old(root) {
-  z-index: 9999;
-}
-.dark::view-transition-new(root) {
-  z-index: 1;
-}
-
 .transLogo {
   view-transition-name: logo;
 }