141 lines
4.3 KiB
Plaintext
141 lines
4.3 KiB
Plaintext
---
|
|
import { getCollection } from "astro:content";
|
|
import Container from "@components/Container.astro";
|
|
import PageLayout from "@layouts/PageLayout.astro";
|
|
import ArrowCard from "@components/ArrowCard.astro";
|
|
import Link from "@components/Link.astro";
|
|
import { dateRange } from "@lib/utils";
|
|
import { SITE, HOME, SOCIALS } from "@consts";
|
|
|
|
const blog = (await getCollection("blog"))
|
|
.filter(post => !post.data.draft)
|
|
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
|
|
.slice(0,SITE.NUM_POSTS_ON_HOMEPAGE);
|
|
|
|
const projects = (await getCollection("projects"))
|
|
.filter(project => !project.data.draft)
|
|
.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
|
|
.slice(0,SITE.NUM_PROJECTS_ON_HOMEPAGE);
|
|
|
|
const allCareerEntries = (await getCollection("career"))
|
|
.sort((a, b) => new Date(b.data.dateStart).valueOf() - new Date(a.data.dateStart).valueOf())
|
|
.slice(0,SITE.NUM_WORKS_ON_HOMEPAGE);
|
|
|
|
const career = await Promise.all(
|
|
allCareerEntries.map(async (item) => {
|
|
const { Content } = await item.render();
|
|
return { ...item, Content };
|
|
})
|
|
);
|
|
|
|
---
|
|
|
|
<PageLayout title={HOME.TITLE} description={HOME.DESCRIPTION}>
|
|
<Container>
|
|
<h4 class="animate font-semibold text-black dark:text-white">
|
|
Hi, I'm Damhwee Ahn <span class="text-xl">👋🏻</span>
|
|
</h4>
|
|
<div class="space-y-16">
|
|
<section>
|
|
<article class="space-y-4">
|
|
<p class="animate">
|
|
Bye!
|
|
</p>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="animate space-y-6">
|
|
<div class="flex flex-wrap gap-y-2 items-center justify-between">
|
|
<h5 class="font-semibold text-black dark:text-white">
|
|
Latest posts
|
|
</h5>
|
|
<Link href="/blog">
|
|
See all posts
|
|
</Link>
|
|
</div>
|
|
<ul class="flex flex-col gap-4">
|
|
{blog.map(post => (
|
|
<li>
|
|
<ArrowCard entry={post} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="animate space-y-6">
|
|
<div class="flex flex-wrap gap-y-2 items-center justify-between">
|
|
<h5 class="font-semibold text-black dark:text-white">
|
|
Career
|
|
</h5>
|
|
<Link href="/career">
|
|
See my career
|
|
</Link>
|
|
</div>
|
|
<ul class="flex flex-col space-y-4">
|
|
{career.map(entry => (
|
|
<li>
|
|
<div class="text-sm opacity-75">
|
|
{dateRange(entry.data.dateStart, entry.data.dateEnd)}
|
|
</div>
|
|
<div class="font-semibold text-black dark:text-white">
|
|
{entry.data.company}
|
|
</div>
|
|
<div class="text-sm opacity-75">
|
|
{entry.data.role}
|
|
</div>
|
|
<article>
|
|
<entry.Content />
|
|
</article>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="animate space-y-6">
|
|
<div class="flex flex-wrap gap-y-2 items-center justify-between">
|
|
<h5 class="font-semibold text-black dark:text-white">
|
|
Recent projects
|
|
</h5>
|
|
<Link href="/projects">
|
|
See all projects
|
|
</Link>
|
|
</div>
|
|
<ul class="flex flex-col gap-4">
|
|
{projects.map(project => (
|
|
<li>
|
|
<ArrowCard entry={project} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="animate space-y-4">
|
|
<h5 class="font-semibold text-black dark:text-white">
|
|
Contact Me
|
|
</h5>
|
|
<article>
|
|
<p>
|
|
If you want to get in touch with me about something or just to say hi,
|
|
reach out on social media or send me a spam email.
|
|
</p>
|
|
</article>
|
|
<ul class="flex flex-wrap gap-2">
|
|
{SOCIALS.map(SOCIAL => (
|
|
<li class="flex gap-x-2 text-nowrap">
|
|
<Link href={SOCIAL.HREF} external aria-label={`${SITE.NAME} on ${SOCIAL.NAME}`}>
|
|
{SOCIAL.NAME}
|
|
</Link>
|
|
{"/"}
|
|
</li>
|
|
))}
|
|
<li class="line-clamp-1">
|
|
<Link href={`mailto:${SITE.EMAIL}`} aria-label={`Email ${SITE.NAME}`}>
|
|
{SITE.EMAIL}
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</Container>
|
|
</PageLayout>
|