Add NProgress and add max min widths to uses.

package.json

@@ -61,6 +61,8 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"ioredis": "^5.3.1"
+		"@types/nprogress": "^0.2.0",
+		"ioredis": "^5.3.1",
+		"nprogress": "^0.2.0"
 	}
 }

pnpm-lock.yaml

@@ -1,9 +1,15 @@
 lockfileVersion: '6.0'
 
 dependencies:
+  '@types/nprogress':
+    specifier: ^0.2.0
+    version: 0.2.0
   ioredis:
     specifier: ^5.3.1
     version: 5.3.1
+  nprogress:
+    specifier: ^0.2.0
+    version: 0.2.0
 
 devDependencies:
   '@iconify-icons/material-symbols':
@@ -1218,6 +1224,10 @@ packages:
     resolution: {integrity: sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==}
     dev: true
 
+  /@types/nprogress@0.2.0:
+    resolution: {integrity: sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==}
+    dev: false
+
   /@types/postcss-preset-env@8.0.0(postcss@8.4.21):
     resolution: {integrity: sha512-Mjw3bkhK1SkPg9HgBxUic1hSzpF5p3fSslgZrSg8fPC9mkjoz6ghhVqr9a+kVVDSvE7Lrw6GY/D+yLxmJ4IDAg==}
     deprecated: This is a stub types definition. postcss-preset-env provides its own type definitions, so you do not need this installed.
@@ -3182,6 +3192,10 @@ packages:
       set-blocking: 2.0.0
     dev: true
 
+  /nprogress@0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+    dev: false
+
   /nth-check@1.0.2:
     resolution: {integrity: sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==}
     dependencies:

src/lib/util/fetchBandcampAlbums.ts

@@ -44,7 +44,6 @@ export async function fetchBandcampAlbums() {
 		);
 
 		const albums: Album[] = data?.collectionItems || [];
-		// console.log(`Albums ${JSON.stringify(albums)}`);
 
 		if (albums && albums?.length > 0) {
 			if (USE_REDIS_CACHE) {

src/routes/+layout.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { navigating } from "$app/stores";
+	import "nprogress/nprogress.css";
+	import NProgress from "nprogress";
 	import 'iconify-icon';
 	import Header from '$lib/components/header/index.svelte';
 	import Footer from '$lib/components/footer/index.svelte';
@@ -6,7 +9,20 @@
 	import Analytics from '$lib/components/analytics/index.svelte';
 	import SEO from '$lib/components/SEO.svelte';
 
+	 NProgress.configure({
+			// Full list: https://github.com/rstacruz/nprogress#configuration
+			minimum: 0.16,
+	});
+
 	const dev = process.env.NODE_ENV !== 'production';
+
+	$: {
+		if ($navigating) {
+			NProgress.start();
+		} else {
+			NProgress.done();
+		}
+	}
 </script>
 
 {#if !dev}
@@ -87,6 +103,15 @@
 		}
 	}
 
+	:global(#nprogress .bar) {
+		background: var(--lightGrey);
+	}
+
+	:global(#nprogress .spinner-icon) {
+		border-top-color: var(--lightGrey);
+		border-left-color: var(--lightGrey);
+	}
+
   :global(p) {
     word-wrap: normal;
     font-size: var(--bodyTextSize);

src/routes/about/+page.svelte

@@ -267,11 +267,6 @@
 			>
 				<figure>
 					<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> -->
 					<p class="center">Seattle Space Needle</p>
 				</figure>
 			</div>
@@ -281,20 +276,10 @@
 			<div class="cat-pics">
 				<figure>
 					<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> -->
 					<p class="center">Turnip</p>
 				</figure>
 				<figure>
 					<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> -->
 					<p class="center">Taco 🌮</p>
 				</figure>
 			</div>

src/routes/portfolio/+page.svelte

@@ -72,14 +72,12 @@
 			</Portfolio>
 		</TabPanel>
 		<TabPanel>
-			<!-- <div class="portfolioStyles"> -->
+			<Portfolio name="Mark Shellnut Architect"
-				<Portfolio name="Mark Shellnut Architect"
+				style="max-height: 640px;"
-					style="max-height: 640px;"
+				src={shellnutArchitectWebsite}
-					src={shellnutArchitectWebsite}
+				alt="Picture of Mark Shellnut Architect's Website">
-					alt="Picture of Mark Shellnut Architect's Website">
+				<MarkShellnutArchitect slot="portfolio-details" />
-					<MarkShellnutArchitect slot="portfolio-details" />
+			</Portfolio>
-				</Portfolio>
-			<!-- </div> -->
 		</TabPanel>
 	</TabPanels>
 </TabGroup>
@@ -98,15 +96,6 @@
 		border-radius: 3px;
 	}
 
-	:global(.portfolioStyles) {
-		margin: 0.5rem auto;
-
-		@media (max-width: 800px) {
-			grid-gap: 1.2rem;
-			margin: 0.2rem 0;
-		}
-	}
-
 	:global(.tab-unselected) {
 		h2 {
 			border-bottom: 2px solid var(--white);

src/routes/uses/+page.svelte

@@ -41,7 +41,7 @@
 	</div>
 	<div class="uses-block-styles">
 		<figure>
-			<Img class="portfolio-image better-blur" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
+			<Img class="portfolio-image better-blur" style="max-height: 480px; max-width: 520px;" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
 		</figure>
 		<h2>Hardware & Accessories</h2>
 		<ul>