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

Using markdown for portfolio entries. Still need to optimize design.

Browse source
This commit is contained in:
Bradley Shellnut 2023-02-28 15:42:00 -08:00
parent 4d6a98df74
commit 1cc01cf932
15 changed files with 376 additions and 422 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
mdsvex.config.js Normal file
View file

@ -0,0 +1,14 @@
import { defineMDSveXConfig as defineConfig } from 'mdsvex';
import relativeImages from 'mdsvex-relative-images';
const config = defineConfig({
extensions: ['.svelte.md', '.md', '.svx'],
smartypants: {
dashes: 'oldschool'
},
remarkPlugins: [relativeImages],
rehypePlugins: []
});
export default config;

6
package.json
View file

@ -25,10 +25,10 @@
"@sveltejs/adapter-auto": "^1.0.3", "@sveltejs/adapter-auto": "^1.0.3",
"@sveltejs/adapter-static": "^2.0.1", "@sveltejs/adapter-static": "^2.0.1",
"@sveltejs/adapter-vercel": "^1.0.6", "@sveltejs/adapter-vercel": "^1.0.6",
"@sveltejs/kit": "^1.8.5", "@sveltejs/kit": "^1.8.7",
"@types/postcss-preset-env": "^8.0.0", "@types/postcss-preset-env": "^8.0.0",
"@typescript-eslint/eslint-plugin": "^5.53.0", "@typescript-eslint/eslint-plugin": "^5.54.0",
"@typescript-eslint/parser": "^5.53.0", "@typescript-eslint/parser": "^5.54.0",
"autoprefixer": "^10.4.7", "autoprefixer": "^10.4.7",
"eslint": "^8.35.0", "eslint": "^8.35.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",

100
pnpm-lock.yaml
View file

