feat: 优化首页个人名片与内容入口

2026-07-16 23:51:55 +08:00
parent 92360e4f49
commit 991264c32c
25 changed files with 1158 additions and 130 deletions
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import IconCloud from 'vue-icon-cloud'
+
+defineProps<{
+  src: string
+  alt: string
+}>()
+
+const techSlugs = [
+  'javascript',
+  'typescript',
+  'vuedotjs',
+  'nuxt',
+  'tailwindcss',
+  'html5',
+  'css',
+  'nodedotjs',
+  'go',
+  'docker',
+  'git',
+  'github',
+  'nginx',
+  'postgresql',
+  'linux',
+  'cloudflare',
+]
+
+const cloudImages = techSlugs.map(slug => `https://cdn.simpleicons.org/${slug}/${slug}`)
+</script>
+
+<template>
+  <div class="avatar-cloud">
+    <IconCloud :images="cloudImages" />
+
+    <div class="avatar-core">
+      <img
+        :src="src"
+        :alt="alt"
+        class="avatar-image"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.avatar-cloud {
+  --cloud-size: clamp(12rem, 31vw, 14rem);
+  --avatar-size: clamp(6.4rem, 19vw, 7.35rem);
+
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: var(--cloud-size);
+  height: var(--cloud-size);
+  flex-shrink: 0;
+}
+
+.avatar-cloud::before {
+  content: "";
+  position: absolute;
+  inset: 17%;
+  border-radius: 9999px;
+  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 64%);
+  opacity: 0.8;
+}
+
+.avatar-cloud :deep(canvas) {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.12));
+}
+
+.avatar-core {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  pointer-events: none;
+}
+
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
+  border-radius: 9999px;
+  object-fit: cover;
+  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
+}
+
+.dark .avatar-image {
+  border-color: color-mix(in srgb, var(--color-text) 14%, transparent);
+  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
+}
+</style>