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

feat: redo how images, icons, and logos are handled

Browse Source
This commit is contained in:
Alex Lebens
2026-02-19 17:58:28 -06:00
parent d415dda661
commit 76dfef4177
26 changed files with 123 additions and 762 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/cards/BlogCard.astro
View File

@@ -1,9 +1,9 @@
---
import { Icon } from 'astro-icon/components';
import { Image } from 'astro:assets';
import type { Post } from '@lib/directusTypes';
import Image from '@components/ui/images/Image.astro';
import { formatDate } from '@support/time';
import { getDirectusImageURL } from '@/support/url';
@@ -28,6 +28,7 @@ const { post } = Astro.props;
draggable="false"
loading="eager"
format="webp"
inferSize={true}
/>
</div>
<div class="rounded-xl p-4 md:p-5">

2
src/components/cards/EducationCard.astro
View File

@@ -1,7 +1,7 @@
---
import { Icon } from 'astro-icon/components';
import Logo from '@components/ui/logos/Logo.astro';
import Logo from '@components/images/Logo.astro';
import { getDirectusImageURL } from '@/support/url';
interface Props {

20
src/components/cards/FeaturesCard.astro
View File

@@ -1,14 +1,17 @@
---
import { Icon } from 'astro-icon/components';
import Logo from "@components/images/Logo.astro"
interface Props {
title?: string;
description?: string;
url?: string;
icon?: string;
logoUrlLight?: string;
logoUrlDark?: string;
}
const { title, description, url, icon } = Astro.props;
const { title, description, url, logoUrlLight }: Props = Astro.props;
const logoUrlDark = Astro.props.logoUrlDark || logoUrlLight;
---
<div class="smooth-reveal-2 group flex flex-col">
@@ -19,10 +22,15 @@ const { title, description, url, icon } = Astro.props;
>
<div class="p-5 w-full">
<div class="flex items-center">
<Icon
name={icon}
class="card-hover-icon-scale shrink-0 h-6 w-6 md:h-8 md:w-8 "
/>
{logoUrlLight && (
<div class="card-hover-icon-scale">
<Logo
srcLight={logoUrlLight}
srcDark={logoUrlDark}
alt={`Logo of ${title}`}
/>
</div>
)}
<div class="ms-5 grow text-left">
<span class="card-text-title card-hover-text-title block text-lg">
{title}

2
src/components/cards/HighlightsCard.astro
View File

@@ -1,7 +1,7 @@
---
import { Icon } from 'astro-icon/components';
import Logo from '@components/ui/logos/Logo.astro';
import Logo from '@components/images/Logo.astro';
interface Props {
title?: string;

3
src/components/cards/LargeBlogLeftCard.astro
View File

@@ -1,7 +1,7 @@
---
import { Icon } from 'astro-icon/components';
import { Image } from 'astro:assets';
import Image from '@components/ui/images/Image.astro';
import { getDirectusImageURL } from '@/support/url';
interface Props {
@@ -30,6 +30,7 @@ const { title, subTitle, url, img, imgAlt } = Astro.props;
loading="lazy"
width="850"
height="420"
inferSize={true}
/>
</div>
<div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">

5
src/components/cards/LargeBlogRightCard.astro
View File

@@ -1,7 +1,7 @@
---
import { Icon } from 'astro-icon/components';
import { Image } from 'astro:assets';
import Image from '@components/ui/images/Image.astro';
import { getDirectusImageURL } from '@/support/url';
interface Props {
@@ -53,6 +53,7 @@ const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = A
loading="lazy"
width="850"
height="420"
inferSize={true}
/>
</div>
) : (
@@ -66,6 +67,7 @@ const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = A
loading="lazy"
width="400"
height="230"
inferSize={true}
/>
<Image
class="rounded-xl w-full mt-4 lg:mt-10"
@@ -76,6 +78,7 @@ const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = A
loading="lazy"
width="400"
height="230"
inferSize={true}
/>
</div>
)}