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

feat: Apply some elevation to landing components

Browse source
This commit is contained in:
Alexander Navarro 2024-03-12 17:06:17 -03:00
parent 3bd2b6a4b6
commit 59ceb8ec44
5 changed files with 86 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

80
src/pages/index.astro
View file

@ -3,7 +3,6 @@ import { getCollection } from 'astro:content';
import Layout from '../layouts/Layout.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 portrait from '../assets/images/portrait.jpg';
@ -18,7 +17,11 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
---
<Layout title="aleidk">
<section>
<section
id="hero"
class="bg-image flex-center"
style="--bg-image: url(https://placehold.co/600x400)"
>
<div class="hstack gap-5">
<!-- <Image -->
<!-- id="portrait" -->
@ -44,7 +47,11 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
<div class="grid grid-cols-3 gap-4">
<Card>
<img src="https://placehold.co/600x400" alt="project img" />
<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
@ -57,7 +64,11 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
</Card>
<Card>
<img src="https://placehold.co/600x400" alt="project img" />
<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
@ -70,7 +81,11 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
</Card>
<Card>
<img src="https://placehold.co/600x400" alt="project img" />
<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
@ -168,34 +183,30 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
</div>
</section>
<section>
<BackgroundImageDiv
src="https://placehold.co/600x400"
width={600}
height={400}
>
<h2 class="text-center">Who am I?</h2>
<section
class="bg-image"
style="--bg-image: url(https://placehold.co/600x400)"
>
<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>
<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>
<div class="text-center fs-4 mb-0">
<a href="">
<Button>View full curriculum</Button>
</a>
</div>
</section>
<section>
@ -205,7 +216,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
<div>
<div class="text-center">
<img
class="respect-width"
class="respect-width border-radius"
src="https://placehold.co/500x300"
alt="project img"
/>
@ -247,9 +258,8 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
border-radius: 50%;
border: 5px solid var(--prj-text);
}
section {
/* outline: 1px solid var(--prj-accent-bg); */
#hero {
min-height: 50vh;
}
</style>
</Layout>