fix(Landing): fix layout brake
This commit is contained in:
parent
0092f28101
commit
66d337255c
6 changed files with 471 additions and 456 deletions
|
|
@ -31,246 +31,249 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
<div>
|
||||
<h1 class="my-0">Alexander Navarro</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet,
|
||||
repudiandae veritatis totam animi ut facere omnis. Quasi, tempore
|
||||
porro, neque officia nisi error quia deleniti nesciunt provident vitae
|
||||
consequuntur quod?
|
||||
{t('home.brief')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="text-center">{t('titles.featuredWork')}</h2>Featured Work
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<Button className="px-4 py-2 fs-5 ">View Work</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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">
|
||||
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
|
||||
cillum sint consectetur cupidatat.
|
||||
</p>
|
||||
<section class:list={[{ 'd-none': import.meta.env.PROD }]}>
|
||||
<h2 class="mb-4">What I've been up to...</h2>
|
||||
|
||||
<div class="text-end">
|
||||
<a href="">See more...</a>
|
||||
<div class="hstack flex-eq flex-wrap flex-md-nowrap">
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<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 class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
|
||||
<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>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<Button className="px-4 py-2 fs-5 ">View Work</Button>
|
||||
</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
|
||||
class="bg-image"
|
||||
style="--bg-image: url(https://placehold.co/600x400)"
|
||||
>
|
||||
<h2 class="text-center">Who am I?</h2>
|
||||
|
||||
<p class="w-95 w-lg-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>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Contact</h2>
|
||||
|
||||
<div class="grid grid-cols-1 grid-lg-cols-2">
|
||||
<div>
|
||||
<div class="text-center">
|
||||
<img
|
||||
class="respect-width border-radius"
|
||||
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-lg-5 mt-3 d-flex d-lg-block justify-content-around anim-idle-hover-group anim-group-lg-none"
|
||||
>
|
||||
{
|
||||
[
|
||||
{
|
||||
link: '#',
|
||||
img: 'https://placehold.co/60',
|
||||
alt: '',
|
||||
text: 'Github',
|
||||
},
|
||||
{
|
||||
link: '#',
|
||||
img: 'https://placehold.co/60',
|
||||
alt: '',
|
||||
text: 'Linkedin',
|
||||
},
|
||||
{
|
||||
link: '#',
|
||||
img: 'https://placehold.co/60',
|
||||
alt: '',
|
||||
text: 'Email',
|
||||
},
|
||||
].map((item) => (
|
||||
<li class="mb-3">
|
||||
<a
|
||||
href={item.link}
|
||||
class="hstack flex-column flex-lg-row gap-2"
|
||||
>
|
||||
<>
|
||||
<img src={item.img} alt={item.alt} />
|
||||
<span>{item.text}</span>
|
||||
</>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
#portrait {
|
||||
border-radius: 50%;
|
||||
border: 5px solid var(--prj-text);
|
||||
}
|
||||
#hero {
|
||||
min-height: 50vh;
|
||||
}
|
||||
</style>
|
||||
</Layout>
|
||||
|
||||
<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 flex-wrap flex-md-nowrap">
|
||||
<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="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
|
||||
<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 class="bg-image" style="--bg-image: url(https://placehold.co/600x400)">
|
||||
<h2 class="text-center">Who am I?</h2>
|
||||
|
||||
<p class="w-95 w-lg-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>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Contact</h2>
|
||||
|
||||
<div class="grid grid-cols-1 grid-lg-cols-2">
|
||||
<div>
|
||||
<div class="text-center">
|
||||
<img
|
||||
class="respect-width border-radius"
|
||||
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-lg-5 mt-3 d-flex d-lg-block justify-content-around anim-idle-hover-group anim-group-lg-none"
|
||||
>
|
||||
{
|
||||
[
|
||||
{
|
||||
link: '#',
|
||||
img: 'https://placehold.co/60',
|
||||
alt: '',
|
||||
text: 'Github',
|
||||
},
|
||||
{
|
||||
link: '#',
|
||||
img: 'https://placehold.co/60',
|
||||
alt: '',
|
||||
text: 'Linkedin',
|
||||
},
|
||||
{
|
||||
link: '#',
|
||||
img: 'https://placehold.co/60',
|
||||
alt: '',
|
||||
text: 'Email',
|
||||
},
|
||||
].map((item) => (
|
||||
<li class="mb-3">
|
||||
<a href={item.link} class="hstack flex-column flex-lg-row gap-2">
|
||||
<>
|
||||
<img src={item.img} alt={item.alt} />
|
||||
<span>{item.text}</span>
|
||||
</>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
#portrait {
|
||||
border-radius: 50%;
|
||||
border: 5px solid var(--prj-text);
|
||||
}
|
||||
#hero {
|
||||
min-height: 50vh;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue