From 8e776cbc7cd823e4f72e9ad12592951e1fa3b14e Mon Sep 17 00:00:00 2001
From: "guoqi.sun" <sun412926@gmail.com>
Date: Tue, 13 Feb 2024 18:41:37 +0800
Subject: [PATCH] :zap: perf: optimize code structure
---
src/App.vue | 297 +++++++++++++++++++++++++---------------------------
1 file changed, 141 insertions(+), 156 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 29b89a4..a373f4a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,8 +2,21 @@
import { onMounted, reactive } from 'vue'
import StarTrails from './components/StarTrails.vue'
-// 数据
const data = reactive({
+ navLinks: [{
+ name: '博 客',
+ link: 'https://blog.sunguoqi.com',
+ }, {
+ name: '相 册',
+ link: 'https://camera.sunguoqi.com',
+ }, {
+ name: '运 动',
+ link: 'https://bicycling.sunguoqi.com',
+ }, {
+ name: '留 言',
+ link: 'https://blog.sunguoqi.com/comments',
+ }],
+
myProjects: [{
name: 'Home',
description: '个人简介、主页、引导页',
@@ -41,18 +54,23 @@ const data = reactive({
description: '前端项目起手架模版',
link: 'https://github.com/sun0225SUN/starter',
}],
- navLinks: [{
- name: '博 客',
- link: 'https://blog.sunguoqi.com',
+
+ socialLinks: [{
+ icon: '<i i-ant-design-github-outlined />',
+ link: '',
+ label: 'Github',
}, {
- name: '相 册',
- link: 'https://camera.sunguoqi.com',
+ icon: '<i i-ant-design-x-outlined />',
+ link: '',
+ label: 'Github',
}, {
- name: '运 动',
- link: 'https://bicycling.sunguoqi.com',
+ icon: '<i i-ant-design-youtube-outlined />',
+ link: '',
+ label: 'Github',
}, {
- name: '留 言',
- link: 'https://blog.sunguoqi.com/comments',
+ icon: '<i i-ant-design-bilibili-outlined />',
+ link: '',
+ label: 'Github',
}],
})
@@ -70,157 +88,124 @@ onMounted(() => {
</script>
<template>
- <div id="background" absolute wh-full left-0 top-0>
- <!-- 渐变 -->
- <div to-black-500 absolute h-80vh w-full bottom--30vh left-0 from-black bg-gradient-to-t />
- <!-- 星轨 -->
- <StarTrails />
- <!-- 拖底 -->
- <div bg-black h-45vh />
- </div>
-
- <main bg-black bg-transparent absolute w-full top-0>
- <div absolute w-full top-70vh>
- <!-- 落地页 -->
- <div ml-15vw>
- <div text-10 text-white font-bold tracking-widest>
- 你所热爱的<br>
- 就是你的生活
- </div>
- <div flex items-center>
- <div mr-4 flex gap-2>
- <div bg-red rounded-full h-3 w-3 />
- <div bg-yellow rounded-full h-3 w-3 />
- <div bg-green rounded-full h-3 w-3 />
- </div>
- <div text-4 text-white tracking-widest>
- 小孙同学祝您今天快乐
- </div>
- </div>
- </div>
- <!-- 简介内容 -->
- <div mx-10vw mt-70>
- <div text-bold mb-4 ml-10 text-8 text-white>
- About Me
- </div>
- <div mx-10 mb-10 flex justify-between>
- <div class="text-white/80">
- <p leading-8>
- 嗨，你好，我是小孙同学。
- </p>
- <p leading-8>
- 热爱编程、摄影、读书、旅行。
- </p>
- <p leading-8>
- 热爱计算机科学和 IT 互联网事业，希望能成为一名优秀的开发者。
- </p>
- <p leading-8>
- 我们正在让这个世界变得更加美好，通过代码的重复使用和延展构建完美体系。
- </p>
- <p leading-8>
- We're making the world a better place. Through constructing elegant hierarchies for maximum code reuse and extensibility.
- </p>
- </div>
- <div>
- <img hidden rounded-full w-25 md:block src="https://blog.sunguoqi.com/images/avatar.jpg" alt="">
- </div>
- </div>
- <!-- <div text-bold mb-2 ml-10 text-8 text-white>
- My Skills
- </div> -->
- <div text-bold mb-2 ml-10 text-8 text-white>
- Projects
- </div>
- <div mb-10 flex flex-wrap justify-between>
- <div v-for="(item, index) in data.myProjects" :key="index" mx-10 my-4 class="basis-3/4 md:basis-1/6">
- <a :href="item.link">
- <div p-2 class="bg-white/5 hover:bg-white/10" rounded-lg shadow-md flex-col backdrop-blur-3xl backdrop-opacity-60 hover:skew-y-1 hover:backdrop-opacity-100>
- <div class="text-white" text-bold opacity-75>
- {{ item.name }}
- </div>
- <div class="text-white" opacity-50>
- {{ item.description }}
- </div>
- </div>
- </a>
- </div>
- </div>
- <div text-bold mb-2 ml-10 text-8 text-white>
- Find Me
- </div>
- <div flex flex-wrap justify-between>
- <div mx-10 my-4 class="basis-1/6" hover:skew-y-1>
- <div p-2 class="bg-white/5 hover:bg-white/10" rounded-lg shadow-md flex-col justify-between items-center backdrop-blur-3xl backdrop-opacity-60 hover:skew-y-1 hover:backdrop-opacity-100>
- <a href="https://github.com/sun0225SUN">
- <div mb-1 text-white f-c-c>
- <i i-ant-design-github-outlined />
- </div>
- <div text-bold opacity-75 text-white>
- Github
- </div>
- </a>
- </div>
- </div>
- <div mx-10 my-4 class="basis-1/6" hover:skew-y-1>
- <div p-2 class="bg-white/5 hover:bg-white/10" rounded-lg shadow-md flex-col justify-between items-center backdrop-blur-3xl backdrop-opacity-60 hover:skew-y-1 hover:backdrop-opacity-100>
- <a href="https://twitter.com/sun0225SUN">
- <div mb-1 text-white f-c-c>
- <i i-ant-design-x-outlined />
- </div>
- <div text-bold opacity-75 text-white>
- Twitter
- </div>
- </a>
- </div>
- </div>
- <div mx-10 my-4 class="basis-1/6" hover:skew-y-1>
- <div p-2 class="bg-white/5 hover:bg-white/10" rounded-lg shadow-md flex-col justify-between items-center backdrop-blur-3xl backdrop-opacity-60 hover:skew-y-1 hover:backdrop-opacity-100>
- <a href="https://youtube.com/@sun0225SUN">
- <div mb-1 text-white f-c-c>
- <i i-ant-design-youtube-outlined />
- </div>
- <div text-bold opacity-75 text-white>
- YouTube
- </div>
- </a>
- </div>
- </div>
- <div mx-10 my-4 class="basis-1/6" hover:skew-y-1>
- <div p-2 class="bg-white/5 hover:bg-white/10" rounded-lg shadow-md flex-col justify-between items-center backdrop-blur-3xl backdrop-opacity-60 hover:skew-y-1 hover:backdrop-opacity-100>
- <a href="https://space.bilibili.com/448488855/">
- <div mb-1 text-white f-c-c>
- <i i-ant-design-bilibili-outlined />
- </div>
- <div text-bold opacity-75 text-white>
- Bilibili
- </div>
- </a>
- </div>
- </div>
- </div>
- </div>
-
- <footer>
- <div mt-20 f-c-c class="text-white/60" hover:skew-y-1>
- <i i-ant-design-environment-outlined mr-1 />
- <div>路虽远行则将至，事虽难做则必成</div>
- <i i-ant-design-environment-outlined ml-1 />
- </div>
- <div mt-2 f-c-c class="text-white/60" gap-4>
- <div>皖 ICP 备 2021010058 号</div>
- <div>© 2024 小孙同学</div>
- </div>
- </footer>
- </div>
- </main>
-
- <nav absolute fixed bottom-4 left-4>
+ <!-- 导航 -->
+ <nav absolute fixed bottom-4 left-4 z-20>
<div v-for="(item, index) in data.navLinks" :key="index" my-6 text-3 text-white wv>
- <a class="text-white" :href="item.link" opacity-75 tracking-widest hover:opacity-100>
+ <a :href="item.link" opacity-75 text-white tracking-widest hover:opacity-100>
{{ item.name }}
</a>
</div>
</nav>
+
+ <!-- 主体 -->
+ <main bg-transparent absolute w-full top-72vh z-10>
+ <!-- 大标题 -->
+ <section ml-15vw absolute>
+ <div text-10 text-white font-bold tracking-widest>
+ 你所热爱的<br>
+ 就是你的生活
+ </div>
+ <div flex items-center>
+ <div mr-4 flex gap-2>
+ <div bg-red rounded-full h-3 w-3 />
+ <div bg-yellow rounded-full h-3 w-3 />
+ <div bg-green rounded-full h-3 w-3 />
+ </div>
+ <div text-4 text-white tracking-widest>
+ 小孙同学祝您今天快乐
+ </div>
+ </div>
+ </section>
+ <!-- 个人简介 -->
+ <section mx-9vw mt-110>
+ <!-- 关于我 -->
+ <div text-bold mb-4 ml-10 text-8 text-white>
+ About Me
+ </div>
+ <div mx-10 mb-10 flex justify-between>
+ <div class="text-white/80">
+ <p leading-8>
+ 嗨，你好，我是小孙同学。
+ </p>
+ <p leading-8>
+ 热爱编程、摄影、读书、旅行。
+ </p>
+ <p leading-8>
+ 热爱计算机科学和 IT 互联网事业，希望能成为一名优秀的开发者。
+ </p>
+ <p leading-8>
+ 我们正在让这个世界变得更加美好，通过代码的重复使用和延展构建完美体系。
+ </p>
+ <p leading-8>
+ We're making the world a better place. Through constructing elegant hierarchies for maximum code reuse and extensibility.
+ </p>
+ </div>
+ <div>
+ <img hidden rounded-full w-25 md:block src="https://blog.sunguoqi.com/images/avatar.jpg" alt="avatar">
+ </div>
+ </div>
+
+ <!-- 我的技能 -->
+ <!-- <div text-bold mb-2 ml-10 text-8 text-white>
+ My Skills
+ </div> -->
+
+ <!-- 我的项目 -->
+ <div text-bold mb-2 ml-10 text-8 text-white>
+ Projects
+ </div>
+ <div mb-10 flex flex-wrap justify-between>
+ <div v-for="(item, index) in data.myProjects" :key="index" mx-10 my-4 class="basis-3/4 md:basis-1/6">
+ <a :href="item.link">
+ <div p-2 class="bg-white/5 hover:bg-white/10" rounded-lg shadow-md flex-col backdrop-blur-3xl backdrop-opacity-60 hover:skew-y-1 hover:backdrop-opacity-100>
+ <div class="text-white" text-bold opacity-75>
+ {{ item.name }}
+ </div>
+ <div class="text-white" opacity-50>
+ {{ item.description }}
+ </div>
+ </div>
+ </a>
+ </div>
+ </div>
+
+ <!-- 社交链接 -->
+ <div text-bold mb-2 ml-10 text-8 text-white>
+ Find Me
+ </div>
+ <div flex flex-wrap justify-between>
+ <div v-for="(item, index) in data.socialLinks" :key="index" mx-10 my-4 class="basis-1/6" hover:skew-y-1>
+ <div p-2 class="bg-white/5 hover:bg-white/10" rounded-lg shadow-md flex-col justify-between items-center backdrop-blur-3xl backdrop-opacity-60 hover:skew-y-1 hover:backdrop-opacity-100>
+ <a :href="item.link">
+ <div mb-1 text-white f-c-c v-html="item.icon" />
+ <div text-bold opacity-75 text-white>{{ item.label }}</div>
+ </a>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- 底部 -->
+ <footer>
+ <div mt-20 f-c-c class="text-white/60" hover:skew-y-1>
+ <i i-ant-design-environment-outlined mr-1 />
+ <div>路虽远行则将至，事虽难做则必成</div>
+ <i i-ant-design-environment-outlined ml-1 />
+ </div>
+ <div mt-2 f-c-c class="text-white/60" gap-4>
+ <div>皖 ICP 备 2021010058 号</div>
+ <div>© 2024 小孙同学</div>
+ </div>
+ </footer>
+ </main>
+
+ <!-- 背景 -->
+ <div id="background" absolute wh-full left-0 top-0 z-0>
+ <!-- 渐变阴影 -->
+ <div to-black-500 absolute h-80vh w-full bottom--30vh left-0 from-black bg-gradient-to-t />
+ <!-- 星轨背景 -->
+ <StarTrails pb-45vh bg-black />
+ </div>
</template>
<style lang="scss" scoped>