124 lines
3.4 KiB
Plaintext
124 lines
3.4 KiB
Plaintext
---
|
|
import { readSingleton } from '@directus/sdk';
|
|
|
|
import directus from '@lib/directus';
|
|
import BaseLayout from '@layouts/BaseLayout.astro';
|
|
import HeroSection from '@components/sections/HeroSection.astro';
|
|
import FeaturesSection from '@components/sections/FeaturesSection.astro';
|
|
import WeatherSection from '@components/sections/WeatherSection.astro';
|
|
import LatestPostsSection from '@components/sections/LatestPostsSection.astro';
|
|
import GiteaSection from '@components/sections/GiteaSection.astro';
|
|
|
|
import homeImg from '@images/autumn_mountain.png';
|
|
|
|
const global = await directus.request(readSingleton('site_global'));
|
|
const weather = await directus.request(readSingleton('site_weather'));
|
|
---
|
|
|
|
<BaseLayout
|
|
title="Home"
|
|
description={global.about_description}
|
|
structuredData={{
|
|
'@context': 'https://schema.org',
|
|
'@type': 'WebPage',
|
|
inLanguage: 'en-US',
|
|
'@id': Astro.url.href,
|
|
url: Astro.url.href,
|
|
name: `Home | ${global.name}`,
|
|
description: global.about_description,
|
|
isPartOf: {
|
|
'@type': 'WebSite',
|
|
url: global.site_url,
|
|
name: global.name,
|
|
description: global.about,
|
|
},
|
|
}}
|
|
>
|
|
<HeroSection
|
|
title={`Hello, I'm <span class="text-steel dark:text-steel">Alex Lebens</span>`}
|
|
subTitle={global.about_description}
|
|
primaryBtn="About Me"
|
|
primaryBtnURL="/about"
|
|
src={homeImg}
|
|
alt={global.home_image_alt}
|
|
/>
|
|
|
|
<FeaturesSection />
|
|
|
|
<WeatherSection
|
|
server:defer
|
|
latitude={weather.latitude}
|
|
longitude={weather.longitude}
|
|
cityName={weather.location}
|
|
timezone={weather.timezone}
|
|
>
|
|
</WeatherSection>
|
|
|
|
<LatestPostsSection />
|
|
|
|
<GiteaSection
|
|
title="Follow me on Gitea"
|
|
subTitle="I love open source and have my code availabile on my Gitea server."
|
|
url="https://gitea.alexlebens.dev"
|
|
/>
|
|
</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(
|
|
() => {
|
|
el.classList.add('animate-reveal');
|
|
},
|
|
50 + index * 100
|
|
);
|
|
});
|
|
|
|
// 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) => {
|
|
setTimeout(
|
|
() => {
|
|
el.classList.add('animate-reveal-fade');
|
|
},
|
|
100 + index * 250
|
|
);
|
|
});
|
|
};
|
|
|
|
animateContent();
|
|
|
|
const observer = new MutationObserver(() => {
|
|
animateContent();
|
|
});
|
|
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
});
|
|
</script>
|