feat: Apply skeleton of new design to landing page
This commit is contained in:
parent
b74fcb19cc
commit
6e84ff1ec3
1 changed files with 222 additions and 101 deletions
|
|
@ -2,13 +2,11 @@
|
||||||
import { getCollection } from 'astro:content';
|
import { getCollection } from 'astro:content';
|
||||||
import Layout from '../layouts/Layout.astro';
|
import Layout from '../layouts/Layout.astro';
|
||||||
import Card from '../components/Card.astro';
|
import Card from '../components/Card.astro';
|
||||||
|
import Button from '../components/Button/Button.astro';
|
||||||
|
import BackgroundImageDiv from '../components/BackgroundImageDiv.astro';
|
||||||
import { Image } from 'astro:assets';
|
import { Image } from 'astro:assets';
|
||||||
|
|
||||||
import portrait from '../assets/images/portrait.jpg';
|
import portrait from '../assets/images/portrait.jpg';
|
||||||
let games = await getCollection('games', ({ data }) => data.has_content);
|
|
||||||
games = games.sort(
|
|
||||||
(a, b) => b.data.date_added.getTime() - a.data.date_added.getTime(),
|
|
||||||
);
|
|
||||||
|
|
||||||
const blog = await getCollection('blog', ({ data }) =>
|
const blog = await getCollection('blog', ({ data }) =>
|
||||||
import.meta.env.PROD ? data.draft !== true : true,
|
import.meta.env.PROD ? data.draft !== true : true,
|
||||||
|
|
@ -29,106 +27,229 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
|
||||||
<!-- loading="eager" -->
|
<!-- loading="eager" -->
|
||||||
<!-- width={200} -->
|
<!-- width={200} -->
|
||||||
<!-- /> -->
|
<!-- /> -->
|
||||||
<h1>Alexander Navarro</h1>
|
<div>
|
||||||
</div>
|
<h1 class="my-0">Alexander Navarro</h1>
|
||||||
|
|
||||||
<p class="text-justify">
|
|
||||||
This site is a <u><strong>Work In Progress</strong></u>, It is meant to be
|
|
||||||
a place where I can collect the content I produce. For now it only focused
|
|
||||||
on storage and display of the raw content of the categories especified
|
|
||||||
below.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="text-justify">
|
|
||||||
The first version of this project was developed as a <a
|
|
||||||
href="https://en.wikipedia.org/wiki/Minimum_viable_product">MVP</a
|
|
||||||
>. So this sites lacks many features I would like to add over time. For an
|
|
||||||
up to date roadmap, please visit the <a
|
|
||||||
href="https://codeberg.org/aleidk/personal-page">project README</a
|
|
||||||
>.
|
|
||||||
</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>
|
<p>
|
||||||
Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
|
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet,
|
||||||
labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
|
repudiandae veritatis totam animi ut facere omnis. Quasi, tempore
|
||||||
Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
|
porro, neque officia nisi error quia deleniti nesciunt provident vitae
|
||||||
Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
|
consequuntur quod?
|
||||||
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>
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<style>
|
<section>
|
||||||
|
<h2 class="text-center">Featured Work</h2>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-3 gap-4">
|
||||||
|
<Card>
|
||||||
|
<img src="https://placehold.co/600x400" alt="project img" />
|
||||||
|
<h3 class="fs-4 text-center my-1">Project N°1</h3>
|
||||||
|
<p class="text-justify">
|
||||||
|
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
|
||||||
|
cillum sint consectetur cupidatat.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="text-end">
|
||||||
|
<a href="">See more...</a>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<img src="https://placehold.co/600x400" alt="project img" />
|
||||||
|
<h3 class="fs-4 text-center my-1">Project N°1</h3>
|
||||||
|
<p class="text-justify">
|
||||||
|
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
|
||||||
|
cillum sint consectetur cupidatat.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="text-end">
|
||||||
|
<a href="">See more...</a>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<img src="https://placehold.co/600x400" alt="project img" />
|
||||||
|
<h3 class="fs-4 text-center my-1">Project N°1</h3>
|
||||||
|
<p class="text-justify">
|
||||||
|
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
|
||||||
|
cillum sint consectetur cupidatat.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="text-end">
|
||||||
|
<a href="">See more...</a>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-4 text-center">
|
||||||
|
<Button className="px-4 py-2 fs-5">View Work</Button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class:list={[{ 'd-none': import.meta.env.PROD }]}>
|
||||||
|
<h2 class="mb-4">What I've been up to...</h2>
|
||||||
|
|
||||||
|
<div class="hstack flex-eq">
|
||||||
|
<div class="vstack justify-content-center">
|
||||||
|
<h4 class="text-center">Blog</h4>
|
||||||
|
<ol class="list-unstyle mt-0 fs-5">
|
||||||
|
<li class="mb-3">
|
||||||
|
<a href="#"
|
||||||
|
>Qui minim labore adipisicing minim sint cillum sint consectetur
|
||||||
|
cupidatat.</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="mb-3">
|
||||||
|
<a href="#"
|
||||||
|
>Qui minim labore adipisicing minim sint cillum sint consectetur
|
||||||
|
cupidatat.</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="mb-3">
|
||||||
|
<a href="#"
|
||||||
|
>Qui minim labore adipisicing minim sint cillum sint consectetur
|
||||||
|
cupidatat.</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="text-center mb-2">
|
||||||
|
<img class="" src="https://placehold.co/400x200" alt="project img" />
|
||||||
|
</div>
|
||||||
|
<p class="text-justify">
|
||||||
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
|
||||||
|
consequatur iste molestiae blanditiis eligendi consectetur ullam.
|
||||||
|
Excepturi quasi sed est animi laudantium necessitatibus, tempore
|
||||||
|
delectus nulla aspernatur quod nesciunt fugiat.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-5 hstack-reverse flex-eq">
|
||||||
|
<div class="vstack justify-content-center">
|
||||||
|
<h4 class="text-center">Games</h4>
|
||||||
|
<ol class="list-unstyle mt-0 fs-5">
|
||||||
|
<li class="mb-3">
|
||||||
|
<a href="#"
|
||||||
|
>Qui minim labore adipisicing minim sint cillum sint consectetur
|
||||||
|
cupidatat.</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="mb-3">
|
||||||
|
<a href="#"
|
||||||
|
>Qui minim labore adipisicing minim sint cillum sint consectetur
|
||||||
|
cupidatat.</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="mb-3">
|
||||||
|
<a href="#"
|
||||||
|
>Qui minim labore adipisicing minim sint cillum sint consectetur
|
||||||
|
cupidatat.</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="text-center mb-2">
|
||||||
|
<img class="" src="https://placehold.co/400x200" alt="project img" />
|
||||||
|
</div>
|
||||||
|
<p class="text-justify">
|
||||||
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
|
||||||
|
consequatur iste molestiae blanditiis eligendi consectetur ullam.
|
||||||
|
Excepturi quasi sed est animi laudantium necessitatibus, tempore
|
||||||
|
delectus nulla aspernatur quod nesciunt fugiat.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<BackgroundImageDiv
|
||||||
|
src="https://placehold.co/600x400"
|
||||||
|
width={600}
|
||||||
|
height={400}
|
||||||
|
>
|
||||||
|
<h2 class="text-center">Who am I?</h2>
|
||||||
|
|
||||||
|
<p class="w-70 mx-auto text-justify">
|
||||||
|
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>
|
||||||
|
|
||||||
|
<div class="text-center fs-4 mb-0">
|
||||||
|
<a href="">
|
||||||
|
<Button>View full curriculum</Button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</BackgroundImageDiv>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Contact</h2>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<div class="text-center">
|
||||||
|
<img
|
||||||
|
class="respect-width"
|
||||||
|
src="https://placehold.co/500x300"
|
||||||
|
alt="project img"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p class="text-justify">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
|
||||||
|
reprehenderit, porro dolorem cumque suscipit accusantium officiis eius
|
||||||
|
exercitationem harum itaque perferendis praesentium asperiores vitae
|
||||||
|
pariatur ad culpa mollitia necessitatibus hic!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vstack justify-content-center">
|
||||||
|
<ul class="list-unstyle fs-5 ml-5">
|
||||||
|
<li class="mb-3">
|
||||||
|
<a href="" class="hstack gap-2"
|
||||||
|
><img src="https://placehold.co/60" alt="" /><span>Github</span
|
||||||
|
></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="mb-3">
|
||||||
|
<a href="" class="hstack gap-2"
|
||||||
|
><img src="https://placehold.co/60" alt="" /><span>Linkedin</span
|
||||||
|
></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="mb-3">
|
||||||
|
<a href="" class="hstack gap-2"
|
||||||
|
><img src="https://placehold.co/60" alt="" /><span>Email</span></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
#portrait {
|
#portrait {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 5px solid var(--prj-text);
|
border: 5px solid var(--prj-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
section {
|
||||||
font-size: 3rem;
|
/* outline: 1px solid var(--prj-accent-bg); */
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
p {
|
</Layout>
|
||||||
margin-top: var(--prj-spacing-3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue