kazoottt-blog/src/pages/index.astro

---
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 allPosts = await getAllPosts()
const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
---

<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'>
				<p>前端开发，技术栈主要为 React 全家桶, VTK.js 学习中。</p>
				<p>偶尔使用 python 或者 nodejs 写后端。</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='wind信息技术有限公司'
				subheading='web前端开发'
				date='2021年07月-2024年8月'
				imagePath='/src/assets/wind.png'
				altText='wind信息技术有限公司'
				imageClass='h-12 w-auto md:-left-16'
			>
				<ul class='ml-4 list-disc text-muted-foreground'>
					<li>完成商城前台与后台开发</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'
			>
				<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'
			/>
		</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='flex flex-col gap-y-3 sm:flex-row sm:gap-x-3 sm:gap-y-0'>
				<ProjectCard
					href='https://greasyfork.org/zh-CN/users/904256-kazoottt-wang'
					heading='油猴脚本合集'
					subheading='收录了我开发的一些油猴脚本'
					imagePath='/src/assets/greasyFork.png'
					altText='greasyFork'
					class='w-full sm:w-1/2'
					target='_blank'
				/>
			</div>
		</Section>
	</div>
	<GiscusComment client:only='react' />
</PageLayout>