personal-page/src/pages/index.astro
2023-11-18 14:02:51 -03:00

122 lines
3.3 KiB
Text

---
import { getCollection } from 'astro:content';
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
import { Image } from 'astro:assets';
import portrait from '../assets/images/portrait.jpg';
const games = await getCollection('games');
const blog = await getCollection('blog', ({ data }) =>
import.meta.env.PROD ? data.draft !== true : true,
);
// TODO: show the pinned ones, not the recents
const portafolio = await getCollection('portafolio', ({ data }) =>
import.meta.env.PROD ? data.draft !== true : true,
);
---
<Layout title="aleidk">
<section>
<div class="hstack gap-5">
<Image
id="portrait"
src={portrait}
alt="portrait of Alexander Navarro"
loading="eager"
width={200}
/>
<h1>Alexander Navarro</h1>
</div>
<p class="text-justify">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil ea rerum
doloremque numquam hic eius culpa nesciunt maiores repellat assumenda
incidunt, molestias odit perspiciatis dolore reiciendis praesentium
itaque! Et, ad!
</p>
</section>
<section>
<div class="grid grid-cols-3">
<Card>
<h3 slot="title">Portafolio</h3>
<ul>
{
portafolio.slice(0, 3).map((item) => (
<li>
<a href={`portafolio/${item.slug}`}>{item.data.title}</a>
</li>
))
}
</ul>
<div slot="footer" class="text-end">
<a href="/portafolio">See more...</a>
</div>
</Card>
<Card>
<h3 slot="title">Blog</h3>
<ul>
{
blog.slice(0, 3).map((item) => (
<li>
<a href={`blog/${item.slug}`}>{item.data.title}</a>
</li>
))
}
</ul>
<div slot="footer" class="text-end">
<a href="/blog">See more...</a>
</div>
</Card>
<Card>
<h3 slot="title">Games</h3>
<ul>
{
games.slice(0, 3).map((item) => (
<li>
<a href={`games/${item.slug}`}>{item.data.title}</a>
</li>
))
}
</ul>
<div slot="footer" class="text-end">
<a href="/games">See more...</a>
</div>
</Card>
</div>
</section>
<section>
<h2>About me</h2>
<p>
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex
occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in
Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco
ut ea consectetur et est culpa et culpa duis.
</p>
</section>
</Layout>
<style>
#portrait {
border-radius: 50%;
border: 5px solid var(--prj-text);
}
h1 {
font-size: 3rem;
}
p {
margin-top: var(--prj-spacing-3);
}
</style>