mirror of
https://github.com/KazooTTT/kazoottt-blog.git
synced 2025-06-23 18:51:31 +08:00
Built resume template
This commit is contained in:
srleom
215
src/pages/index.astro
Normal file
215
src/pages/index.astro
Normal file
@ -0,0 +1,215 @@
|
||||
---
|
||||
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 astro from '../assets/about-astro.png'
|
||||
|
||||
import { getAllPosts, sortMDByDate } from '@/utils'
|
||||
|
||||
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 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={astro}
|
||||
alt='profile photo'
|
||||
class='h-28 w-auto rounded-full p-2 bg-[#FFBE98]'
|
||||
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-row items-center gap-x-3 rounded-3xl border border-input px-4 py-2 text-sm shadow-sm'
|
||||
>
|
||||
<span class='relative flex items-center justify-center'>
|
||||
<span
|
||||
class='absolute inline-flex h-2 w-2 animate-ping rounded-full border border-green-400 bg-green-400 opacity-75'
|
||||
></span>
|
||||
<span class='relative inline-flex h-2 w-2 rounded-full bg-green-400'></span>
|
||||
</span>
|
||||
|
||||
<p class=''>Available for work</p>
|
||||
</div>
|
||||
<div class='flex gap-x-7'>
|
||||
<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
|
||||
>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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.
|
||||
</p>
|
||||
</Section>
|
||||
|
||||
<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='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'
|
||||
>
|
||||
<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='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'
|
||||
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} />
|
||||
</Section>
|
||||
</div>
|
||||
</PageLayout>
|
||||
Reference in New Issue
Block a user