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"> <script lang="ts">
import { Picture } from 'svelte-lazy-loader'; import Img from '@zerodevx/svelte-img';
import Graphql from '@iconify-icons/simple-icons/graphql'; import Graphql from '@iconify-icons/simple-icons/graphql';
import Nextdotjs from '@iconify-icons/simple-icons/next-dot-js'; import Nextdotjs from '@iconify-icons/simple-icons/next-dot-js';
import Prisma from '@iconify-icons/simple-icons/prisma'; import Prisma from '@iconify-icons/simple-icons/prisma';
@ -9,12 +9,9 @@
import Remix from '@iconify-icons/simple-icons/remix'; import Remix from '@iconify-icons/simple-icons/remix';
import Svelte from '@iconify-icons/simple-icons/svelte'; import Svelte from '@iconify-icons/simple-icons/svelte';
import TypeScript from '@iconify-icons/simple-icons/typescript'; 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 from '$lib/assets/images/space-needle.png?format=webp;avif;png&metadata?run';
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?run';
import tortie_derp from '$lib/assets/images/tortie_derp.jpg?format=webp;avif;jpg&metadata'; import orange_derp from '$lib/assets/images/orange_derp.jpg?format=webp;avif;jpg&metadata?run';
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 Tag from '$root/lib/components/Tag.svelte'; import Tag from '$root/lib/components/Tag.svelte';
import ExternalLink from '$root/lib/components/ExternalLink.svelte'; import ExternalLink from '$root/lib/components/ExternalLink.svelte';
</script> </script>
@ -269,11 +266,12 @@
" "
> >
<figure> <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 }} {#each space_needle as { src, format }}
<source data-srcset={src} type="image/{format}" /> <source data-srcset={src} type="image/{format}" />
{/each} {/each}
</Picture> </Picture> -->
<p class="center">Seattle Space Needle</p> <p class="center">Seattle Space Needle</p>
</figure> </figure>
</div> </div>
@ -282,19 +280,21 @@
<p>Bringing these two cats, Turnip and Taco, along for the ride.</p> <p>Bringing these two cats, Turnip and Taco, along for the ride.</p>
<div class="cat-pics"> <div class="cat-pics">
<figure> <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 }} {#each tortie_derp as { src, format }}
<source data-srcset={src} type="image/{format}" /> <source data-srcset={src} type="image/{format}" />
{/each} {/each}
</Picture> </Picture> -->
<p class="center">Turnip</p> <p class="center">Turnip</p>
</figure> </figure>
<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 }} {#each orange_derp as { src, format }}
<source data-srcset={src} type="image/{format}" /> <source data-srcset={src} type="image/{format}" />
{/each} {/each}
</Picture> </Picture> -->
<p class="center">Taco 🌮</p> <p class="center">Taco 🌮</p>
</figure> </figure>
</div> </div>

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

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