@ -12,10 +12,10 @@ specifiers:
'@sveltejs/adapter-auto': ^1.0.3 '@sveltejs/adapter-auto': ^1.0.3
'@sveltejs/adapter-static': ^2.0.1 '@sveltejs/adapter-static': ^2.0.1
'@sveltejs/adapter-vercel': ^1.0.6 '@sveltejs/adapter-vercel': ^1.0.6
'@sveltejs/kit': ^1.8.5 '@sveltejs/kit': ^1.8.7
'@types/postcss-preset-env': ^8.0.0 '@types/postcss-preset-env': ^8.0.0
'@typescript-eslint/eslint-plugin': ^5.53.0 '@typescript-eslint/eslint-plugin': ^5.54.0
'@typescript-eslint/parser': ^5.53.0 '@typescript-eslint/parser': ^5.54.0
autoprefixer: ^10.4.7 autoprefixer: ^10.4.7
eslint: ^8.35.0 eslint: ^8.35.0
eslint-config-prettier: ^8.5.0 eslint-config-prettier: ^8.5.0
@ -56,13 +56,13 @@ devDependencies:
'@leveluptuts/svelte-toy': 2.0.3 '@leveluptuts/svelte-toy': 2.0.3
'@playwright/test': 1.31.1 '@playwright/test': 1.31.1
'@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.55.1 '@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.55.1
'@sveltejs/adapter-auto': 1.0.3_@sveltejs+kit@1.8.5 '@sveltejs/adapter-auto': 1.0.3_@sveltejs+kit@1.8.7
'@sveltejs/adapter-static': 2.0.1_@sveltejs+kit@1.8.5 '@sveltejs/adapter-static': 2.0.1_@sveltejs+kit@1.8.7
'@sveltejs/adapter-vercel': 1.0.6_@sveltejs+kit@1.8.5 '@sveltejs/adapter-vercel': 1.0.6_@sveltejs+kit@1.8.7
'@sveltejs/kit': 1.8.5_svelte@3.55.1+vite@4.1.4 '@sveltejs/kit': 1.8.7_svelte@3.55.1+vite@4.1.4
'@types/postcss-preset-env': 8.0.0_postcss@8.4.21 '@types/postcss-preset-env': 8.0.0_postcss@8.4.21
'@typescript-eslint/eslint-plugin': 5.53.0_cjo54hduev4bqhpjw5znwiokqu '@typescript-eslint/eslint-plugin': 5.54.0_6mj2wypvdnknez7kws2nfdgupi
'@typescript-eslint/parser': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu '@typescript-eslint/parser': 5.54.0_ycpbpc6yetojsgtrx3mwntkhsu
autoprefixer: 10.4.13_postcss@8.4.21 autoprefixer: 10.4.13_postcss@8.4.21
eslint: 8.35.0 eslint: 8.35.0
eslint-config-prettier: 8.6.0_eslint@8.35.0 eslint-config-prettier: 8.6.0_eslint@8.35.0
@ -716,29 +716,29 @@ packages:
picomatch: 2.3.1 picomatch: 2.3.1
dev: true dev: true
/@sveltejs/adapter-auto/1.0.3_@sveltejs+kit@1.8.5: /@sveltejs/adapter-auto/1.0.3_@sveltejs+kit@1.8.7:
resolution: {integrity: sha512-hc7O12YQqvZ1CD4fo1gMJuPzBZvuoG5kwxb2RRoz4fVoB8B2vuPO2cY751Ln0G6T/HMrAf8kCqw6Pg+wbxcstw==} resolution: {integrity: sha512-hc7O12YQqvZ1CD4fo1gMJuPzBZvuoG5kwxb2RRoz4fVoB8B2vuPO2cY751Ln0G6T/HMrAf8kCqw6Pg+wbxcstw==}
peerDependencies: peerDependencies:
'@sveltejs/kit': ^1.0.0 '@sveltejs/kit': ^1.0.0
dependencies: dependencies:
'@sveltejs/kit': 1.8.5_svelte@3.55.1+vite@4.1.4 '@sveltejs/kit': 1.8.7_svelte@3.55.1+vite@4.1.4
import-meta-resolve: 2.2.1 import-meta-resolve: 2.2.1
dev: true dev: true
/@sveltejs/adapter-static/2.0.1_@sveltejs+kit@1.8.5: /@sveltejs/adapter-static/2.0.1_@sveltejs+kit@1.8.7:
resolution: {integrity: sha512-o5/q3YwD/ErxYCFlK1v3ydvldyNKk1lh3oeyxn4mhz+Pkbx/uuxhzmbOpytTlp5aVqNHDVsb04xadUzOFCDDzw==} resolution: {integrity: sha512-o5/q3YwD/ErxYCFlK1v3ydvldyNKk1lh3oeyxn4mhz+Pkbx/uuxhzmbOpytTlp5aVqNHDVsb04xadUzOFCDDzw==}
peerDependencies: peerDependencies:
'@sveltejs/kit': ^1.5.0 '@sveltejs/kit': ^1.5.0
dependencies: dependencies:
'@sveltejs/kit': 1.8.5_svelte@3.55.1+vite@4.1.4 '@sveltejs/kit': 1.8.7_svelte@3.55.1+vite@4.1.4
dev: true dev: true
/@sveltejs/adapter-vercel/1.0.6_@sveltejs+kit@1.8.5: /@sveltejs/adapter-vercel/1.0.6_@sveltejs+kit@1.8.7:
resolution: {integrity: sha512-fo6aaEygPd/6B5Jms4Ff7R4jbADnppuLvKOWBNTGe5MGB7ZRUkl+gxHWMQx2av2knyEZkA6V8y5M6R3ML5yN4g==} resolution: {integrity: sha512-fo6aaEygPd/6B5Jms4Ff7R4jbADnppuLvKOWBNTGe5MGB7ZRUkl+gxHWMQx2av2knyEZkA6V8y5M6R3ML5yN4g==}
peerDependencies: peerDependencies:
'@sveltejs/kit': ^1.0.0 '@sveltejs/kit': ^1.0.0
dependencies: dependencies:
'@sveltejs/kit': 1.8.5_svelte@3.55.1+vite@4.1.4 '@sveltejs/kit': 1.8.7_svelte@3.55.1+vite@4.1.4
'@vercel/nft': 0.22.6 '@vercel/nft': 0.22.6
esbuild: 0.16.17 esbuild: 0.16.17
transitivePeerDependencies: transitivePeerDependencies:
@ -746,8 +746,8 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@sveltejs/kit/1.8.5_svelte@3.55.1+vite@4.1.4: /@sveltejs/kit/1.8.7_svelte@3.55.1+vite@4.1.4:
resolution: {integrity: sha512-b6kbjVAivoPd3oL9IVBaZBWiuHeI0qBKfszSDXcqsPfiSMyUK7ilHDFVSWNn+2EMPO48+87iuho71yTCOXZE3w==} resolution: {integrity: sha512-DQ2JpuL4iFdA4wQw4f0W6yAxWov4xN9JOxbmt0VOHNcWeqIiEzw4GY8g4Ve5gF4f4cwjSlcxvUmS+mEGCLduLA==}
engines: {node: ^16.14 || >=18} engines: {node: ^16.14 || >=18}
hasBin: true hasBin: true
requiresBuild: true requiresBuild: true
@ -852,8 +852,8 @@ packages:
resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==} resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
dev: true dev: true
/@typescript-eslint/eslint-plugin/5.53.0_cjo54hduev4bqhpjw5znwiokqu: /@typescript-eslint/eslint-plugin/5.54.0_6mj2wypvdnknez7kws2nfdgupi:
resolution: {integrity: sha512-alFpFWNucPLdUOySmXCJpzr6HKC3bu7XooShWM+3w/EL6J2HIoB2PFxpLnq4JauWVk6DiVeNKzQlFEaE+X9sGw==} resolution: {integrity: sha512-+hSN9BdSr629RF02d7mMtXhAJvDTyCbprNYJKrXETlul/Aml6YZwd90XioVbjejQeHbb3R8Dg0CkRgoJDxo8aw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
'@typescript-eslint/parser': ^5.0.0 '@typescript-eslint/parser': ^5.0.0
@ -863,10 +863,10 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/parser': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu '@typescript-eslint/parser': 5.54.0_ycpbpc6yetojsgtrx3mwntkhsu
'@typescript-eslint/scope-manager': 5.53.0 '@typescript-eslint/scope-manager': 5.54.0
'@typescript-eslint/type-utils': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu '@typescript-eslint/type-utils': 5.54.0_ycpbpc6yetojsgtrx3mwntkhsu
'@typescript-eslint/utils': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu '@typescript-eslint/utils': 5.54.0_ycpbpc6yetojsgtrx3mwntkhsu
debug: 4.3.4 debug: 4.3.4
eslint: 8.35.0 eslint: 8.35.0
grapheme-splitter: 1.0.4 grapheme-splitter: 1.0.4
@ -880,8 +880,8 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@typescript-eslint/parser/5.53.0_ycpbpc6yetojsgtrx3mwntkhsu: /@typescript-eslint/parser/5.54.0_ycpbpc6yetojsgtrx3mwntkhsu:
resolution: {integrity: sha512-MKBw9i0DLYlmdOb3Oq/526+al20AJZpANdT6Ct9ffxcV8nKCHz63t/S0IhlTFNsBIHJv+GY5SFJ0XfqVeydQrQ==} resolution: {integrity: sha512-aAVL3Mu2qTi+h/r04WI/5PfNWvO6pdhpeMRWk9R7rEV4mwJNzoWf5CCU5vDKBsPIFQFjEq1xg7XBI2rjiMXQbQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@ -890,9 +890,9 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/scope-manager': 5.53.0 '@typescript-eslint/scope-manager': 5.54.0
'@typescript-eslint/types': 5.53.0 '@typescript-eslint/types': 5.54.0
'@typescript-eslint/typescript-estree': 5.53.0_typescript@4.9.5 '@typescript-eslint/typescript-estree': 5.54.0_typescript@4.9.5
debug: 4.3.4 debug: 4.3.4
eslint: 8.35.0 eslint: 8.35.0
typescript: 4.9.5 typescript: 4.9.5
@ -900,16 +900,16 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@typescript-eslint/scope-manager/5.53.0: /@typescript-eslint/scope-manager/5.54.0:
resolution: {integrity: sha512-Opy3dqNsp/9kBBeCPhkCNR7fmdSQqA+47r21hr9a14Bx0xnkElEQmhoHga+VoaoQ6uDHjDKmQPIYcUcKJifS7w==} resolution: {integrity: sha512-VTPYNZ7vaWtYna9M4oD42zENOBrb+ZYyCNdFs949GcN8Miwn37b8b7eMj+EZaq7VK9fx0Jd+JhmkhjFhvnovhg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies: dependencies:
'@typescript-eslint/types': 5.53.0 '@typescript-eslint/types': 5.54.0
'@typescript-eslint/visitor-keys': 5.53.0 '@typescript-eslint/visitor-keys': 5.54.0
dev: true dev: true
/@typescript-eslint/type-utils/5.53.0_ycpbpc6yetojsgtrx3mwntkhsu: /@typescript-eslint/type-utils/5.54.0_ycpbpc6yetojsgtrx3mwntkhsu:
resolution: {integrity: sha512-HO2hh0fmtqNLzTAme/KnND5uFNwbsdYhCZghK2SoxGp3Ifn2emv+hi0PBUjzzSh0dstUIFqOj3bp0AwQlK4OWw==} resolution: {integrity: sha512-WI+WMJ8+oS+LyflqsD4nlXMsVdzTMYTxl16myXPaCXnSgc7LWwMsjxQFZCK/rVmTZ3FN71Ct78ehO9bRC7erYQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
eslint: '*' eslint: '*'
@ -918,8 +918,8 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/typescript-estree': 5.53.0_typescript@4.9.5 '@typescript-eslint/typescript-estree': 5.54.0_typescript@4.9.5
'@typescript-eslint/utils': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu '@typescript-eslint/utils': 5.54.0_ycpbpc6yetojsgtrx3mwntkhsu
debug: 4.3.4 debug: 4.3.4
eslint: 8.35.0 eslint: 8.35.0
tsutils: 3.21.0_typescript@4.9.5 tsutils: 3.21.0_typescript@4.9.5
@ -928,13 +928,13 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@typescript-eslint/types/5.53.0: /@typescript-eslint/types/5.54.0:
resolution: {integrity: sha512-5kcDL9ZUIP756K6+QOAfPkigJmCPHcLN7Zjdz76lQWWDdzfOhZDTj1irs6gPBKiXx5/6O3L0+AvupAut3z7D2A==} resolution: {integrity: sha512-nExy+fDCBEgqblasfeE3aQ3NuafBUxZxgxXcYfzYRZFHdVvk5q60KhCSkG0noHgHRo/xQ/BOzURLZAafFpTkmQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true dev: true
/@typescript-eslint/typescript-estree/5.53.0_typescript@4.9.5: /@typescript-eslint/typescript-estree/5.54.0_typescript@4.9.5:
resolution: {integrity: sha512-eKmipH7QyScpHSkhbptBBYh9v8FxtngLquq292YTEQ1pxVs39yFBlLC1xeIZcPPz1RWGqb7YgERJRGkjw8ZV7w==} resolution: {integrity: sha512-X2rJG97Wj/VRo5YxJ8Qx26Zqf0RRKsVHd4sav8NElhbZzhpBI8jU54i6hfo9eheumj4oO4dcRN1B/zIVEqR/MQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
typescript: '*' typescript: '*'
@ -942,8 +942,8 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/types': 5.53.0 '@typescript-eslint/types': 5.54.0
'@typescript-eslint/visitor-keys': 5.53.0 '@typescript-eslint/visitor-keys': 5.54.0
debug: 4.3.4 debug: 4.3.4
globby: 11.1.0 globby: 11.1.0
is-glob: 4.0.3 is-glob: 4.0.3
@ -954,17 +954,17 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@typescript-eslint/utils/5.53.0_ycpbpc6yetojsgtrx3mwntkhsu: /@typescript-eslint/utils/5.54.0_ycpbpc6yetojsgtrx3mwntkhsu:
resolution: {integrity: sha512-VUOOtPv27UNWLxFwQK/8+7kvxVC+hPHNsJjzlJyotlaHjLSIgOCKj9I0DBUjwOOA64qjBwx5afAPjksqOxMO0g==} resolution: {integrity: sha512-cuwm8D/Z/7AuyAeJ+T0r4WZmlnlxQ8wt7C7fLpFlKMR+dY6QO79Cq1WpJhvZbMA4ZeZGHiRWnht7ZJ8qkdAunw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies: dependencies:
'@types/json-schema': 7.0.11 '@types/json-schema': 7.0.11
'@types/semver': 7.3.13 '@types/semver': 7.3.13
'@typescript-eslint/scope-manager': 5.53.0 '@typescript-eslint/scope-manager': 5.54.0
'@typescript-eslint/types': 5.53.0 '@typescript-eslint/types': 5.54.0
'@typescript-eslint/typescript-estree': 5.53.0_typescript@4.9.5 '@typescript-eslint/typescript-estree': 5.54.0_typescript@4.9.5
eslint: 8.35.0 eslint: 8.35.0
eslint-scope: 5.1.1 eslint-scope: 5.1.1
eslint-utils: 3.0.0_eslint@8.35.0 eslint-utils: 3.0.0_eslint@8.35.0
@ -974,11 +974,11 @@ packages:
- typescript - typescript
dev: true dev: true
/@typescript-eslint/visitor-keys/5.53.0: /@typescript-eslint/visitor-keys/5.54.0:
resolution: {integrity: sha512-JqNLnX3leaHFZEN0gCh81sIvgrp/2GOACZNgO4+Tkf64u51kTpAyWFOY8XHx8XuXr3N2C9zgPPHtcpMg6z1g0w==} resolution: {integrity: sha512-xu4wT7aRCakGINTLGeyGqDn+78BwFlggwBjnHa1ar/KaGagnmwLYmlrXIrgAaQ3AE1Vd6nLfKASm7LrFHNbKGA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies: dependencies:
'@typescript-eslint/types': 5.53.0 '@typescript-eslint/types': 5.54.0
eslint-visitor-keys: 3.3.0 eslint-visitor-keys: 3.3.0
dev: true dev: true

7
src/lib/components/ExternalLink.svelte
View file

@ -1,10 +1,12 @@
<script lang="ts"> <script lang="ts">
import OpenInNew from '@iconify-icons/mdi/open-in-new'; import OpenInNew from '@iconify-icons/mdi/open-in-new';
import type { IconifyIcon } from 'iconify-icon';
export let rel = 'noreferrer'; export let rel = 'noreferrer';
export let target = '_blank'; export let target = '_blank';
export let href: string; export let href: string;
export let ariaLabel: string; export let ariaLabel: string;
export let showIcon: boolean = false; export let showIcon: boolean = false;
export let icon: IconifyIcon = OpenInNew;
</script> </script>
<span class:show-icon={showIcon}> <span class:show-icon={showIcon}>
@ -12,15 +14,14 @@
<slot /> <slot />
</a> </a>
{#if showIcon} {#if showIcon}
<iconify-icon icon={OpenInNew} width="24" height="24" role="img" title={`Open ${ariaLabel} Externally`} /> <iconify-icon {icon} width="24" height="24" role="img" title={`Open ${ariaLabel} Externally`} />
{/if} {/if}
</span> </span>
<style lang="postcss"> <style lang="postcss">
.show-icon { .show-icon {
display: flex; display: inline-flex;
gap: 0.5rem; gap: 0.5rem;
place-items: center;
&:hover { &:hover {
color: var(--shellYellow); color: var(--shellYellow);

39
src/lib/components/Portfolio.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import type { SvelteComponent } from "svelte";
import { Picture } from "svelte-lazy-loader"; import { Picture } from "svelte-lazy-loader";
type ImageMeta = { type ImageMeta = {
@ -18,41 +17,51 @@
export let formats: ImageMeta[]; export let formats: ImageMeta[];
</script> </script>
<div class="gridItemStyles"> <div class="portfolio">
<div class="portfolioPicture"> <div class="portfolio-picture">
<h2>{name}</h2> <h2>{name}</h2>
<Picture {placeholder} {src} {loading} {alt}> <Picture {placeholder} {src} {loading} {alt}>
{#each formats as { src, format, width }} {#each formats as { src, format, width }}
<source data-srcset={src} type="image/{format}" {width} /> <source data-srcset={src} type="image/{format}" {width} />
{/each} {/each}
</Picture> </Picture>
<slot name="portfolio-links" />
</div> </div>
<div class="portfolio-details"> <div class="portfolio-details">
<slot /> <slot name="portfolio-details" />
</div> </div>
</div> </div>
<style lang="postcss"> <style lang="postcss">
:global(.portfolioPicture) { :global(.portfolio-picture) {
border-radius: 3px; border-radius: 3px;
max-width: 500px; max-width: 500px;
/* width: minmax(200px, 500px); */
} }
:global(.gridItemStyles) { :global(.portfolio) {
display: grid; display: grid;
grid-template-columns: minmax(200px, 500px) 1fr; grid-template-columns: minmax(200px, 500px) 1fr;
width: 100%; width: 100%;
gap: 2rem; margin: 1rem auto;
margin: 0 auto;
@media (max-width: 800px) { @media (max-width: 800px) {
grid-template-columns: 1fr; grid-template-columns: minmax(200px, 500px);
} place-items: center;
p {
margin: 1rem 0;
padding: 0;
} }
} }
:global(.portfolio p) {
margin: 1rem 0;
padding: 0;
}
:global(.portfolio-details) {
margin: 0 1.5rem;
}
:global(.portfolio-details ul) {
margin: 1rem;
list-style: disc;
padding-left: 1rem;
}
</style> </style>

43
src/lib/content/portfolio/personal-website-gatsby.ts Normal file
View file

@ -0,0 +1,43 @@
import meta from '$lib/assets/images/Bradley_Shellnut_New_Site.png?metadata';
import formatMeta from '$lib/assets/images/Bradley_Shellnut_New_Site.png?format=webp;avif;png&metadata';
import placeholder from '$lib/assets/images/Bradley_Shellnut_New_Site.png?w=100&png&blur=10';
type ImageMeta = {
format: string;
src: string;
type: string;
width: string;
height: string;
};
type Sources = {
srcset: URL;
type: string;
width: string;
height: string;
};
const { height, src, width }: ImageMeta = meta;
const sources: Sources[] = [];
const imageFormatsMetadata: ImageMeta[] = JSON.parse(formatMeta);
console.log(`Image format metadata: ${JSON.parse(imageFormatsMetadata)}`);
for (const metadata of imageFormatsMetadata) {
sources.push({
srcset: new URL(metadata.src),
type: `image/${metadata.format}`,
width: metadata.width,
height: metadata.height
});
}
const data = {
alt: 'Home Page of bradleyshellnut.com',
width,
height,
src,
sources,
placeholder
};
export { data as default };

21
src/lib/content/portfolio/personal/old-website.md Normal file
View file

@ -0,0 +1,21 @@
---
portfolioName: 'Old Personal Website'
portfolioSubHeading: 'My first personal website.'
portfolioImage: 'Old_Website_Bradley_Shellnut.png'
portfolioImageAlt: 'Home Page of the old bradleyshellnut.com website'
---
<script>
import ExternalLink from '$lib/components/ExternalLink.svelte';
</script>
### {portfolioSubHeading}
This was my first real personal website hosted on DigitalOcean.
Tech stack:
- React
- Redux
- ReactStrap for CSS grid management
- React Router for routing links in the page

30
src/lib/content/portfolio/personal/personal-website-gatsby.md Normal file
View file

@ -0,0 +1,30 @@
---
portfolioName: 'Personal Website'
portfolioSubHeading: 'My personal website written using the following technologies.'
portfolioImage: 'Bradley_Shellnut_New_Site.png'
portfolioImageAlt: 'Home Page of bradleyshellnut.com'
---
<script>
import ExternalLink from '$lib/components/ExternalLink.svelte';
</script>
### {portfolioSubHeading}
Tech Stack:
- React 18
- Gatsby 5
- <ExternalLink href="https://radix-ui.com" ariaLabel="Radix UI" showIcon>Radix UI</ExternalLink>
- Styled Components
- GraphQL
- Deployed using Netlify
- Most icons from <ExternalLink showIcon href="https://github.com/react-icons/react-icons" ariaLabel="React Icons">react-icons</ExternalLink>
- Bee, Shell, Nut, and Seattle Icons made by <ExternalLink showIcon href="https://www.flaticon.com/authors/freepik" ariaLabel="Freepik">"Freepik"</ExternalLink> from <ExternalLink showIcon href="https://www.flaticon.com" ariaLabel="Flaticon">flaticon.com</ExternalLink>
Current version was improved after the suggestions on <ExternalLink showIcon href="https://syntax.fm/show/444/syntax-highlight#t=33:19" ariaLabel="Syntax.fm Podcast Number 444">Show 444</ExternalLink> of the <ExternalLink showIcon
href="https://syntax.fm/show/444/syntax-highlight#t=33:19"
ariaLabel="Syntax.fm Podcast">Syntax Podcast</ExternalLink>
Previous archived version of my <ExternalLink showIcon
href="https://web.archive.org/web/20210224002046/https://bradleyshellnut.com/"
ariaLabel="Archive before Syntax Podcast">personal website</ExternalLink>.

23
src/lib/content/portfolio/personal/wedding-website.md Normal file
View file

@ -0,0 +1,23 @@
---
portfolioName: 'Wedding Website'
portfolioSubHeading: 'An application that allows viewing of wedding details and provides the ability to RSVP to the wedding.'
portfolioImage: 'Wedding_Website.png'
portfolioImageAlt: 'Wedding Website'
---
<script>
import ExternalLink from '$lib/components/ExternalLink.svelte';
</script>
### {portfolioSubHeading}
The app was initially created for my wedding but what is linked here is a public demo of the application.
Tech stack:
- Next.js 13
- React 18
- <ExternalLink href="https://radix-ui.com" ariaLabel="Radix UI" showIcon>Radix UI</ExternalLink>
- MongoDB
- Styled Components
- Next Iron Session

21
src/lib/content/portfolio/professional/mark-shellnut-architect.md Normal file
View file

@ -0,0 +1,21 @@
---
portfolioName: 'Mark Shellnut Architect'
portfolioSubHeading: 'Company website for Mark Shellnut Architect.'
portfolioImage: 'Mark_Shellnut_Architect.png'
portfolioImageAlt: "Picture of Mark Shellnut Architect's Website"
---
<script>
import ExternalLink from '$lib/components/ExternalLink.svelte';
</script>
### {portfolioSubHeading}
Tech stack:
- React 18
- Gatsby 5
- <ExternalLink href="https://radix-ui.com" ariaLabel="Radix UI" showIcon>Radix UI</ExternalLink>
- Styled Components
- GraphQL
- Lambda Functions

28
src/routes/portfolio/+page.server.ts Normal file
View file

@ -0,0 +1,28 @@
import { error } from '@sveltejs/kit';
import { compile } from 'mdsvex';
import type { PageServerLoad } from '../$types';
export const prerender = true;
export const load: PageServerLoad = async () => {
try {
const personalSiteGatsby = await import(
`../../lib/content/portfolio/personal/personal-website-gatsby.md`
);
const { default: page, metadata } = personalSiteGatsby;
// const [personalSiteGatsbyResponse] = await Promise.all([personalSiteGatsby]);
console.log(`page: ${JSON.stringify(page)}, metadata: ${JSON.stringify(metadata)}`);
// const compiledResponse = await compile(personalSiteGatsbyResponse);
// console.log(`compiledResponse is: ${JSON.stringify(compiledResponse)}`);
return {
portfolios: ''
};
} catch (e) {
console.error(e);
throw error(500, 'Error loading portfolios');
}
};

422
src/routes/portfolio/+page.svelte
View file

@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import type { PageData } from "./$types";
import { import {
Tab, Tab,
TabGroup, TabGroup,
@ -7,15 +8,28 @@
TabPanels, TabPanels,
} from "@rgossiaux/svelte-headlessui"; } from "@rgossiaux/svelte-headlessui";
import { Picture } from "svelte-lazy-loader"; import { Picture } from "svelte-lazy-loader";
import GitHub from '@iconify-icons/simple-icons/github';
import Portfolio from '$lib/components/Portfolio.svelte';
import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png"; import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png";
import personalSiteFormats from "$lib/assets/images/Bradley_Shellnut_New_Site.png?w=637;1274&format=webp;avif;png&metadata"; import personalSiteFormats from "$lib/assets/images/Bradley_Shellnut_New_Site.png?format=webp;avif;png&metadata";
import personalSiteBlurred from "$lib/assets/images/Bradley_Shellnut_New_Site.png?w=100&png&blur=10"; import personalSiteBlurred from "$lib/assets/images/Bradley_Shellnut_New_Site.png?w=100&png&blur=10";
import weddingWebsite from "$lib/assets/images/Wedding_Website.png?format=webp;avif;png&metadata"; import weddingWebsite from "$lib/assets/images/Wedding_Website.png";
import weddingWebsiteFormats from "$lib/assets/images/Wedding_Website.png?format=webp;avif;png&metadata";
import weddingWebsiteBlurred from "$lib/assets/images/Wedding_Website.png?w=100&png&blur=10"; import weddingWebsiteBlurred from "$lib/assets/images/Wedding_Website.png?w=100&png&blur=10";
import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?format=webp;avif;png&metadata'; import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png';
import oldSiteFormats from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?format=webp;avif;png&metadata';
import oldSiteBlurred from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?w=100&png&blur=10'; import oldSiteBlurred from '$lib/assets/images/Old_Website_Bradley_Shellnut.png?w=100&png&blur=10';
import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png?format=webp;avif;png&metadata"; import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png";
import shellnutArchitectWebsiteBlurred from "$lib/assets/images/Mark_Shellnut_Architect.png?w=400px&blur=10"; import shellnutArchitectWebsiteFormats from "$lib/assets/images/Mark_Shellnut_Architect.png?format=webp;avif;png&metadata";
import shellnutArchitectWebsiteBlurred from "$lib/assets/images/Mark_Shellnut_Architect.png?w=100px&blur=10";
import PersonalWebsiteGatsby from "$lib/content/portfolio/personal/personal-website-gatsby.md";
import WeddingWebsite from '$lib/content/portfolio/personal/wedding-website.md';
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';
export let data: PageData;
</script> </script>
<svelte:head> <svelte:head>
@ -23,346 +37,92 @@
</svelte:head> </svelte:head>
<h1>Portfolio!</h1> <h1>Portfolio!</h1>
<div class="portfolioTabStyles"> <TabGroup>
<TabGroup> <TabList aria-label="tabs portfolios" class="tab-list">
<TabList <Tab class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}>
aria-label="tabs portfolios" <h2>Personal Sites</h2>
style=" </Tab>
display: grid; <Tab value="professional-sites" class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}>
gap: 1rem; <h2>Professional Sites</h2>
grid-template-columns: auto auto; </Tab>
place-content: start; </TabList>
place-items: center; <TabPanels>
margin-bottom: 1.5rem; <TabPanel>
" <Portfolio name="Personal Website"
> placeholder={personalSiteBlurred}
<Tab class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}> src={personalSite}
<h2>Personal Sites</h2> alt="Picture of Bradley Shellnut's Gatsby Personal Website"
</Tab> loading="eager"
<Tab value="professional-sites" class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}> formats={personalSiteFormats}>
<h2>Professional Sites</h2> <PersonalWebsiteGatsby slot="portfolio-details" />
</Tab> </Portfolio>
</TabList> <Portfolio name="Wedding Website"
<TabPanels> placeholder={weddingWebsiteBlurred}
<TabPanel> src={weddingWebsite}
<div class="portfolioStyles"> alt="Picture of Bradley Shellnut's Gatsby Personal Website"
<div class="gridItemStyles"> formats={weddingWebsiteFormats}>
<div class="portfolioPicture"> <span slot="portfolio-links">
<h2>Personal Website</h2> <p>
<Picture placeholder={personalSiteBlurred} src={personalSite} loading="eager" alt="Home Page of bradleyshellnut.com"> <ExternalLink ariaLabel="View Wedding Website" href="https://weddingsite-six.vercel.app/" showIcon>View Site</ExternalLink>
{#each personalSiteFormats as { src, format }} </p>
<source data-srcset={src} type="image/{format}" /> <p>
{/each} <ExternalLink ariaLabel="View GitHub repository for the wedding site" href="https://github.com/BradNut/weddingsite" icon={GitHub} showIcon>GitHub repository</ExternalLink>
</Picture> </p>
</div> </span>
<div class="portfolio-details"> <WeddingWebsite slot="portfolio-details" />
<p> </Portfolio>
My personal website written using the following <Portfolio name="Old Personal Website"
technologies. placeholder={oldSiteBlurred}
</p> src={oldSite}
<p>Tech Stack:</p> alt="Home Page of the old bradleyshellnut.com website"
<ul> formats={oldSiteFormats}>
<li>React 18</li> <span slot="portfolio-links">
<li>Gatsby 5</li> <p>
<li> <ExternalLink ariaLabel="Archive of bradleyshellnut.com" href="https://web.archive.org/web/20201205233507/https://bradleyshellnut.com/about" showIcon>Link to an archive snapshot</ExternalLink>
<a </p>
target="_blank" </span>
href="https://radix-ui.com" <OldWebsite slot="portfolio-details" />
title="Radix UI" </Portfolio>
rel="noreferrer" </TabPanel>
> <TabPanel>
Radix UI <!-- <div class="portfolioStyles"> -->
</a> <Portfolio name="Mark Shellnut Architect"
</li> placeholder={shellnutArchitectWebsiteBlurred}
<li>Styled Components</li> src={shellnutArchitectWebsite}
<li>GraphQL</li> alt="Picture of Mark Shellnut Architect's Website"
<li>Deployed using Netlify</li> loading="eager"
<li> formats={shellnutArchitectWebsiteFormats}>
Most icons from{' '} <MarkShellnutArchitect slot="portfolio-details" />
<a </Portfolio>
target="_blank" <!-- </div> -->
href="https://github.com/react-icons/react-icons" </TabPanel>
title="react icons" </TabPanels>
rel="noreferrer" </TabGroup>
>
react-icons
</a>
</li>
<li>
Bee, Shell, Nut, and Seattle Icons made by{' '}
<a
target="_blank"
href="https://www.flaticon.com/authors/freepik"
title="Freepik"
rel="noreferrer"
>
"Freepik"
</a>{' '}
from{' '}
<a
target="_blank"
href="https://www.flaticon.com/"
title="Flaticon"
rel="noreferrer"
>
flaticon.com
</a>
</li>
</ul>
<p>
Current version was improved after the suggestions on{' '}
<a
href="https://syntax.fm/show/444/syntax-highlight#t=33:19"
target="_blank"
aria-label="Syntax.fm Podcast Number 444"
rel="noreferrer"
>
Show 444
</a>{' '}
of the{' '}
<a
href="https://syntax.fm/show/444/syntax-highlight#t=33:19"
target="_blank"
aria-label="Syntax.fm Podcast"
rel="noreferrer"
>
Syntax Podcast
</a>
.
</p>
<p>
Previous archived version of my{' '}
<a
href="https://web.archive.org/web/20210224002046/https://bradleyshellnut.com/"
target="_blank"
aria-label="Archive before Syntax Podcast"
rel="noreferrer"
>
personal website
</a>
.
</p>
</div>
</div>
<div class="gridItemStyles">
<div>
<h2>Wedding Website</h2>
<div class="portfolioPicture">
<Picture placeholder={weddingWebsiteBlurred} src="images/Wedding_Website.png" alt="Wedding Website">
{#each weddingWebsite as { src, format }}
<source data-srcset={src} type="image/{format}" />
{/each}
</Picture>
</div>
<p>
<a
href="https://weddingsite-six.vercel.app/"
target="_blank"
aria-label="Wedding Website"
rel="noreferrer"
>
View Site
</a>{' '}
<a
href="https://weddingsite-six.vercel.app/"
target="_blank"
aria-label="Wedding Website"
rel="noreferrer"
>
<!-- <RiExternalLinkLine /> -->
</a>
</p>
<p>
<a
href="https://github.com/BradNut/weddingsite"
target="_blank"
aria-label="Github Repo for the wedding site"
rel="noreferrer"
>
Github Repo
</a>{' '}
<a
href="https://github.com/BradNut/weddingsite"
target="_blank"
aria-label="Github Repo for the wedding site"
rel="noreferrer"
>
<!-- <FaGithub /> -->
</a>
</p>
</div>
<div>
<p>
An application that allows viewing of wedding details and
provides the ability to RSVP to the wedding.
</p>
<p>
The app was initially created for my wedding but what is
linked here is a public demo of the application.
</p>
<p>Tech stack:</p>
<ul>
<li>Next.js 13</li>
<li>React 18</li>
<li>
<a
target="_blank"
href="https://radix-ui.com"
title="Radix UI"
rel="noreferrer"
>
Radix UI
</a>
</li>
<li>MongoDB</li>
<li>Styled Components</li>
<li>Next Iron Session</li>
</ul>
</div>
</div>
<div class="gridItemStyles">
<div>
<h2>Old Personal Website</h2>
<div class="portfolioPicture">
<Picture placeholder={oldSiteBlurred} src="images/Old_Website_Bradley_Shellnut.png" alt="Home Page of the old bradleyshellnut.com website">
{#each oldSite as { src, format }}
<source data-srcset={src} type="image/{format}" />
{/each}
</Picture>
</div>
<p>
<a
href="https://web.archive.org/web/20201205233507/https://bradleyshellnut.com/about"
target="_blank"
aria-label="Archive of bradleyshellnut.com"
rel="noreferrer"
>
Link to an archive snapshot
</a>
</p>
</div>
<div>
<p>
This was my first real personal website hosted on
DigitalOcean. It was built using the following:
</p>
<ul>
<li>React</li>
<li>Redux for any state management</li>
<li>ReactStrap for CSS grid management</li>
<li>React Router for routing links in the page</li>
</ul>
</div>
</div>
</div>
</TabPanel>
<TabPanel>
<div class="gridItemStyles">
<div>
<h2>Mark Shellnut Architect </h2>
<div class="portfolio-picture">
<Picture placeholder={shellnutArchitectWebsiteBlurred} src="images/Mark_Shellnut_Architect.png" alt="Mark Shellnut Architect's Website" loading="eager">
{#each shellnutArchitectWebsite as { src, format }}
<source data-srcset={src} type="image/{format}" />
{/each}
</Picture>
</div>
<p>
<a
href="https://markshellnutarchitect.com/"
target="_blank"
aria-label="Mark Shellnut Architect"
rel="noreferrer"
>
View Site
</a>{' '}
<a
href="https://markshellnutarchitect.com/"
target="_blank"
aria-label="Mark Shellnut Architect"
rel="noreferrer"
>
<!-- <RiExternalLinkLine /> -->
</a>
</p>
</div>
<div>
<p>Company website for Mark Shellnut Architect.</p>
<p>Tech stack:</p>
<ul>
<li>React 18</li>
<li>Gatsby 5</li>
<li>
<a
target="_blank"
href="https://radix-ui.com"
title="Radix UI"
rel="noreferrer"
>
Radix UI
</a>
</li>
<li>Styled Components</li>
<li>GraphQL</li>
<li>Lambda Functions</li>
</ul>
</div>
</div>
</TabPanel>
</TabPanels>
</TabGroup>
</div>
<style lang="postcss"> <style lang="postcss">
:global(.tab-list) {
display: grid;
gap: 1rem;
grid-template-columns: auto auto;
place-content: start;
place-items: center;
margin-bottom: 1.5rem;
}
:global(img) { :global(img) {
border-radius: 3px; border-radius: 3px;
} }
:global(.portfolioStyles) { :global(.portfolioStyles) {
margin-top: 1rem; /* margin-top: 1rem; */
display: grid;
grid-template-columns: repeat(auto, minmax(300px, 400px));
gap: 3rem;
margin: 0.5rem auto; margin: 0.5rem auto;
@media (max-width: 767px) { @media (max-width: 800px) {
grid-template-columns: repeat(1, minmax(150px, 400px));
grid-gap: 1.2rem; grid-gap: 1.2rem;
margin: 0.2rem 0; margin: 0.2rem 0;
} }
} }
:global(.portfolio-details) {
margin: 1rem;
ul {
margin: 1rem;
list-style: circle;
}
}
:global(.portfolioPicture) {
border-radius: 3px;
width: minmax(200px, 500px);
}
:global(.gridItemStyles) {
display: grid;
grid-template-columns: minmax(200px, 0.7fr) 0.5fr;
width: 100%;
gap: 2rem;
margin: 0 auto;
@media (max-width: 767px) {
grid-template-columns: 1fr;
}
p {
margin: 1rem 0;
padding: 0;
}
}
:global(.tab-unselected) { :global(.tab-unselected) {
h2 { h2 {
border-bottom: 2px solid var(--white); border-bottom: 2px solid var(--white);

1
src/routes/portfolio/+page.ts
View file

@ -1 +0,0 @@
export const prerender = true;

36
src/styles/reset.pcss
View file

@ -1,9 +1,9 @@
*, *,
*:before, *:before,
*:after { *:after {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
img, img,
@ -11,22 +11,22 @@ picture,
video, video,
canvas, canvas,
svg { svg {
display: block; display: block;
max-width: 100%; max-width: 100%;
} }
iframe, iframe,
video { video {
width: 100%; width: 100%;
border: none; border: none;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
} }
input, input,
button, button,
textarea, textarea,
select { select {
font: inherit; font: inherit;
} }
p, p,
@ -36,23 +36,23 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
button, button,
input { input {
font: inherit; font: inherit;
color: inherit; color: inherit;
border: none; border: none;
} }
button { button {
font: inherit; font: inherit;
background: none; background: none;
cursor: pointer; cursor: pointer;
} }
ul, ul,
ol { ol {
list-style: none; list-style: none;
} }

7
svelte.config.js
View file

@ -1,11 +1,16 @@
import adapter from '@sveltejs/adapter-vercel'; import adapter from '@sveltejs/adapter-vercel';
import { vitePreprocess } from '@sveltejs/kit/vite'; import { vitePreprocess } from '@sveltejs/kit/vite';
import { mdsvex } from 'mdsvex';
import mdsvexConfig from './mdsvex.config.js';
import relativeImages from 'mdsvex-relative-images';
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors // Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors // for more information about preprocessors
preprocess: [vitePreprocess()], extensions: ['.svelte', ...mdsvexConfig.extensions],
preprocess: [vitePreprocess(),mdsvex(mdsvexConfig)],
kit: { kit: {
adapter: adapter(), adapter: adapter(),
alias: { alias: {