Merge pull request #5 from BradNut/bandcamp-image

Bandcamp image

package.json

@@ -14,7 +14,7 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@iconify-icons/material-symbols": "^1.2.36",
+		"@iconify-icons/material-symbols": "^1.2.37",
 		"@iconify-icons/mdi": "^1.2.44",
 		"@iconify-icons/radix-icons": "^1.2.8",
 		"@iconify-icons/simple-icons": "^1.2.48",
@@ -25,7 +25,7 @@
 		"@sveltejs/adapter-auto": "^1.0.3",
 		"@sveltejs/adapter-static": "^2.0.2",
 		"@sveltejs/adapter-vercel": "^1.0.6",
-		"@sveltejs/kit": "^1.15.6",
+		"@sveltejs/kit": "^1.15.7",
 		"@types/postcss-preset-env": "^8.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.59.0",
 		"@typescript-eslint/parser": "^5.59.0",
@@ -38,7 +38,7 @@
 		"just-intersect": "^4.3.0",
 		"mdsvex": "^0.10.6",
 		"mdsvex-relative-images": "^1.0.3",
-		"postcss": "^8.4.22",
+		"postcss": "^8.4.23",
 		"postcss-import": "^15.1.0",
 		"postcss-load-config": "^4.0.1",
 		"postcss-nested": "^6.0.1",
@@ -55,8 +55,8 @@
 		"tslib": "^2.5.0",
 		"typescript": "^4.9.5",
 		"vanilla-lazyload": "^17.8.3",
-		"vite": "^4.2.1",
-		"vite-imagetools": "^4.0.18",
+		"vite": "^4.3.1",
+		"vite-imagetools": "^4.0.19",
 		"vitest": "^0.25.3"
 	},
 	"type": "module",

src/lib/components/bandcamp/index.svelte

@@ -1,10 +1,19 @@
 <script lang="ts">
+	import Img from '@zerodevx/svelte-img';
 	import type { Album } from "$root/lib/types/album";
 
 
 	export let albums: Album[];
 	const displayAlbums =
 		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}
+		]
+	}
 </script>
 
 <div>
@@ -19,12 +28,7 @@
 						href={album.url}
 						rel="noreferrer"
 					>
-						<img
-							src={`https://images.weserv.nl/?url=${encodeURIComponent(
-								album.artwork
-							)}&w=230&h=230`}
-							alt={`Album art for ${album.title}`}
-						/>
+						<Img src={album.src} alt={`Album art for ${album.title}`} />
 					</a>
 				</figure>
 				<a
@@ -81,6 +85,11 @@
 		justify-content: center;
 		text-align: center;
 
+		figure {
+			margin-left: auto;
+			margin-right: auto;
+		}
+
 		@media (max-width: 550px) {
 			grid-template-columns: 0.75fr 0.75fr;
 			font-size: 1rem;

src/lib/types/album.ts

@@ -3,4 +3,12 @@ export type Album = {
 	artwork: string;
 	title: string;
 	artist: string;
+	src?: ExternalImageSource[];
+};
+
+export type ExternalImageSource = {
+	format: string;
+	src: string;
+	width: number;
+	height: number;
 };

src/routes/+layout.svelte

@@ -80,7 +80,7 @@
 		max-width: 85vw;
 
 		@media (min-width: 1600px) {
-			max-width: 50vw;
+			max-width: 60vw;
 		}
 
 		box-sizing: border-box;

src/routes/about/+page.svelte

@@ -343,12 +343,15 @@
 	}
 
 	.extracurricular {
-		display: grid;
-		grid-template-columns: repeat(3, auto);
-		/* justify-content: center; */
-		/* align-items: center; */
+		display: flex;
+		flex-wrap: wrap;
+		place-content: center;
 		gap: 1.5rem;
 
+		.card {
+			max-width: 30rem;
+		}
+
 		@media (max-width: 1000px) {
 			grid-template-columns: repeat(2, auto);
 			--cardHeightMin: 20rem;

src/routes/portfolio/+page.svelte

@@ -23,7 +23,7 @@
 <SEO title="Portfolio" />
 
 <h1>Portfolio!</h1>
-<TabGroup>
+<TabGroup class="tab-group">
 	<TabList aria-label="tabs portfolios" class="tab-list">
 		<Tab class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}>
 			<h2>Personal Sites</h2>
@@ -38,13 +38,18 @@
 				style="max-height: 640px;"
 				src={personalSite}
 				loading="eager"
-				alt="Picture of Bradley Shellnut's Gatsby Personal Website">
+				alt="Picture of Bradley Shellnut's Personal Website">
+				<span slot="portfolio-links">
+					<p>
+						<ExternalLink ariaLabel="View GitHub repository for my personal website" href="https://github.com/BradNut/personal-website-sveltekit" icon={GitHub} showIcon>GitHub repository</ExternalLink>
+					</p>
+				</span>
 				<PersonalWebsiteSvelteKit slot="portfolio-details" />
 			</Portfolio>
 			<Portfolio name="Wedding Website"
 				style="max-height: 640px;"
 				src={weddingWebsite}
-				alt="Picture of Bradley Shellnut's Gatsby Personal Website">
+				alt="Picture of NextJS Wedding Website">
 				<span slot="portfolio-links">
 					<p>
 						<ExternalLink ariaLabel="View Wedding Website" href="https://weddingsite-six.vercel.app/" showIcon>View Site</ExternalLink>
@@ -79,6 +84,12 @@
 </TabGroup>
 
 <style lang="postcss">
+	:global(.tab-group) {
+		@media(min-width: 1000px) {
+			max-width: 50vw;
+		}
+	}
+
 	:global(.tab-list) {
 		display: grid;
 		gap: 1rem;