mirror of
https://github.com/KazooTTT/kazoottt-blog.git
synced 2025-06-22 18:21:33 +08:00
feat: update home page
This commit is contained in:
KazooTTT
BIN
src/assets/baicizhan.png
Normal file
BIN
src/assets/baicizhan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 959 B |
BIN
src/assets/greasyFork.png
Normal file
BIN
src/assets/greasyFork.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 641 KiB |
BIN
src/assets/kazoottt-avatar.jpeg
Normal file
BIN
src/assets/kazoottt-avatar.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
BIN
src/assets/scu.png
Normal file
BIN
src/assets/scu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/wind.png
Normal file
BIN
src/assets/wind.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@ -10,7 +10,8 @@ const {
|
||||
heading,
|
||||
subheading,
|
||||
imagePath,
|
||||
altText
|
||||
altText,
|
||||
target
|
||||
} = Astro.props
|
||||
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
|
||||
if (!images[imagePath])
|
||||
@ -24,6 +25,7 @@ if (!images[imagePath])
|
||||
href && 'transition-all hover:border-foreground/25 hover:shadow-sm'
|
||||
)}
|
||||
href={href}
|
||||
target={target}
|
||||
>
|
||||
<Image
|
||||
src={images[imagePath]()}
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const { class: className, title } = Astro.props
|
||||
const { class: className, title, subtitle } = Astro.props
|
||||
---
|
||||
|
||||
<section class={cn(className, 'flex flex-col gap-y-5 md:flex-row md:gap-y-0')}>
|
||||
<div class='text-xl font-semibold md:w-1/3'>
|
||||
<h2>{title}</h2>
|
||||
<div class='md:w-1/3'>
|
||||
<h2 class='font-semibol text-xl'>{title}</h2>
|
||||
<h3 class='text-muted-foreground'>{subtitle}</h3>
|
||||
</div>
|
||||
<div class='flex flex-col gap-y-3 md:w-2/3'>
|
||||
<slot />
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
|
||||
import { Icon } from 'astro-icon/components'
|
||||
---
|
||||
|
||||
<footer class='mx-auto mt-24 w-full'>
|
||||
@ -17,7 +17,7 @@
|
||||
class='inline-flex gap-x-2 text-gray-600 hover:text-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600'
|
||||
href='/privacy'>Privacy</a
|
||||
> -->
|
||||
<p class=''>© 2024 lorem. All rights reserved.</p>
|
||||
<p class=''>© 2024 kazoottt. All rights reserved.</p>
|
||||
</div>
|
||||
|
||||
<div class='flex items-center justify-between'>
|
||||
@ -26,19 +26,15 @@
|
||||
<!-- Linkedin -->
|
||||
<a
|
||||
class='inline-block text-muted-foreground transition-all hover:text-muted-foreground/75'
|
||||
href='https://www.linkedin.com/in/example/'
|
||||
href='https://github.com/kazoottt'
|
||||
>
|
||||
<svg
|
||||
class='h-4 w-4 flex-shrink-0'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='1em'
|
||||
height='1em'
|
||||
viewBox='0 0 16 16'
|
||||
><path
|
||||
fill='currentColor'
|
||||
d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248c-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586c.173-.431.568-.878 1.232-.878c.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252c-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z'
|
||||
></path></svg
|
||||
>
|
||||
<Icon name='github' />
|
||||
</a>
|
||||
<a
|
||||
class='inline-block text-muted-foreground transition-all hover:text-muted-foreground/75'
|
||||
href='https://x.com/kazoottt'
|
||||
>
|
||||
<Icon name='twitter' />
|
||||
</a>
|
||||
</div>
|
||||
<!-- End Social Brands -->
|
||||
|
||||
1
src/icons/github.svg
Normal file
1
src/icons/github.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></svg>
|
||||
|
After Width: | Height: | Size: 679 B |
1
src/icons/link.svg
Normal file
1
src/icons/link.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 0 0-5 5a5 5 0 0 0 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 0 0 5-5a5 5 0 0 0-5-5"/></svg>
|
||||
|
After Width: | Height: | Size: 324 B |
1
src/icons/twitter.svg
Normal file
1
src/icons/twitter.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.2 4.2 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.52 8.52 0 0 1-5.33 1.84q-.51 0-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23"/></svg>
|
||||
|
After Width: | Height: | Size: 595 B |
@ -8,14 +8,15 @@ import SkillLayout from '../components/SkillLayout.astro'
|
||||
import PostPreview from '@/components/blog/PostPreview.astro'
|
||||
|
||||
import { Image } from 'astro:assets'
|
||||
import astro from '../assets/about-astro.png'
|
||||
import kazootttAvatar from '../assets/kazoottt-avatar.jpeg'
|
||||
|
||||
import { getAllPosts, sortMDByDate } from '@/utils'
|
||||
import { Icon } from 'astro-icon/components'
|
||||
|
||||
const languages = ['lorem', 'ipsum']
|
||||
const frontend = ['lorem', 'ipsum', 'lorem', 'ipsum', 'lorem', 'ipsum', 'lorem']
|
||||
const backend = ['lorem', 'ipsum', 'lorem', 'ipsum']
|
||||
const others = ['lorem', 'ipsum', 'lorem', 'ipsum', 'lorem']
|
||||
const frontend = ['react(熟悉)', 'vue2(了解)', 'next.js', 'tailwindcss']
|
||||
const backend = ['nodejs(熟悉)', 'python(了解)', 'elysiajs', 'nextjs', 'cloudflare d1', 'prisma']
|
||||
const others = ['大模型提示词调优']
|
||||
const languages = ['英文']
|
||||
|
||||
const MAX_POSTS = 10
|
||||
const allPosts = await getAllPosts()
|
||||
@ -26,47 +27,23 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
|
||||
<div class='flex w-full flex-col gap-y-10'>
|
||||
<section class='flex flex-col items-center gap-y-7'>
|
||||
<Image
|
||||
src={astro}
|
||||
src={kazootttAvatar}
|
||||
alt='profile photo'
|
||||
class='h-28 w-auto rounded-full bg-[#FFBE98] p-2'
|
||||
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'>Lorem ipsum dolor</h1>
|
||||
<div class='flex flex-wrap justify-center gap-x-7 gap-y-3'>
|
||||
<Label title='Lorem Ipsum'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='h-5 w-5' slot='icon'
|
||||
><path
|
||||
fill='currentColor'
|
||||
d='M4.615 20q-.69 0-1.152-.462Q3 19.075 3 18.385v-9.77q0-.69.463-1.152Q3.925 7 4.615 7H9V5.615q0-.69.463-1.152Q9.925 4 10.615 4h2.77q.69 0 1.153.463q.462.462.462 1.152V7h4.385q.69 0 1.152.463q.463.462.463 1.152v9.77q0 .69-.462 1.152q-.463.463-1.153.463zm0-1h14.77q.23 0 .423-.192q.192-.193.192-.423v-9.77q0-.23-.192-.423Q19.615 8 19.385 8H4.615q-.23 0-.423.192Q4 8.385 4 8.615v9.77q0 .23.192.423q.193.192.423.192M10 7h4V5.615q0-.23-.192-.423Q13.615 5 13.385 5h-2.77q-.23 0-.423.192q-.192.193-.192.423zM4 19V8z'
|
||||
></path></svg
|
||||
>
|
||||
<h1 class='text-3xl font-bold'>KazooTTT</h1>
|
||||
<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='Ipsum'>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='h-5 w-5' slot='icon'
|
||||
><path
|
||||
fill='currentColor'
|
||||
d='M12.003 11.73q.668 0 1.14-.475q.472-.475.472-1.143t-.475-1.14q-.476-.472-1.143-.472t-1.14.476q-.472.475-.472 1.143t.475 1.14q.476.472 1.143.472M12 19.677q2.82-2.454 4.458-4.991q1.638-2.538 1.638-4.39q0-2.744-1.737-4.53T12 3.981q-2.621 0-4.359 1.785t-1.737 4.53q0 1.852 1.638 4.39q1.639 2.537 4.458 4.99m0 1.343q-3.525-3.117-5.31-5.814q-1.786-2.697-1.786-4.909q0-3.173 2.066-5.234Q9.037 3 12 3t5.03 2.062q2.066 2.061 2.066 5.234q0 2.212-1.785 4.909q-1.786 2.697-5.311 5.814m0-10.904'
|
||||
></path></svg
|
||||
>
|
||||
<Label title='twitter' as='a' href='https://x.com/KazooTTT' target='_blank'>
|
||||
<Icon name='twitter' slot='icon' />
|
||||
</Label>
|
||||
<Label
|
||||
title='Connect on Linkedin'
|
||||
as='a'
|
||||
href='https://www.linkedin.com/in/example/'
|
||||
target='_blank'
|
||||
>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
viewBox='0 0 16 16'
|
||||
slot='icon'
|
||||
class='h-5 w-5 text-foreground/75'
|
||||
><path
|
||||
fill='currentColor'
|
||||
d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248c-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586c.173-.431.568-.878 1.232-.878c.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252c-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z'
|
||||
></path></svg
|
||||
>
|
||||
<Label title='汇总' as='a' href='https://bento.me/KazooTTT' target='_blank'>
|
||||
<Icon name='link' slot='icon' />
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
@ -74,10 +51,7 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
|
||||
|
||||
<Section title='About'>
|
||||
<p class='text-muted-foreground'>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis atque quia omnis
|
||||
consectetur, voluptas praesentium veniam blanditiis ratione asperiores accusantium laborum
|
||||
odit commodi quis deserunt incidunt et dolor iure ut! Lorem ipsum dolor sit, amet
|
||||
consectetur adipisicing elit. Alias quia, doloribus ut beatae perspiciatis voluptatibus.
|
||||
前端开发，技术栈主要为React全家桶, 不过也接触过Vue，偶尔使用 python 或者 nodejs 写后端。
|
||||
</p>
|
||||
</Section>
|
||||
{
|
||||
@ -96,109 +70,63 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
|
||||
|
||||
<Section title='Experience'>
|
||||
<Card
|
||||
heading='Lorem Ipsum'
|
||||
subheading='Sit amet consectetur'
|
||||
date='Dec 2022 - Nov 2023'
|
||||
imagePath='/src/assets/about-astro.png'
|
||||
altText='Lorem, ipsum dolor sit'
|
||||
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>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore debitis recusandae, ut
|
||||
molestiae laboriosam pariatur!
|
||||
|
||||
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, pariatur!</li>
|
||||
</li>
|
||||
<li>完成商城前台与后台开发</li>
|
||||
<li>完成数据管理中台前端开发</li>
|
||||
<li>完成大模型应用前、后端开发，提示词调优</li>
|
||||
</ul>
|
||||
</Card>
|
||||
<Card
|
||||
heading='Lorem Ipsum'
|
||||
subheading='Sit amet consectetur'
|
||||
date='Dec 2022 - Nov 2023'
|
||||
imagePath='/src/assets/about-astro.png'
|
||||
altText='Lorem, ipsum dolor sit'
|
||||
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='Lorem Ipsum'
|
||||
subheading='Sit amet consectetur'
|
||||
date='Dec 2022 - Nov 2023'
|
||||
imagePath='/src/assets/about-astro.png'
|
||||
altText='Lorem, ipsum dolor sit'
|
||||
heading='四川大学'
|
||||
subheading='软件学院本科'
|
||||
date='2017年9月-2021年7月'
|
||||
imagePath='/src/assets/scu.png'
|
||||
altText='四川大学'
|
||||
imageClass='h-12 w-auto md:-left-16'
|
||||
>
|
||||
<ul class='ml-4 list-disc text-muted-foreground'>
|
||||
<li>
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore debitis recusandae, ut
|
||||
molestiae laboriosam pariatur!
|
||||
|
||||
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, pariatur!</li>
|
||||
</li>
|
||||
</ul>
|
||||
</Card>
|
||||
<Card
|
||||
heading='Lorem Ipsum'
|
||||
subheading='Sit amet consectetur'
|
||||
date='Dec 2022 - Nov 2023'
|
||||
imagePath='/src/assets/about-astro.png'
|
||||
altText='Lorem, ipsum dolor sit'
|
||||
imageClass='h-12 w-auto md:-left-16'
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section title='Projects'>
|
||||
<div class='flex flex-col gap-y-3 sm:flex-row sm:gap-x-3 sm:gap-y-0'>
|
||||
<ProjectCard
|
||||
href='https://www.google.com'
|
||||
heading='Consectetur'
|
||||
subheading='Lorem ipsum dolor sit amet consectetur adipisicing elit.'
|
||||
imagePath='/src/assets/coming-soon.png'
|
||||
altText='Example'
|
||||
class='w-full sm:w-1/2'
|
||||
/>
|
||||
<ProjectCard
|
||||
as='div'
|
||||
heading='Coming soon...'
|
||||
subheading=''
|
||||
imagePath='/src/assets/coming-soon.png'
|
||||
altText='Lorem, ipsum dolor sit'
|
||||
class='w-full sm:w-1/2'
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title='Certifications'>
|
||||
<Card
|
||||
as='a'
|
||||
heading='Lorem ipsum, dolor sit amet consectetur adipisicing.'
|
||||
subheading='Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam dicta magni consequuntur corrupti.'
|
||||
date='Mar 2024 - Mar 2024'
|
||||
imagePath='/src/assets/about-astro.png'
|
||||
altText='Lorem, ipsum dolor sit'
|
||||
imageClass='h-11 w-auto md:-left-16'
|
||||
href='https://www.google.com'
|
||||
/>
|
||||
<Card
|
||||
as='a'
|
||||
heading='Lorem ipsum, dolor sit amet'
|
||||
subheading='Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam dicta.'
|
||||
date='Mar 2029 - Mar 2032'
|
||||
imagePath='/src/assets/about-astro.png'
|
||||
altText='Lorem, ipsum dolor sit'
|
||||
imageClass='h-11 w-auto md:-left-16'
|
||||
href='https://www.google.com'
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Section title='Skills'>
|
||||
<SkillLayout title='Languages' skills={languages} />
|
||||
<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>
|
||||
</PageLayout>
|
||||
|
||||
Reference in New Issue
Block a user