Merge pull request #18 from BradNut/development

Changing the picture for Mark Shellnut's site, updateing all dependen…

.gitignore

@@ -6,6 +6,7 @@ node_modules
 .env
 .env.*
 !.env.example
+*.xdp*
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 

.nvmrc

@@ -0,0 +1 @@
+v18

package.json

@@ -21,41 +21,41 @@
 		"@iconify-icons/radix-icons": "^1.2.9",
 		"@iconify-icons/simple-icons": "^1.2.74",
 		"@melt-ui/pp": "^0.1.4",
-		"@playwright/test": "^1.39.0",
+		"@playwright/test": "^1.40.1",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/adapter-vercel": "^1.0.6",
-		"@sveltejs/enhanced-img": "^0.1.1",
+		"@sveltejs/enhanced-img": "^0.1.5",
-		"@sveltejs/kit": "^1.27.5",
+		"@sveltejs/kit": "^1.27.7",
 		"@typescript-eslint/eslint-plugin": "^5.62.0",
 		"@typescript-eslint/parser": "^5.62.0",
 		"@zerodevx/svelte-img": "^2.1.0",
 		"autoprefixer": "^10.4.16",
-		"eslint": "^8.53.0",
+		"eslint": "^8.55.0",
 		"eslint-config-prettier": "^8.10.0",
-		"eslint-plugin-svelte": "^2.35.0",
+		"eslint-plugin-svelte": "^2.35.1",
 		"iconify-icon": "^1.0.8",
 		"just-intersect": "^4.3.0",
 		"mdsvex": "^0.10.6",
 		"mdsvex-relative-images": "^1.0.3",
-		"postcss": "^8.4.31",
+		"postcss": "^8.4.32",
 		"postcss-import": "^15.1.0",
-		"postcss-load-config": "^4.0.1",
+		"postcss-load-config": "^4.0.2",
 		"postcss-preset-env": "^8.5.1",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
 		"sass": "^1.69.5",
 		"scrape-it": "^6.1.0",
 		"sharp": "^0.32.6",
-		"svelte": "^4.2.3",
+		"svelte": "^4.2.8",
-		"svelte-check": "^3.6.0",
+		"svelte-check": "^3.6.2",
 		"svelte-lazy-loader": "^1.0.0",
 		"svelte-meta-tags": "^3.1.0",
-		"svelte-preprocess": "^5.1.0",
+		"svelte-preprocess": "^5.1.1",
 		"svelte-sequential-preprocessor": "^2.0.1",
 		"tslib": "^2.6.2",
-		"typescript": "^5.2.2",
+		"typescript": "^5.3.2",
 		"vanilla-lazyload": "^17.8.5",
-		"vite": "^4.5.0",
+		"vite": "^4.5.1",
 		"vite-imagetools": "^5.1.2",
 		"vitest": "^0.32.2"
 	},

src/lib/components/Portfolio.svelte

@@ -27,10 +27,9 @@
 	:global(.portfolio) {
 		display: grid;
 		grid-template-columns: minmax(200px, 500px) auto;
-		/* width: 100%; */
 		margin: 1.5rem auto;
 
-		@media (max-width: 800px) {
+		@media (width <= 1200px) {
 			grid-template-columns: minmax(200px, 500px);
 			place-items: center;
 		}

src/routes/+layout.svelte

@@ -54,30 +54,6 @@
 </div>
 
 <style lang="postcss">
-	.loading {
-		position: fixed;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		z-index: 101;
-		display: grid;
-		place-items: center;
-		gap: 1rem;
-
-		& h3 {
-			color: white;
-		}
-	}
-
-	.background {
-		background: black;
-		opacity: 0.8;
-		cursor: none;
-		inset: 0;
-		position: fixed;
-		z-index: 100;
-	}
-
 	.wrapper {
 		display: grid;
 		grid-template-rows: auto 1fr auto;
@@ -85,38 +61,19 @@
 	}
 
 	main {
-		flex: 1;
 		display: flex;
 		flex-direction: column;
 		margin: 0 auto;
 		padding: 2rem 0rem;
 		max-width: 85vw;
 
-		@media (min-width: 1600px) {
+		@media (width >= 1600px) {
 			max-width: 60vw;
 		}
 
 		box-sizing: border-box;
 	}
 
-	footer {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		padding: 40px;
-	}
-
-	footer a {
-		font-weight: bold;
-	}
-
-	@media (min-width: 480px) {
-		footer {
-			padding: 40px 0;
-		}
-	}
-
 	:global(#nprogress .bar) {
 		background: var(--lightGrey);
 	}

src/routes/portfolio/+page.svelte

@@ -8,7 +8,7 @@
 	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?as=run';
+	import MarkShellnutArchitect from '$lib/content/portfolio/professional/mark-shellnut-architect.md';
 	import OldWebsite from '$lib/content/portfolio/personal/old-website.md';
 	import ExternalLink from '$lib/components/ExternalLink.svelte';
 
@@ -35,7 +35,7 @@
 	</div>
 	<div use:melt={$content('personal')} class="content">
 		<Portfolio name="Personal Website"
-			style="max-height: 640px;"
+			style="max-height: 550px;"
 			src={personalSite}
 			loading="eager"
 			alt="Picture of Bradley Shellnut's Personal Website">
@@ -47,7 +47,7 @@
 			<PersonalWebsiteSvelteKit slot="portfolio-details" />
 		</Portfolio>
 		<Portfolio name="Wedding Website"
-			style="max-height: 640px;"
+			style="max-height: 550px;"
 			src={weddingWebsite}
 			alt="Picture of NextJS Wedding Website">
 			<span slot="portfolio-links">
@@ -74,7 +74,7 @@
 	</div>
 	<div use:melt={$content('professional')} class="content">
 		<Portfolio name="Mark Shellnut Architect"
-			style="max-height: 640px;"
+			style="max-height: 550px;"
 			src={shellnutArchitectWebsite}
 			alt="Picture of Mark Shellnut Architect's Website">
 			<span slot="portfolio-links">