feat: move improved components out of ui folder
This commit is contained in:
30
src/components/sections/ApplicationSection.astro
Normal file
30
src/components/sections/ApplicationSection.astro
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
import { readItems } from '@directus/sdk';
|
||||
|
||||
import type { Application } from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import HighlightsCard from '@components/cards/HighlightsCard.astro';
|
||||
|
||||
const applications = ((await directus.request(
|
||||
readItems('site_applications' as any, {
|
||||
fields: ['*'],
|
||||
sort: ['-isActive'],
|
||||
})
|
||||
)) as unknown) as Application[];
|
||||
---
|
||||
|
||||
<section class:list={['mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14', Astro.props.className]}>
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:gap-8 print:flex print:flex-col">
|
||||
{applications.map((application: Application) => (
|
||||
<HighlightsCard
|
||||
title={application.name}
|
||||
description={application.description}
|
||||
url={application.url}
|
||||
logoUrlLight={application.logoUrl}
|
||||
logoUrlDark={application.logoUrl}
|
||||
highlights={application.highlights}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
65
src/components/sections/EducationSection.astro
Normal file
65
src/components/sections/EducationSection.astro
Normal file
@@ -0,0 +1,65 @@
|
||||
---
|
||||
import { readItems } from '@directus/sdk';
|
||||
|
||||
import type { Education, Certificate} from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import { getDirectusImageURL } from '@lib/directusFunctions';
|
||||
import EducationCard from '@components/cards/EducationCard.astro';
|
||||
|
||||
const educations = ((await directus.request(
|
||||
readItems('site_education' as any, {
|
||||
fields: ['*'],
|
||||
sort: ['-graduationDate'],
|
||||
})
|
||||
)) as unknown) as Education[];
|
||||
|
||||
const certificates = ((await directus.request(
|
||||
readItems('site_certificate' as any, {
|
||||
fields: ['*'],
|
||||
sort: ['-issuerDate'],
|
||||
})
|
||||
)) as unknown) as Certificate[];
|
||||
---
|
||||
|
||||
<section class:list={['flex flex-col gap-4', Astro.props.className]}>
|
||||
<h3 class="smooth-reveal card-text-header flex relative items-center w-full gap-3 pb-5">
|
||||
Education
|
||||
</h3>
|
||||
<div class="mx-8">
|
||||
<h4 class="smooth-reveal card-text-header-minor pt-5 ">
|
||||
College
|
||||
</h4>
|
||||
<div class="grid md:grid-cols-2 sm:grid-cols-1 gap-4 py-3">
|
||||
{educations.map((education: Education) => (
|
||||
<EducationCard
|
||||
topic={education.institution}
|
||||
area={education.area}
|
||||
date={education.graduationDate}
|
||||
url={education.url}
|
||||
logoUrlLight={getDirectusImageURL(education.logo)}
|
||||
logoUrlDark={getDirectusImageURL(education.logoDark)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{certificates.length > 0 && (
|
||||
<div class="mx-8">
|
||||
<h4 class="smooth-reveal card-text-header-minor pt-8">
|
||||
Certificates
|
||||
</h4>
|
||||
<div class="grid md:grid-cols-2 sm:grid-cols-1 gap-4 py-3">
|
||||
{certificates.map((certificate: Certificate) => (
|
||||
<EducationCard
|
||||
topic={certificate.name}
|
||||
area={certificate.issuer}
|
||||
date={certificate.issuerDate}
|
||||
url={certificate.url}
|
||||
logoIcon={certificate.logoName}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
152
src/components/sections/Experience.astro
Normal file
152
src/components/sections/Experience.astro
Normal file
@@ -0,0 +1,152 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { readItems } from '@directus/sdk';
|
||||
|
||||
import type { Experience } from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
|
||||
const experiences = await directus.request(
|
||||
readItems('site_experience', {
|
||||
fields: ['*'],
|
||||
sort: ['-endDate'],
|
||||
})
|
||||
);
|
||||
---
|
||||
|
||||
<section
|
||||
class:list={['flex flex-col gap-8', Astro.props.className]}
|
||||
|
||||
>
|
||||
<h3 class="relative flex w-full items-center gap-3 pb-10 text-5xl text-neutral-800 dark:text-neutral-200">Experience</h3>
|
||||
<ul class="ml-8 w-full flex flex-col">
|
||||
{
|
||||
experiences.map(
|
||||
(experience: Experience) => {
|
||||
const startYear = new Date(experience.startDate).getFullYear();
|
||||
const endYear = experience.endDate != null ? new Date(experience.endDate).getFullYear() : 'Present';
|
||||
|
||||
return (
|
||||
<li class="relative">
|
||||
<div class="group smooth-reveal relative grid pb-1 transition-all sm:grid-cols-18 sm:gap-8 md:gap-6 lg:hover:!opacity-100">
|
||||
<header class="relative mt-1 text-lg font-semibold sm:col-span-3 text-neutral-800 dark:text-neutral-200">
|
||||
<time datetime={experience.startDate} data-title={experience.startDate}>
|
||||
{startYear}
|
||||
</time>{' '}
|
||||
-{' '}
|
||||
<time datetime={experience.endDate} data-title={experience.endDate}>
|
||||
{endYear}
|
||||
</time>
|
||||
</header>
|
||||
<div class="relative flex flex-col pb-6 before:absolute before:mt-8 before:-ml-6 before:h-full before:w-px before:bg-stone-400 sm:col-span-12">
|
||||
<div class="absolute mt-4 h-2 w-2 -translate-x-[1.71rem] rounded-full bg-stone-400" />
|
||||
<h3>
|
||||
<div
|
||||
class="inline-flex items-center text-2xl leading-tight font-semibold"
|
||||
aria-label="{position} - {company}"
|
||||
>
|
||||
<span class="text-neutral-800 dark:text-neutral-200">
|
||||
{experience.position} <span>@</span>
|
||||
{experience.url ? (
|
||||
<a
|
||||
class="hover:text-steel dark:hover:text-bermuda"
|
||||
href={experience.url}
|
||||
title={`Ver ${experience.name}`}
|
||||
target="_blank"
|
||||
>
|
||||
{experience.name}
|
||||
</a>
|
||||
) : (
|
||||
<span>{experience.name}</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</h3>
|
||||
{(experience.location || experience.location_type) && (
|
||||
<div class="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{experience.location} {experience.location && experience.location_type && '-'} {experience.location_type}
|
||||
</div>
|
||||
)}
|
||||
<div class="text-md mt-4 flex flex-col gap-4" x-data="{ expanded: false }">
|
||||
{experience.summary && (
|
||||
<div class="flex flex-col gap-1">
|
||||
<h4 class="font-semibold text-neutral-800 dark:text-neutral-200">Summary:</h4>
|
||||
<ul class="flex list-disc flex-col gap-2 text-neutral-700 dark:text-neutral-400 [&>li]:ml-4">
|
||||
{Array.isArray(experience.summary) ? (
|
||||
experience.summary.map((item) => ({ item }))
|
||||
) : (
|
||||
<li class="marker:text-steel dark:marker:text-bermuda">{experience.summary}</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(experience.responsibilities || experience.achievements) && (
|
||||
<div class="relative flex flex-col gap-4 max-sm:!h-auto md:after:absolute md:after:bottom-0 md:after:h-12 md:after:w-full md:after:bg-gradient-to-t md:after:from-neutral-200 dark:md:after:from-stone-700 md:after:content-[''] " :class="expanded ? 'after:hidden' : ''" x-show="expanded" x-collapse.min.50px>
|
||||
{experience.responsibilities && (
|
||||
<div class="flex flex-col gap-1">
|
||||
<h4 class="font-semibold text-neutral-800 dark:text-neutral-200">Responsibilities:</h4>
|
||||
<ul class="text-neutral-700 dark:text-neutral-400 [&>li]:ml-4 flex list-disc flex-col gap-2">
|
||||
{experience.responsibilities.map(responsibility => (
|
||||
<li class="marker:text-steel dark:marker:text-bermuda">{responsibility}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{experience.achievements && (
|
||||
<div class="flex flex-col gap-1">
|
||||
<h4 class="font-semibold text-neutral-800 dark:text-neutral-200">Achievements:</h4>
|
||||
<ul class="text-neutral-700 dark:text-neutral-400 [&>li]:ml-4 flex list-disc flex-col gap-2">
|
||||
{experience.achievements.map(achievement => (
|
||||
<li class="marker:text-steel dark:marker:text-bermuda">{achievement}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button @click="expanded = ! expanded" class="group/more w-fit cursor-pointer items-center justify-center gap-1.5 text-xs underline text-neutral-700 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-neutral-400 transition-all flex">
|
||||
<span x-text="expanded ? 'Show less' : 'Show more'">Show more</span>
|
||||
<svg
|
||||
class="h-4 w-4 duration-200 ease-out group-hover/more:translate-y-0.5"
|
||||
:class="{ 'rotate-180': expanded }"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<ul class="flex print:hidden flex-wrap gap-2" aria-label="Technologies used">
|
||||
{experience.skills && experience.skills.map(skill => {
|
||||
const iconName = skill.toLowerCase();
|
||||
return (
|
||||
<li class="bg-steel/20 border-steel/20 text-neutral-800 dark:bg-bermuda/20 dark:border-bermuda/20 dark:text-neutral-200 flex gap-1 items-center border-solid border rounded-md px-2 py-0.5 text-xs">
|
||||
<Icon name={`mdi:${iconName}`} /> <span>{skill}</span>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- Alpine Plugins -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
|
||||
|
||||
<!-- Alpine Core -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
43
src/components/sections/FeaturesSection.astro
Normal file
43
src/components/sections/FeaturesSection.astro
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
import { readSingleton } from '@directus/sdk';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import FeaturesCard from '@components/cards/FeaturesCard.astro';
|
||||
|
||||
const global = await directus.request(readSingleton('site_global'));
|
||||
---
|
||||
|
||||
<section class="mx-auto mb-20 max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
|
||||
<div
|
||||
class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:gap-x-12 sm:gap-y-0 lg:gap-x-24"
|
||||
>
|
||||
<div class="max-w-5xl sm:px-6 lg:px-8">
|
||||
<div class="flex flex-wrap gap-6 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 justify-center">
|
||||
<FeaturesCard
|
||||
title="Cloud Engineer"
|
||||
description="Full stack and cloud engineer."
|
||||
url="/about"
|
||||
icon="mdi:cloud-outline"
|
||||
/>
|
||||
<FeaturesCard
|
||||
title="Homelab"
|
||||
description="Tinkering, testing, deploying, etc, etc ..."
|
||||
url="/categories/homelab/"
|
||||
icon="mdi:home-variant-outline"
|
||||
/>
|
||||
<FeaturesCard
|
||||
title="Documentation"
|
||||
description="Reference and guides for my homelab."
|
||||
url="https://docs.alexlebens.dev"
|
||||
icon="mdi:file-document-multiple"
|
||||
/>
|
||||
<FeaturesCard
|
||||
title="Email"
|
||||
description={`Send me a message.`}
|
||||
url=`mailto:${global.email}`
|
||||
icon="mdi:email-fast"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
164
src/components/sections/GiteaSection.astro
Normal file
164
src/components/sections/GiteaSection.astro
Normal file
@@ -0,0 +1,164 @@
|
||||
---
|
||||
import GiteaButton from '@components/buttons/GiteaButton.astro';
|
||||
|
||||
const { title, subTitle, url } = Astro.props;
|
||||
const btnTitle = 'Continue to Gitea';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
subTitle?: string;
|
||||
url?: string;
|
||||
}
|
||||
---
|
||||
|
||||
<section class="lg:px- relative mx-auto mb-20 max-w-340 px-4 pt-30 pb-30 sm:px-6">
|
||||
<div
|
||||
class="smooth-reveal absolute top-[55%] left-0 scale-90 md:top-[20%] xl:top-[25%] xl:left-[10%]"
|
||||
>
|
||||
<svg
|
||||
class="animate-hover animate-hover-1"
|
||||
width="64"
|
||||
height="64"
|
||||
fill="none"
|
||||
stroke-width="1.5"
|
||||
color="#ea580c"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="#ea580c"
|
||||
stroke="#ea580c"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM3 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM3 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#ea580c"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M21 7.353v9.294a.6.6 0 0 1-.309.525l-8.4 4.666a.6.6 0 0 1-.582 0l-8.4-4.666A.6.6 0 0 1 3 16.647V7.353a.6.6 0 0 1 .309-.524l8.4-4.667a.6.6 0 0 1 .582 0l8.4 4.667a.6.6 0 0 1 .309.524Z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#ea580c"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="m3.528 7.294 8.18 4.544a.6.6 0 0 0 .583 0l8.209-4.56M12 21v-9"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="smooth-reveal absolute top-0 left-[85%] scale-75">
|
||||
<svg
|
||||
class="animate-hover animate-hover-2"
|
||||
width="64"
|
||||
height="64"
|
||||
fill="none"
|
||||
stroke-width="1.5"
|
||||
color="#fbbf24"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="#fbbf24"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"></path>
|
||||
<path
|
||||
fill="#fbbf24"
|
||||
stroke="#fbbf24"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
|
||||
<path stroke="#fbbf24" stroke-linecap="round" stroke-linejoin="round" d="M5 10.5V9M5 15v-1.5"
|
||||
></path>
|
||||
<path
|
||||
fill="#fbbf24"
|
||||
stroke="#fbbf24"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M5 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM19 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
|
||||
<path
|
||||
stroke="#fbbf24"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M10.5 19H9M15 19h-1.5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="smooth-reveal absolute bottom-[5%] left-[60%] scale-[.6] xl:bottom-[15%] xl:left-[35%]"
|
||||
>
|
||||
<svg
|
||||
class="animate-hover animate-hover-3"
|
||||
width="64"
|
||||
height="64"
|
||||
fill="none"
|
||||
stroke-width="1.5"
|
||||
color="#a3a3a3"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke="#a3a3a3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M5.164 17c.29-1.049.67-2.052 1.132-3M11.5 7.794A16.838 16.838 0 0 1 14 6.296M4.5 22a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"
|
||||
></path>
|
||||
<path
|
||||
stroke="#a3a3a3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.5 12a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5ZM19.5 7a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Hero Section Heading -->
|
||||
<div class="smooth-reveal-2 mx-auto mt-5 max-w-xl text-center">
|
||||
<h2
|
||||
class="block text-4xl leading-tight font-bold tracking-tight text-balance text-neutral-800 md:text-5xl lg:text-5xl dark:text-neutral-200"
|
||||
>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
<!-- Hero Section Sub-heading -->
|
||||
<div class="smooth-reveal-2 mx-auto mt-5 max-w-3xl text-center">
|
||||
{
|
||||
subTitle && (
|
||||
<p class="text-lg text-pretty text-neutral-600 dark:text-neutral-400">{subTitle}</p>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<!-- Github Button -->
|
||||
{
|
||||
url && (
|
||||
<div class="smooth-reveal-2 mt-8 flex justify-center gap-3">
|
||||
<GiteaButton url={url} title={btnTitle} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
@keyframes animate-hover {
|
||||
from {
|
||||
transform: translateY(15px);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-hover {
|
||||
animation: animate-hover ease-in-out;
|
||||
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
.animate-hover-1 {
|
||||
animation-duration: 5s;
|
||||
}
|
||||
|
||||
.animate-hover-2 {
|
||||
animation-duration: 5.5s;
|
||||
}
|
||||
|
||||
.animate-hover-3 {
|
||||
animation-duration: 6s;
|
||||
}
|
||||
</style>
|
||||
35
src/components/sections/HeaderSection.astro
Normal file
35
src/components/sections/HeaderSection.astro
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
import GoLinkPrimary from '@components/buttons/GoLinkPrimary.astro';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
subTitle: string;
|
||||
btnExists?: boolean;
|
||||
btnTitle?: string;
|
||||
btnURL?: string;
|
||||
}
|
||||
|
||||
const { title, subTitle, btnExists, btnTitle, btnURL } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="mx-auto mt-10 px-4 sm:px-6 lg:px-8 lg:pt-10 2xl:max-w-full">
|
||||
<div class="flex-wrap md:flex md:items-center md:justify-between">
|
||||
<div class="w-full md:w-auto">
|
||||
<h1
|
||||
class="smooth-reveal block text-4xl font-bold tracking-tight text-balance text-neutral-800 md:text-5xl lg:text-6xl dark:text-neutral-200"
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
<p class="smooth-reveal mt-4 text-lg text-pretty text-neutral-600 dark:text-neutral-400">
|
||||
{subTitle}
|
||||
</p>
|
||||
{
|
||||
btnExists ? (
|
||||
<div class="smooth-reveal mt-4 md:mt-8">
|
||||
<GoLinkPrimary title={btnTitle} url={btnURL} />
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
66
src/components/sections/HeroSection.astro
Normal file
66
src/components/sections/HeroSection.astro
Normal file
@@ -0,0 +1,66 @@
|
||||
---
|
||||
import GoLinkPrimary from '@components/buttons/GoLinkPrimary.astro';
|
||||
import GoLinkSecondary from '@components/buttons/GoLinkSecondary.astro';
|
||||
import Image from '@components/ui/images/Image.astro';
|
||||
|
||||
const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, src, alt } =
|
||||
Astro.props;
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
subTitle?: string;
|
||||
primaryBtn?: string;
|
||||
primaryBtnURL?: string;
|
||||
secondaryBtn?: string;
|
||||
secondaryBtnURL?: string;
|
||||
src?: any;
|
||||
alt?: string;
|
||||
rounded?: boolean;
|
||||
}
|
||||
|
||||
const roundedClasses = Astro.props.rounded ? "rounded-xl" : null;
|
||||
---
|
||||
|
||||
<section
|
||||
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>
|
||||
<h1
|
||||
class="smooth-reveal block text-3xl font-bold tracking-tight text-balance text-neutral-800 sm:text-4xl lg:text-7xl lg:leading-tight dark:text-neutral-200"
|
||||
>
|
||||
<Fragment set:html={title} />
|
||||
</h1>
|
||||
{
|
||||
subTitle && (
|
||||
<p class="smooth-reveal mt-6 text-lg leading-relaxed text-pretty text-neutral-700 lg:w-4/5 dark:text-neutral-300">
|
||||
{subTitle}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
<div class="smooth-reveal mt-7 grid w-full gap-3 sm:inline-flex">
|
||||
{primaryBtn && <GoLinkPrimary title={primaryBtn} url={primaryBtnURL} />}
|
||||
{secondaryBtn && <GoLinkSecondary title={secondaryBtn} url={secondaryBtnURL} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="smooth-reveal-fade hidden w-full md:block">
|
||||
<div class="top-12 flex w-full justify-center overflow-hidden md:ml-4">
|
||||
{
|
||||
src && alt && (
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
class={`h-full w-[420px] scale-100 object-cover object-center ${roundedClasses}`}
|
||||
draggable="false"
|
||||
loading="eager"
|
||||
format="webp"
|
||||
quality="low"
|
||||
widths={[840]}
|
||||
disableBlur={true}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
32
src/components/sections/LatestPosts.astro
Normal file
32
src/components/sections/LatestPosts.astro
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
import { readItems } from '@directus/sdk';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import type { Post } from '@lib/directusTypes';
|
||||
import BlogCard from '@components/blog/BlogCard.astro';
|
||||
|
||||
const posts = await directus.request(
|
||||
readItems('posts', {
|
||||
filter: { published: { _eq: true } },
|
||||
fields: ['*'],
|
||||
sort: ['-published_date'],
|
||||
})
|
||||
);
|
||||
|
||||
const recentPosts = posts
|
||||
.sort((a: Post, b: Post) => (new Date(b.published_date).getTime()) - (new Date(a.published_date).getTime()))
|
||||
.slice(0, 3);
|
||||
---
|
||||
|
||||
<section class="mx-auto mb-20 max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
|
||||
<div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
|
||||
<h1
|
||||
class="smooth-reveal block text-4xl font-bold text-neutral-800 md:text-5xl md:leading-tight lg:text-5xl dark:text-neutral-200"
|
||||
>
|
||||
Latest Posts
|
||||
</h1>
|
||||
</div>
|
||||
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{recentPosts.map((b) => <BlogCard post={b} />)}
|
||||
</div>
|
||||
</section>
|
||||
32
src/components/sections/ProjectSection.astro
Normal file
32
src/components/sections/ProjectSection.astro
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
import { readItems } from '@directus/sdk';
|
||||
|
||||
import type { Project } from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import HighlightsCard from '@components/cards/HighlightsCard.astro';
|
||||
|
||||
const projects = ((await directus.request(
|
||||
readItems('site_projects' as any, {
|
||||
fields: ['*'],
|
||||
sort: ['-isActive'],
|
||||
})
|
||||
)) as unknown) as Project[];
|
||||
---
|
||||
|
||||
<section class:list={['flex flex-col gap-y-8', Astro.props.className]}>
|
||||
<h3 class="smooth-reveal card-text-header flex relative items-center w-full gap-3 pb-5">
|
||||
Projects
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:gap-8 print:flex print:flex-col">
|
||||
{projects.map((project: Project) => (
|
||||
<HighlightsCard
|
||||
title={project.name}
|
||||
description={project.description}
|
||||
url={project.source}
|
||||
highlights={project.highlights}
|
||||
visitSource={true}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
250
src/components/sections/SkillsSlider.astro
Normal file
250
src/components/sections/SkillsSlider.astro
Normal file
@@ -0,0 +1,250 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { readItems } from '@directus/sdk';
|
||||
|
||||
import type { Skill } from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
|
||||
const skills = await directus.request(
|
||||
readItems('site_skills', {
|
||||
fields: ['*'],
|
||||
sort: ['-date_created'],
|
||||
})
|
||||
);
|
||||
|
||||
const baseClasses = 'mx-2 min-w-[220px] sm:mx-4 sm:min-w-[280px]';
|
||||
const borderClasses =
|
||||
'border border-neutral-100 hover:border-neutral-200 dark:border-stone-500/20 dark:hover:border-neutral-800';
|
||||
const bgColorClasses = 'bg-neutral-100/80 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
|
||||
const hoverClasses = 'hover:-translate-y-2 hover:scale-105 ';
|
||||
const shadowClasses = 'shadow-xs hover:shadow-lg';
|
||||
---
|
||||
|
||||
<section class:list={['flex flex-col gap-4', Astro.props.className]}>
|
||||
<h3
|
||||
class="relative flex w-full items-center gap-3 pb-4 text-5xl text-neutral-800 dark:text-neutral-200"
|
||||
>
|
||||
Skills
|
||||
</h3>
|
||||
<div class="">
|
||||
<div class="tech-stack-slider relative overflow-hidden py-4 sm:py-8">
|
||||
<!-- Main slider container -->
|
||||
<div class="slider-track animate-slide flex">
|
||||
{
|
||||
[...skills, ...skills, ...skills].map((skill: Skill) => {
|
||||
return (
|
||||
<div
|
||||
class={`skill-card transform rounded-xl transition-all duration-300 ${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${shadowClasses}`}
|
||||
>
|
||||
<div class="p-4 sm:p-6">
|
||||
<div class="mb-4 flex items-center justify-between sm:mb-6">
|
||||
<div class="flex items-center gap-2 sm:gap-4">
|
||||
<div class="flex transform items-center justify-center rounded-lg text-neutral-800 transition-transform group-hover:rotate-12 dark:text-neutral-200">
|
||||
<Icon name={skill.icon} class="h-8 w-8 sm:h-12 sm:w-12" />
|
||||
</div>
|
||||
<h3 class="text-base font-semibold text-neutral-900 sm:text-xl dark:text-neutral-100">
|
||||
{skill.title}
|
||||
</h3>
|
||||
</div>
|
||||
<span class="rounded-full bg-neutral-200 px-2 py-0.5 font-mono text-xs text-neutral-700 sm:px-2.5 sm:py-1 sm:text-sm dark:bg-neutral-800 dark:text-neutral-300">
|
||||
{skill.level}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="relative h-1.5 w-full overflow-hidden rounded-full bg-stone-500/20 sm:h-2 dark:bg-stone-500/20">
|
||||
<div
|
||||
class="progress-bar-animate from-steel via-bermuda to-steel absolute top-0 left-0 h-full rounded-full bg-linear-to-r transition-all duration-1000"
|
||||
style={`width: ${skill.level}%`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mt-1 flex justify-between font-mono text-[10px] text-neutral-600 sm:mt-2 sm:text-xs dark:text-neutral-400">
|
||||
<span>Beginner</span>
|
||||
<span>Advanced</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Gradient overlays -->
|
||||
<div
|
||||
class="absolute top-0 bottom-0 left-0 z-10 w-12 bg-linear-to-r from-neutral-200 to-transparent sm:w-24 dark:from-stone-700"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-0 right-0 bottom-0 z-10 w-12 bg-linear-to-l from-neutral-200 to-transparent sm:w-24 dark:from-stone-700"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
// Create infinite scrolling effect
|
||||
function setupInfiniteScroll() {
|
||||
const cards = document.querySelectorAll('.skill-card');
|
||||
if (!cards.length) return;
|
||||
}
|
||||
|
||||
setupInfiniteScroll();
|
||||
|
||||
// Add hover effects to cards - only on non-touch devices
|
||||
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
||||
const cards = document.querySelectorAll('.skill-card');
|
||||
|
||||
if (!isTouchDevice) {
|
||||
cards.forEach((card) => {
|
||||
card.addEventListener('mousemove', (e) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
|
||||
const angleX = (y - centerY) / 15;
|
||||
const angleY = (centerX - x) / 15;
|
||||
|
||||
card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg) scale(1.08) translateZ(20px)`;
|
||||
|
||||
// Dynamic shadow based on tilt
|
||||
const shadowX = (x - centerX) / 25;
|
||||
const shadowY = (y - centerY) / 25;
|
||||
card.style.boxShadow = `
|
||||
${shadowX}px ${shadowY}px 20px rgba(0, 0, 0, 0.1),
|
||||
0 10px 20px rgba(0, 0, 0, 0.05)
|
||||
`;
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = '';
|
||||
card.style.boxShadow = '';
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Simpler effects for touch devices
|
||||
cards.forEach((card) => {
|
||||
card.addEventListener('touchstart', () => {
|
||||
card.classList.add('is-touched');
|
||||
});
|
||||
|
||||
card.addEventListener('touchend', () => {
|
||||
setTimeout(() => {
|
||||
card.classList.remove('is-touched');
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Tech Stack Slider */
|
||||
.slider-track {
|
||||
width: fit-content;
|
||||
animation: scroll 40s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(calc(-220px * 6 - 16px * 6)); /* Card width + margin for mobile */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.slider-track {
|
||||
animation: scroll 80s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(calc(-280px * 6 - 32px * 6)); /* Card width + margin for desktop */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tech-stack-slider:hover .slider-track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.skill-card {
|
||||
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skill-card:hover {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Reduce animation complexity on mobile */
|
||||
@media (max-width: 640px) {
|
||||
.skill-card {
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.skill-card:hover {
|
||||
transform: translateY(-5px) !important;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.skill-card:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
width: 120%;
|
||||
height: 120%;
|
||||
background: radial-gradient(
|
||||
circle at center,
|
||||
rgba(255, 255, 255, 0.1) 0%,
|
||||
rgba(255, 255, 255, 0) 70%
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.skill-card:hover:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.progress-bar-animate {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar-animate:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
animation: progress-shine 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes progress-shine {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
37
src/components/sections/WeatherSection.astro
Normal file
37
src/components/sections/WeatherSection.astro
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
import WeatherCard from '@components/cards/WeatherCard.astro';
|
||||
import { getFiveDayForecast } from '@support/weather';
|
||||
|
||||
const { latitude = "44.95", longitude = "-93.09", cityName = "St. Paul, Minnesota", timezone = "America/Chicago" } = Astro.props;
|
||||
const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, timezone);
|
||||
---
|
||||
|
||||
<section class="mx-auto mb-20 max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
|
||||
<div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
|
||||
<h1 class="card-text-header smooth-reveal block font-bold md:leading-tight">
|
||||
Weather in my Area
|
||||
</h1>
|
||||
<div class="smooth-reveal mx-auto mt-5 max-w-3xl text-center">
|
||||
<span class="card-text-header-description">
|
||||
Five day forecast for {cityName}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div class="card-base p-10 text-accent text-center">
|
||||
{error}
|
||||
</div>
|
||||
) : (
|
||||
<div class="flex flex-wrap justify-center gap-4 lg:gap-6">
|
||||
{forecastDays.map((forecastDay) => (
|
||||
<WeatherCard
|
||||
dayName={forecastDay.dayName}
|
||||
label={forecastDay.label}
|
||||
icon={forecastDay.icon}
|
||||
temp={forecastDay.temp}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
Reference in New Issue
Block a user