Compare commits
1 Commits
48e9cbcb02
...
10d3b6783c
| Author | SHA1 | Date | |
|---|---|---|---|
10d3b6783c
|
@@ -1,6 +1,6 @@
|
||||
---
|
||||
import BrandLogo from '@components/ui/logos/BrandLogo.astro';
|
||||
import ThemeToggleButton from '@components/buttons/ThemeToggleButton.astro';
|
||||
import ThemeToggle from '@components/ui/buttons/ThemeToggle.astro';
|
||||
import { NavigationLinks } from '@/config';
|
||||
|
||||
const pathname = new URL(Astro.request.url).pathname;
|
||||
@@ -67,7 +67,7 @@ const currentPath = pathname.slice(1);
|
||||
|
||||
<div
|
||||
id="navbar-collapse-with-animation"
|
||||
class="hs-collapse hidden grow basis-full overflow-hidden transition-all duration-300 md:block md:overflow-visible"
|
||||
class="hs-collapse hidden grow basis-full overflow-hidden transition-all duration-300 md:block"
|
||||
>
|
||||
<div
|
||||
class="mt-5 flex flex-col gap-x-0 gap-y-4 md:mt-0 md:flex-row md:items-center md:justify-end md:gap-x-4 md:gap-y-0 md:ps-7 lg:gap-x-7"
|
||||
@@ -90,7 +90,7 @@ const currentPath = pathname.slice(1);
|
||||
})
|
||||
}
|
||||
<span class="md:inline-block">
|
||||
<ThemeToggleButton />
|
||||
<ThemeToggle />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
|
||||
import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
|
||||
import Image from '@components/ui/images/Image.astro';
|
||||
|
||||
interface Props {
|
||||
@@ -39,6 +39,6 @@ const { title, subTitle, btnExists, btnTitle, btnURL, img, imgAlt } = Astro.prop
|
||||
>
|
||||
{subTitle}
|
||||
</p>
|
||||
{btnExists ? <GoLinkPrimaryButton title={btnTitle} url={btnURL} /> : null}
|
||||
{btnExists ? <PrimaryCTA title={btnTitle} url={btnURL} /> : null}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
|
||||
import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
|
||||
import Image from '@components/ui/images/Image.astro';
|
||||
|
||||
interface Props {
|
||||
@@ -43,7 +43,7 @@ const {
|
||||
>
|
||||
{subTitle}
|
||||
</p>
|
||||
{btnExists ? <GoLinkPrimaryButton title={btnTitle} url={btnURL} /> : null}
|
||||
{btnExists ? <PrimaryCTA title={btnTitle} url={btnURL} /> : null}
|
||||
</div>
|
||||
|
||||
{
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
const { title, url } = Astro.props;
|
||||
---
|
||||
|
||||
<a
|
||||
class="button-base button-bg-gitea group inline-flex rounded-full gap-x-2"
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div class="button-text-title flex relative items-center text-center">
|
||||
<Icon
|
||||
name="pajamas:gitea"
|
||||
class="h-4 w-4 md:h-6 md:w-6"
|
||||
/>
|
||||
<span class="ml-2">
|
||||
Continue to Gitea
|
||||
</span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="button-hover-arrow"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
@@ -1,28 +0,0 @@
|
||||
---
|
||||
import Icon from '@components/ui/icons/icon.astro';
|
||||
|
||||
interface Props {
|
||||
noArrow?: boolean;
|
||||
}
|
||||
|
||||
const { noArrow } = Astro.props;
|
||||
---
|
||||
|
||||
<button
|
||||
class="button-base button-bg-blue group inline-flex rounded-lg gap-x-2"
|
||||
id="back-button"
|
||||
data-astro-prefetch
|
||||
>
|
||||
<div class="button-text-title flex relative items-center text-center">
|
||||
{noArrow ? null : <Icon name="arrowLeft" />}
|
||||
<span class="ml-2">
|
||||
Go Back
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
document.getElementById('back-button')?.addEventListener('click', () => {
|
||||
window.history.back();
|
||||
});
|
||||
</script>
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
interface Props {
|
||||
url?: string;
|
||||
}
|
||||
|
||||
const { url } = Astro.props;
|
||||
---
|
||||
|
||||
<a
|
||||
class="button-base button-bg-teal group inline-flex rounded-lg gap-x-2"
|
||||
href={url}
|
||||
data-astro-prefetch
|
||||
>
|
||||
<div class="button-text-title flex relative items-center text-center">
|
||||
<Icon
|
||||
name="mdi:home-variant-outline"
|
||||
class="card-hover-icon-scale h-3 w-3 md:h-5 md:w-5"
|
||||
/>
|
||||
<span class="ml-2">
|
||||
Return Home
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
url?: string;
|
||||
noArrow?: boolean;
|
||||
}
|
||||
|
||||
const { title, url, noArrow } = Astro.props;
|
||||
---
|
||||
|
||||
<a
|
||||
class="button-base button-bg-teal group inline-flex rounded-lg gap-x-2"
|
||||
href={url}
|
||||
data-astro-prefetch
|
||||
>
|
||||
<div class="button-text-title flex relative items-center text-center">
|
||||
<span class="mr-2">
|
||||
{title}
|
||||
</span>
|
||||
{noArrow ? null : (
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="button-hover-arrow"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
@@ -1,20 +0,0 @@
|
||||
---
|
||||
interface Props {
|
||||
title?: string;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
const { title, url } = Astro.props;
|
||||
---
|
||||
|
||||
<a
|
||||
class="button-base button-bg-neutral group inline-flex rounded-lg gap-x-2"
|
||||
href={url}
|
||||
data-astro-prefetch
|
||||
>
|
||||
<div class="button-text-title flex relative items-center text-center">
|
||||
<span>
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
@@ -1,51 +0,0 @@
|
||||
---
|
||||
import Icon from '@components/ui/icons/icon.astro';
|
||||
|
||||
type SocialPlatform = {
|
||||
name: string;
|
||||
url: string;
|
||||
svg: string;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
pageTitle: string;
|
||||
}
|
||||
|
||||
const { pageTitle } = Astro.props;
|
||||
|
||||
const socialPlatforms: SocialPlatform[] = [
|
||||
{
|
||||
name: 'Facebook',
|
||||
url: `https://www.facebook.com/sharer/sharer.php?u=${Astro.url}`,
|
||||
svg: 'facebook',
|
||||
},
|
||||
{
|
||||
name: 'X',
|
||||
url: `https://x.com/intent/tweet?url=${Astro.url}&text=${pageTitle}`,
|
||||
svg: 'x',
|
||||
},
|
||||
{
|
||||
name: 'LinkedIn',
|
||||
url: `https://www.linkedin.com/sharing/share-offsite/?url=${Astro.url}`,
|
||||
svg: 'linkedIn',
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<div class="inline-flex items-center gap-x-2">
|
||||
{
|
||||
socialPlatforms.map((platform) => (
|
||||
<a
|
||||
class="button-base-hidden group inline-flex rounded-lg gap-x-2"
|
||||
href={platform.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title={`Share on ${platform.name}`}
|
||||
>
|
||||
<div class="button-text-title-hidden flex relative items-center text-center">
|
||||
<Icon name={platform.svg} class="h-5 w-5" />
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
@@ -1,159 +0,0 @@
|
||||
---
|
||||
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'as any, {
|
||||
fields: ['*'],
|
||||
sort: ['-endDate'],
|
||||
})
|
||||
)) as unknown) as Experience[];
|
||||
---
|
||||
|
||||
<section class:list={['flex flex-col gap-8', Astro.props.className]}>
|
||||
<h3 class="smooth-reveal card-text-header flex relative items-center w-full gap-3 pb-10">
|
||||
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="smooth-reveal group relative grid sm:grid-cols-18 sm:gap-8 md:gap-6 pb-16">
|
||||
<header class="relative sm:col-span-3 text-header font-semibold text-lg mt-1">
|
||||
<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 sm:col-span-12 pb-6">
|
||||
<div class="absolute bg-stone-400 -translate-x-[1.71rem] rounded-full h-2 w-2 mt-4"/>
|
||||
<h3>
|
||||
<div
|
||||
class="inline-flex items-center text-2xl leading-tight font-semibold"
|
||||
aria-label="{position} - {company}"
|
||||
>
|
||||
<span class="text-header">
|
||||
{experience.position} <span>@</span>
|
||||
{experience.url ? (
|
||||
<a
|
||||
class="hover:text-main"
|
||||
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-secondary text-sm">
|
||||
{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="text-header font-semibold">
|
||||
Summary:
|
||||
</h4>
|
||||
<ul class="flex flex-col text-primary list-disc gap-2 [&>li]:ml-4">
|
||||
<li class="marker:text-main">
|
||||
{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="text-header font-semibold">
|
||||
Responsibilities:
|
||||
</h4>
|
||||
<ul class="flex flex-col text-primary list-disc gap-2 [&>li]:ml-4">
|
||||
{experience.responsibilities.map(responsibility => (
|
||||
<li class="marker:text-main">
|
||||
{responsibility}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{experience.achievements && (
|
||||
<div class="flex flex-col gap-1">
|
||||
<h4 class="text-header font-semibold">
|
||||
Achievements:
|
||||
</h4>
|
||||
<ul class="flex flex-col text-primary list-disc gap-2 [&>li]:ml-4">
|
||||
{experience.achievements.map(achievement => (
|
||||
<li class="marker:text-main">
|
||||
{achievement}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button @click="expanded = ! expanded" class="group/more flex items-center justify-center text-primary hover:text-primary-hover text-xs underline transition-all gap-1.5 w-fit cursor-pointer">
|
||||
<span x-text="expanded ? 'Show less' : 'Show more'">
|
||||
Show more
|
||||
</span>
|
||||
<svg
|
||||
class="group-hover/more:translate-y-0.5 ease-out duration-300 h-4 w-4"
|
||||
: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();
|
||||
const skillName = skill.split(':')[1].replace(/^language-/, '').replace(/-/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase());
|
||||
return (
|
||||
<li class="flex items-center bg-steel/20 dark:bg-bermuda/20 text-neutral-800 dark:text-neutral-200 text-xs rounded-md border border-solid border-steel/20 dark:border-bermuda/20 gap-1 px-2 py-0.5">
|
||||
<Icon name={`${iconName}`} class="h-4 w-4" /> <span>{skillName}</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>
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.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 card-text-header block lg:text-6xl">
|
||||
{title}
|
||||
</h1>
|
||||
<p class="smooth-reveal card-text-header-description mt-4">
|
||||
{subTitle}
|
||||
</p>
|
||||
{btnExists ? (
|
||||
<div class="smooth-reveal mt-4 md:mt-8">
|
||||
<GoLinkPrimaryButton title={btnTitle} url={btnURL}/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,56 +0,0 @@
|
||||
---
|
||||
import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
|
||||
import GoLinkSecondaryButton from '@components/buttons/GoLinkSecondaryButton.astro';
|
||||
import Image from '@components/ui/images/Image.astro';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
subTitle?: string;
|
||||
primaryBtn?: string;
|
||||
primaryBtnURL?: string;
|
||||
secondaryBtn?: string;
|
||||
secondaryBtnURL?: string;
|
||||
src?: any;
|
||||
alt?: string;
|
||||
rounded?: boolean;
|
||||
}
|
||||
|
||||
const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, src, alt } = Astro.props;
|
||||
|
||||
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 card-text-header block lg:text-7xl">
|
||||
<Fragment set:html={title} />
|
||||
</h1>
|
||||
{subTitle && (
|
||||
<p class="smooth-reveal card-text-header-description lg:w-4/5 mt-6">
|
||||
{subTitle}
|
||||
</p>
|
||||
)}
|
||||
<div class="smooth-reveal grid sm:inline-flex mt-7 w-full gap-3">
|
||||
{primaryBtn && <GoLinkPrimaryButton title={primaryBtn} url={primaryBtnURL} />}
|
||||
{secondaryBtn && <GoLinkSecondaryButton title={secondaryBtn} url={secondaryBtnURL} />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="smooth-reveal-fade md:block w-full hidden">
|
||||
<div class="flex justify-center w-full top-12 md:ml-4 overflow-hidden">
|
||||
{src && alt && (
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
class={`h-full w-105 scale-100 object-cover object-center ${roundedClasses}`}
|
||||
draggable="false"
|
||||
loading="eager"
|
||||
format="webp"
|
||||
quality="low"
|
||||
widths={[840]}
|
||||
disableBlur={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -4,7 +4,7 @@ import Icon from '@components/ui/icons/icon.astro';
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="button-base button-bg-blue group inline-flex items-center rounded-lg p-2.5"
|
||||
class="focus-visible:ring-secondary group inline-flex items-center rounded-lg p-2.5 text-neutral-600 ring-neutral-500 transition duration-300 outline-none hover:bg-neutral-100 focus:outline-none focus-visible:ring-1 focus-visible:outline-none dark:text-neutral-400 dark:ring-neutral-200 dark:hover:bg-neutral-700"
|
||||
data-bookmark-button="bookmark-button"
|
||||
>
|
||||
<Icon name="bookmark" />
|
||||
32
src/components/ui/buttons/GiteaBtn.astro
Normal file
32
src/components/ui/buttons/GiteaBtn.astro
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
const { title, url } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
const baseClasses =
|
||||
'group group-hover inline-flex items-center justify-center gap-x-3 rounded-full px-4 py-3 text-center text-sm font-medium text-neutral-200';
|
||||
const borderClasses = 'border border-transparent';
|
||||
const bgColorClasses =
|
||||
'bg-gitea-primary hover:bg-gitea-secondary dark:bg-gitea-secondary dark:hover:bg-gitea-primary';
|
||||
const shadowClasses = 'shadow-sm';
|
||||
const fontSizeClasses = '2xl:text-base';
|
||||
---
|
||||
|
||||
<a
|
||||
class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${shadowClasses} ${fontSizeClasses} `}
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Icon name="pajamas:gitea" class="h-4 w-4 md:h-6 md:w-6" />
|
||||
{title}
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="h-3 w-3 translate-y-0.25 transition duration-300 group-hover:translate-x-1 md:h-5 md:w-5"
|
||||
/>
|
||||
</a>
|
||||
35
src/components/ui/buttons/GoBack.astro
Normal file
35
src/components/ui/buttons/GoBack.astro
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
import Icon from '@components/ui/icons/icon.astro';
|
||||
|
||||
const { title, noArrow } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
url?: string;
|
||||
noArrow?: boolean;
|
||||
addHome?: boolean;
|
||||
}
|
||||
|
||||
const baseClasses =
|
||||
'group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-50 ring-neutral-500 transition duration-300 focus-visible:ring outline-none';
|
||||
const borderClasses = 'border border-transparent';
|
||||
const bgColorClasses = 'bg-steel hover:bg-sky-800 active:bg-orange-500 dark:focus:outline-none';
|
||||
const disableClasses = 'disabled:pointer-events-none disabled:opacity-50';
|
||||
const fontSizeClasses = '2xl:text-base';
|
||||
const ringClasses = 'dark:ring-neutral-200';
|
||||
---
|
||||
|
||||
<button
|
||||
class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${disableClasses} ${fontSizeClasses} ${ringClasses}`}
|
||||
id="back-button"
|
||||
data-astro-prefetch
|
||||
>
|
||||
{noArrow ? null : <Icon name="arrowLeft" />}
|
||||
{title}
|
||||
</button>
|
||||
|
||||
<script>
|
||||
document.getElementById('back-button')?.addEventListener('click', () => {
|
||||
window.history.back();
|
||||
});
|
||||
</script>
|
||||
45
src/components/ui/buttons/PrimaryCTA.astro
Normal file
45
src/components/ui/buttons/PrimaryCTA.astro
Normal file
@@ -0,0 +1,45 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
const { title, url, noArrow, addHome, addClass } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
url?: string;
|
||||
noArrow?: boolean;
|
||||
addHome?: boolean;
|
||||
addClass?: string;
|
||||
}
|
||||
|
||||
const baseClasses =
|
||||
'group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-100 transition duration-300 ';
|
||||
const borderClasses = 'border border-transparent';
|
||||
const bgColorClasses = 'bg-bermuda hover:bg-turquoise dark:bg-turquoise dark:hover:bg-bermuda';
|
||||
const disableClasses = 'disabled:pointer-events-none disabled:opacity-50';
|
||||
const fontSizeClasses = '2xl:text-base';
|
||||
const ringClasses = 'dark:ring-neutral-200';
|
||||
---
|
||||
|
||||
<a
|
||||
class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${disableClasses} ${fontSizeClasses} ${ringClasses} ${addClass}`}
|
||||
href={url}
|
||||
data-astro-prefetch
|
||||
>
|
||||
{
|
||||
addHome ? (
|
||||
<Icon
|
||||
name="mdi:home-variant-outline"
|
||||
class="h-3 w-3 translate-y-0.25 transition duration-300 group-hover:translate-x-1 md:h-5 md:w-5"
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
{title}
|
||||
{
|
||||
noArrow ? null : (
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="h-3 w-3 translate-y-0.25 transition duration-300 group-hover:translate-x-1 md:h-5 md:w-5"
|
||||
/>
|
||||
)
|
||||
}
|
||||
</a>
|
||||
26
src/components/ui/buttons/SecondaryCTA.astro
Normal file
26
src/components/ui/buttons/SecondaryCTA.astro
Normal file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
const { title, url } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
const baseClasses =
|
||||
'inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-center text-sm font-medium text-neutral-600 shadow-sm outline-none ring-neutral-500 focus-visible:ring transition duration-300';
|
||||
const borderClasses = 'border border-neutral-200';
|
||||
const bgColorClasses = 'bg-neutral-300';
|
||||
const hoverClasses = 'hover:bg-neutral-400/50 hover:text-neutral-600 active:text-neutral-700';
|
||||
const disableClasses = 'disabled:pointer-events-none disabled:opacity-50';
|
||||
const fontSizeClasses = '2xl:text-base';
|
||||
const ringClasses = 'ring-neutral-500';
|
||||
const darkClasses =
|
||||
'dark:border-neutral-700 dark:bg-neutral-700 dark:text-neutral-300 dark:ring-neutral-200 dark:hover:bg-neutral-600 dark:focus:outline-none';
|
||||
---
|
||||
|
||||
<a
|
||||
class={`${baseClasses} ${borderClasses} ${bgColorClasses} ${hoverClasses} ${disableClasses} ${fontSizeClasses} ${ringClasses} ${darkClasses}`}
|
||||
href={url}
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
150
src/components/ui/buttons/SocialShare.astro
Normal file
150
src/components/ui/buttons/SocialShare.astro
Normal file
@@ -0,0 +1,150 @@
|
||||
---
|
||||
import Icon from '@components/ui/icons/icon.astro';
|
||||
|
||||
const { pageTitle, title = 'Share' } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
pageTitle: string;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
type SocialPlatform = {
|
||||
name: string;
|
||||
url: string;
|
||||
svg: string;
|
||||
};
|
||||
|
||||
const socialPlatforms: SocialPlatform[] = [
|
||||
{
|
||||
name: 'Facebook',
|
||||
url: `https://www.facebook.com/share.php?u=${Astro.url}&title=${pageTitle}`,
|
||||
svg: 'facebook',
|
||||
},
|
||||
{
|
||||
name: 'X',
|
||||
url: `https://twitter.com/home/?status=${pageTitle}${Astro.url}`,
|
||||
svg: 'x',
|
||||
},
|
||||
{
|
||||
name: 'LinkedIn',
|
||||
url: `https://www.linkedin.com/shareArticle?mini=true&url=${Astro.url}&title=${pageTitle}`,
|
||||
svg: 'linkedIn',
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<div class="hs-dropdown relative inline-flex [--auto-close:inside] [--placement:top-left]">
|
||||
<button
|
||||
id="hs-dropup"
|
||||
type="button"
|
||||
class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 ring-neutral-500 transition duration-300 outline-none hover:bg-neutral-100 hover:text-neutral-700 focus-visible:ring dark:text-neutral-400 dark:ring-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:outline-none"
|
||||
>
|
||||
<Icon name="share" />
|
||||
|
||||
{title}
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="hs-dropdown-menu duration hs-dropdown-open:opacity-100 z-10 hidden w-72 divide-y divide-neutral-200 rounded-lg bg-neutral-50 p-2 opacity-0 shadow-md transition-[opacity,margin] dark:divide-neutral-700 dark:border dark:border-neutral-700 dark:bg-neutral-800"
|
||||
aria-labelledby="hs-dropup"
|
||||
>
|
||||
<div class="py-2 first:pt-0 last:pb-0">
|
||||
{
|
||||
socialPlatforms.map((platform) => (
|
||||
<a
|
||||
class="flex items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-200 focus:bg-neutral-100 focus:outline-none dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700"
|
||||
href={platform.url}
|
||||
>
|
||||
<Icon name={platform.svg} />
|
||||
Share on {platform.name}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div class="py-2 first:pt-0 last:pb-0">
|
||||
<button
|
||||
type="button"
|
||||
class="js-clipboard hover:text-dark focus-visible:ring-secondary group inline-flex w-full items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-200 focus:bg-neutral-100 focus:outline-none focus-visible:ring-1 focus-visible:outline-none dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700"
|
||||
data-clipboard-success-text="Copied"
|
||||
>
|
||||
<svg
|
||||
class="js-clipboard-default h-4 w-4 transition group-hover:rotate-6"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect>
|
||||
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="js-clipboard-success hidden h-4 w-4 text-neutral-700 dark:text-neutral-300"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
<span class="js-clipboard-success-text">Copy link</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Import the necessary Dropdown and Clipboard plugins-->
|
||||
<!--https://preline.co/plugins/html/dropdown.html-->
|
||||
<!--<script is:inline src="/scripts/vendor/preline/dropdown/index.js"></script>-->
|
||||
|
||||
<!-- https://clipboardjs.com/ -->
|
||||
<!--<script is:inline src="/scripts/vendor/clipboard.min.js"></script>-->
|
||||
|
||||
<script is:inline>
|
||||
(function () {
|
||||
window.addEventListener('load', () => {
|
||||
const $clipboards = document.querySelectorAll('.js-clipboard');
|
||||
$clipboards.forEach((el) => {
|
||||
const clipboard = new ClipboardJS(el, {
|
||||
text: () => {
|
||||
return window.location.href;
|
||||
},
|
||||
});
|
||||
clipboard.on('success', () => {
|
||||
const $default = el.querySelector('.js-clipboard-default');
|
||||
const $success = el.querySelector('.js-clipboard-success');
|
||||
const $successText = el.querySelector('.js-clipboard-success-text');
|
||||
const successText = el.dataset.clipboardSuccessText || '';
|
||||
let oldSuccessText;
|
||||
|
||||
if ($successText) {
|
||||
oldSuccessText = $successText.textContent;
|
||||
$successText.textContent = successText;
|
||||
}
|
||||
if ($default && $success) {
|
||||
$default.style.display = 'none';
|
||||
$success.style.display = 'block';
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if ($successText && oldSuccessText) {
|
||||
$successText.textContent = oldSuccessText;
|
||||
}
|
||||
if ($default && $success) {
|
||||
$success.style.display = '';
|
||||
$default.style.display = '';
|
||||
}
|
||||
}, 800);
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
@@ -5,14 +5,14 @@
|
||||
<button
|
||||
id="theme-toggle"
|
||||
data-theme-toggle
|
||||
class="group dark:hover:bg-steel/30 hover:bg-yellow-300/20 transition-all duration-300 relative rounded-full p-1.5 sm:p-2 touch-manipulation"
|
||||
class="group dark:hover:bg-steel/30 relative touch-manipulation overflow-hidden rounded-full p-1.5 transition-all duration-300 hover:bg-yellow-300/20 focus:outline-hidden sm:p-2"
|
||||
aria-label="Toggle dark mode"
|
||||
>
|
||||
<div class="relative flex h-5 w-5 items-center justify-center">
|
||||
<div class="relative z-10 flex h-5 w-5 items-center justify-center">
|
||||
<!-- Sun icon -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-light absolute h-5 w-5 text-neutral-600 dark:text-neutral-400 scale-100 dark:scale-0 rotate-0 dark:-rotate-90 transition-all duration-500"
|
||||
class="icon-light absolute h-5 w-5 scale-100 rotate-0 text-neutral-600 transition-all duration-500 dark:scale-0 dark:-rotate-90 dark:text-neutral-400"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
@@ -29,7 +29,7 @@
|
||||
<!-- Moon icon -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="icon-dark absolute h-5 w-5 text-neutral-600 dark:text-neutral-400 scale-0 dark:scale-100 rotate-90 dark:rotate-0 transition-all duration-500"
|
||||
class="icon-dark absolute h-5 w-5 scale-0 rotate-90 text-neutral-600 transition-all duration-500 dark:scale-100 dark:rotate-0 dark:text-neutral-400"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
@@ -43,23 +43,25 @@
|
||||
</button>
|
||||
|
||||
<script is:inline>
|
||||
const applyTheme = () => {
|
||||
const isDark =
|
||||
localStorage.theme === 'dark' ||
|
||||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||
document.documentElement.classList.toggle('dark', isDark);
|
||||
};
|
||||
|
||||
applyTheme();
|
||||
// Use a function to persist theme when using SPA transitions
|
||||
// https://docs.astro.build/en/guides/view-transitions/#script-re-execution
|
||||
function applyTheme() {
|
||||
localStorage.theme === 'dark'
|
||||
? document.documentElement.classList.add('dark')
|
||||
: document.documentElement.classList.remove('dark');
|
||||
}
|
||||
|
||||
document.addEventListener('astro:after-swap', applyTheme);
|
||||
|
||||
applyTheme();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Use a function to handle theme toggle to ensure it can be called from anywhere
|
||||
function setupThemeToggle() {
|
||||
const themeToggles = document.querySelectorAll('[data-theme-toggle]');
|
||||
|
||||
// Create theme switch overlay element
|
||||
// Create theme switch overlay element if it doesn't exist
|
||||
if (!document.querySelector('.theme-switch-overlay')) {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'theme-switch-overlay fixed inset-0 pointer-events-none z-50';
|
||||
@@ -68,7 +70,9 @@
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
|
||||
// Toggle theme when any theme toggle button is clicked
|
||||
themeToggles.forEach((toggle) => {
|
||||
// Add event listeners for both click and touch events
|
||||
['click', 'touchend'].forEach((eventType) => {
|
||||
toggle.addEventListener(
|
||||
eventType,
|
||||
@@ -88,10 +92,14 @@
|
||||
y = e.clientY - rect.top;
|
||||
}
|
||||
|
||||
// Set the position variables for the radial gradient
|
||||
document.documentElement.style.setProperty('--x', `${x}px`);
|
||||
document.documentElement.style.setProperty('--y', `${y}px`);
|
||||
|
||||
// Get the overlay element
|
||||
const overlay = document.querySelector('.theme-switch-overlay');
|
||||
|
||||
// Determine the new theme
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
const newTheme = isDark ? 'light' : 'dark';
|
||||
|
||||
@@ -102,6 +110,7 @@
|
||||
overlay.style.opacity = '1';
|
||||
}
|
||||
|
||||
// Add transition class
|
||||
document.documentElement.classList.add('theme-switching');
|
||||
|
||||
// Force a reflow to ensure all elements update
|
||||
@@ -115,7 +124,10 @@
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
|
||||
// Store the preference
|
||||
localStorage.setItem('theme', newTheme);
|
||||
|
||||
// Dispatch a custom event for other components to react to
|
||||
document.dispatchEvent(
|
||||
new CustomEvent('themeChanged', {
|
||||
detail: { isDark: newTheme === 'dark' },
|
||||
@@ -125,10 +137,13 @@
|
||||
// Force another reflow to ensure all elements update
|
||||
document.body.offsetHeight;
|
||||
|
||||
// Hide overlay after theme has changed
|
||||
setTimeout(() => {
|
||||
if (overlay) {
|
||||
overlay.style.opacity = '0';
|
||||
}
|
||||
|
||||
// Remove transition class after animation completes
|
||||
document.documentElement.classList.remove('theme-switching');
|
||||
}, 300);
|
||||
}, 50);
|
||||
@@ -136,6 +151,25 @@
|
||||
{ passive: false }
|
||||
);
|
||||
});
|
||||
|
||||
// Add touch feedback
|
||||
toggle.addEventListener(
|
||||
'touchstart',
|
||||
() => {
|
||||
toggle.classList.add('active-touch');
|
||||
},
|
||||
{ passive: true }
|
||||
);
|
||||
|
||||
toggle.addEventListener(
|
||||
'touchend',
|
||||
() => {
|
||||
setTimeout(() => {
|
||||
toggle.classList.remove('active-touch');
|
||||
}, 150);
|
||||
},
|
||||
{ passive: true }
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -167,32 +201,61 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Smooth transition for the entire page when theme changes */
|
||||
:global(body) {
|
||||
transition:
|
||||
background-color 0.5s ease,
|
||||
color 0.5s ease;
|
||||
}
|
||||
|
||||
/* Theme transition overlay */
|
||||
:global(.theme-switch-overlay) {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Ensure theme transitions apply to all elements */
|
||||
:global(.theme-switching *) {
|
||||
transition-duration: 0.5s !important;
|
||||
transition-property: background-color, border-color, color, fill, stroke !important;
|
||||
}
|
||||
|
||||
/* Subtle hover animation */
|
||||
#theme-toggle {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
min-height: 32px;
|
||||
min-width: 32px;
|
||||
-webkit-tap-highlight-color: transparent; /* Remove default mobile tap highlight */
|
||||
min-height: 32px; /* Ensure minimum touch target size */
|
||||
min-width: 32px; /* Ensure minimum touch target size */
|
||||
}
|
||||
|
||||
/* Only apply hover effects on non-touch devices */
|
||||
@media (hover: hover) {
|
||||
#theme-toggle:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
:global(:root:not(.dark)) #theme-toggle:hover .icon-light {
|
||||
filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.6));
|
||||
#theme-toggle:hover .icon-light:not(.dark .icon-light) {
|
||||
filter: drop-shadow-sm(0 0 2px rgba(251, 191, 36, 0.6));
|
||||
transform: scale(1.1) rotate(15deg);
|
||||
}
|
||||
|
||||
:global(:root.dark) #theme-toggle:hover .icon-dark {
|
||||
filter: drop-shadow(0 0 2px rgba(129, 140, 248, 0.6));
|
||||
#theme-toggle:hover .icon-dark:not(:not(.dark) .icon-dark) {
|
||||
filter: drop-shadow-sm(0 0 2px rgba(129, 140, 248, 0.6));
|
||||
transform: scale(1.1) rotate(-15deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch feedback */
|
||||
#theme-toggle.active-touch {
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
/* Optimize animations for mobile */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.icon-light,
|
||||
@@ -55,7 +55,7 @@ const visitClass = visitSource ? 'card-hover-text-gitea' : 'card-hover-text-titl
|
||||
)}
|
||||
<div class="ml-6 flex">
|
||||
<div class="relative inline-block">
|
||||
<div class={`card-text-title ${visitClass} flex relative items-center mx-auto min-h-11 font-semibold text-md sm:mx-0 sm:mt-4`}>
|
||||
<div class={`card-text-title ${visitClass} flex relative mx-auto min-h-11 items-center font-semibold text-md sm:mx-0 sm:mt-4`}>
|
||||
{visitSource && <Icon name="pajamas:gitea" />}
|
||||
<span class="relative inline-block overflow-hidden ml-2">
|
||||
{visitText}
|
||||
@@ -4,7 +4,7 @@ import { readItems } from '@directus/sdk';
|
||||
import type { Application } from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import HighlightsCard from '@components/cards/HighlightsCard.astro';
|
||||
import HighlightsCard from '@components/ui/cards/HighlightsCard.astro';
|
||||
|
||||
const applications = ((await directus.request(
|
||||
readItems('site_applications' as any, {
|
||||
@@ -5,7 +5,7 @@ import type { Education, Certificate} from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import { getDirectusImageURL } from '@lib/directusFunctions';
|
||||
import EducationCard from '@components/cards/EducationCard.astro';
|
||||
import EducationCard from '@components/ui/cards/EducationCard.astro';
|
||||
|
||||
const educations = ((await directus.request(
|
||||
readItems('site_education' as any, {
|
||||
@@ -27,7 +27,7 @@ const certificates = ((await directus.request(
|
||||
Education
|
||||
</h3>
|
||||
<div class="mx-8">
|
||||
<h4 class="smooth-reveal card-text-header-minor pt-5">
|
||||
<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">
|
||||
152
src/components/ui/sections/Experience.astro
Normal file
152
src/components/ui/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>
|
||||
@@ -2,13 +2,15 @@
|
||||
import { readSingleton } from '@directus/sdk';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import FeaturesCard from '@components/cards/FeaturesCard.astro';
|
||||
import FeaturesCard from '@components/ui/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="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
|
||||
35
src/components/ui/sections/HeaderSection.astro
Normal file
35
src/components/ui/sections/HeaderSection.astro
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.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">
|
||||
<PrimaryCTA title={btnTitle} url={btnURL} />
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
66
src/components/ui/sections/HeroSection.astro
Normal file
66
src/components/ui/sections/HeroSection.astro
Normal file
@@ -0,0 +1,66 @@
|
||||
---
|
||||
import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
|
||||
import SecondaryCTA from '@components/ui/buttons/SecondaryCTA.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 && <PrimaryCTA title={primaryBtn} url={primaryBtnURL} />}
|
||||
{secondaryBtn && <SecondaryCTA 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>
|
||||
@@ -1,20 +1,22 @@
|
||||
---
|
||||
import GiteaButton from '@components/buttons/GiteaButton.astro';
|
||||
import GiteaBtn from '@components/ui/buttons/GiteaBtn.astro';
|
||||
|
||||
const { title, subTitle, url } = Astro.props;
|
||||
const btnTitle = 'Continue to Gitea';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
subTitle?: string;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
const { title, subTitle, url } = Astro.props;
|
||||
---
|
||||
|
||||
<section class="lg:px- relative mx-auto mb-20 max-w-340 px-4 pt-30 pb-30 sm:px-6">
|
||||
<!-- Animated shapes -->
|
||||
<div class="smooth-reveal absolute top-[55%] left-0 scale-90 md:top-[20%] xl:top-[25%] xl:left-[10%]">
|
||||
<div
|
||||
class="smooth-reveal absolute top-[55%] left-0 scale-90 md:top-[20%] xl:top-[25%] xl:left-[10%]"
|
||||
>
|
||||
<svg
|
||||
class="gitea-animate-hover gitea-animate-hover-1"
|
||||
class="animate-hover animate-hover-1"
|
||||
width="64"
|
||||
height="64"
|
||||
fill="none"
|
||||
@@ -44,7 +46,7 @@ const { title, subTitle, url } = Astro.props;
|
||||
</div>
|
||||
<div class="smooth-reveal absolute top-0 left-[85%] scale-75">
|
||||
<svg
|
||||
class="gitea-animate-hover gitea-animate-hover-2"
|
||||
class="animate-hover animate-hover-2"
|
||||
width="64"
|
||||
height="64"
|
||||
fill="none"
|
||||
@@ -78,9 +80,11 @@ const { title, subTitle, url } = Astro.props;
|
||||
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%]">
|
||||
<div
|
||||
class="smooth-reveal absolute bottom-[5%] left-[60%] scale-[.6] xl:bottom-[15%] xl:left-[35%]"
|
||||
>
|
||||
<svg
|
||||
class="gitea-animate-hover gitea-animate-hover-3"
|
||||
class="animate-hover animate-hover-3"
|
||||
width="64"
|
||||
height="64"
|
||||
fill="none"
|
||||
@@ -102,54 +106,59 @@ const { title, subTitle, url } = Astro.props;
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Heading -->
|
||||
<!-- Hero Section Heading -->
|
||||
<div class="smooth-reveal-2 mx-auto mt-5 max-w-xl text-center">
|
||||
<h1 class="card-text-header block">
|
||||
<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}
|
||||
</h1>
|
||||
</h2>
|
||||
</div>
|
||||
<!-- Sub-heading -->
|
||||
<!-- Hero Section Sub-heading -->
|
||||
<div class="smooth-reveal-2 mx-auto mt-5 max-w-3xl text-center">
|
||||
{subTitle && (
|
||||
<p class="card-text-header-description">
|
||||
{subTitle}
|
||||
</p>
|
||||
)}
|
||||
{
|
||||
subTitle && (
|
||||
<p class="text-lg text-pretty text-neutral-600 dark:text-neutral-400">{subTitle}</p>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<!-- Gitea Button -->
|
||||
{url && (
|
||||
<div class="smooth-reveal-2 flex justify-center mt-8 gap-3">
|
||||
<GiteaButton url={url}/>
|
||||
</div>
|
||||
)}
|
||||
<!-- Github Button -->
|
||||
{
|
||||
url && (
|
||||
<div class="smooth-reveal-2 mt-8 flex justify-center gap-3">
|
||||
<GiteaBtn url={url} title={btnTitle} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
@keyframes gitea-animate-hover {
|
||||
@keyframes animate-hover {
|
||||
from {
|
||||
transform: translateY(15px);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.gitea-animate-hover {
|
||||
animation: gitea-animate-hover ease-in-out;
|
||||
.animate-hover {
|
||||
animation: animate-hover ease-in-out;
|
||||
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
.gitea-animate-hover-1 {
|
||||
.animate-hover-1 {
|
||||
animation-duration: 5s;
|
||||
}
|
||||
|
||||
.gitea-animate-hover-2 {
|
||||
.animate-hover-2 {
|
||||
animation-duration: 5.5s;
|
||||
}
|
||||
|
||||
.gitea-animate-hover-3 {
|
||||
.animate-hover-3 {
|
||||
animation-duration: 6s;
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,8 @@
|
||||
---
|
||||
import { readItems } from '@directus/sdk';
|
||||
|
||||
import type { Post } from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import type { Post } from '@lib/directusTypes';
|
||||
import BlogCard from '@components/blog/BlogCard.astro';
|
||||
|
||||
const posts = await directus.request(
|
||||
@@ -21,14 +20,11 @@ const recentPosts = posts
|
||||
|
||||
<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 card-text-header block">
|
||||
<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 class="smooth-reveal mx-auto mt-5 max-w-3xl text-center">
|
||||
<span class="card-text-header-description">
|
||||
Checkout my most recent thoughts here
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{recentPosts.map((b) => <BlogCard post={b} />)}
|
||||
@@ -4,7 +4,7 @@ import { readItems } from '@directus/sdk';
|
||||
import type { Project } from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import HighlightsCard from '@components/cards/HighlightsCard.astro';
|
||||
import HighlightsCard from '@components/ui/cards/HighlightsCard.astro';
|
||||
|
||||
const projects = ((await directus.request(
|
||||
readItems('site_projects' as any, {
|
||||
@@ -6,63 +6,86 @@ import type { Skill } from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
|
||||
const skills = ((await directus.request(
|
||||
readItems('site_skills' as any, {
|
||||
const skills = await directus.request(
|
||||
readItems('site_skills', {
|
||||
fields: ['*'],
|
||||
sort: ['-date_created'],
|
||||
})
|
||||
)) as unknown) as Skill[];
|
||||
);
|
||||
|
||||
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="smooth-reveal card-text-header flex relative items-center w-full gap-3 pb-5">
|
||||
<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 card-base transform hover:-translate-y-2 hover:scale-105 transition-all duration-300 mx-2 min-w-55 sm:mx-4 sm:min-w-70">
|
||||
<div class="p-4 sm:p-6">
|
||||
<div class="flex items-center justify-between mb-4 sm:mb-6">
|
||||
<div class="flex items-center gap-2 sm:gap-4">
|
||||
<div class="flex items-center justify-center rounded-lg text-primary">
|
||||
<Icon name={skill.icon} class="h-8 w-8 sm:h-12 sm:w-12" />
|
||||
</div>
|
||||
<h3 class="text-neutral-900 dark:text-neutral-100 text-base font-semibold sm:text-xl">
|
||||
{skill.title}
|
||||
</h3>
|
||||
</div>
|
||||
<span class=" bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 font-mono text-xs sm:text-sm rounded-full px-2 sm:px-2.5 py-0.5 sm:py-1">
|
||||
{skill.level}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="relative bg-stone-500/20 dark:bg-stone-500/20 rounded-full h-1.5 sm:h-2 w-full overflow-hidden">
|
||||
{
|
||||
[...skills, ...skills, ...skills].map((skill: Skill) => {
|
||||
return (
|
||||
<div
|
||||
class="progress-bar-animate bg-linear-to-r from-steel via-bermuda to-steel absolute top-0 left-0 h-full rounded-full transition-all duration-1000"
|
||||
style={`width: ${skill.level}%`}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-between text-secondary font-mono text-[10px] mt-1 sm:mt-2 sm:text-xs">
|
||||
<span>Beginner</span>
|
||||
<span>Advanced</span>
|
||||
</div>
|
||||
</div>
|
||||
</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="bg-linear-to-r from-neutral-200 to-transparent dark:from-stone-700 absolute top-0 bottom-0 left-0 z-10 w-12 sm:w-24"/>
|
||||
<div class="bg-linear-to-l from-neutral-200 to-transparent dark:from-stone-700 absolute top-0 bottom-0 right-0 z-10 w-12 sm:w-24"/>
|
||||
<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;
|
||||
@@ -70,6 +93,7 @@ const skills = ((await directus.request(
|
||||
|
||||
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');
|
||||
|
||||
@@ -120,7 +144,7 @@ const skills = ((await directus.request(
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Specific css to enable sliding effect */
|
||||
/* Tech Stack Slider */
|
||||
.slider-track {
|
||||
width: fit-content;
|
||||
animation: scroll 40s linear infinite;
|
||||
@@ -131,7 +155,7 @@ const skills = ((await directus.request(
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(calc(-220px * 6 - 16px * 6));
|
||||
transform: translateX(calc(-220px * 6 - 16px * 6)); /* Card width + margin for mobile */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -145,7 +169,7 @@ const skills = ((await directus.request(
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(calc(-280px * 6 - 32px * 6));
|
||||
transform: translateX(calc(-280px * 6 - 32px * 6)); /* Card width + margin for desktop */
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
import WeatherCard from '@components/cards/WeatherCard.astro';
|
||||
import WeatherCard from '@components/ui/cards/WeatherCard.astro';
|
||||
import { getFiveDayForecast } from '@support/weather';
|
||||
|
||||
const { latitude = "44.95", longitude = "-93.09", cityName = "St. Paul, Minnesota", timezone = "America/Chicago" } = Astro.props;
|
||||
@@ -8,7 +8,7 @@ const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, ti
|
||||
|
||||
<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 card-text-header block">
|
||||
<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">
|
||||
@@ -17,6 +17,7 @@ const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, ti
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div class="card-base p-10 text-accent text-center">
|
||||
{error}
|
||||
@@ -3,8 +3,8 @@ import { readSingleton } from '@directus/sdk';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||
import GoBackButton from '@/components/buttons/GoBackButton.astro';
|
||||
import GoHomeButton from '@/components/buttons/GoHomeButton.astro';
|
||||
import PrimaryCTA from '@components/ui/buttons/PrimaryCTA.astro';
|
||||
import GoBack from '@/components/ui/buttons/GoBack.astro';
|
||||
|
||||
const global = await directus.request(readSingleton('site_global'));
|
||||
---
|
||||
@@ -61,8 +61,8 @@ const global = await directus.request(readSingleton('site_global'));
|
||||
<div
|
||||
class="smooth-reveal mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row"
|
||||
>
|
||||
<GoBackButton/>
|
||||
<GoHomeButton url={global.site_url} />
|
||||
<GoBack title="Go Back" />
|
||||
<PrimaryCTA title="Return Home" url={global.site_url} noArrow addHome />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,11 +3,11 @@ import { readSingleton } from '@directus/sdk';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||
import HeroSection from '@components/sections/HeroSection.astro';
|
||||
import ExperienceSection from '@components/sections/ExperienceSection.astro';
|
||||
import EducationSection from '@components/sections/EducationSection.astro';
|
||||
import ProjectSection from '@components/sections/ProjectSection.astro';
|
||||
import SkillsSliderSection from '@components/sections/SkillsSliderSection.astro';
|
||||
import HeroSection from '@components/ui/sections/HeroSection.astro';
|
||||
import Experience from '@components/ui/sections/Experience.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';
|
||||
|
||||
@@ -44,10 +44,10 @@ const global = await directus.request(readSingleton('site_global'));
|
||||
|
||||
<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">
|
||||
<ExperienceSection className="smooth-reveal" />
|
||||
<Experience className="smooth-reveal" />
|
||||
<EducationSection className="smooth-reveal" />
|
||||
<ProjectSection className="smooth-reveal" />
|
||||
<SkillsSliderSection className="smooth-reveal" />
|
||||
<SkillsSlider className="smooth-reveal" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -3,8 +3,8 @@ import { readSingleton } from '@directus/sdk';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||
import HeroSection from '@components/sections/HeroSection.astro';
|
||||
import ApplicationSection from '@components/sections/ApplicationSection.astro';
|
||||
import HeroSection from '@components/ui/sections/HeroSection.astro';
|
||||
import ApplicationSection from '@components/ui/sections/ApplicationSection.astro';
|
||||
|
||||
import applicationImg from '@images/cedar_tree.png';
|
||||
|
||||
|
||||
@@ -10,7 +10,6 @@ import { createHighlighter } from 'shiki';
|
||||
import { getDirectusImageURL } from '@lib/directusFunctions';
|
||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||
import Image from '@components/ui/images/Image.astro';
|
||||
import SocialShareButton from '@components/buttons/SocialShareButton.astro';
|
||||
import { formatDateTime } from '@support/time';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
@@ -163,9 +162,6 @@ const content = marked.parse(post.content);
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<SocialShareButton
|
||||
pageTitle={post.title}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@ import directus from '@lib/directus';
|
||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||
import BlogSelectedArticles from '@components/blog/BlogSelectedArticles.astro';
|
||||
import BlogRecentArticles from '@components/blog/BlogRecentArticles.astro';
|
||||
import HeroSection from '@components/sections/HeroSection.astro';
|
||||
import HeroSection from '@components/ui/sections/HeroSection.astro';
|
||||
import blogImg from '@images/autumn_tree.png';
|
||||
|
||||
const global = await directus.request(readSingleton('site_global'));
|
||||
|
||||
@@ -6,7 +6,7 @@ import directus from '@lib/directus';
|
||||
import type { Post } from '@lib/directusTypes';
|
||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||
import BlogCard from '@components/blog/BlogCard.astro';
|
||||
import HeaderSection from '@components/sections/HeaderSection.astro';
|
||||
import HeaderSection from '@components/ui/sections/HeaderSection.astro';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const categories = await getCollection('categories');
|
||||
|
||||
@@ -7,7 +7,7 @@ import type { Post } from '@lib/directusTypes';
|
||||
import directus from '@lib/directus';
|
||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||
import BlogCategoryCard from '@components/blog/BlogCategoryCard.astro';
|
||||
import HeroSection from '@components/sections/HeroSection.astro';
|
||||
import HeroSection from '@components/ui/sections/HeroSection.astro';
|
||||
import { timeago } from '@support/time';
|
||||
import categoryImg from '@images/autumn_bench.png';
|
||||
|
||||
|
||||
@@ -3,12 +3,11 @@ 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 HeroSection from '@components/ui/sections/HeroSection.astro';
|
||||
import FeaturesSection from '@components/ui/sections/FeaturesSection.astro';
|
||||
import WeatherSection from '@components/ui/sections/WeatherSection.astro';
|
||||
import LatestPosts from '@components/ui/sections/LatestPosts.astro';
|
||||
import HeroSectionAlt from '@components/ui/sections/HeroSectionAlt.astro';
|
||||
import homeImg from '@images/autumn_mountain.png';
|
||||
|
||||
const global = await directus.request(readSingleton('site_global'));
|
||||
@@ -54,9 +53,9 @@ const weather = await directus.request(readSingleton('site_weather'));
|
||||
>
|
||||
</WeatherSection>
|
||||
|
||||
<LatestPostsSection />
|
||||
<LatestPosts />
|
||||
|
||||
<GiteaSection
|
||||
<HeroSectionAlt
|
||||
title="Follow me on Gitea"
|
||||
subTitle="I love open source and have my code availabile on my Gitea server."
|
||||
url="https://gitea.alexlebens.dev"
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
@import 'tailwindcss';
|
||||
@import 'preline/variants.css';
|
||||
@import './utilities.css';
|
||||
|
||||
@plugin '@tailwindcss/typography';
|
||||
@plugin '@tailwindcss/forms';
|
||||
|
||||
@@ -12,17 +10,11 @@
|
||||
/* Custom colors */
|
||||
@theme {
|
||||
--color-midnight: #0c354d;
|
||||
--color-ocean: #134e70;
|
||||
|
||||
--color-cobalt: #6c9cb0;
|
||||
--color-steel: #4682b4;
|
||||
|
||||
--color-turquoise: #0da797;
|
||||
--color-steel: #4682b4;
|
||||
--color-bermuda: #7fbab4;
|
||||
|
||||
--color-desert: #f9deb2;
|
||||
--color-bronze: #9e7f5e;
|
||||
|
||||
--color-gitea-primary: #609926;
|
||||
--color-gitea-secondary: #4c7a33;
|
||||
|
||||
@@ -31,7 +23,6 @@
|
||||
|
||||
--color-header: light-dark(var(--color-neutral-800), var(--color-neutral-200));
|
||||
--color-primary: light-dark(var(--color-neutral-600), var(--color-neutral-200));
|
||||
--color-primary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-400));
|
||||
--color-secondary: light-dark(var(--color-neutral-500), var(--color-neutral-400));
|
||||
}
|
||||
|
||||
@@ -107,6 +98,63 @@
|
||||
}
|
||||
}
|
||||
|
||||
@utility card-base {
|
||||
@apply rounded-xl transition-all duration-300
|
||||
border border-neutral-100 dark:border-stone-500/20
|
||||
bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90
|
||||
shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg
|
||||
}
|
||||
|
||||
@utility card-hover-icon-color {
|
||||
@apply transition-all duration-300
|
||||
text-primary
|
||||
group-hover:text-main
|
||||
}
|
||||
|
||||
@utility card-hover-icon-scale {
|
||||
@apply transition-all duration-300
|
||||
drop-shadow-sm
|
||||
group-hover:scale-110
|
||||
}
|
||||
|
||||
@utility card-text-header {
|
||||
@apply text-header
|
||||
md:text-5xl
|
||||
text-4xl
|
||||
}
|
||||
|
||||
@utility card-text-header-minor {
|
||||
@apply text-header
|
||||
md:text-3xl
|
||||
text-2xl
|
||||
font-semibold
|
||||
}
|
||||
|
||||
@utility card-text-header-description {
|
||||
@apply text-primary
|
||||
text-lg
|
||||
text-pretty
|
||||
}
|
||||
|
||||
@utility card-text-title {
|
||||
@apply text-primary
|
||||
font-bold
|
||||
}
|
||||
|
||||
@utility card-text-description {
|
||||
@apply text-secondary
|
||||
}
|
||||
|
||||
@utility card-hover-text-title {
|
||||
@apply transition-all duration-300
|
||||
group-hover:text-main
|
||||
}
|
||||
|
||||
@utility card-hover-text-gitea {
|
||||
@apply transition-all duration-300
|
||||
group-hover:text-gitea-primary
|
||||
}
|
||||
|
||||
/* Content reveal animations */
|
||||
.smooth-reveal,
|
||||
.smooth-reveal-2,
|
||||
|
||||
@@ -1,110 +0,0 @@
|
||||
/* Button classes */
|
||||
@utility button-base {
|
||||
@apply transition-all duration-300
|
||||
border border-transparent
|
||||
shadow-sm hover:shadow-md dark:shadow-md dark:hover:shadow-lg
|
||||
px-4 py-3
|
||||
}
|
||||
|
||||
@utility button-base-hidden {
|
||||
@apply transition-all duration-300
|
||||
border border-transparent
|
||||
hover:bg-neutral-100 dark:hover:bg-neutral-700
|
||||
p-2
|
||||
}
|
||||
|
||||
@utility button-hover-arrow {
|
||||
@apply translate-y-px transition duration-300
|
||||
group-hover:translate-x-1
|
||||
h-3 w-3 md:h-5 md:w-5
|
||||
}
|
||||
|
||||
@utility button-text-title {
|
||||
@apply text-neutral-200 2xl:text-base
|
||||
text-sm font-bold
|
||||
}
|
||||
|
||||
@utility button-text-title-hidden {
|
||||
@apply transition-all duration-300
|
||||
text-neutral-600 group-hover:text-neutral-700 dark:text-neutral-400 dark:group-hover:text-neutral-300 2xl:text-base
|
||||
text-sm font-medium
|
||||
}
|
||||
|
||||
@utility button-bg-blue {
|
||||
@apply transition-all duration-300
|
||||
bg-cobalt hover:bg-steel dark:bg-steel dark:hover:bg-cobalt
|
||||
}
|
||||
|
||||
@utility button-bg-teal {
|
||||
@apply transition-all duration-300
|
||||
bg-bermuda hover:bg-turquoise dark:bg-turquoise dark:hover:bg-bermuda
|
||||
}
|
||||
|
||||
@utility button-bg-neutral {
|
||||
@apply transition-all duration-300
|
||||
border border-neutral-100 dark:border-stone-500/20
|
||||
bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90
|
||||
}
|
||||
|
||||
@utility button-bg-gitea {
|
||||
@apply transition-all duration-300
|
||||
bg-gitea-primary hover:bg-gitea-secondary dark:bg-gitea-secondary dark:hover:bg-gitea-primary
|
||||
}
|
||||
|
||||
/* Card classes */
|
||||
@utility card-base {
|
||||
@apply rounded-xl
|
||||
border border-neutral-100 dark:border-stone-500/20
|
||||
bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90
|
||||
shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg
|
||||
}
|
||||
|
||||
@utility card-hover-icon-color {
|
||||
@apply transition-all duration-300
|
||||
text-primary
|
||||
group-hover:text-main
|
||||
}
|
||||
|
||||
@utility card-hover-icon-scale {
|
||||
@apply transition-all duration-300
|
||||
drop-shadow-sm
|
||||
group-hover:scale-110
|
||||
}
|
||||
|
||||
@utility card-text-header {
|
||||
@apply text-header
|
||||
text-4xl md:text-5xl
|
||||
font-bold leading-tight tracking-tight text-balance
|
||||
}
|
||||
|
||||
@utility card-text-header-minor {
|
||||
@apply text-header
|
||||
md:text-3xl
|
||||
text-2xl
|
||||
font-semibold
|
||||
}
|
||||
|
||||
@utility card-text-header-description {
|
||||
@apply text-primary
|
||||
text-lg
|
||||
text-pretty leading-relaxed
|
||||
}
|
||||
|
||||
@utility card-text-title {
|
||||
@apply text-primary
|
||||
font-bold
|
||||
}
|
||||
|
||||
@utility card-hover-text-title {
|
||||
@apply transition-all duration-300
|
||||
group-hover:text-main
|
||||
}
|
||||
|
||||
@utility card-hover-text-gitea {
|
||||
@apply transition-all duration-300
|
||||
group-hover:text-gitea-primary
|
||||
}
|
||||
|
||||
@utility card-text-description {
|
||||
@apply text-secondary
|
||||
}
|
||||
Reference in New Issue
Block a user