refactor: some page

zyyv · May 15, 2024 · c194517 · c194517
1 parent 1c9333e
commit c194517
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 187 deletions.
diff --git 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
@@ -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
@@ -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 ?? '[email protected]'}`">
+          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
@@ -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
diff --git 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
@@ -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
@@ -2,61 +2,20 @@
 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
       <IconsBilibili />
       .
     </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 ?? '[email protected]'}`">
-        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
@@ -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;
 }