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

feat: improve logos and clickability of cards on about and apps
All checks were successful
renovate / renovate (push) Successful in 46s
Details
test-build / build (push) Successful in 1m8s
Details

Browse Source
This commit is contained in:
Alex Lebens
2026-02-10 18:02:12 -06:00
parent 10c4f9c768
commit 63cbcdf39b
7 changed files with 139 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/ui/images/ImageTheme.astro Normal file
View File

@@ -0,0 +1,52 @@
---
import { Image } from 'astro:assets';
import { blurStyle } from '@support/image';
const { srcLight, srcDark, alt, style, disableBlur, width, height } = Astro.props;
const showBlur = !disableBlur;
const blurLight = (srcLight?.fsPath && showBlur) ? await blurStyle(srcLight.fsPath) : {};
const blurDark = (srcDark?.fsPath && showBlur) ? await blurStyle(srcDark.fsPath) : {};
---
<div class="themed-image-container">
<Image
src={srcLight}
alt={alt}
class={`light-logo ${style}`}
style={blurLight}
inferSize={true}
width={width}
height={height}
/>
<Image
src={srcDark}
alt={alt}
class={`dark-logo ${style}`}
style={blurDark}
inferSize={true}
width={width}
height={height}
/>
</div>
<style>
.themed-image-container {
display: grid;
grid-template-areas: "stack";
}
.themed-image-container :global(img) {
grid-area: stack;
}
:global(.dark) .light-logo {
display: none !important;
}
:global(.dark) .dark-logo {
display: block !important;
}
</style>

8
src/components/ui/logos/ApplicationLogo.astro
View File

@@ -1,8 +0,0 @@
---
import Image from '@components/ui/images/Image.astro';
const { src, alt } = Astro.props;
---
<Image src={src} alt={alt} style="color: transparent; width: 32px; height: 32px; object-fit: contain; max-height: 100%; max-width: 100%;" draggable="false" loading="lazy" width="32" height="32" />

17
src/components/ui/logos/Logo.astro Normal file
View File

@@ -0,0 +1,17 @@
---
import ImageTheme from '@components/ui/images/ImageTheme.astro';
const { srcLight, srcDark, alt } = Astro.props;
---
<ImageTheme
srcLight={srcLight}
srcDark={srcDark}
alt={alt}
style='color: transparent; width: 48px; height: 48px; object-fit: contain; max-height: 100%; max-width: 100%;'
draggable="false"
loading="lazy"
width="48"
height="48"
/>

25
src/components/ui/sections/Applications.astro
View File

@@ -1,6 +1,7 @@
--- ---
import { Icon } from 'astro-icon/components';
import { readItems } from '@directus/sdk'; import { readItems } from '@directus/sdk';
import ApplicationLogo from '@components/ui/logos/ApplicationLogo.astro'; import Logo from '@components/ui/logos/Logo.astro';
import type { Application } from '@lib/directusTypes'; import type { Application } from '@lib/directusTypes';
@@ -13,7 +14,7 @@ const applications = await directus.request(
}) })
); );
const baseClasses = 'smooth-reveal-cards rounded-xl flex flex-col'; 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 borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
const bgColorClasses = const bgColorClasses =
'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90'; 'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
@@ -31,9 +32,10 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
href={application.url} href={application.url}
> >
<div class="p-4 md:p-10"> <div class="p-4 md:p-10">
<div class="flex"> <div class="flex items-center">
<ApplicationLogo <Logo
src={application.logoUrl} srcLight={application.logoUrl}
srcDark={application.logoUrl}
alt={`Logo of ${application.name}`} alt={`Logo of ${application.name}`}
/> />
<h3 class="text-lg font-bold text-gray-800 dark:text-white ml-4"> <h3 class="text-lg font-bold text-gray-800 dark:text-white ml-4">
@@ -46,7 +48,18 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
return <li class="marker:text-yellow-500">{highlight}</li>; return <li class="marker:text-yellow-500">{highlight}</li>;
})} })}
</ul> </ul>
<div class="flex"> <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>
</div> </div>
</a> </a>

72
src/components/ui/sections/Education.astro
View File

