init
This commit is contained in:
parent
df103c008b
commit
eefa0248f4
@ -1,4 +0,0 @@
|
|||||||
#!/usr/bin/env sh
|
|
||||||
. "$(dirname -- "$0")/_/husky.sh"
|
|
||||||
|
|
||||||
npm run lint-staged
|
|
||||||
@ -4,10 +4,10 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link
|
<link
|
||||||
rel="shortcut icon"
|
rel="shortcut icon"
|
||||||
href="https://blog.sunguoqi.com/images/favicon.png"
|
href="https://img.ocer.cc/images/2024/02/24/3cH8.th.jpeg"
|
||||||
/>
|
/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>小孙同学-热爱可抵岁月漫长</title>
|
<title>吴阴天</title>
|
||||||
<script
|
<script
|
||||||
charset="UTF-8"
|
charset="UTF-8"
|
||||||
id="LA_COLLECT"
|
id="LA_COLLECT"
|
||||||
|
|||||||
@ -9,7 +9,6 @@
|
|||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"lint:fix": "eslint . --fix",
|
"lint:fix": "eslint . --fix",
|
||||||
"prepare": "husky install",
|
|
||||||
"lint-staged": "lint-staged"
|
"lint-staged": "lint-staged"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
@ -22,7 +21,6 @@
|
|||||||
"@vitejs/plugin-vue": "^5.0.4",
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
"eslint": "^8.56.0",
|
"eslint": "^8.56.0",
|
||||||
"eslint-plugin-format": "^0.1.0",
|
"eslint-plugin-format": "^0.1.0",
|
||||||
"husky": "^9.0.10",
|
|
||||||
"lint-staged": "^15.2.2",
|
"lint-staged": "^15.2.2",
|
||||||
"sass": "^1.70.0",
|
"sass": "^1.70.0",
|
||||||
"unocss": "^0.58.5",
|
"unocss": "^0.58.5",
|
||||||
|
|||||||
291
src/App.vue
291
src/App.vue
@ -1,123 +1,132 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, reactive } from 'vue'
|
import { onMounted, reactive } from "vue";
|
||||||
import StarTrails from './components/StarTrails.vue'
|
import StarTrails from "./components/StarTrails.vue";
|
||||||
|
|
||||||
|
const BeianLink = "https://beian.miit.gov.cn/";
|
||||||
|
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
titleList: [
|
titleList: [
|
||||||
'热爱……',
|
"你好，请多指教",
|
||||||
'敬畏之心！',
|
"给时光以生命<br/>给岁月以文明",
|
||||||
'赞美之心！',
|
"当你在凝视着网页的时候<br/>网页也正在凝视着你",
|
||||||
'我很好奇！',
|
"人生如宇宙<br/>虽深邃未知<br/>但星辰闪烁寓意希望"
|
||||||
'你好，请多指教',
|
],
|
||||||
'*舒缓的现代音乐*',
|
navLinks: [
|
||||||
'希望能成为有趣的人',
|
{
|
||||||
'相信美好的事情即将发生',
|
name: "博 客",
|
||||||
'平凡的日常正奇迹的发生着',
|
link: "https://world.ocer.cc",
|
||||||
'你所热爱的<br/>就是你的生活',
|
},
|
||||||
'给时光以生命<br/>给岁月以文明',
|
{
|
||||||
'路虽远行则将至<br/>事虽难做则必成',
|
name: "相 册",
|
||||||
'一望无际的迷雾中<br/>有人在寻找光明',
|
link: "https://camera.sunguoqi.com",
|
||||||
'当你在凝视着网页的时候<br/>网页也正在凝视着你',
|
},
|
||||||
|
{
|
||||||
|
name: "运 动",
|
||||||
|
link: "https://bicycling.sunguoqi.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "留 言",
|
||||||
|
link: "https://blog.sunguoqi.com/comments",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
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: [{
|
myProjects: [
|
||||||
name: 'Home',
|
{
|
||||||
description: '个人简介、主页、引导页',
|
name: "Blog",
|
||||||
link: 'https://github.com/sun0225SUN/home',
|
description: "技术、工作相关的博客",
|
||||||
}, {
|
link: "https://world.ocer.cc",
|
||||||
name: 'Blog',
|
},
|
||||||
description: '个人博客，学习&随笔',
|
{
|
||||||
link: 'https://github.com/sun0225SUN/blog',
|
name: "Wiki",
|
||||||
}, {
|
description: "番剧、游戏相关的档案馆",
|
||||||
name: 'Brain',
|
link: "https://wiki.ocer.cc",
|
||||||
description: '知识库、第二大脑',
|
},
|
||||||
link: 'https://github.com/sun0225SUN/brain',
|
{
|
||||||
}, {
|
name: "BBTime",
|
||||||
name: 'Camera',
|
description: "有的没的碎碎念",
|
||||||
description: '摄影相册',
|
link: "https://now.ocer.cc",
|
||||||
link: 'https://github.com/sun0225SUN/camera',
|
},
|
||||||
}, {
|
{
|
||||||
name: 'Camera Tools',
|
name: "Reflection On Life",
|
||||||
description: '摄影工具箱',
|
description: "人生思考",
|
||||||
link: 'https://github.com/sun0225SUN/camera-tools',
|
link: "https://land.ocer.cc",
|
||||||
}, {
|
},
|
||||||
name: 'Bicycling',
|
{
|
||||||
description: '骑行主页',
|
name: "Miao",
|
||||||
link: 'https://github.com/sun0225SUN/bicycling',
|
description: "我的猫",
|
||||||
}, {
|
link: "https://miao.ocer.cc",
|
||||||
name: 'Life-Map',
|
},
|
||||||
description: '人生地图、点亮足迹',
|
{
|
||||||
link: 'https://github.com/sun0225SUN/life-map',
|
name: "Image",
|
||||||
}, {
|
description: "我的图床",
|
||||||
name: 'Coder',
|
link: "https://img.ocer.cc",
|
||||||
description: '闪闪发光的程序们',
|
},
|
||||||
link: 'https://github.com/sun0225SUN/coder',
|
{
|
||||||
}, {
|
name: "Gitea",
|
||||||
name: 'Starter',
|
description: "代码仓库",
|
||||||
description: '前端项目起手架模版',
|
link: "https://gitea.ocer.cc",
|
||||||
link: 'https://github.com/sun0225SUN/starter',
|
},
|
||||||
}],
|
{
|
||||||
|
name: "more",
|
||||||
|
description: "敬请期待",
|
||||||
|
link: "https://ocer.cc",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
socialLinks: [{
|
socialLinks: [
|
||||||
icon: '<i i-ant-design-github-outlined />',
|
{
|
||||||
link: 'https://github.com/sun0225SUN',
|
icon: "<i i-ant-design-qq-outlined />",
|
||||||
label: 'Github',
|
link: "tencent://message/?uin=QQ号码&Site=网站名称&Menu=yes",
|
||||||
}, {
|
label: "QQ",
|
||||||
icon: '<i i-ant-design-x-outlined />',
|
},
|
||||||
link: 'https://twitter.com/sun0225SUN',
|
{
|
||||||
label: 'Twitter',
|
icon: "<i i-ant-design-wechat-outlined />",
|
||||||
}, {
|
link: "",
|
||||||
icon: '<i i-ant-design-youtube-outlined />',
|
label: "Wechat",
|
||||||
link: 'https://youtube.com/@sun0225SUN',
|
},
|
||||||
label: 'YouTube',
|
],
|
||||||
}, {
|
});
|
||||||
icon: '<i i-ant-design-bilibili-outlined />',
|
|
||||||
link: 'https://space.bilibili.com/448488855/',
|
|
||||||
label: 'Bilibili',
|
|
||||||
}],
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 背景固定
|
// 背景固定
|
||||||
window.addEventListener('scroll', () => {
|
window.addEventListener("scroll", () => {
|
||||||
const bg = document.getElementById('background')
|
const bg = document.getElementById("background");
|
||||||
const scrollTop = window.scrollY
|
const scrollTop = window.scrollY;
|
||||||
if (scrollTop > 0.7 * window.innerHeight)
|
if (scrollTop > 0.7 * window.innerHeight) bg.classList.add("fixed");
|
||||||
bg.classList.add('fixed')
|
else bg.classList.remove("fixed");
|
||||||
else
|
});
|
||||||
bg.classList.remove('fixed')
|
});
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!-- 导航 -->
|
<!-- 导航 -->
|
||||||
<nav absolute fixed bottom-4 left-4 z-20>
|
<!-- <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>
|
<div
|
||||||
<a :href="item.link" opacity-75 text-white tracking-widest hover:opacity-100>
|
v-for="(item, index) in data.navLinks"
|
||||||
|
:key="index"
|
||||||
|
my-6
|
||||||
|
text-3
|
||||||
|
text-white
|
||||||
|
wv
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
:href="item.link"
|
||||||
|
opacity-75
|
||||||
|
text-white
|
||||||
|
tracking-widest
|
||||||
|
hover:opacity-100
|
||||||
|
>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav> -->
|
||||||
|
|
||||||
<!-- 主体 -->
|
<!-- 主体 -->
|
||||||
<main bg-transparent absolute w-full top-75vh z-10>
|
<main bg-transparent absolute w-full top-75vh z-10>
|
||||||
<!-- 大标题 -->
|
<!-- 大标题 -->
|
||||||
<section ml-15vw absolute>
|
<section ml-15vw absolute>
|
||||||
<div text-10 text-white font-bold tracking-widest v-html="data.titleList[Math.floor(Math.random() * data.titleList.length)]" />
|
<div text-10 text-white font-bold tracking-widest v-html="data.titleList[Math.floor(Math.random() * data.titleList.length)]
|
||||||
|
" />
|
||||||
<div flex items-center>
|
<div flex items-center>
|
||||||
<div mr-4 flex gap-2>
|
<div mr-4 flex gap-2>
|
||||||
<div bg-red rounded-full h-3 w-3 />
|
<div bg-red rounded-full h-3 w-3 />
|
||||||
@ -125,50 +134,37 @@ onMounted(() => {
|
|||||||
<div bg-green rounded-full h-3 w-3 />
|
<div bg-green rounded-full h-3 w-3 />
|
||||||
</div>
|
</div>
|
||||||
<div text-4 text-white tracking-widest>
|
<div text-4 text-white tracking-widest>
|
||||||
小孙同学祝您今天快乐
|
因为我们的相遇，世间又多了一个奇迹。
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<!-- 个人简介 -->
|
<!-- 个人简介 -->
|
||||||
<section mx-9vw mt-90>
|
<section mx-9vw mt-90>
|
||||||
<!-- 关于我 -->
|
<!-- 关于我 -->
|
||||||
<div text-bold mb-4 ml-10 text-8 text-white>
|
<div text-bold mb-4 ml-10 text-8 text-white>你好 我是吴阴天</div>
|
||||||
About Me
|
<div mx-10 mb-10 flex text-5 justify-between>
|
||||||
</div>
|
<div class="text-white/90">
|
||||||
<div mx-10 mb-10 flex justify-between>
|
<p leading-10>一个浪漫现实主义作家</p>
|
||||||
<div class="text-white/80">
|
<p leading-10>我始终在创作一本名为《<b>人生</b>》的书</p>
|
||||||
|
<p leading-10><b>科技</b>、<b>音乐</b>、<b>哲学</b>是书中的主旋律</p>
|
||||||
<p leading-10>
|
<p leading-10>
|
||||||
嗨，你好，我是小孙同学。
|
<b>浪漫</b>、<b>可爱</b>、<b>阳光</b>是我最喜欢的形容词
|
||||||
</p>
|
|
||||||
<p leading-10>
|
|
||||||
热爱编程、摄影、读书、旅行。
|
|
||||||
</p>
|
|
||||||
<p leading-10>
|
|
||||||
热爱计算机科学和 IT 互联网事业，希望能成为一名优秀的开发者。
|
|
||||||
</p>
|
|
||||||
<p leading-10>
|
|
||||||
我们正在让这个世界变得更加美好，通过代码的重复使用和延展构建完美体系。
|
|
||||||
</p>
|
|
||||||
<p leading-10>
|
|
||||||
We're making the world a better place. Through constructing elegant hierarchies for maximum code reuse and extensibility.
|
|
||||||
</p>
|
</p>
|
||||||
|
<p leading-10>我期待各种鲜活角色的登场</p>
|
||||||
|
<p leading-10>也渴望无数精彩故事的落幕</p>
|
||||||
|
<p leading-10>我们的相遇</p>
|
||||||
|
<p leading-10>或许是一段新旅途的开始......</p>
|
||||||
</div>
|
</div>
|
||||||
<img hidden rounded-full h-25 w-25 transition md:block hover:-translate-y--2 src="https://blog.sunguoqi.com/images/avatar.jpg" alt="avatar">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 我的技能 -->
|
<img hidden rounded-full h-25 w-25 transition md:block hover:-translate-y--2
|
||||||
<!-- <div text-bold mb-2 ml-10 text-8 text-white>
|
src="https://img.ocer.cc/images/2024/02/24/3cH8.th.jpeg" alt="avatar" />
|
||||||
My Skills
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- 我的项目 -->
|
|
||||||
<div text-bold mb-2 ml-10 text-8 text-white>
|
|
||||||
Projects
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div text-bold mb-2 ml-10 text-8 text-white>Projects</div> -->
|
||||||
<div mb-10 flex flex-wrap justify-between>
|
<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">
|
<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">
|
<a :href="item.link" target="_blank">
|
||||||
<div class="bg-white/5 hover:bg-white/10" p-2 rounded-lg shadow-md flex-col transition backdrop-blur-3xl backdrop-opacity-60 hover:backdrop-opacity-100 hover:-translate-y-2>
|
<div class="bg-white/5 hover:bg-white/10" p-2 rounded-lg shadow-md flex-col transition backdrop-blur-3xl
|
||||||
|
backdrop-opacity-60 hover:backdrop-opacity-100 hover:-translate-y-2>
|
||||||
<div text-bold opacity-75 text-white>
|
<div text-bold opacity-75 text-white>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</div>
|
</div>
|
||||||
@ -181,29 +177,48 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 社交链接 -->
|
<!-- 社交链接 -->
|
||||||
<div text-bold mb-2 ml-10 text-8 text-white>
|
<!-- <div text-bold mb-2 ml-10 text-8 text-white>Find Me</div>
|
||||||
Find Me
|
|
||||||
</div>
|
|
||||||
<div flex flex-wrap justify-between>
|
<div flex flex-wrap justify-between>
|
||||||
<div v-for="(item, index) in data.socialLinks" :key="index" mx-10 my-4 class="basis-1/6">
|
<div
|
||||||
<a class="bg-white/5 hover:bg-white/10" p-2 rounded-lg shadow-md flex-col justify-between items-center transition backdrop-blur-3xl backdrop-opacity-60 hover:backdrop-opacity-100 hover:-translate-y-2 :href="item.link">
|
v-for="(item, index) in data.socialLinks"
|
||||||
|
:key="index"
|
||||||
|
mx-10
|
||||||
|
my-4
|
||||||
|
class="basis-1/6"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="bg-white/5 hover:bg-white/10"
|
||||||
|
p-2
|
||||||
|
rounded-lg
|
||||||
|
shadow-md
|
||||||
|
flex-col
|
||||||
|
justify-between
|
||||||
|
items-center
|
||||||
|
transition
|
||||||
|
backdrop-blur-3xl
|
||||||
|
backdrop-opacity-60
|
||||||
|
hover:backdrop-opacity-100
|
||||||
|
hover:-translate-y-2
|
||||||
|
:href="item.link"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
<div mb-1 text-white f-c-c v-html="item.icon" />
|
<div mb-1 text-white f-c-c v-html="item.icon" />
|
||||||
<div text-bold opacity-75 text-white>{{ item.label }}</div>
|
<div text-bold opacity-75 text-white>{{ item.label }}</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- 底部 -->
|
<!-- 底部 -->
|
||||||
<footer mb-5>
|
<footer mb-5>
|
||||||
<div class="text-white/60" mt-50 f-c-c>
|
<div class="text-white/60" mt-50 f-c-c>
|
||||||
<i i-ant-design-environment-outlined mr-1 />
|
<i i-ant-design-environment-outlined mr-1 />
|
||||||
<p>路虽远行则将至，事虽难做则必成</p>
|
<p>生活的本质是向前</p>
|
||||||
<i i-ant-design-environment-outlined ml-1 />
|
<i i-ant-design-environment-outlined ml-1 />
|
||||||
</div>
|
</div>
|
||||||
<div class="text-white/60" mt-2 f-c-c gap-4>
|
<div class="text-white/60" mt-2 f-c-c gap-4>
|
||||||
<div>皖 ICP 备 2021010058 号</div>
|
<a target="_blank" class="text-white/60" :href="BeianLink">浙ICP备2024066515号</a>
|
||||||
<div>© 2024 小孙同学</div>
|
<div>©2024 吴阴天</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user