mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
Merge pull request #14 from BradNut/development
Update dependencies and svelte-img
This commit is contained in:
Bradley Shellnut
GitHub
commit
38e83bcd3e
11 changed files with 476 additions and 431 deletions
24
package.json
24
package.json
|
|
@ -15,20 +15,20 @@
|
|||
"site:update": "pnpm update -i -L"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-icons/material-symbols": "^1.2.51",
|
||||
"@iconify-icons/material-symbols": "^1.2.56",
|
||||
"@iconify-icons/mdi": "^1.2.47",
|
||||
"@iconify-icons/radix-icons": "^1.2.9",
|
||||
"@iconify-icons/simple-icons": "^1.2.63",
|
||||
"@iconify-icons/simple-icons": "^1.2.70",
|
||||
"@leveluptuts/svelte-side-menu": "^1.0.5",
|
||||
"@leveluptuts/svelte-toy": "^2.0.3",
|
||||
"@playwright/test": "^1.36.2",
|
||||
"@sveltejs/adapter-static": "^2.0.3",
|
||||
"@sveltejs/adapter-vercel": "^1.0.6",
|
||||
"@sveltejs/kit": "^1.22.4",
|
||||
"@sveltejs/kit": "^1.25.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
||||
"@typescript-eslint/parser": "^5.62.0",
|
||||
"@zerodevx/svelte-img": "^1.2.11",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"@zerodevx/svelte-img": "^2.1.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-svelte": "^2.32.2",
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
"just-intersect": "^4.3.0",
|
||||
"mdsvex": "^0.10.6",
|
||||
"mdsvex-relative-images": "^1.0.3",
|
||||
"postcss": "^8.4.27",
|
||||
"postcss": "^8.4.30",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-load-config": "^4.0.1",
|
||||
"postcss-preset-env": "^8.5.1",
|
||||
|
|
@ -44,22 +44,22 @@
|
|||
"prettier-plugin-svelte": "^2.10.1",
|
||||
"sass": "^1.65.1",
|
||||
"scrape-it": "^5.3.2",
|
||||
"sharp": "^0.32.4",
|
||||
"svelte": "^4.1.2",
|
||||
"sharp": "^0.32.6",
|
||||
"svelte": "^4.2.1",
|
||||
"svelte-check": "^3.4.6",
|
||||
"svelte-lazy-loader": "^1.0.0",
|
||||
"svelte-preprocess": "^5.0.4",
|
||||
"tslib": "^2.6.1",
|
||||
"typescript": "^5.1.6",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.2.2",
|
||||
"vanilla-lazyload": "^17.8.4",
|
||||
"vite": "^4.4.9",
|
||||
"vite-imagetools": "^5.0.7",
|
||||
"vite-imagetools": "^5.0.8",
|
||||
"vitest": "^0.25.3"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@melt-ui/svelte": "^0.19.1",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/nprogress": "^0.2.1",
|
||||
"ioredis": "^5.3.2",
|
||||
"nprogress": "^0.2.0"
|
||||
}
|
||||
|
|
|
|||
749
pnpm-lock.yaml
749
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
25
src/lib/components/LazyImage.svelte
Normal file
25
src/lib/components/LazyImage.svelte
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import Img from '@zerodevx/svelte-img';
|
||||
import type { ExternalImageSource } from '../types/album';
|
||||
|
||||
export let clazz = "";
|
||||
export let src: Record<string, any> | ExternalImageSource[] | undefined;
|
||||
export let alt: string;
|
||||
export let style = "";
|
||||
export let loading: "lazy" | "eager" = "lazy";
|
||||
|
||||
let ref: any;
|
||||
let loaded: boolean;
|
||||
|
||||
onMount(() => {
|
||||
if (ref.complete) {
|
||||
loaded = true;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="wrap">
|
||||
<Img class={clazz} {style} {src} {alt} {loading} bind:ref on:load={() => (loaded = true)} />
|
||||
<div class="blur" class:loaded />
|
||||
</div>
|
||||
|
|
@ -1,17 +1,17 @@
|
|||
<script lang="ts">
|
||||
import Img from '@zerodevx/svelte-img';
|
||||
import LazyImage from './LazyImage.svelte';
|
||||
|
||||
export let name: string;
|
||||
export let src: Record<string, any>;
|
||||
export let alt: string;
|
||||
export let style: string;
|
||||
export let style = "";
|
||||
export let loading: "lazy" | "eager" = "lazy";
|
||||
</script>
|
||||
|
||||
<div class="portfolio">
|
||||
<div class="portfolio-picture">
|
||||
<h2>{name}</h2>
|
||||
<Img class="portfolio-image better-blur" {style} {src} {alt} {loading} />
|
||||
<LazyImage {style} {src} {alt} {loading} />
|
||||
<slot name="portfolio-links" />
|
||||
</div>
|
||||
<div class="portfolio-details">
|
||||
|
|
@ -24,14 +24,6 @@
|
|||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:global(img.better-blur)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
backdrop-filter: blur(20px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:global(.portfolio) {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(200px, 500px) auto;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import Img from '@zerodevx/svelte-img';
|
||||
import type { Album } from "$root/lib/types/album";
|
||||
import LazyImage from '../LazyImage.svelte';
|
||||
|
||||
|
||||
export let albums: Album[];
|
||||
|
|
@ -8,11 +9,25 @@
|
|||
albums?.length > 6 ? albums.slice(0, 6) : albums;
|
||||
|
||||
for (let album of displayAlbums) {
|
||||
album.src = [
|
||||
{ format: 'avif', src: `${album.artwork}`, width: 230, height: 230 },
|
||||
{ format: 'webp', src: `${album.artwork}`, width: 230, height: 230 },
|
||||
{ format: 'jpg', src: `${album.artwork}`, width: 230, height: 230 }
|
||||
]
|
||||
album.src = {
|
||||
img: { src: `${album.artwork}`, w: 230, h: 230 },
|
||||
sources: {
|
||||
avif: [
|
||||
{ src: `${album.artwork}`, w: 230, h: 230 },
|
||||
],
|
||||
webp: [
|
||||
{ src: `${album.artwork}`, w: 230, h: 230 },
|
||||
],
|
||||
jpg: [
|
||||
{ src: `${album.artwork}`, w: 230, h: 230 },
|
||||
]
|
||||
}
|
||||
}
|
||||
// [
|
||||
// { format: 'avif', src: `${album.artwork}`, width: 230, height: 230 },
|
||||
// { format: 'webp', src: `${album.artwork}`, width: 230, height: 230 },
|
||||
// { format: 'jpg', src: `${album.artwork}`, width: 230, height: 230 }
|
||||
// ]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -28,7 +43,7 @@
|
|||
href={album.url}
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Img class="album-artwork" src={album.src} alt={`Album art for ${album.title}`} />
|
||||
<LazyImage clazz="album-artwork" src={album.src} alt={`Album art for ${album.title}`} />
|
||||
</a>
|
||||
</figure>
|
||||
<a
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export type Album = {
|
|||
|
||||
export type ExternalImageSource = {
|
||||
format: string;
|
||||
src: string;
|
||||
width: number;
|
||||
height?: number;
|
||||
img: string;
|
||||
w: number;
|
||||
h?: number;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
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 Nextdotjs from '@iconify-icons/simple-icons/nextdotjs';
|
||||
import Prisma from '@iconify-icons/simple-icons/prisma';
|
||||
import Gatsby from '@iconify-icons/simple-icons/gatsby';
|
||||
import Docker from '@iconify-icons/simple-icons/docker';
|
||||
|
|
@ -10,9 +10,10 @@
|
|||
import Svelte from '@iconify-icons/simple-icons/svelte';
|
||||
import TypeScript from '@iconify-icons/simple-icons/typescript';
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
import space_needle from '$lib/assets/images/space-needle.png?run';
|
||||
import tortie_derp from '$lib/assets/images/tortie_derp.jpg?run';
|
||||
import orange_derp from '$lib/assets/images/orange_derp.jpg?run';
|
||||
import LazyImage from '$root/lib/components/LazyImage.svelte';
|
||||
import adventure from '$lib/assets/images/adventure.png?as=run:0';
|
||||
import tortie_derp from '$lib/assets/images/tortie_derp.jpg?as=run';
|
||||
import orange_derp from '$lib/assets/images/orange_derp.jpg?as=run';
|
||||
import turnip from '$lib/assets/images/turnip.svg';
|
||||
import Tag from '$root/lib/components/Tag.svelte';
|
||||
import ExternalLink from '$root/lib/components/ExternalLink.svelte';
|
||||
|
|
@ -255,7 +256,7 @@
|
|||
<h2>Other fun things about me…</h2>
|
||||
<div style="display: grid;">
|
||||
<p>
|
||||
Currently living in Seattle after a long road trip!
|
||||
Currently traveling around the world!
|
||||
</p>
|
||||
<div
|
||||
style="
|
||||
|
|
@ -265,19 +266,19 @@
|
|||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<Img class="portfolio-image better-blur" src={space_needle} alt="Clip art of the Seattle space needle" />
|
||||
<p class="center">Seattle Space Needle</p>
|
||||
<LazyImage src={adventure} alt="Clip art of the car traveling in the forest" />
|
||||
<p class="center">Traveling around</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>Bringing these two cats, Turnip and Taco, along for the ride.</p>
|
||||
<div class="cat-pics">
|
||||
<figure>
|
||||
<Img class="portfolio-image better-blur" src={tortie_derp} alt="Turnip Cat" />
|
||||
<LazyImage src={tortie_derp} alt="Turnip Cat" />
|
||||
<p class="center">Turnip <img class="icon" src={turnip} width="25px" height="25px" alt="Turnip" /></p>
|
||||
</figure>
|
||||
<figure>
|
||||
<Img class="portfolio-image better-blur" src={orange_derp} alt="Taco Cat" />
|
||||
<LazyImage src={orange_derp} alt="Taco Cat" />
|
||||
<p class="center">Taco 🌮</p>
|
||||
</figure>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
import GitHub from '@iconify-icons/simple-icons/github';
|
||||
import SEO from '$lib/components/SEO.svelte';
|
||||
import Portfolio from '$lib/components/Portfolio.svelte';
|
||||
import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png?run";
|
||||
import weddingWebsite from "$lib/assets/images/Wedding_Website.png?run";
|
||||
import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?run';
|
||||
import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png?run";
|
||||
import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png?as=run";
|
||||
import weddingWebsite from "$lib/assets/images/Wedding_Website.png?as=run";
|
||||
import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?as=run';
|
||||
import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png?as=run";
|
||||
import PersonalWebsiteSvelteKit from "$lib/content/portfolio/personal/personal-website-sveltekit.md";
|
||||
import WeddingWebsite from '$lib/content/portfolio/personal/wedding-website.md';
|
||||
import MarkShellnutArchitect from '$lib/content/portfolio/professional/mark-shellnut-architect.md?run';
|
||||
import MarkShellnutArchitect from '$lib/content/portfolio/professional/mark-shellnut-architect.md?as=run';
|
||||
import OldWebsite from '$lib/content/portfolio/personal/old-website.md';
|
||||
import ExternalLink from '$lib/components/ExternalLink.svelte';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<script lang="ts">
|
||||
import Img from '@zerodevx/svelte-img';
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
import desktop from '$lib/assets/images/Desktop_so_clean.jpg?run';
|
||||
import ExternalLink from '$lib/components/ExternalLink.svelte';
|
||||
import LazyImage from '$lib/components/LazyImage.svelte';
|
||||
import desktop from '$lib/assets/images/Desktop_so_clean.jpg?as=run';
|
||||
import HardwareAccessories from '$lib/content/uses/hardware-accessories.md';
|
||||
import Development from '$lib/content/uses/development.md';
|
||||
import PrivacyHardwareSoftware from '$lib/content/uses/privacy-hardware-software.md';
|
||||
import ExternalLink from '$root/lib/components/ExternalLink.svelte';
|
||||
</script>
|
||||
|
||||
<SEO title="Uses" />
|
||||
|
|
@ -18,7 +19,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<div class="uses-image">
|
||||
<Img class="uses-image better-blur" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
|
||||
<LazyImage clazz="uses-image" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
|
||||
</div>
|
||||
<div>
|
||||
<HardwareAccessories />
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
--cardWidthMin: 15rem;
|
||||
|
||||
/* Media Queries - Not yet supported in CSS */
|
||||
/*
|
||||
/*
|
||||
--xsmall: 340px;
|
||||
--small: 500px;
|
||||
--large: 960px;
|
||||
|
|
@ -265,3 +265,19 @@ figure {
|
|||
.card > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.blur {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
backdrop-filter: blur(20px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loaded {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import type { UserConfig } from 'vite';
|
||||
import { imagetools } from '@zerodevx/svelte-img/vite';
|
||||
// import { imagetools } from 'vite-imagetools';
|
||||
|
||||
const config: UserConfig = {
|
||||
plugins: [
|
||||
sveltekit(),
|
||||
imagetools({
|
||||
// By default, directives are `?width=480;1024;1920&format=avif;webp;jpg`
|
||||
// Now we change it to generate 5 variants instead - `avif/jpg` formats at `640/1280` + LQIP
|
||||
defaultDirectives: () =>
|
||||
new URLSearchParams('?width=300;480;640;1024;1920&format=avif;webp;jpg&lqip=64')
|
||||
// Now we change it to generate 5 variants instead - `avif/jpg` formats at `640/1280` + LQIP (Now as:run)
|
||||
profiles: {
|
||||
run: new URLSearchParams('?w=300;480;640;1024;1920&format=avif;webp;jpg&as=run:64')
|
||||
}
|
||||
})
|
||||
],
|
||||
test: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue