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

feat(Style): update responsive design of landing page

Browse source 
fix overflow issues in small screens, hide full navbar on mobile and replace for an off-canvas version
This commit is contained in:
Alexander Navarro 2024-03-13 20:05:15 -03:00
parent daa5eb27b6
commit d49fe554ee
4 changed files with 345 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/pages/index.astro
View file

@ -45,7 +45,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
<section>
<h2 class="text-center">Featured Work</h2>
<div class="grid grid-cols-3 gap-4">
<div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
<Card>
<img
src="https://placehold.co/600x400"
@ -189,7 +189,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
>
<h2 class="text-center">Who am I?</h2>
<p class="w-70 mx-auto text-justify">
<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
@ -212,7 +212,7 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
<section>
<h2>Contact</h2>
<div class="grid grid-cols-2">
<div class="grid grid-cols-1 grid-lg-cols-2">
<div>
<div class="text-center">
<img
@ -230,24 +230,43 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
</div>
<div class="vstack justify-content-center">
<ul class="list-unstyle fs-5 ml-5">
<li class="mb-3">
<a href="" class="hstack gap-2"
><img src="https://placehold.co/60" alt="" /><span>Github</span
></a
>
</li>
<li class="mb-3">
<a href="" class="hstack gap-2"
><img src="https://placehold.co/60" alt="" /><span>Linkedin</span
></a
>
</li>
<li class="mb-3">
<a href="" class="hstack gap-2"
><img src="https://placehold.co/60" alt="" /><span>Email</span></a
>
</li>
<ul
class="list-unstyle fs-5 ml-lg-5 mt-3 d-flex d-lg-block justify-content-around"
>
{
[
{
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>