mirror of https://github.com/gabehf/mnrva.dev.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.1 KiB
106 lines
3.1 KiB
---
|
|
import { getCollection } from "astro:content";
|
|
import { Image } from "astro:assets"
|
|
|
|
import Layout from "@/layouts/Layout.astro";
|
|
import SocialLinks from "@/components/SocialLinks.astro";
|
|
import PostCard from "@/components/PostCard.astro";
|
|
import ProjectCard from "@/components/ProjectCard.astro";
|
|
import Link from "@/components/shared/Link.astro";
|
|
import convertAsteriskToStrongTag from "@/utils/convertAsteriskToStrongTag";
|
|
|
|
import presentation from "@/data/presentation";
|
|
import projects from "@/data/projects";
|
|
|
|
const posts = (await getCollection("posts")).sort(function (first, second) {
|
|
return second.data.publishedAt.getTime() - first.data.publishedAt.getTime();
|
|
});
|
|
---
|
|
|
|
<Layout>
|
|
<main class="flex flex-col gap-20">
|
|
<article
|
|
class="flex flex-col gap-8 md:flex-row-reverse md:justify-end md:gap-12"
|
|
>
|
|
{
|
|
presentation.profile && (
|
|
<Image
|
|
src={presentation.profile}
|
|
class="w-1/4 self-center rounded-full"
|
|
alt="Your Profile"
|
|
width="200"
|
|
height="200"
|
|
/>
|
|
)
|
|
}
|
|
|
|
<div class="flex flex-col gap-8">
|
|
<h1 class="text-3xl text-neutral-100">
|
|
{presentation.title}
|
|
</h1>
|
|
|
|
<h2
|
|
class="w-auto max-w-screen-sm leading-6"
|
|
set:html={convertAsteriskToStrongTag(presentation.description)}
|
|
/>
|
|
|
|
<SocialLinks />
|
|
</div>
|
|
</article>
|
|
|
|
<article class="flex flex-col gap-8">
|
|
<header class="flex w-full flex-row justify-between gap-2">
|
|
<h3 class="text-lg text-neutral-100">Latest posts</h3>
|
|
<Link href="/posts" label="See all posts" isUnderline target="_self" />
|
|
</header>
|
|
{posts.length === 0 && <p>Soon, stay connected 👀...</p>}
|
|
|
|
<section class="flex flex-col gap-4 md:flex-row md:flex-wrap">
|
|
{
|
|
posts.length !== 0 &&
|
|
posts
|
|
.slice(0, 2)
|
|
.map((post) => (
|
|
<PostCard
|
|
publishedAt={post.data.publishedAt}
|
|
title={post.data.title}
|
|
description={post.data.description}
|
|
slug={post.slug}
|
|
/>
|
|
))
|
|
}
|
|
</section>
|
|
</article>
|
|
|
|
<article class="flex flex-col gap-8">
|
|
<header class="flex w-full flex-row justify-between gap-2">
|
|
<h3 class="text-lg text-neutral-100">
|
|
Selected projects ({projects.length})
|
|
</h3>
|
|
</header>
|
|
{projects.length === 0 && <p>Oops, I must work^^^^^</p>}
|
|
|
|
<section class="flex flex-col gap-4">
|
|
{
|
|
projects.length !== 0 &&
|
|
projects.map((project) => <ProjectCard {...project} />)
|
|
}
|
|
</section>
|
|
</article>
|
|
|
|
<article class="flex flex-col gap-8">
|
|
<header class="flex w-full flex-row justify-between gap-2">
|
|
<h3 class="text-lg text-neutral-100">Get in touch</h3>
|
|
</header>
|
|
<p>
|
|
Email me at <Link
|
|
href={`mailto:${presentation.mail}`}
|
|
label={presentation.mail}
|
|
/> or follow me via my social links.
|
|
</p>
|
|
|
|
<SocialLinks />
|
|
</article>
|
|
</main>
|
|
</Layout>
|