fix(Landing): fix layout brake
This commit is contained in:
parent
0092f28101
commit
66d337255c
6 changed files with 471 additions and 456 deletions
|
|
@ -3,6 +3,8 @@ when:
|
|||
|
||||
steps:
|
||||
build-and-publish:
|
||||
when:
|
||||
branch: main
|
||||
image: node:20-alpine
|
||||
secrets:
|
||||
- codeberg_ssh_key
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
"astro": "astro",
|
||||
"localize": "astro-i18next generate"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^3.0.7",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
{
|
||||
"titles": {
|
||||
"featuredWork": "Featured Work"
|
||||
},
|
||||
"home": {
|
||||
"brief": "I'm a software developer from Chile.\nI like to code stuff for the web, for the terminal or whatever seems fun!\nI enjoy problem solving and creating solutions, then watch my creations come to life and do things for me!"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,4 +2,7 @@
|
|||
"titles": {
|
||||
"featuredWork": "Trabajo Destacado"
|
||||
}
|
||||
"home": {
|
||||
"brief": "I like to code stuff, then watch my creations come to life and do things for me!"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import { t, changeLanguage } from "i18next";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
import Button from "../components/Button/Button.astro";
|
||||
import { Image } from "astro:assets";
|
||||
import { t, changeLanguage } from "i18next";
|
||||
import portrait from "../assets/images/portrait.jpg";
|
||||
|
||||
changeLanguage("en");
|
||||
|
|
@ -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