alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests Actions Activity

feat: better reactive layout for small screen sizes

Browse Source
This commit is contained in:
Alex Lebens
2026-02-03 17:32:38 -06:00
parent 95432d9059
commit 56d841a335
4 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/ui/sections/Education.astro
View File

@@ -35,16 +35,16 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
</h3> </h3>
<div class="ml-8"> <div class="ml-8">
<h4 class="smooth-reveal-1 pt-5 text-2xl font-semibold text-neutral-800 dark:text-neutral-200"> <h4 class="smooth-reveal-1 pt-5 text-2xl font-semibold text-neutral-800 dark:text-neutral-200">
University College
</h4> </h4>
<ul class="space-y-4 py-3"> <ul class="space-y-4 py-3">
<div class="grid md:grid-cols-2 sm:grid-cols-1 gap-4">
{ {
education.map(({ institution, area, url }) => { education.map(({ institution, area, url, graduationDate}) => {
return ( return (
<div class="smooth-reveal-cards mt-4 grid grid-cols-3 gap-4 rounded-xl"> <div class="smooth-reveal-cards mt-4 rounded-xl">
<div>
<div <div
class={`p-4 transition-all duration-300 md:p-5 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`} class={`p-4 md:p-6 transition-all duration-300 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
> >
<h3 class="flex flex-row text-lg font-bold text-neutral-800 dark:text-neutral-200"> <h3 class="flex flex-row text-lg font-bold text-neutral-800 dark:text-neutral-200">
<Icon <Icon
@@ -54,7 +54,7 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
{institution} {institution}
</h3> </h3>
<p class="mt-2 ml-7 text-xs font-medium text-neutral-600 uppercase dark:text-neutral-400"> <p class="mt-2 ml-7 text-xs font-medium text-neutral-600 uppercase dark:text-neutral-400">
{area} {area} - {new Date(graduationDate).getFullYear()}
</p> </p>
<div class="ml-6 flex"> <div class="ml-6 flex">
<a <a
@@ -72,10 +72,10 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}) })
} }
</div>
</ul> </ul>
</div> </div>
@@ -86,12 +86,12 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
Certificates Certificates
</h4> </h4>
<ul class="space-y-4 py-3"> <ul class="space-y-4 py-3">
<div class="grid md:grid-cols-2 sm:grid-cols-1 gap-4">
{certificate.map(({ name, issuer, url }) => { {certificate.map(({ name, issuer, url }) => {
return ( return (
<div class="smooth-reveal-cards mt-4 grid grid-cols-3 gap-4 rounded-xl"> <div class="smooth-reveal-cards mt-4 rounded-xl">
<div>
<div <div
class={`p-4 transition-all duration-300 md:p-5 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`} class={`p-4 md:p-6 transition-all duration-300 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
> >
<h3 class="flex flex-row text-lg font-bold text-neutral-800 dark:text-neutral-200"> <h3 class="flex flex-row text-lg font-bold text-neutral-800 dark:text-neutral-200">
<Icon <Icon
@@ -119,9 +119,9 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
</div> </div>
</div> </div>
</div> </div>
</div>
); );
})} })}
</div>
</ul> </ul>
</div> </div>
) )

2
src/components/ui/sections/Experience.astro
View File

@@ -15,7 +15,7 @@ const experiences = await directus.request(
--- ---
<section <section
class:list={['flex flex-col gap-4', Astro.props.className]} class:list={['flex flex-col gap-8', Astro.props.className]}
> >
<h3 class="relative smooth-reveal-1 flex w-full items-center gap-3 pb-10 text-5xl text-neutral-800 dark:text-neutral-200">Experience</h3> <h3 class="relative smooth-reveal-1 flex w-full items-center gap-3 pb-10 text-5xl text-neutral-800 dark:text-neutral-200">Experience</h3>

2
src/components/ui/sections/HeroSection.astro
View File

@@ -22,7 +22,7 @@ const roundedClasses = Astro.props.rounded ? "rounded-xl" : null;
--- ---
<section <section
class="mx-auto grid max-w-[85rem] gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full" class="mx-auto grid max-w-340 gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full"
> >
<div> <div>
<h1 <h1

6
src/pages/about.astro
View File

@@ -40,9 +40,9 @@ const global = await directus.request(readSingleton('site_global'));
rounded={true} rounded={true}
/> />
<section class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14"> <section class="mx-auto max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
<main class="relative grid max-w-7xl gap-12 p-8 max-sm:py-16 md:grid-cols-6 md:p-16 xl:gap-24"> <main class="relative grid grid-cols-1 md:grid-cols-6 gap-12 p-8 md:p-16 xl:gap-24 max-w-7xl mx-auto">
<div class="space-y-12 md:col-span-8"> <div class="space-y-12 col-span-1 md:col-span-6">
<Experience className="smooth-reveal-2" /> <Experience className="smooth-reveal-2" />
<Education className="smooth-reveal-2 mt-30" /> <Education className="smooth-reveal-2 mt-30" />
<Projects className="smooth-reveal-2 mt-30" /> <Projects className="smooth-reveal-2 mt-30" />