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

fix(Landing): fix layout brake

Browse source
This commit is contained in:
Alexander Navarro 2024-03-17 20:15:48 -03:00
parent 0092f28101
commit 66d337255c
6 changed files with 471 additions and 456 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.woodpecker.yml
View file

@ -3,6 +3,8 @@ when:
steps: steps:
build-and-publish: build-and-publish:
when:
branch: main
image: node:20-alpine image: node:20-alpine
secrets: secrets:
- codeberg_ssh_key - codeberg_ssh_key

3
package.json
View file

@ -7,7 +7,8 @@
"start": "astro dev", "start": "astro dev",
"build": "astro build", "build": "astro build",
"preview": "astro preview", "preview": "astro preview",
"astro": "astro" "astro": "astro",
"localize": "astro-i18next generate"
}, },
"dependencies": { "dependencies": {
"@astrojs/react": "^3.0.7", "@astrojs/react": "^3.0.7",

3
public/locales/en/translation.json
View file

@ -1,5 +1,8 @@
{ {
"titles": { "titles": {
"featuredWork": "Featured Work" "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!"
} }
} }

3
public/locales/es/translation.json
View file

@ -2,4 +2,7 @@
"titles": { "titles": {
"featuredWork": "Trabajo Destacado" "featuredWork": "Trabajo Destacado"
} }
"home": {
"brief": "I like to code stuff, then watch my creations come to life and do things for me!"
}
} }

457
src/pages/es/index.astro
View file

@ -31,246 +31,249 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
<div> <div>
<h1 class="my-0">Alexander Navarro</h1> <h1 class="my-0">Alexander Navarro</h1>
<p> <p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet, {t('home.brief')}
repudiandae veritatis totam animi ut facere omnis. Quasi, tempore
porro, neque officia nisi error quia deleniti nesciunt provident vitae
consequuntur quod?
</p> </p>
</div> </div>
</div> </div>
</section> </section>
<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> </section>
<div class="grid grid-cols-1 grid-lg-cols-3 gap-4"> <section class:list={[{ 'd-none': import.meta.env.PROD }]}>
<Card className="anim-hover-zoom"> <h2 class="mb-4">What I've been up to...</h2>
<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"> <div class="hstack flex-eq flex-wrap flex-md-nowrap">
<a href="">See more...</a> <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>
</Card>
<Card className="anim-hover-zoom"> <div>
<img <div class="text-center mb-2">
src="https://placehold.co/600x400" <img class="" src="https://placehold.co/400x200" alt="project img" />
alt="project img" </div>
class="border-radius" <p class="text-justify">
/> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
<h3 class="fs-4 text-center my-1">Project N°1</h3> consequatur iste molestiae blanditiis eligendi consectetur ullam.
<p class="text-justify"> Excepturi quasi sed est animi laudantium necessitatibus, tempore
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint delectus nulla aspernatur quod nesciunt fugiat.
cillum sint consectetur cupidatat. </p>
</p>
<div class="text-end">
<a href="">See more...</a>
</div> </div>
</Card> </div>
<Card className="anim-hover-zoom"> <div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
<img <div class="vstack justify-content-center">
src="https://placehold.co/600x400" <h4 class="text-center">Games</h4>
alt="project img" <ol class="list-unstyle mt-0 fs-5">
class="border-radius" <li class="mb-3">
/> <a href="#"
<h3 class="fs-4 text-center my-1">Project N°1</h3> >Qui minim labore adipisicing minim sint cillum sint consectetur
<p class="text-justify"> cupidatat.</a
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint >
cillum sint consectetur cupidatat. </li>
</p> <li class="mb-3">
<a href="#"
<div class="text-end"> >Qui minim labore adipisicing minim sint cillum sint consectetur
<a href="">See more...</a> cupidatat.</a
>
</li>
<li class="mb-3">
<a href="#"
>Qui minim labore adipisicing minim sint cillum sint consectetur
cupidatat.</a
>
</li>
</ol>
</div> </div>
</Card>
</div>
<div class="mt-4 text-center"> <div>
<Button className="px-4 py-2 fs-5 ">View Work</Button> <div class="text-center mb-2">
</div> <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> </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>

459
src/pages/index.astro
View file

@ -1,10 +1,10 @@
--- ---
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
import { t, changeLanguage } from "i18next";
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 Button from "../components/Button/Button.astro";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import { t, changeLanguage } from "i18next";
import portrait from "../assets/images/portrait.jpg"; import portrait from "../assets/images/portrait.jpg";
changeLanguage("en"); changeLanguage("en");
@ -31,246 +31,249 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
<div> <div>
<h1 class="my-0">Alexander Navarro</h1> <h1 class="my-0">Alexander Navarro</h1>
<p> <p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet, {t('home.brief')}
repudiandae veritatis totam animi ut facere omnis. Quasi, tempore
porro, neque officia nisi error quia deleniti nesciunt provident vitae
consequuntur quod?
</p> </p>
</div> </div>
</div> </div>
</section> </section>
<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> </section>
<div class="grid grid-cols-1 grid-lg-cols-3 gap-4"> <section class:list={[{ 'd-none': import.meta.env.PROD }]}>
<Card className="anim-hover-zoom"> <h2 class="mb-4">What I've been up to...</h2>
<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"> <div class="hstack flex-eq flex-wrap flex-md-nowrap">
<a href="">See more...</a> <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>
</Card>
<Card className="anim-hover-zoom"> <div>
<img <div class="text-center mb-2">
src="https://placehold.co/600x400" <img class="" src="https://placehold.co/400x200" alt="project img" />
alt="project img" </div>
class="border-radius" <p class="text-justify">
/> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse
<h3 class="fs-4 text-center my-1">Project N°1</h3> consequatur iste molestiae blanditiis eligendi consectetur ullam.
<p class="text-justify"> Excepturi quasi sed est animi laudantium necessitatibus, tempore
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint delectus nulla aspernatur quod nesciunt fugiat.
cillum sint consectetur cupidatat. </p>
</p>
<div class="text-end">
<a href="">See more...</a>
</div> </div>
</Card> </div>
<Card className="anim-hover-zoom"> <div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
<img <div class="vstack justify-content-center">
src="https://placehold.co/600x400" <h4 class="text-center">Games</h4>
alt="project img" <ol class="list-unstyle mt-0 fs-5">
class="border-radius" <li class="mb-3">
/> <a href="#"
<h3 class="fs-4 text-center my-1">Project N°1</h3> >Qui minim labore adipisicing minim sint cillum sint consectetur
<p class="text-justify"> cupidatat.</a
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint >
cillum sint consectetur cupidatat. </li>
</p> <li class="mb-3">
<a href="#"
<div class="text-end"> >Qui minim labore adipisicing minim sint cillum sint consectetur
<a href="">See more...</a> cupidatat.</a
>
</li>
<li class="mb-3">
<a href="#"
>Qui minim labore adipisicing minim sint cillum sint consectetur
cupidatat.</a
>
</li>
</ol>
</div> </div>
</Card>
</div>
<div class="mt-4 text-center"> <div>
<Button className="px-4 py-2 fs-5 ">View Work</Button> <div class="text-center mb-2">
</div> <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> </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>