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

feat: major refactor of cards to standardize styles

Browse Source
This commit is contained in:
Alex Lebens
2026-02-14 00:55:43 -06:00
parent a57f43e082
commit 104fe35ee8
17 changed files with 407 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/about.astro
View File

@@ -5,9 +5,10 @@ import directus from '@lib/directus';
import BaseLayout from '@layouts/BaseLayout.astro';
import HeroSection from '@components/ui/sections/HeroSection.astro';
import Experience from '@components/ui/sections/Experience.astro';
import Projects from '@components/ui/sections/Projects.astro';
import Skills from '@components/ui/sections/Skills.astro';
import Education from '@components/ui/sections/Education.astro';
import EducationSection from '@components/ui/sections/EducationSection.astro';
import ProjectSection from '@components/ui/sections/ProjectSection.astro';
import SkillsSlider from '@components/ui/sections/SkillsSlider.astro';
import portraitImg from '@images/portrait.avif';
const global = await directus.request(readSingleton('site_global'));
@@ -32,6 +33,7 @@ const global = await directus.request(readSingleton('site_global'));
},
}}
>
<HeroSection
title="About Me"
subTitle={global.about}
@@ -40,23 +42,21 @@ const global = await directus.request(readSingleton('site_global'));
rounded={true}
/>
<section class="mx-auto max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
<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 col-span-1 md:col-span-6">
<Experience className="smooth-reveal-2" />
<Education className="smooth-reveal-2 mt-30" />
<Projects className="smooth-reveal-2 mt-30" />
<Skills className="smooth-reveal-2 mt-30" />
</div>
</main>
<section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
<div class="flex flex-col gap-y-24 md:gap-y-32">
<Experience className="smooth-reveal" />
<EducationSection className="smooth-reveal" />
<ProjectSection className="smooth-reveal" />
<SkillsSlider className="smooth-reveal" />
</div>
</section>
</BaseLayout>
<script>
// Add smooth reveal animations for content after loading
document.addEventListener('astro:page-load', () => {
const animateContent = () => {
// Animate group 1
const smoothReveal = document.querySelectorAll('.smooth-reveal');
smoothReveal.forEach((el, index) => {
setTimeout(
@@ -67,28 +67,6 @@ const global = await directus.request(readSingleton('site_global'));
);
});
// Animate group 2
const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
smoothReveal2.forEach((el, index) => {
setTimeout(
() => {
el.classList.add('animate-reveal');
},
200 + index * 250
);
});
// Animate topic cards with staggered delay
const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
smoothRevealCards.forEach((el, index) => {
setTimeout(
() => {
el.classList.add('animate-reveal');
},
400 + index * 250
);
});
// Animate with just fade in with staggered delay
const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
smoothRevealFade.forEach((el, index) => {

13
src/pages/apps.astro
View File

@@ -4,7 +4,8 @@ import { readSingleton } from '@directus/sdk';
import directus from '@lib/directus';
import BaseLayout from '@layouts/BaseLayout.astro';
import HeroSection from '@components/ui/sections/HeroSection.astro';
import Applications from '@components/ui/sections/Applications.astro';
import ApplicationSection from '@components/ui/sections/ApplicationSection.astro';
import applicationImg from '@images/cedar_tree.png';
const global = await directus.request(readSingleton('site_global'));
@@ -29,6 +30,7 @@ const global = await directus.request(readSingleton('site_global'));
},
}}
>
<HeroSection
title="Applications"
subTitle={global.about_applications}
@@ -36,13 +38,8 @@ const global = await directus.request(readSingleton('site_global'));
alt={global.applications_image_alt}
/>
<section class="mx-auto max-w-340 px-4 sm:px-6 lg:px-8 lg:py-14 pb-10">
<main class="relative grid grid-cols-1 md:grid-cols-6 gap-12 p-2 md:p-16 xl:gap-24 max-w-7xl mx-auto">
<div class="space-y-12 col-span-1 md:col-span-6">
<Applications className="smooth-reveal-2" />
</div>
</main>
</section>
<ApplicationSection className="smooth-reveal-2" />
</BaseLayout>
<script>