Shellnut_Public/personal-website-sveltekit
1
0
Fork 0
mirror of https://github.com/BradNut/personal-website-sveltekit synced 2025-09-08 23:20:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Using vite-imagetools for all images on other pages.

Browse source
This commit is contained in:
Bradley Shellnut 2023-02-02 13:25:22 -08:00
parent e60f7096e9
commit 0675dc3301
4 changed files with 30 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/lib/assets/images/space-needle.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/lib/assets/images/tortie_derp.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 MiB

After

Width:  |  Height:  |  Size: 4.9 MiB

29
src/routes/about/+page.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Image } from 'svelte-lazy-loader';
import { Image, Picture } from 'svelte-lazy-loader';
import Graphql from '@iconify-icons/simple-icons/graphql';
import Nextdotjs from '@iconify-icons/simple-icons/next-dot-js';
import Prisma from '@iconify-icons/simple-icons/prisma';
@ -10,9 +10,12 @@
import Svelte from '@iconify-icons/simple-icons/svelte';
import TypeScript from '@iconify-icons/simple-icons/typescript';
import SEO from "$root/lib/components/SEO.svelte";
import adventure from '$lib/assets/images/adventure.png';
import orange_derp from '$lib/assets/images/orange_derp.jpg';
import tortie_derp from '$lib/assets/images/tortie_derp.jpg';
import space_needle from '$lib/assets/images/space-needle.png?format=webp;avif;png&metadata';
import space_needle_blurred from '$lib/assets/images/space-needle.png?w=100&png&blur=10';
import tortie_derp from '$lib/assets/images/tortie_derp.jpg?format=webp;avif;jpg&metadata';
import tortie_derp_blurred from '$lib/assets/images/tortie_derp.jpg?w=100&jpg&blur=10';
import orange_derp from '$lib/assets/images/orange_derp.jpg?format=webp;avif;jpg&metadata';
import orange_derp_blurred from '$lib/assets/images/orange_derp.jpg?w=100&jpg&blur=10';
</script>
<SEO title="About" />
@ -288,7 +291,11 @@
"
>
<figure>
<Image src={adventure} alt="Road Trip Adventure" />
<Picture placeholder={space_needle_blurred} src="images/space_needle.png" alt="Clip art of the Seattle space needle">
{#each space_needle as { src, format }}
<source data-srcset={src} type="image/{format}" />
{/each}
</Picture>
<p class="center">Route 66 Road Trip</p>
</figure>
</div>
@ -297,11 +304,19 @@
<p>Bringing these two cats, Turnip and Taco, along for the ride.</p>
<div class="cat-pics">
<figure>
<Image src={tortie_derp} alt="Turnip Cat" />
<Picture placeholder={tortie_derp_blurred} src="images/tortie_derp.jpg" alt="Turnip Cat">
{#each tortie_derp as { src, format }}
<source data-srcset={src} type="image/{format}" />
{/each}
</Picture>
<p class="center">Turnip</p>
</figure>
<figure>
<Image src={orange_derp} alt="Taco Cat" />
<Picture placeholder={orange_derp_blurred} src="images/orange_derp.jpg" alt="Taco Cat">
{#each orange_derp as { src, format }}
<source data-srcset={src} type="image/{format}" />
{/each}
</Picture>
<p class="center">Taco 🌮</p>
</figure>
</div>

11
src/routes/uses/+page.svelte
View file

@ -1,7 +1,8 @@
<script lang="ts">
import { Image, Picture } from "svelte-lazy-loader";
import SEO from "$root/lib/components/SEO.svelte";
import DesktopImage from '$lib/assets/images/Desktop_so_clean.jpg';
import { Image } from "svelte-lazy-loader";
import desktop from '$lib/assets/images/Desktop_so_clean.jpg?format=webp;avif;jpg&metadata';
import desktopBlurred from '$lib/assets/images/Desktop_so_clean.jpg?w=100&jpg&blur=10';
</script>
<SEO title="Uses" />
@ -43,7 +44,11 @@
<div style="display: grid; grid-template-columns: minmax(400px, 0.65fr); justify-content: center; margin-bottom: 2rem;">
<figure>
<div>
<Image src={DesktopImage} alt="Clean desktop" />
<Picture placeholder={desktopBlurred} src="images/Desktop_so_clean.jpg" alt="Clean desk with Samsung monitor and Ducky Keyboard">
{#each desktop as { src, format }}
<source data-srcset={src} type="image/{format}" />
{/each}
</Picture>
</div>
</figure>
</div>