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

Fix other image tags.

Browse source
This commit is contained in:
Bradley Shellnut 2023-04-09 13:56:18 -07:00
parent 596b876976
commit dead3073f5
2 changed files with 16 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<script lang="ts">
import { Picture } from 'svelte-lazy-loader';
import Img from '@zerodevx/svelte-img';
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';
@ -9,12 +9,9 @@
import Remix from '@iconify-icons/simple-icons/remix';
import Svelte from '@iconify-icons/simple-icons/svelte';
import TypeScript from '@iconify-icons/simple-icons/typescript';
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';
import space_needle from '$lib/assets/images/space-needle.png?format=webp;avif;png&metadata?run';
import tortie_derp from '$lib/assets/images/tortie_derp.jpg?format=webp;avif;jpg&metadata?run';
import orange_derp from '$lib/assets/images/orange_derp.jpg?format=webp;avif;jpg&metadata?run';
import Tag from '$root/lib/components/Tag.svelte';
import ExternalLink from '$root/lib/components/ExternalLink.svelte';
</script>
@ -269,11 +266,12 @@
"
>
<figure>
<Picture placeholder={space_needle_blurred} src="images/space_needle.png" alt="Clip art of the Seattle space needle">
<Img class="portfolio-image better-blur" src={space_needle} alt="Clip art of the Seattle space needle" />
<!-- <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>
</Picture> -->
<p class="center">Seattle Space Needle</p>
</figure>
</div>
@ -282,19 +280,21 @@
<p>Bringing these two cats, Turnip and Taco, along for the ride.</p>
<div class="cat-pics">
<figure>
<Picture placeholder={tortie_derp_blurred} src="images/tortie_derp.jpg" alt="Turnip Cat">
<Img class="portfolio-image better-blur" 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>
</Picture> -->
<p class="center">Turnip</p>
</figure>
<figure>
<Picture placeholder={orange_derp_blurred} src="images/orange_derp.jpg" alt="Taco Cat">
<Img class="portfolio-image better-blur" 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>
</Picture> -->
<p class="center">Taco 🌮</p>
</figure>
</div>

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

@ -1,8 +1,6 @@
<script lang="ts">
import { Picture } from "svelte-lazy-loader";
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';
import Img from '@zerodevx/svelte-img';
import desktop from '$lib/assets/images/Desktop_so_clean.jpg?run';
</script>
<svelte:head>
@ -43,11 +41,7 @@
</div>
<div class="uses-block-styles">
<figure>
<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>
<Img class="portfolio-image better-blur" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
</figure>
<h2>Hardware & Accessories</h2>
<ul>