bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-06-28 07:19:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: use enhanced-img for optimizations

Browse source
This commit is contained in:
Bart van der Braak 2023-11-19 01:58:16 -08:00
parent 4e1b4cb5fe
commit 2d7bc6793e
7 changed files with 339 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/Header.svelte
View file

@ -20,7 +20,7 @@
<AppBar background="">
<svelte:fragment slot="lead">
<a href="/" class="md:ml-4 ml-1">
<img width="212" height="32" src="./logo@3x.png" alt="hellob.art logo" />
<enhanced:img width="212" height="32" src="./logo@3x.png" alt="hellob.art logo" />
</a>
</svelte:fragment>

8
src/routes/+page.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import { calculateAge } from '$lib/calculate-age';
import bartvdbraakImage from '$lib/assets/bartvdbraak.jpg';
import catWhiskeyImage from '$lib/assets/cat-whiskey.jpg';
import bartvdbraakImage from '$lib/assets/bartvdbraak.jpg?enhanced';
import catWhiskeyImage from '$lib/assets/cat-whiskey.jpg?enhanced';
</script>
<svelte:head>
@ -19,7 +19,7 @@
<div class="relative">
<div class="absolute inset-0 bg-gradient-to-tr from-blue-500 to-transparent bg-repeat"></div>
<div class="h-64 overflow-hidden rounded-lg bg-gray-100 shadow-lg md:h-auto sticky top-10">
<img
<enhanced:img
src={bartvdbraakImage}
alt="Bart van der Braak with a noire effect"
class="h-full w-full object-cover profile-fit"
@ -118,7 +118,7 @@
<div class="relative">
<div class="absolute inset-0 bg-gradient-to-tr from-blue-500 to-transparent bg-repeat"></div>
<div class="h-64 overflow-hidden rounded-lg bg-gray-100 shadow-lg md:h-auto sticky top-10">
<img
<enhanced:img
src={catWhiskeyImage}
loading="lazy"
alt="Poes (my cat) and a bottle of Lagavulin 8 (whiskey) with a noire effect"

4
src/routes/projects/ProjectCard.svelte
View file

@ -14,10 +14,10 @@
<div class="card bg-initial card-hover overflow-hidden">
<header>
<img
<enhanced:img
src={headerImage}
class="bg-black/50 w-full aspect-[21/9] object-cover object-top"
alt="Post"
alt={headerSubTitle}
/>
</header>
<div class="p-4 space-y-4">

16
src/routes/projects/projects-assets.ts
View file

@ -1,11 +1,11 @@
import videowallImage from '$lib/assets/projects/videowall.jpg';
import videowallLogo from '$lib/assets/projects/videowall-logo.png';
import ticketDashboardImage from '$lib/assets/projects/ticketdashboard.png';
import ticketDashboardLogo from '$lib/assets/projects/triple-logo.png';
import zaantjeImage from '$lib/assets/projects/zaantje.png';
import zaantjeLogo from '$lib/assets/projects/zaantje-logo.png';
import keyweaveImage from '$lib/assets/projects/keyweave-terminal.jpg';
import keyweaveLogo from '$lib/assets/projects/keyweave-logo.png';
import videowallImage from '$lib/assets/projects/videowall.jpg?enhanced';
import videowallLogo from '$lib/assets/projects/videowall-logo.png?enhanced';
import ticketDashboardImage from '$lib/assets/projects/ticketdashboard.png?enhanced';
import ticketDashboardLogo from '$lib/assets/projects/triple-logo.png?enhanced';
import zaantjeImage from '$lib/assets/projects/zaantje.png?enhanced';
import zaantjeLogo from '$lib/assets/projects/zaantje-logo.png?enhanced';
import keyweaveImage from '$lib/assets/projects/keyweave-terminal.jpg?enhanced';
import keyweaveLogo from '$lib/assets/projects/keyweave-logo.png?enhanced';
export {
videowallImage,