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

Trying eager on first images.

Browse source
This commit is contained in:
Bradley Shellnut 2023-02-16 23:28:55 -08:00
parent f13750bf75
commit decae89479
2 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/routes/portfolio/+page.svelte
View file

@ -7,7 +7,8 @@
TabPanels,
} from "@rgossiaux/svelte-headlessui";
import { Image, Picture } from "svelte-lazy-loader";
import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png?format=webp;avif;png&metadata";
import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png";
import personalSiteFormats from "$lib/assets/images/Bradley_Shellnut_New_Site.png?format=webp;avif;png&metadata";
import personalSiteBlurred from "$lib/assets/images/Bradley_Shellnut_New_Site.png?w=100&png&blur=10";
import weddingWebsite from "$lib/assets/images/Wedding_Website.png?format=webp;avif;png&metadata";
import weddingWebsiteBlurred from "$lib/assets/images/Wedding_Website.png?w=100&png&blur=10";
@ -49,8 +50,8 @@
<div>
<h2>Personal Website</h2>
<div style="min-width: 200px; min-height: 500px;">
<Picture placeholder={personalSiteBlurred} src="images/Bradley_Shellnut_New_Site.png" alt="Home Page of bradleyshellnut.com">
{#each personalSite as { src, format }}
<Picture placeholder={personalSiteBlurred} src={personalSite} alt="Home Page of bradleyshellnut.com">
{#each personalSiteFormats as { src, format }}
<source data-srcset={src} type="image/{format}" />
{/each}
</Picture>

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

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