mirror of
https://github.com/KazooTTT/kazoottt-blog.git
synced 2025-06-22 18:21:33 +08:00
213 lines
7.0 KiB
Plaintext
213 lines
7.0 KiB
Plaintext
---
|
||
import PageLayout from '../layouts/BaseLayout.astro'
|
||
import Section from '../components/Section.astro'
|
||
import Card from '../components/Card.astro'
|
||
import ProjectCard from '../components/ProjectCard.astro'
|
||
import Label from '../components/Label.astro'
|
||
import SkillLayout from '../components/SkillLayout.astro'
|
||
import PostPreview from '@/components/blog/PostPreview.astro'
|
||
import { Image } from 'astro:assets'
|
||
import kazootttAvatar from '../assets/kazoottt-avatar.jpeg'
|
||
|
||
import { getAllPosts, sortMDByDate } from '@/utils'
|
||
import { Icon } from 'astro-icon/components'
|
||
import GiscusComment from '@/components/GiscusComment'
|
||
|
||
const frontend = ['react(熟悉)', 'vue2(了解)', 'vtk.js(了解)', 'next.js', 'tailwindcss']
|
||
const backend = ['nodejs(熟悉)', 'python(了解)', 'elysiajs', 'nextjs', 'cloudflare d1', 'prisma']
|
||
const others = ['大模型提示词调优']
|
||
const languages = ['英文']
|
||
|
||
const MAX_POSTS = 10
|
||
const MAX_PROJECTS = 6
|
||
const allPosts = await getAllPosts()
|
||
const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
|
||
|
||
// Direct projects
|
||
const directProjects = [
|
||
{
|
||
title: '油猴脚本合集',
|
||
description: '收录了我开发的一些油猴脚本',
|
||
url: 'https://greasyfork.org/zh-CN/users/904256-kazoottt-wang',
|
||
imagePath: '/src/assets/greasyFork.png',
|
||
altText: 'greasyFork'
|
||
}
|
||
]
|
||
|
||
// Get projects from markdown
|
||
const mdProjects = allPosts
|
||
.filter((post) => post.data.category === '项目-已结项')
|
||
.sort((a, b) => {
|
||
if (a.data.pinned && !b.data.pinned) return -1
|
||
if (!a.data.pinned && b.data.pinned) return 1
|
||
return new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
|
||
})
|
||
.map((post) => ({
|
||
title: post.data.title,
|
||
description: post.data.description || '',
|
||
url: post.data.projectUrl ? post.data.projectUrl : `/blog/${post.slug}`,
|
||
imagePath: post.data.coverImage,
|
||
altText: post.data.title,
|
||
isExternal: !!post.data.projectUrl
|
||
}))
|
||
|
||
// Combine both types of projects
|
||
const projects = [...directProjects, ...mdProjects].slice(0, MAX_PROJECTS)
|
||
---
|
||
|
||
<PageLayout meta={{ title: 'Home' }}>
|
||
<div class='flex w-full flex-col gap-y-10'>
|
||
<section class='flex flex-col items-center gap-y-7'>
|
||
<Image
|
||
src={kazootttAvatar}
|
||
alt='profile photo'
|
||
class='h-28 w-auto rounded-full bg-[#FFBE98] p-1'
|
||
loading='eager'
|
||
/>
|
||
|
||
<div class='flex flex-col items-center gap-y-4'>
|
||
<h1 class='text-3xl font-bold'>KazooTTT</h1>
|
||
<a href='https://wakatime.com/@d3dc2570-e4bf-4469-b0c2-127b495e8b91'
|
||
><img
|
||
src='https://wakatime.com/badge/user/d3dc2570-e4bf-4469-b0c2-127b495e8b91.svg'
|
||
alt='Total time coded since Nov 4 2017'
|
||
/></a
|
||
>
|
||
<div class='flex flex-wrap justify-center gap-x-4 gap-y-3'>
|
||
<Label title='github' as='a' href='https://github.com/KazooTTT' target='_blank'>
|
||
<Icon name='github' slot='icon' />
|
||
</Label>
|
||
<Label title='twitter' as='a' href='https://x.com/KazooTTT' target='_blank'>
|
||
<Icon name='twitter' slot='icon' />
|
||
</Label>
|
||
<Label title='photo' as='a' href='https://unsplash.com/@kazoottt' target='_blank'>
|
||
<Icon name='round-photo' slot='icon' />
|
||
</Label>
|
||
<Label title='notes' as='a' href='https://notes.kazoottt.top/' target='_blank'>
|
||
<Icon name='link' slot='icon' />
|
||
</Label>
|
||
<Label title='汇总' as='a' href='https://bento.me/KazooTTT' target='_blank'>
|
||
<Icon name='link' slot='icon' />
|
||
</Label>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Section title='About'>
|
||
<div class='text-muted-foreground space-y-2'>
|
||
<p>你是一位专注于前端开发的工程师，深度使用 React 技术栈。通过持续学习和实践，你在现代前端工程化方面积累了丰富经验。</p>
|
||
<p>你的技术栈：</p>
|
||
<ul class="list-disc list-inside ml-2 mt-1">
|
||
<li>基于 React 生态系统进行 Web 应用开发</li>
|
||
<li>使用 VTK.js 探索数据可视化领域</li>
|
||
<li>具备 Python 和 Node.js 全栈开发经验</li>
|
||
</ul>
|
||
<p class="mt-2">保持技术热情，持续学习成长中 🌱</p>
|
||
</div>
|
||
</Section>
|
||
{
|
||
allPostsByDate.length > 0 && (
|
||
<Section title='Posts'>
|
||
<ul class='flex flex-col gap-y-2'>
|
||
{allPostsByDate.map((p) => (
|
||
<li class='flex flex-col gap-x-2 sm:flex-row'>
|
||
<PostPreview post={p} />
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</Section>
|
||
)
|
||
}
|
||
|
||
<Section title='Experience'>
|
||
<Card
|
||
heading='方田医创科技有限公司'
|
||
subheading='高级前端开发工程师'
|
||
date='2024年09月-至今'
|
||
imagePath='/src/assets/finetool.png'
|
||
altText='方田医创科技有限公司'
|
||
imageClass='h-12 w-auto md:-left-16'
|
||
href='https://www.finetool.cn/'
|
||
target='_blank'
|
||
/>
|
||
<Card
|
||
heading='wind信息技术有限公司'
|
||
subheading='web前端开发'
|
||
date='2021年07月-2024年8月'
|
||
imagePath='/src/assets/wind.png'
|
||
altText='wind信息技术有限公司'
|
||
imageClass='h-12 w-auto md:-left-16'
|
||
href='https://www.wind.com.cn'
|
||
target='_blank'
|
||
>
|
||
<ul class='ml-4 list-disc text-muted-foreground'>
|
||
<li>主导电商平台前后台开发，采用React+TypeScript技术栈，提升用户体验及运营效率</li>
|
||
<li>负责数据管理中台的架构设计与开发，实现数据可视化及智能分析功能</li>
|
||
<li>设计并开发基于大语言模型的智能应用，优化提示词系统，提升模型输出质量</li>
|
||
</ul>
|
||
</Card>
|
||
<Card
|
||
heading='百词斩'
|
||
subheading='web前端开发（实习）'
|
||
date='2020年10月-2021年01月'
|
||
imagePath='/src/assets/baicizhan.png'
|
||
altText='百词斩'
|
||
imageClass='h-12 w-auto md:-left-16'
|
||
href='https://www.baicizhan.com/'
|
||
target='_blank'
|
||
>
|
||
<ul class='ml-4 list-disc text-muted-foreground'>
|
||
<li>参与百词斩电商平台的前后端开发，提升用户购物体验</li>
|
||
</ul>
|
||
</Card>
|
||
</Section>
|
||
|
||
<Section title='Education'>
|
||
<Card
|
||
heading='四川大学'
|
||
subheading='软件学院本科'
|
||
date='2017年9月-2021年7月'
|
||
imagePath='/src/assets/scu.png'
|
||
altText='四川大学'
|
||
imageClass='h-12 w-auto md:-left-16'
|
||
href='https://www.scu.edu.cn'
|
||
target='_blank'
|
||
/>
|
||
</Section>
|
||
|
||
<Section title='Skills'>
|
||
<SkillLayout title='Frontend' skills={frontend} />
|
||
<SkillLayout title='Backend' skills={backend} />
|
||
<SkillLayout title='Others' skills={others} />
|
||
<SkillLayout title='Languages' skills={languages} />
|
||
</Section>
|
||
|
||
<Section title='Projects' subtitle='(open source)'>
|
||
<div class='grid grid-cols-1 gap-3 sm:grid-cols-2'>
|
||
{
|
||
projects.map((project) => (
|
||
<ProjectCard
|
||
href={project.url}
|
||
heading={project.title}
|
||
subheading={project.description}
|
||
imagePath={project.imagePath}
|
||
altText={project.altText}
|
||
target={'_blank'}
|
||
/>
|
||
))
|
||
}
|
||
</div>
|
||
<div class='mt-4 flex justify-end'>
|
||
<a
|
||
href={`/categories/${encodeURIComponent('项目-已结项')}`}
|
||
class='flex items-center gap-x-1 text-sm text-muted-foreground transition-colors hover:text-foreground'
|
||
>
|
||
查看更多项目
|
||
<Icon name='link' class='h-4 w-4' />
|
||
</a>
|
||
</div>
|
||
</Section>
|
||
</div>
|
||
<GiscusComment client:only='react' />
|
||
</PageLayout>
|