alecodes/personal-page
2
0
Fork 0
Code Issues 17 Pull requests Projects 1 Releases Packages 1 Wiki Activity Actions

feat(Projects): Update project entry design

Browse source 
Also update project card in index and project list.
Also added portrait image.
This commit is contained in:
Alexander Navarro 2024-03-21 17:57:55 -03:00
parent 944b553e73
commit a85f9adc9b
18 changed files with 227 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

110
src/pages/index.astro
View file

@ -1,5 +1,5 @@
---
import { getCollection } from 'astro:content';
import { getCollection, getEntry } from 'astro:content';
import { t, changeLanguage } from 'i18next';
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
@ -12,10 +12,12 @@ changeLanguage('en');
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,
);
const portafolio = [
await getEntry('portafolio', 'piloto-go'),
await getEntry('portafolio', 'destino-temuco'),
await getEntry('portafolio', 'sercotec'),
];
---
<Layout title="aleidk">
@ -24,16 +26,16 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
class="bg-image flex-center"
style="--bg-image: url(https://placehold.co/600x400)"
>
<div class="hstack gap-5">
<!-- <Image -->
<!-- id="portrait" -->
<!-- src={portrait} -->
<!-- alt="portrait of Alexander Navarro" -->
<!-- loading="eager" -->
<!-- width={200} -->
<!-- /> -->
<div class="vstack gap-0 align-items-center">
<Image
id="portrait"
src={portrait}
alt="portrait of Alexander Navarro"
loading="eager"
width={200}
/>
<div>
<h1 class="my-0">Alexander Navarro</h1>
<h1 class="my-0 text-center">Alexander Navarro</h1>
<p>
{t('home.brief')}
</p>
@ -45,56 +47,26 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
<h2 class="text-center">{t('titles.featuredWork')}</h2>
<div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
<Card className="anim-hover-zoom">
<img
src="https://placehold.co/600x400"
alt="project img"
class="border-radius"
/>
<h3 class="fs-4 text-center my-1">Project N°1</h3>
<p class="text-justify">
cillum sint consectetur cupidatat. Lorem ipsum dolor sit amet, qui
minim labore adipisicing minim sint
</p>
<div class="text-end">
<a href="">See more...</a>
</div>
</Card>
<Card className="anim-hover-zoom">
<img
src="https://placehold.co/600x400"
alt="project img"
class="border-radius"
/>
<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 className="anim-hover-zoom">
<img
src="https://placehold.co/600x400"
alt="project img"
class="border-radius"
/>
<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>
{
portafolio.map(({ data, slug }) => (
<div>
<Card className="anim-hover-zoom h-100">
<a class="clean" href={`/projects/${slug}`}>
<Image
src={data.thumbnail}
alt="project img"
class="border-radius respect-width"
/>
<h3 class="fs-4 text-center my-1">{data.title}</h3>
<p class="text-justify">{data.brief}</p>
</a>
<div class="text-end" slot="footer">
<a href={`/projects/${slug}`}>See more...</a>
</div>
</Card>
</div>
))
}
</div>
<div class="mt-4 text-center">
@ -274,10 +246,18 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
<style>
#portrait {
border-radius: 50%;
border: 5px solid var(--prj-text);
/* border: 5px solid var(--prj-accent); */
}
#hero {
min-height: 50vh;
}
a.clean {
color: var(--prj-text);
&:hover {
text-decoration: none;
}
}
</style>
</Layout>