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,18 +31,14 @@ 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
|
||||
</section>
|
||||
<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">
|
||||
|
|
@ -53,8 +49,8 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
/>
|
||||
<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.
|
||||
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
|
||||
</p>
|
||||
|
||||
<div class="text-end">
|
||||
|
|
@ -100,9 +96,9 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
<div class="mt-4 text-center">
|
||||
<Button className="px-4 py-2 fs-5 ">View Work</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
</section>
|
||||
|
||||
<section class:list={[{ 'd-none': import.meta.env.PROD }]}>
|
||||
<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">
|
||||
|
|
@ -180,9 +176,12 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="bg-image" style="--bg-image: url(https://placehold.co/600x400)">
|
||||
<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">
|
||||
|
|
@ -194,8 +193,8 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
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.
|
||||
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">
|
||||
|
|
@ -203,9 +202,9 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
<Button>View full curriculum</Button>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section>
|
||||
<h2>Contact</h2>
|
||||
|
||||
<div class="grid grid-cols-1 grid-lg-cols-2">
|
||||
|
|
@ -251,7 +250,10 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
},
|
||||
].map((item) => (
|
||||
<li class="mb-3">
|
||||
<a href={item.link} class="hstack flex-column flex-lg-row gap-2">
|
||||
<a
|
||||
href={item.link}
|
||||
class="hstack flex-column flex-lg-row gap-2"
|
||||
>
|
||||
<>
|
||||
<img src={item.img} alt={item.alt} />
|
||||
<span>{item.text}</span>
|
||||
|
|
@ -263,9 +265,9 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
<style>
|
||||
#portrait {
|
||||
border-radius: 50%;
|
||||
border: 5px solid var(--prj-text);
|
||||
|
|
@ -273,4 +275,5 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
#hero {
|
||||
min-height: 50vh;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -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,18 +31,14 @@ 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
|
||||
</section>
|
||||
<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">
|
||||
|
|
@ -53,8 +49,8 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
/>
|
||||
<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.
|
||||
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
|
||||
</p>
|
||||
|
||||
<div class="text-end">
|
||||
|
|
@ -100,9 +96,9 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
<div class="mt-4 text-center">
|
||||
<Button className="px-4 py-2 fs-5 ">View Work</Button>
|
||||
</div>
|
||||
</Layout>
|
||||
</section>
|
||||
|
||||
<section class:list={[{ 'd-none': import.meta.env.PROD }]}>
|
||||
<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">
|
||||
|
|
@ -180,9 +176,12 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="bg-image" style="--bg-image: url(https://placehold.co/600x400)">
|
||||
<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">
|
||||
|
|
@ -194,8 +193,8 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
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.
|
||||
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">
|
||||
|
|
@ -203,9 +202,9 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
<Button>View full curriculum</Button>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section>
|
||||
<h2>Contact</h2>
|
||||
|
||||
<div class="grid grid-cols-1 grid-lg-cols-2">
|
||||
|
|
@ -251,7 +250,10 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
},
|
||||
].map((item) => (
|
||||
<li class="mb-3">
|
||||
<a href={item.link} class="hstack flex-column flex-lg-row gap-2">
|
||||
<a
|
||||
href={item.link}
|
||||
class="hstack flex-column flex-lg-row gap-2"
|
||||
>
|
||||
<>
|
||||
<img src={item.img} alt={item.alt} />
|
||||
<span>{item.text}</span>
|
||||
|
|
@ -263,9 +265,9 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
<style>
|
||||
#portrait {
|
||||
border-radius: 50%;
|
||||
border: 5px solid var(--prj-text);
|
||||
|
|
@ -273,4 +275,5 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
|
|||
#hero {
|
||||
min-height: 50vh;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue