feat: update avatar

app.vue

@@ -1,17 +1,17 @@
 <script setup>
 useHead({
-  title: 'Chris Zhu',
+  title: 'Chris',
   link: [
-    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+    { rel: 'icon', type: 'image/x-icon', href: '/avatar.png' },
   ],
   meta: [
     { name: 'author', content: 'Chris' },
     { hid: 'description', name: 'description', content: 'Chris\' Portfolio' },
-    { hid: 'keywords', name: 'keywords', content: 'Chris, Chirs Zhu, Blog, Portfolio' },
+    { hid: 'keywords', name: 'keywords', content: 'Chris, Blog, Portfolio' },
     { name: 'twitter:card', content: 'summary' },
     { name: 'twitter:site', content: '@chris_zyyv' },
-    { property: 'og:title', content: 'Chris Zhu' },
-    { property: 'og:image', content: 'https://zyob.top/logo-light.svg' },
+    { property: 'og:title', content: 'Chris' },
+    { property: 'og:image', content: 'https://zyob.top/avatar.png' },
 
     { 'http-equiv': 'pragma', 'content': 'no-cache' },
     { 'http-equiv': 'cache-control', 'content': 'no-cache' },

components/Bg.vue

@@ -1,167 +1,75 @@
 <script setup lang="ts">
-const color = computed(() => isDark.value ? '#fff' : '#0d9488')
-</script>
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
-<template>
-  <div
-    z--1
-    pf
-    top-0
-    left-0
-    overflow-hidden
-    h-screen
-    w-screen
-  >
-    <div un-children="z--200 rounded-full pa" un-children-after="content-none rounded-md">
-      <div class="signup-bg-stars w-1px h-1px" un-after="w-1px h-1px" />
-      <div class="signup-bg-stars-2 w-2px h-2px" un-after="w-2px h-2px" />
-      <div class="signup-bg-stars-3 w-3px h-3px" un-after="w-3px h-3px" />
-    </div>
-    <!-- <div
-      pr
-      w-full
-      h-full
-      un-children="pa rounded-full blur-3xl w-30 md-w-40 lg-w-50 op-50 aspect-1/1 animate-pulse-alt animate-duration-3000"
-    >
-      <div class="top-0 left-1/4 bg-gradient-shape-[circle] from-purple via-pink to-yellow !bg-gradient-radial" />
-      <div class="bottom-1/5 left-1/8 bg-gradient-to-bl from-green via-red to-pink" />
-      <div class="bottom-1/2 left-1/2 bg-gradient-to-tr from-teal via-red to-blue" />
-      <div class="top-1/8 right-1.8 bg-gradient-to-tl from-orange via-blue to-yellow" />
-      <div class="bottom-1/6 right-1/5 bg-gradient-to-tl from-purple via-pink to-yellow" />
-    </div> -->
-  </div>
-</template>
+const distance = ref(200)
 
-<style scoped>
-.signup-bg-stars {
-  box-shadow: 750px 740px rgba(255, 255, 255, 0.2), 1350px 631px v-bind(color),
-    56px 1452px v-bind(color), 554px 1842px v-bind(color),
-    1977px 711px v-bind(color), 1773px 515px v-bind(color),
-    1874px 323px v-bind(color), 382px 762px v-bind(color),
-    1327px 1856px v-bind(color), 921px 157px v-bind(color),
-    1802px 703px v-bind(color), 1612px 757px v-bind(color),
-    1758px 724px v-bind(color), 1706px 307px v-bind(color),
-    616px 487px v-bind(color), 702px 1618px v-bind(color),
-    424px 1839px v-bind(color), 648px 1417px v-bind(color),
-    1671px 319px v-bind(color), 304px 750px v-bind(color),
-    1140px 1473px v-bind(color), 572px 193px v-bind(color),
-    1501px 1292px v-bind(color), 119px 1214px v-bind(color),
-    1637px 1164px v-bind(color), 1540px 1242px v-bind(color),
-    1722px 1715px v-bind(color), 1691px 1010px v-bind(color),
-    236px 433px v-bind(color), 1336px 950px v-bind(color),
-    1168px 1193px v-bind(color), 304px 855px v-bind(color),
-    322px 1892px v-bind(color), 260px 231px v-bind(color),
-    1984px 1336px v-bind(color), 1630px 149px v-bind(color),
-    650px 1260px v-bind(color), 1208px 1841px v-bind(color),
-    1361px 628px v-bind(color), 261px 412px v-bind(color),
-    1105px 869px v-bind(color), 1207px 1819px v-bind(color),
-    1923px 323px v-bind(color), 224px 1390px v-bind(color),
-    1248px 540px v-bind(color), 1024px 1544px v-bind(color),
-    986px 1703px v-bind(color), 425px 1150px v-bind(color),
-    547px 1821px v-bind(color), 1470px 1215px v-bind(color),
-    1511px 1178px v-bind(color), 472px 1850px v-bind(color),
-    1684px 1003px v-bind(color), 1987px 1466px v-bind(color),
-    453px 1830px v-bind(color), 482px 433px v-bind(color),
-    835px 1784px v-bind(color), 1193px 958px v-bind(color),
-    306px 88px v-bind(color), 928px 1389px v-bind(color),
-    349px 1592px v-bind(color), 1053px 1676px v-bind(color),
-    1492px 513px v-bind(color), 1855px 1115px v-bind(color),
-    93px 1316px v-bind(color), 1244px 95px v-bind(color),
-    1429px 545px v-bind(color), 1802px 1521px v-bind(color),
-    479px 714px v-bind(color), 221px 785px v-bind(color);
-  animation: animStar 100s linear infinite;
-}
+const breakpoint = useBreakpoints(breakpointsTailwind)
 
-.signup-bg-stars::after {
-  box-shadow: 750px 740px rgba(255, 255, 255, 0.2), 1350px 631px v-bind(color),
-    56px 1452px v-bind(color), 554px 1842px v-bind(color),
-    1977px 711px v-bind(color), 1773px 515px v-bind(color),
-    1874px 323px v-bind(color), 382px 762px v-bind(color),
-    1327px 1856px v-bind(color), 921px 157px v-bind(color),
-    1802px 703px v-bind(color), 1612px 757px v-bind(color),
-    1758px 724px v-bind(color), 1706px 307px v-bind(color),
-    616px 487px v-bind(color), 702px 1618px v-bind(color),
-    424px 1839px v-bind(color), 648px 1417px v-bind(color),
-    1671px 319px v-bind(color), 304px 750px v-bind(color),
-    1140px 1473px v-bind(color), 572px 193px v-bind(color),
-    1501px 1292px v-bind(color), 119px 1214px v-bind(color),
-    1637px 1164px v-bind(color), 1540px 1242px v-bind(color),
-    1722px 1715px v-bind(color), 1691px 1010px v-bind(color),
-    236px 433px v-bind(color), 1336px 950px v-bind(color),
-    1168px 1193px v-bind(color), 304px 855px v-bind(color),
-    322px 1892px v-bind(color), 260px 231px v-bind(color),
-    1984px 1336px v-bind(color), 1630px 149px v-bind(color),
-    650px 1260px v-bind(color), 1208px 1841px v-bind(color),
-    1361px 628px v-bind(color), 261px 412px v-bind(color),
-    1105px 869px v-bind(color), 1207px 1819px v-bind(color),
-    1923px 323px v-bind(color), 224px 1390px v-bind(color),
-    1248px 540px v-bind(color), 1024px 1544px v-bind(color),
-    986px 1703px v-bind(color), 425px 1150px v-bind(color),
-    547px 1821px v-bind(color), 1470px 1215px v-bind(color),
-    1511px 1178px v-bind(color), 472px 1850px v-bind(color),
-    1684px 1003px v-bind(color), 1987px 1466px v-bind(color),
-    453px 1830px v-bind(color), 482px 433px v-bind(color),
-    835px 1784px v-bind(color), 1193px 958px v-bind(color),
-    306px 88px v-bind(color), 928px 1389px v-bind(color),
-    349px 1592px v-bind(color), 1053px 1676px v-bind(color),
-    1492px 513px v-bind(color), 1855px 1115px v-bind(color),
-    93px 1316px v-bind(color), 1244px 95px v-bind(color),
-    1429px 545px v-bind(color), 1802px 1521px v-bind(color),
-    479px 714px v-bind(color), 221px 785px v-bind(color);
-  opacity: 0.7;
+function generateRandomColor() {
+  const r = Math.floor(Math.random() * 255)
+  const g = Math.floor(Math.random() * 255)
+  const b = Math.floor(Math.random() * 255)
+  const a = (Math.random() * 0.5 + 0.25).toFixed(2)
+  return `rgba(${r},${g},${b},${a})`
 }
 
-.signup-bg-stars-2 {
-  box-shadow: 18px 249px rgba(255, 255, 255, 0.2), 1010px 1194px v-bind(color),
-    1566px 862px v-bind(color), 1522px 47px v-bind(color),
-    1268px 1429px v-bind(color), 685px 239px v-bind(color),
-    511px 1827px v-bind(color), 1862px 1202px v-bind(color),
-    1869px 491px v-bind(color), 912px 344px v-bind(color), 11px 208px v-bind(color),
-    1694px 572px v-bind(color), 779px 662px v-bind(color),
-    1430px 812px v-bind(color), 365px 1526px v-bind(color),
-    185px 823px v-bind(color), 1954px 1745px v-bind(color),
-    445px 1728px v-bind(color), 826px 1711px v-bind(color),
-    1703px 1366px v-bind(color);
-  animation: animStar 150s linear infinite;
-}
+function generateRandomCoordinates() {
+  let x = 0
+  let y = 0
 
-.signup-bg-stars-2::after {
-  box-shadow: 18px 249px rgba(255, 255, 255, 0.2), 1010px 1194px v-bind(color),
-    1566px 862px v-bind(color), 1522px 47px v-bind(color),
-    1268px 1429px v-bind(color), 685px 239px v-bind(color),
-    511px 1827px v-bind(color), 1862px 1202px v-bind(color),
-    1869px 491px v-bind(color), 912px 344px v-bind(color), 11px 208px v-bind(color),
-    1694px 572px v-bind(color), 779px 662px v-bind(color),
-    1430px 812px v-bind(color), 365px 1526px v-bind(color),
-    185px 823px v-bind(color), 1954px 1745px v-bind(color),
-    445px 1728px v-bind(color), 826px 1711px v-bind(color),
-    1703px 1366px v-bind(color);
+  if (process.client) {
+    x = Math.floor(Math.random() * (window.innerWidth - distance.value * 2) + distance.value)
+    y = Math.floor(Math.random() * window.innerHeight * 2)
+  }
+  return { x, y }
 }
 
-.signup-bg-stars-3 {
-  box-shadow: 588px 305px rgba(255, 255, 255, 0.2), 1968px 1036px v-bind(color),
-    970px 941px v-bind(color), 655px 814px v-bind(color), 376px 480px v-bind(color),
-    257px 519px v-bind(color), 1417px 545px v-bind(color),
-    872px 281px v-bind(color), 724px 937px v-bind(color),
-    304px 1811px v-bind(color);
-  animation: animStar 200s linear infinite;
+function generateStyle(count = 40, duration = 100) {
+  const style = []
+  for (let i = 0; i < count; i++) {
+    const { x, y } = generateRandomCoordinates()
+    const color = generateRandomColor()
+    style.push(`${x}px ${y}px ${color} `)
+  }
+  return {
+    boxShadow: style.join(','),
+    animation: `animStar ${duration}s linear infinite`,
+  }
 }
 
-.signup-bg-stars-3::after {
-  box-shadow: 588px 305px rgba(255, 255, 255, 0.2), 1968px 1036px v-bind(color),
-    970px 941px v-bind(color), 655px 814px v-bind(color), 376px 480px v-bind(color),
-    257px 519px v-bind(color), 1417px 545px v-bind(color),
-    872px 281px v-bind(color), 724px 937px v-bind(color),
-    304px 1811px v-bind(color);
-}
+const styles = ref([
+  generateStyle(40),
+  generateStyle(50),
+  generateStyle(60),
+])
+const afterStyles = ref([
+  generateStyle(40),
+  generateStyle(50),
+  generateStyle(60),
+])
+const afterStyle_1_boxShadow = computed(() => afterStyles.value[0].boxShadow)
+const afterStyle_1_animate = computed(() => afterStyles.value[0].animation)
+</script>
 
-@keyframes animStar {
-  from {
-    transform: translateY(0);
-  }
+<template>
+  <div h-screen w-screen z--1 pf top-0 left-0 overflow-hidden>
+    <div un-children="z--200 rounded-full pa">
+      <div class="w-30px h-30px bg-stars" :style="styles[0]" />
+      <div class="signup-bg-stars-2 w-2px h-2px" />
+      <div class="signup-bg-stars-3 w-3px h-3px" />
+    </div>
+  </div>
+</template>
 
-  to {
-    transform: translateY(-2000px);
-  }
+<style lang="scss" scoped>
+.bg-stars::after {
+  content: '';
+  display: block;
+  width: 20px;
+  height: 20px;
+  border-radius: 10px 20px 30px 10px;
+  opacity: 0.7;
+  box-shadow: v-bind(afterStyle_1_boxShadow);
+  animation: v-bind(afterStyle_1_animate);
 }
 </style>

components/Cursor.vue

@@ -53,7 +53,7 @@ watch(() => route.fullPath, () => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 #cursor {
   will-change: transform;
 }

components/ImgBlurHash.ts

@@ -4,6 +4,11 @@ import { getDataUrlFromArr } from '~/composables/utils'
 export default defineComponent({
   inheritAttrs: false,
   props: {
+    // img or bg (background)
+    mode: {
+      type: String,
+      default: 'img',
+    },
     blurhash: {
       type: String,
       required: false,
@@ -20,6 +25,7 @@ export default defineComponent({
   setup(props, { attrs }) {
     const placeholderSrc = ref<string>()
     const isLoaded = ref(false)
+    const isImgMode = props.mode === 'img'
 
     onMounted(() => {
       const img = document.createElement('img')
@@ -39,8 +45,36 @@ export default defineComponent({
       }
     })
 
+    const domTag = isImgMode ? 'img' : 'div'
+
     return () => isLoaded.value || !placeholderSrc.value
-      ? h('img', { ...attrs, src: props.src, srcset: props.srcset })
-      : h('img', { ...attrs, src: placeholderSrc.value })
+      ? h(domTag,
+        {
+          ...attrs,
+          ...(isImgMode
+            ? {
+                src: props.src,
+                srcset: props.srcset,
+              }
+            : {
+                style: {
+                  backgroundImage: `url(${props.src})`,
+                  backgroundSize: 'cover',
+                },
+              }),
+        })
+      : h(domTag, {
+        ...attrs,
+        ...(isImgMode
+          ? {
+              src: placeholderSrc.value,
+            }
+          : {
+              style: {
+                backgroundImage: `url(${placeholderSrc.value})`,
+                backgroundSize: 'cover',
+              },
+            }),
+      })
   },
 })

components/PersonInfo.vue

@@ -54,6 +54,3 @@ const { data: user } = await useFetch('/api/user')
     </div>
   </div>
 </template>
-
-<style lang='scss' scoped>
-</style>

layouts/default.vue

@@ -17,6 +17,6 @@
     </main>
     <NavFooter />
     <Cursor />
-    <!-- <Bg /> -->
+    <Bg />
   </div>
 </template>

pages/index.vue

@@ -10,13 +10,16 @@ const { data: user } = await useFetch('/api/user')
     <!-- <PersonInfo /> -->
     <h1 fsc gap-5>
       <ImgBlurHash
+        mode="bg"
         class="transLogo"
         :src="user!.avatar_url"
-        blurhash="U8B4RsM[08%j00og?ZR.%io$s:jVo$oeM^RP"
+        blurhash="L4A1l2Mx0FN402eiyEx|00-;%MIV"
         alt="Avatar"
-        w-10
-        h-10
-        rounded-full
+        w-30
+        h-30
+        rd="[62%_47%_82%_35%/45%_45%_80%_66%]"
+        will-change="border-radius,transform,opacity"
+        animate-shape
       />
     </h1>
     <p>
@@ -31,7 +34,7 @@ const { data: user } = await useFetch('/api/user')
       <a linkInProse o="#c18139" href="https://github.com/elk-zone" target="_blank"><strong>Elk</strong> <sub bottom-0>farm</sub></a>,
       Creator of
       <i i-my-logos-onu-ui w-1.1em h-1.1em mr-1 />
-      <a linkInProse o="#737da1" href="https://github.com/onu-ui" target="_blank"><strong>Onu UI</strong></a>
+      <a trans linear-text shape-bl class="c-context::#C084FC" from="#ACC1EE" to="#C084FC" href="https://githb.com/onu-ui" target="_blank"><strong>Onu UI</strong></a>
       <i i-fluent-emoji-sparkles ml-1 />
       <br>
       In the community, I am also a ecological contributors of the