@@ -1,10 +1,12 @@
--- ---
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components';
import { readItems } from '@directus/sdk'; import { readItems } from '@directus/sdk';
import Logo from '@components/ui/logos/Logo.astro';
import type { Education } from '@lib/directusTypes'; import type { Education } from '@lib/directusTypes';
import directus from '@lib/directus'; import directus from '@lib/directus';
import { getDirectusImageURL } from '@lib/directusFunctions';
const education = await directus.request( const education = await directus.request(
readItems('site_education', { readItems('site_education', {
@@ -20,7 +22,7 @@ const certificate = await directus.request(
}) })
); );
const baseClasses = 'rounded-xl flex flex-col'; const baseClasses = 'rounded-xl flex flex-col group group-hover';
const borderClasses = 'border border-neutral-100 dark:border-stone-500/20'; const borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
const bgColorClasses = const bgColorClasses =
'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90'; 'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
@@ -40,38 +42,41 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
<ul class="space-y-4 py-3"> <ul class="space-y-4 py-3">
<div class="grid md:grid-cols-2 sm:grid-cols-1 gap-4"> <div class="grid md:grid-cols-2 sm:grid-cols-1 gap-4">
{ {
education.map(({ institution, area, url, graduationDate}) => { education.map(({ institution, area, url, graduationDate, logo, logoDark }) => {
return ( return (
<div class="smooth-reveal-cards mt-4 rounded-xl"> <div class="smooth-reveal-cards mt-4 rounded-xl">
<div <a
class={`p-4 md:p-6 transition-all duration-300 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`} class={`p-4 md:p-6 transition-all duration-300 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
href={url}
> >
<h3 class="flex flex-row text-lg font-bold text-neutral-800 dark:text-neutral-200"> <div class="flex items-center">
<Icon <Logo
name="mdi:university-outline" srcLight={getDirectusImageURL(logo)}
class="mr-2 h-3 w-3 translate-y-1 md:h-5 md:w-5" srcDark={getDirectusImageURL(logoDark)}
alt={`Logo of ${institution}`}
/> />
<h3 class="text-lg font-bold text-neutral-800 dark:text-neutral-200 ml-4">
{institution} {institution}
</h3> </h3>
<p class="mt-2 ml-7 text-xs font-medium text-neutral-600 uppercase dark:text-neutral-400"> </div>
<p class="ml-16 text-xs font-medium text-neutral-600 uppercase dark:text-neutral-400">
{area} - {new Date(graduationDate).getFullYear()} {area} - {new Date(graduationDate).getFullYear()}
</p> </p>
<div class="ml-6 flex"> <div class="ml-6 flex">
<a <div
class="group group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50" class="group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
href={url}
> >
<div class="group-hover:text-steel dark:group-hover:text-bermuda transition-text relative z-10 mx-auto flex min-h-[44px] items-center text-sm font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300"> <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> <span class="relative inline-block overflow-hidden"> Visit Page </span>
<Icon <Icon
name="mdi:keyboard-arrow-right" name="mdi:keyboard-arrow-right"
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1" class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
/> />
</div> </div>
</div>
</div>
</a> </a>
</div> </div>
</div>
</div>
); );
}) })
} }
@@ -87,38 +92,39 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
</h4> </h4>
<ul class="space-y-4 py-3"> <ul class="space-y-4 py-3">
<div class="grid md:grid-cols-2 sm:grid-cols-1 gap-4"> <div class="grid md:grid-cols-2 sm:grid-cols-1 gap-4">
{certificate.map(({ name, issuer, url }) => { {certificate.map(({ name, issuer, issuerDate, url, logoName }) => {
return ( return (
<div class="smooth-reveal-cards mt-4 rounded-xl"> <div class="smooth-reveal-cards mt-4 rounded-xl">
<div
class={`p-4 md:p-6 transition-all duration-300 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
>
<h3 class="flex flex-row text-lg font-bold text-neutral-800 dark:text-neutral-200">
<Icon
name="mdi:script-text-outline"
class="mr-2 h-3 w-3 translate-y-1 md:h-5 md:w-5"
/>
{name}
</h3>
<p class="mt-2 ml-7 text-xs font-medium text-neutral-600 uppercase dark:text-neutral-400">
{issuer}
</p>
<div class="ml-6 flex">
<a <a
class="group group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50" class={`p-4 md:p-6 transition-all duration-300 ${shadowClasses} ${bgColorClasses} ${baseClasses} ${borderClasses}`}
href={url} href={url}
> >
<div class="group-hover:text-steel dark:group-hover:text-bermuda transition-text relative z-10 mx-auto flex min-h-[44px] items-center text-sm font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300"> <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> <span class="relative inline-block overflow-hidden"> Visit Page </span>
<Icon <Icon
name="mdi:keyboard-arrow-right" name="mdi:keyboard-arrow-right"
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1" class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
/> />
</div> </div>
</div>
</div>
</a> </a>
</div> </div>
</div>
</div>
); );
})} })}
</div> </div>

26
src/components/ui/sections/Projects.astro
View File

@@ -13,7 +13,7 @@ const projects = await directus.request(
}) })
); );
const baseClasses = 'smooth-reveal-cards rounded-xl flex flex-col'; 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 borderClasses = 'border border-neutral-100 dark:border-stone-500/20';
const bgColorClasses = const bgColorClasses =
'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90'; 'bg-neutral-100/80 hover:bg-neutral-100 dark:bg-neutral-800/60 dark:hover:bg-neutral-800/90';
@@ -31,8 +31,9 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
projects.map((project: Project) => { projects.map((project: Project) => {
return ( return (
<div class={`${baseClasses}`}> <div class={`${baseClasses}`}>
<div <a
class={`rounded-xl transition-all duration-300 ${borderClasses} ${bgColorClasses} ${shadowClasses}`} class={`rounded-xl transition-all duration-300 ${borderClasses} ${bgColorClasses} ${shadowClasses}`}
href={project.source}
> >
<div class="p-4 md:p-10"> <div class="p-4 md:p-10">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">{project.name}</h3> <h3 class="text-lg font-bold text-gray-800 dark:text-white">{project.name}</h3>
@@ -43,31 +44,22 @@ const shadowClasses = 'shadow-xs hover:shadow-md dark:shadow-md dark:hover:shado
})} })}
</ul> </ul>
<div class="flex"> <div class="flex">
<a <div
class="group group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50" class="group group-hover relative inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
href={project.url}
> >
<div class="group-hover:text-steel dark:group-hover:text-bermuda transition-text text-md relative z-10 mx-auto flex min-h-[44px] items-center font-semibold text-neutral-600 decoration-2 duration-300 sm:mx-0 sm:mt-4 dark:text-neutral-300"> <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">
<span class="relative inline-block overflow-hidden"> Visit Page </span> <Icon name="pajamas:gitea" />
<span class="relative inline-block overflow-hidden ml-2"> Visit Source </span>
<Icon <Icon
name="mdi:keyboard-arrow-right" name="mdi:keyboard-arrow-right"
class="translate-y-0.5 transition duration-300 group-hover:translate-x-1" class="translate-y-0.5 transition duration-300 group-hover:translate-x-1"
/> />
</div> </div>
</a> </div>
<a </div>
class="group group-hover relative ml-auto inline-block gap-x-1 rounded-lg border border-transparent disabled:pointer-events-none disabled:opacity-50"
href={project.source}
>
<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-[44px] items-center 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"> Source </span>
<Icon name="pajamas:gitea" class="ml-2 translate-y-0.5" />
</div> </div>
</a> </a>
</div> </div>
</div>
</div>
</div>
); );
}) })
} }

3
src/lib/directusTypes.ts
View File

@@ -73,6 +73,8 @@ export type Education = {
area: string; area: string;
studyType: string; studyType: string;
graduationDate: string; graduationDate: string;
logo: string;
logoDark: string;
}; };
export type Certificate = { export type Certificate = {
@@ -81,6 +83,7 @@ export type Certificate = {
issuer: string; issuer: string;
issuerDate: string; issuerDate: string;
url: string; url: string;
logoName: string;
}; };
export type Project = { export type Project = {