Compare commits
1 Commits
2.9.0
...
8f8f26493d
| Author | SHA1 | Date | |
|---|---|---|---|
8f8f26493d
|
@@ -50,38 +50,3 @@ jobs:
|
||||
icon: 'https://cdn.jsdelivr.net/gh/selfhst/icons/png/gitea.png'
|
||||
actions: '[{"action": "view", "label": "Open Gitea", "url": "https://gitea.alexlebens.dev/alexlebens/site-profile/actions?workflow=test-build.yaml", "clear": true}]'
|
||||
image: true
|
||||
|
||||
guarddog:
|
||||
runs-on: ubuntu-js
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v6
|
||||
|
||||
- name: Set up Python
|
||||
uses: actions/setup-python@v6
|
||||
with:
|
||||
python-version: '3.12'
|
||||
|
||||
- name: Install GuardDog
|
||||
run: |
|
||||
python3 -m pip install --upgrade pip
|
||||
python3 -m pip install guarddog
|
||||
|
||||
- name: Run GuardDog
|
||||
run: |
|
||||
guarddog npm scan ./
|
||||
|
||||
- name: ntfy Failed
|
||||
uses: niniyas/ntfy-action@master
|
||||
if: failure()
|
||||
with:
|
||||
url: '${{ secrets.NTFY_URL }}'
|
||||
topic: '${{ secrets.NTFY_TOPIC }}'
|
||||
title: 'Security Failure - Site Profile'
|
||||
priority: 4
|
||||
headers: '{"Authorization": "Bearer ${{ secrets.NTFY_CRED }}"}'
|
||||
tags: action,failed
|
||||
details: 'Guarddog scan failed for Site Profile'
|
||||
icon: 'https://cdn.jsdelivr.net/gh/selfhst/icons/png/gitea.png'
|
||||
actions: '[{"action": "view", "label": "Open Gitea", "url": "https://gitea.alexlebens.dev/alexlebens/site-profile/actions?workflow=test-build.yaml", "clear": true}]'
|
||||
image: true
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
ARG REGISTRY=docker.io
|
||||
FROM ${REGISTRY}/node:24.13.1-alpine AS base
|
||||
FROM ${REGISTRY}/node:24.13.0-alpine AS base
|
||||
|
||||
ENV PNPM_HOME="/pnpm"
|
||||
ENV PATH="$PNPM_HOME:$PATH"
|
||||
@@ -29,7 +29,7 @@ ENV SITE_URL=https://www.alexlebens.dev
|
||||
ENV DIRECTUS_URL=https://directus.alexlebens.net
|
||||
ENV PORT=4321
|
||||
|
||||
LABEL version="2.9.0"
|
||||
LABEL version="2.5.0"
|
||||
LABEL description="Astro based personal website"
|
||||
|
||||
EXPOSE $PORT
|
||||
|
||||
12
package.json
12
package.json
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "site-profile",
|
||||
"type": "module",
|
||||
"version": "2.9.0",
|
||||
"version": "2.5.0",
|
||||
"homepage": "https://www.alexlebens.dev",
|
||||
"bugs": {
|
||||
"url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",
|
||||
@@ -28,7 +28,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.9.6",
|
||||
"@astrojs/node": "^9.5.3",
|
||||
"@astrojs/node": "^9.5.2",
|
||||
"@astrojs/partytown": "^2.1.4",
|
||||
"@astrojs/react": "^4.4.2",
|
||||
"@astrojs/rss": "^4.0.15",
|
||||
@@ -42,12 +42,12 @@
|
||||
"@swup/astro": "^1.7.0",
|
||||
"@tailwindcss/postcss": "^4.1.18",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react": "^19.2.13",
|
||||
"@types/unist": "^3.0.3",
|
||||
"astro": "^5.17.2",
|
||||
"astro": "^5.17.1",
|
||||
"astro-compressor": "^1.2.0",
|
||||
"astro-icon": "^1.1.5",
|
||||
"marked": "^17.0.2",
|
||||
"marked": "^17.0.1",
|
||||
"marked-shiki": "^1.2.1",
|
||||
"mdast-util-to-string": "^4.0.0",
|
||||
"motion": "^12.34.0",
|
||||
@@ -62,7 +62,7 @@
|
||||
"ultrahtml": "^1.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint-react/eslint-plugin": "^2.12.4",
|
||||
"@eslint-react/eslint-plugin": "^2.12.2",
|
||||
"@tailwindcss/forms": "^0.5.11",
|
||||
"@tailwindcss/typography": "^0.5.19",
|
||||
"astro-icon": "^1.1.5",
|
||||
|
||||
554
pnpm-lock.yaml
generated
554
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -108,23 +108,7 @@ const currentYear = new Date().getFullYear();
|
||||
© {currentYear} All rights reserved.
|
||||
</p>
|
||||
|
||||
<div class="flex items-center">
|
||||
<p class="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
Weather provided by
|
||||
</p>
|
||||
<a
|
||||
href="https://open-meteo.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="group inline-flex items-center text-xs text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
|
||||
>
|
||||
<span class="relative ml-1">
|
||||
Open-Meteo.
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="ml-4"></div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs text-neutral-500 dark:text-neutral-400">Built with </span>
|
||||
<a
|
||||
href="https://astro.build"
|
||||
@@ -132,8 +116,24 @@ const currentYear = new Date().getFullYear();
|
||||
rel="noopener noreferrer"
|
||||
class="group inline-flex items-center text-xs text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
|
||||
>
|
||||
<span class="relative ml-1">
|
||||
Astro.
|
||||
<svg class="mr-1 h-4 w-4 text-[#FF5D01]" viewBox="0 0 36 36" fill="none">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M8.833 22.958c.622-1.185 1.832-1.918 3.18-1.918 2.292 0 4.145 1.86 4.145 4.153 0 1.34-.626 2.54-1.601 3.303 1.223-1.299 1.97-3.048 1.97-4.971 0-3.994-3.243-7.233-7.242-7.233-2.818 0-5.26 1.6-6.469 3.933.78-2.912 3.428-5.06 6.577-5.06 3.75 0 6.79 3.035 6.79 6.78 0 2.606-1.468 4.868-3.616 6.002a4.163 4.163 0 0 0 2.285-3.724c0-2.293-1.853-4.153-4.145-4.153-1.348 0-2.558.733-3.18 1.918l1.306-3.03Z"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M22.155 12.056c-.622 1.185-1.832 1.918-3.18 1.918-2.292 0-4.145-1.86-4.145-4.153 0-1.34.626-2.54 1.601-3.303-1.223 1.299-1.97 3.048-1.97 4.971 0 3.994 3.243 7.233 7.242 7.233 2.818 0 5.26-1.6 6.469-3.933-.78 2.912-3.428 5.06-6.577 5.06-3.75 0-6.79-3.035-6.79-6.78 0-2.606 1.468-4.868 3.616-6.002a4.163 4.163 0 0 0-2.285 3.724c0 2.293 1.853 4.153 4.145 4.153 1.348 0 2.558-.733 3.18-1.918l-1.306 3.03Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
<span class="relative">
|
||||
Astro
|
||||
<span
|
||||
class="absolute bottom-0 left-0 h-0.5 w-0 bg-[#FF5D01] transition-all duration-300 group-hover:w-full"
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import Logo from '@components/ui/logos/Logo.astro';
|
||||
|
||||
interface Props {
|
||||
topic: string;
|
||||
area: string;
|
||||
date: string;
|
||||
url: string;
|
||||
logoUrlLight?: string;
|
||||
logoUrlDark?: string;
|
||||
logoIcon?: string;
|
||||
}
|
||||
|
||||
const { topic, area, date, url, logoUrlLight, logoUrlDark, logoIcon } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="smooth-reveal group flex flex-col">
|
||||
<a
|
||||
class="card-base flex items-center"
|
||||
href={url}
|
||||
>
|
||||
<div class="p-4 md:p-10">
|
||||
<div class="flex items-center">
|
||||
{logoUrlLight ? (
|
||||
<div class="card-hover-icon-scale mr-5">
|
||||
<Logo
|
||||
srcLight={logoUrlLight}
|
||||
srcDark={logoUrlDark}
|
||||
alt={`Logo of ${topic}`}
|
||||
/>
|
||||
</div>
|
||||
) : logoIcon ? (
|
||||
<div class="mr-5 text-header">
|
||||
<Icon name={logoIcon} class="card-hover-icon-scale h-12 w-12" />
|
||||
</div>
|
||||
) : null}
|
||||
<div class="grow text-left">
|
||||
<span class="card-text-title block text-lg">
|
||||
{topic}
|
||||
</span>
|
||||
<span class="card-text-description block mt-1 font-medium text-xs uppercase">
|
||||
{area} - {new Date(date).getFullYear()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-6 flex">
|
||||
<div class="relative inline-block">
|
||||
<div class="card-text-title card-hover-text-title flex relative mx-auto min-h-11 items-center font-semibold text-md sm:mx-0 sm:mt-4">
|
||||
<span class="relative inline-block overflow-hidden">
|
||||
Visit Page
|
||||
</span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -10,26 +10,33 @@ interface Props {
|
||||
|
||||
const { title, description, url, icon } = Astro.props;
|
||||
|
||||
const baseClasses = 'smooth-reveal-2 group group-hover flex flex-col ';
|
||||
const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
|
||||
const bgColorClasses =
|
||||
'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
|
||||
const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg';
|
||||
const sizeClasses = 'h-30 w-100 md:w-[300px]';
|
||||
---
|
||||
|
||||
<div class="smooth-reveal-2 group flex flex-col">
|
||||
<div class={`${baseClasses}`}>
|
||||
<a
|
||||
class={`card-base flex items-center ${sizeClasses}`}
|
||||
class={`rounded-xl duration-300 transition-all ${sizeClasses} ${borderClasses} ${bgColorClasses} ${shadowClasses}`}
|
||||
href={url}
|
||||
data-astro-prefetch
|
||||
>
|
||||
<div class="p-5 w-full">
|
||||
<div class="flex items-center">
|
||||
<div class="p-4 md:p-5">
|
||||
<div class="flex">
|
||||
<Icon
|
||||
name={icon}
|
||||
class="card-hover-icon-scale shrink-0 h-6 w-6 md:h-8 md:w-8 "
|
||||
class="group-hover:text-steel dark:group-hover:text-bermuda h-6 w-6 text-neutral-600 transition-all duration-300 md:h-8 md:w-8 dark:text-neutral-200"
|
||||
/>
|
||||
<div class="ms-5 grow text-left">
|
||||
<span class="card-text-title card-hover-text-title block text-lg">
|
||||
<div class="ms-5 grow">
|
||||
<span
|
||||
class="group-hover:text-steel dark:group-hover:text-bermuda block text-lg font-bold text-neutral-600 transition-all duration-300 dark:text-neutral-300"
|
||||
>
|
||||
{title}
|
||||
</span>
|
||||
<span class="card-text-description block mt-1">
|
||||
<span class="mt-1 block text-neutral-500 dark:text-neutral-400">
|
||||
{description}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
|
||||
import Logo from '@components/ui/logos/Logo.astro';
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
url?: string;
|
||||
logoUrlLight?: string;
|
||||
logoUrlDark?: string;
|
||||
highlights?: string[];
|
||||
visitSource?: boolean;
|
||||
}
|
||||
|
||||
const { title, description, url, logoUrlLight, logoUrlDark, highlights, visitSource } = Astro.props;
|
||||
|
||||
const visitText = visitSource ? 'Visit Source' : 'Visit Page';
|
||||
const visitClass = visitSource ? 'card-hover-text-gitea' : 'card-hover-text-title';
|
||||
---
|
||||
|
||||
<div class="smooth-reveal group flex flex-col">
|
||||
<a
|
||||
class="card-base flex items-center"
|
||||
href={url}
|
||||
>
|
||||
<div class="p-4 md:p-10">
|
||||
<div class="flex items-center mb-4">
|
||||
{logoUrlLight && (
|
||||
<div class="card-hover-icon-scale mr-5">
|
||||
<Logo
|
||||
srcLight={logoUrlLight}
|
||||
srcDark={logoUrlDark}
|
||||
alt={`Logo of ${title}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div class="grow text-left">
|
||||
<span class="card-text-title block text-lg">
|
||||
{title}
|
||||
</span>
|
||||
<span class="card-text-description block mt-1">
|
||||
{description}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{highlights && (
|
||||
<ul class="card-text-description text-sm mt-1 flex flex-col list-disc gap-2 [&>li]:ml-4">
|
||||
{highlights.map((highlight) => (
|
||||
<li class="marker:text-accent">
|
||||
{highlight}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<div class="ml-6 flex">
|
||||
<div class="relative inline-block">
|
||||
<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}
|
||||
</span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
interface Props {
|
||||
dayName: string;
|
||||
label: string;
|
||||
icon: string;
|
||||
temp: number;
|
||||
}
|
||||
|
||||
const { dayName, label, icon, temp } = Astro.props;
|
||||
|
||||
const sizeClasses = 'w-32 md:w-40';
|
||||
---
|
||||
|
||||
<div class="smooth-reveal-2 group flex flex-col">
|
||||
<div class={`card-base ${sizeClasses}`}>
|
||||
<div class="p-5 text-center">
|
||||
<span class="card-text-description block font-bold text-xs uppercase tracking-widest">
|
||||
{dayName}
|
||||
</span>
|
||||
<div class="flex justify-center my-2">
|
||||
<img
|
||||
src={`https://openweathermap.org/img/wn/${icon}@2x.png`}
|
||||
alt={label}
|
||||
class="card-hover-icon-scale h-12 w-12"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<span class="card-text-title card-hover-text-title block text-2xl">
|
||||
{temp}°F
|
||||
</span>
|
||||
<span class="card-text-description mt-1 block text-xs capitalize">
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
import { readItems } from '@directus/sdk';
|
||||
|
||||
import type { Application } from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import HighlightsCard from '@components/ui/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>
|
||||
71
src/components/ui/sections/Applications.astro
Normal file
71
src/components/ui/sections/Applications.astro
Normal file
@@ -0,0 +1,71 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { readItems } from '@directus/sdk';
|
||||
import Logo from '@components/ui/logos/Logo.astro';
|
||||
|
||||
import type { Application } from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
|
||||
const applications = await directus.request(
|
||||
readItems('site_applications', {
|
||||
fields: ['*'],
|
||||
sort: ['-isActive'],
|
||||
})
|
||||
);
|
||||
|
||||
const baseClasses = 'smooth-reveal-cards rounded-xl flex flex-col group group-hover';
|
||||
const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
|
||||
const bgColorClasses =
|
||||
'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
|
||||
const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg';
|
||||
---
|
||||
|
||||
<section class:list={['flex flex-col gap-4', Astro.props.className]}>
|
||||
<div class="grid grid-cols-1 gap-3 md:grid-cols-2 print:flex print:flex-col">
|
||||
{
|
||||
applications.map((application: Application) => {
|
||||
return (
|
||||
<div class={`${baseClasses}`}>
|
||||
<a
|
||||
class={`rounded-xl transition-all duration-300 ${borderClasses} ${bgColorClasses} ${shadowClasses}`}
|
||||
href={application.url}
|
||||
>
|
||||
<div class="p-4 md:p-10">
|
||||
<div class="flex items-center">
|
||||
<Logo
|
||||
srcLight={application.logoUrl}
|
||||
srcDark={application.logoUrl}
|
||||
alt={`Logo of ${application.name}`}
|
||||
/>
|
||||
<h3 class="text-lg font-bold text-gray-800 dark:text-white ml-4">
|
||||
{application.name}
|
||||
</h3>
|
||||
</div>
|
||||
<p class="mt-2 text-gray-500 dark:text-neutral-400">{application.description}</p>
|
||||
<ul class="mt-1 flex list-disc flex-col gap-2 text-sm text-gray-500 dark:text-neutral-400 [&>li]:ml-4">
|
||||
{application.highlights.map((highlight) => {
|
||||
return <li class="marker:text-yellow-500">{highlight}</li>;
|
||||
})}
|
||||
</ul>
|
||||
<div class="ml-6 flex">
|
||||
<div
|
||||
class="group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
|
||||
>
|
||||
<div class="group-hover:text-steel dark:group-hover:text-bermuda transition-text relative z-10 mx-auto flex min-h-11 items-center text-sm font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300">
|
||||
<span class="relative inline-block overflow-hidden"> Visit Page </span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
135
src/components/ui/sections/Education.astro
Normal file
135
src/components/ui/sections/Education.astro
Normal file
@@ -0,0 +1,135 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { readItems } from '@directus/sdk';
|
||||
import Logo from '@components/ui/logos/Logo.astro';
|
||||
|
||||
import type { Education } from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import { getDirectusImageURL } from '@lib/directusFunctions';
|
||||
|
||||
const education = await directus.request(
|
||||
readItems('site_education', {
|
||||
fields: ['*'],
|
||||
sort: ['-graduationDate'],
|
||||
})
|
||||
);
|
||||
|
||||
const certificate = await directus.request(
|
||||
readItems('site_certificate', {
|
||||
fields: ['*'],
|
||||
sort: ['-issuerDate'],
|
||||
})
|
||||
);
|
||||
|
||||
const baseClasses = 'rounded-xl flex flex-col group group-hover';
|
||||
const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
|
||||
const bgColorClasses =
|
||||
'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
|
||||
const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg';
|
||||
---
|
||||
|
||||
<section class:list={['order-first flex flex-col gap-4', Astro.props.className]}>
|
||||
<h3
|
||||
class="smooth-reveal-1 relative flex w-full items-center gap-3 pb-5 text-5xl text-neutral-800 dark:text-neutral-200"
|
||||
>
|
||||
Education
|
||||
</h3>
|
||||
<div class="ml-8">
|
||||
<h4 class="smooth-reveal-1 pt-5 text-2xl font-semibold text-neutral-800 dark:text-neutral-200">
|
||||
College
|
||||
</h4>
|
||||
<ul class="space-y-4 py-3">
|
||||
<div class="grid md:grid-cols-2 sm:grid-cols-1 gap-4">
|
||||
{
|
||||
education.map(({ institution, area, url, graduationDate, logo, logoDark }) => {
|
||||
return (
|
||||
<div class="smooth-reveal-cards mt-4 rounded-xl">
|
||||
<a
|
||||
class={`p-4 md:p-6 transition-all duration-300 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
|
||||
href={url}
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<Logo
|
||||
srcLight={getDirectusImageURL(logo)}
|
||||
srcDark={getDirectusImageURL(logoDark)}
|
||||
alt={`Logo of ${institution}`}
|
||||
/>
|
||||
<h3 class="text-lg font-bold text-neutral-800 dark:text-neutral-200 ml-4">
|
||||
{institution}
|
||||
</h3>
|
||||
</div>
|
||||
<p class="ml-16 text-xs font-medium text-neutral-600 uppercase dark:text-neutral-400">
|
||||
{area} - {new Date(graduationDate).getFullYear()}
|
||||
</p>
|
||||
<div class="ml-6 flex">
|
||||
<div
|
||||
class="group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
|
||||
>
|
||||
<div class="group-hover:text-steel dark:group-hover:text-bermuda transition-text relative z-10 mx-auto flex min-h-11 items-center text-sm font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300">
|
||||
<span class="relative inline-block overflow-hidden"> Visit Page </span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{
|
||||
certificate.length > 0 && (
|
||||
<div class="ml-8">
|
||||
<h4 class="smooth-reveal-1 pt-8 text-2xl font-semibold text-neutral-800 dark:text-neutral-200">
|
||||
Certificates
|
||||
</h4>
|
||||
<ul class="space-y-4 py-3">
|
||||
<div class="grid md:grid-cols-2 sm:grid-cols-1 gap-4">
|
||||
{certificate.map(({ name, issuer, issuerDate, url, logoName }) => {
|
||||
return (
|
||||
<div class="smooth-reveal-cards mt-4 rounded-xl">
|
||||
<a
|
||||
class={`p-4 md:p-6 transition-all duration-300 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
|
||||
href={url}
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="text-neutral-800 dark:text-neutral-200">
|
||||
<Icon name={logoName} class="h-12 w-12" />
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-neutral-800 dark:text-neutral-200 ml-4">
|
||||
{name}
|
||||
</h3>
|
||||
</div>
|
||||
<p class="ml-16 text-xs font-medium text-neutral-600 uppercase dark:text-neutral-400">
|
||||
{issuer} - {new Date(issuerDate).getFullYear()}
|
||||
</p>
|
||||
<div class="ml-6 flex">
|
||||
<div
|
||||
class="group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
|
||||
>
|
||||
<div class="group-hover:text-steel dark:group-hover:text-bermuda transition-text relative z-10 mx-auto flex min-h-11 items-center text-sm font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300">
|
||||
<span class="relative inline-block overflow-hidden"> Visit Page </span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</section>
|
||||
@@ -1,65 +0,0 @@
|
||||
---
|
||||
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/ui/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>
|
||||
@@ -18,7 +18,7 @@ const experiences = await directus.request(
|
||||
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>
|
||||
<h3 class="relative smooth-reveal-1 flex w-full items-center gap-3 pb-10 text-5xl text-neutral-800 dark:text-neutral-200">Experience</h3>
|
||||
<ul class="ml-8 w-full flex flex-col">
|
||||
{
|
||||
experiences.map(
|
||||
@@ -28,7 +28,7 @@ const experiences = await directus.request(
|
||||
|
||||
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">
|
||||
<div class="group smooth-reveal-2 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}
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
---
|
||||
import { readItems } from '@directus/sdk';
|
||||
|
||||
import type { Project } from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
import HighlightsCard from '@components/ui/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>
|
||||
67
src/components/ui/sections/Projects.astro
Normal file
67
src/components/ui/sections/Projects.astro
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { readItems } from '@directus/sdk';
|
||||
|
||||
import type { Project } from '@lib/directusTypes';
|
||||
|
||||
import directus from '@lib/directus';
|
||||
|
||||
const projects = await directus.request(
|
||||
readItems('site_projects', {
|
||||
fields: ['*'],
|
||||
sort: ['-isActive'],
|
||||
})
|
||||
);
|
||||
|
||||
const baseClasses = 'smooth-reveal-cards rounded-xl flex flex-col group group-hover';
|
||||
const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
|
||||
const bgColorClasses =
|
||||
'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
|
||||
const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark: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-10 text-5xl text-neutral-800 dark:text-neutral-200"
|
||||
>
|
||||
Projects
|
||||
</h3>
|
||||
<div class="ml-8 grid grid-cols-1 gap-3 md:grid-cols-2 print:flex print:flex-col">
|
||||
{
|
||||
projects.map((project: Project) => {
|
||||
return (
|
||||
<div class={`${baseClasses}`}>
|
||||
<a
|
||||
class={`rounded-xl transition-all duration-300 ${borderClasses} ${bgColorClasses} ${shadowClasses}`}
|
||||
href={project.source}
|
||||
>
|
||||
<div class="p-4 md:p-10">
|
||||
<h3 class="text-lg font-bold text-gray-800 dark:text-white">{project.name}</h3>
|
||||
<p class="mt-2 text-gray-500 dark:text-neutral-400">{project.description}</p>
|
||||
<ul class="mt-1 flex list-disc flex-col gap-2 text-sm text-gray-500 dark:text-neutral-400 [&>li]:ml-4">
|
||||
{project.highlights.map((highlight) => {
|
||||
return <li class="marker:text-yellow-500">{highlight}</li>;
|
||||
})}
|
||||
</ul>
|
||||
<div class="flex">
|
||||
<div
|
||||
class="group group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
|
||||
>
|
||||
<div class="group-hover:text-gitea-primary dark:group-hover:text-gitea-primary transition-text text-md relative z-10 mx-auto flex min-h-11 items-center font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300">
|
||||
<Icon name="pajamas:gitea" />
|
||||
<span class="relative inline-block overflow-hidden ml-2"> Visit Source </span>
|
||||
<Icon
|
||||
name="mdi:keyboard-arrow-right"
|
||||
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,37 +1,58 @@
|
||||
---
|
||||
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;
|
||||
const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, timezone);
|
||||
const { latitude = "44.95", longitude = "-93.09", cityName = "St. Paul, Minnesota" } = Astro.props;
|
||||
const { forecastDays, error } = await getFiveDayForecast(latitude, longitude);
|
||||
|
||||
const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
|
||||
const bgColorClasses = 'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
|
||||
const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg';
|
||||
---
|
||||
|
||||
<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">
|
||||
<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">
|
||||
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>
|
||||
<p class="text-lg text-pretty text-neutral-600 dark:text-neutral-400">
|
||||
5 day forecast for {cityName}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div class="card-base p-10 text-accent text-center">
|
||||
{error}
|
||||
</div>
|
||||
<div class={`rounded-xl p-10 text-center text-yellow-500 ${borderClasses} ${bgColorClasses}`}>
|
||||
{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>
|
||||
<div class="flex flex-wrap justify-center gap-4 lg:gap-6">
|
||||
{forecastDays.map((day) => (
|
||||
<div class="smooth-reveal-2 group flex flex-col">
|
||||
<div class={`rounded-xl duration-300 transition-all w-32 md:w-44 ${borderClasses} ${bgColorClasses} ${shadowClasses}`}>
|
||||
<div class="p-4 text-center">
|
||||
<span class="block text-xs font-bold tracking-widest text-neutral-500 uppercase dark:text-neutral-400">
|
||||
{day.dayName}
|
||||
</span>
|
||||
<div class="flex justify-center my-2">
|
||||
<img
|
||||
src={`https://openweathermap.org/img/wn/${day.icon}@2x.png`}
|
||||
alt={day.label}
|
||||
class="h-12 w-12 drop-shadow-sm group-hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<span class="group-hover:text-steel dark:group-hover:text-bermuda transition-all duration-300 block text-2xl font-bold text-neutral-600 dark:text-neutral-300">
|
||||
{day.temp}°F
|
||||
</span>
|
||||
<span class="mt-1 block text-xs text-neutral-500 dark:text-neutral-400 capitalize">
|
||||
{day.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
@@ -53,12 +53,6 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
|
||||
}
|
||||
window.localStorage.setItem('theme', theme);
|
||||
</script>
|
||||
<!-- Rybbit Tracking Snippet -->
|
||||
<script
|
||||
src="https://rybbit.alexlebens.dev/api/script.js"
|
||||
data-site-id={global.rybbit_site_id}
|
||||
defer
|
||||
></script>
|
||||
</head>
|
||||
<body class="bg-stone-200 selection:bg-yellow-400 selection:text-neutral-700 dark:bg-stone-700">
|
||||
<div class="mx-auto w-full max-w-(--breakpoint-2xl) grow px-4 sm:px-6 lg:px-8">
|
||||
|
||||
@@ -8,7 +8,6 @@ export type Global = {
|
||||
initials: string;
|
||||
email: string;
|
||||
site_url: string;
|
||||
rybbit_site_id: string;
|
||||
logo: string;
|
||||
portrait: string;
|
||||
portrait_alt: string;
|
||||
@@ -29,7 +28,6 @@ export type Weather = {
|
||||
location: string;
|
||||
latitude: string;
|
||||
longitude: string;
|
||||
timezone: string;
|
||||
}
|
||||
|
||||
export type Post = {
|
||||
|
||||
@@ -5,10 +5,9 @@ import directus from '@lib/directus';
|
||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||
import HeroSection from '@components/ui/sections/HeroSection.astro';
|
||||
import Experience from '@components/ui/sections/Experience.astro';
|
||||
import EducationSection from '@components/ui/sections/EducationSection.astro';
|
||||
import ProjectSection from '@components/ui/sections/ProjectSection.astro';
|
||||
import SkillsSlider from '@components/ui/sections/SkillsSlider.astro';
|
||||
|
||||
import Projects from '@components/ui/sections/Projects.astro';
|
||||
import Skills from '@components/ui/sections/Skills.astro';
|
||||
import Education from '@components/ui/sections/Education.astro';
|
||||
import portraitImg from '@images/portrait.avif';
|
||||
|
||||
const global = await directus.request(readSingleton('site_global'));
|
||||
@@ -33,7 +32,6 @@ const global = await directus.request(readSingleton('site_global'));
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
<HeroSection
|
||||
title="About Me"
|
||||
subTitle={global.about}
|
||||
@@ -42,21 +40,23 @@ const global = await directus.request(readSingleton('site_global'));
|
||||
rounded={true}
|
||||
/>
|
||||
|
||||
<section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
|
||||
<div class="flex flex-col gap-y-24 md:gap-y-32">
|
||||
<Experience className="smooth-reveal" />
|
||||
<EducationSection className="smooth-reveal" />
|
||||
<ProjectSection className="smooth-reveal" />
|
||||
<SkillsSlider className="smooth-reveal" />
|
||||
</div>
|
||||
<section class="mx-auto max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
|
||||
<main class="relative grid grid-cols-1 md:grid-cols-6 gap-12 p-8 md:p-16 xl:gap-24 max-w-7xl mx-auto">
|
||||
<div class="space-y-12 col-span-1 md:col-span-6">
|
||||
<Experience className="smooth-reveal-2" />
|
||||
<Education className="smooth-reveal-2 mt-30" />
|
||||
<Projects className="smooth-reveal-2 mt-30" />
|
||||
<Skills className="smooth-reveal-2 mt-30" />
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
</BaseLayout>
|
||||
|
||||
<script>
|
||||
// Add smooth reveal animations for content after loading
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
const animateContent = () => {
|
||||
// Animate group 1
|
||||
const smoothReveal = document.querySelectorAll('.smooth-reveal');
|
||||
smoothReveal.forEach((el, index) => {
|
||||
setTimeout(
|
||||
@@ -67,6 +67,28 @@ const global = await directus.request(readSingleton('site_global'));
|
||||
);
|
||||
});
|
||||
|
||||
// Animate group 2
|
||||
const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
|
||||
smoothReveal2.forEach((el, index) => {
|
||||
setTimeout(
|
||||
() => {
|
||||
el.classList.add('animate-reveal');
|
||||
},
|
||||
200 + index * 250
|
||||
);
|
||||
});
|
||||
|
||||
// Animate topic cards with staggered delay
|
||||
const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
|
||||
smoothRevealCards.forEach((el, index) => {
|
||||
setTimeout(
|
||||
() => {
|
||||
el.classList.add('animate-reveal');
|
||||
},
|
||||
400 + index * 250
|
||||
);
|
||||
});
|
||||
|
||||
// Animate with just fade in with staggered delay
|
||||
const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
|
||||
smoothRevealFade.forEach((el, index) => {
|
||||
|
||||
@@ -4,8 +4,7 @@ import { readSingleton } from '@directus/sdk';
|
||||
import directus from '@lib/directus';
|
||||
import BaseLayout from '@layouts/BaseLayout.astro';
|
||||
import HeroSection from '@components/ui/sections/HeroSection.astro';
|
||||
import ApplicationSection from '@components/ui/sections/ApplicationSection.astro';
|
||||
|
||||
import Applications from '@components/ui/sections/Applications.astro';
|
||||
import applicationImg from '@images/cedar_tree.png';
|
||||
|
||||
const global = await directus.request(readSingleton('site_global'));
|
||||
@@ -30,7 +29,6 @@ const global = await directus.request(readSingleton('site_global'));
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
<HeroSection
|
||||
title="Applications"
|
||||
subTitle={global.about_applications}
|
||||
@@ -38,8 +36,13 @@ const global = await directus.request(readSingleton('site_global'));
|
||||
alt={global.applications_image_alt}
|
||||
/>
|
||||
|
||||
<ApplicationSection className="smooth-reveal-2" />
|
||||
|
||||
<section class="mx-auto max-w-340 px-4 sm:px-6 lg:px-8 lg:py-14 pb-10">
|
||||
<main class="relative grid grid-cols-1 md:grid-cols-6 gap-12 p-2 md:p-16 xl:gap-24 max-w-7xl mx-auto">
|
||||
<div class="space-y-12 col-span-1 md:col-span-6">
|
||||
<Applications className="smooth-reveal-2" />
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -45,13 +45,10 @@ const weather = await directus.request(readSingleton('site_weather'));
|
||||
<FeaturesSection />
|
||||
|
||||
<WeatherSection
|
||||
server:defer
|
||||
latitude={weather.latitude}
|
||||
longitude={weather.longitude}
|
||||
cityName={weather.location}
|
||||
timezone={weather.timezone}
|
||||
>
|
||||
</WeatherSection>
|
||||
/>
|
||||
|
||||
<LatestPosts />
|
||||
|
||||
@@ -112,11 +109,5 @@ const weather = await directus.request(readSingleton('site_weather'));
|
||||
};
|
||||
|
||||
animateContent();
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
animateContent();
|
||||
});
|
||||
|
||||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -17,13 +17,6 @@
|
||||
--color-bronze: #9e7f5e;
|
||||
--color-gitea-primary: #609926;
|
||||
--color-gitea-secondary: #4c7a33;
|
||||
|
||||
--color-main: light-dark(var(--color-steel), var(--color-bermuda));
|
||||
--color-accent: light-dark(var(--color-bronze), var(--color-desert));
|
||||
|
||||
--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-secondary: light-dark(var(--color-neutral-500), var(--color-neutral-400));
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -31,11 +24,6 @@
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
--theme-transition: 0.3s ease;
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
:root:where(.dark, .dark *) {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
*,
|
||||
@@ -98,63 +86,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@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,
|
||||
|
||||
@@ -28,38 +28,40 @@ const getWeatherInfo = (code: number) => {
|
||||
return { label: 'Unknown', icon: '03d' };
|
||||
};
|
||||
|
||||
export const getDayName = (dateStr: string) => {
|
||||
const date = new Date(`${dateStr}T00:00:00`);
|
||||
return date.toLocaleDateString('en-US', { weekday: 'short' });
|
||||
const getDayName = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleDateString('en-US', { weekday: 'short' });
|
||||
};
|
||||
|
||||
async function getFiveDayForecast(latitude: string, longitude: string, timezone: string): Promise<WeatherResult> {
|
||||
const url = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=weather_code,temperature_2m_max&timezone=${timezone}&temperature_unit=fahrenheit`;
|
||||
let data: any;
|
||||
async function getFiveDayForecast(latitude: string, longitude: string): Promise<WeatherResult> {
|
||||
const url = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=weather_code,temperature_2m_max&timezone=auto&temperature_unit=fahrenheit`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) throw new Error("Weather service unavailable");
|
||||
data = await response.json();
|
||||
|
||||
} catch (e: unknown) {
|
||||
return { forecastDays: [], error: "Failed to load weather" };
|
||||
}
|
||||
|
||||
const forecastDays = data.daily.time
|
||||
.slice(0, 5)
|
||||
.map((date: string, index: number): DayForecast => {
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
const forecastDays = data.daily.time.map((date: string, index: number): DayForecast => {
|
||||
const code = data.daily.weather_code[index];
|
||||
const info = getWeatherInfo(code);
|
||||
|
||||
return {
|
||||
date,
|
||||
temp: Math.round(data.daily.temperature_2m_max[index]),
|
||||
code: data.daily.weather_code[index],
|
||||
label: getWeatherInfo(data.daily.weather_code[index]).label,
|
||||
icon: getWeatherInfo(data.daily.weather_code[index]).icon,
|
||||
dayName: getDayName(date)
|
||||
code,
|
||||
label: info.label,
|
||||
icon: info.icon,
|
||||
dayName: getDayName(date)
|
||||
};
|
||||
});
|
||||
}).slice(0, 5);
|
||||
|
||||
return { forecastDays, error: null };
|
||||
return { forecastDays, error: null };
|
||||
} catch (e: unknown) {
|
||||
return {
|
||||
forecastDays: [],
|
||||
error: e instanceof Error ? e.message : "An unexpected error occurred"
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export { getFiveDayForecast };
|
||||
|
||||
Reference in New Issue
Block a user