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

Merge pull request #3 from BradNut/markdown-portfolio

Browse source 
Markdown portfolio
This commit is contained in:
Bradley Shellnut 2023-03-08 18:30:45 +00:00 committed by GitHub
commit 2391d4d050
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 411 additions and 461 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;

18
package.json
View file

@ -14,24 +14,24 @@
"format": "prettier --plugin-search-dir . --write ." "format": "prettier --plugin-search-dir . --write ."
}, },
"devDependencies": { "devDependencies": {
"@iconify-icons/material-symbols": "^1.2.30", "@iconify-icons/material-symbols": "^1.2.31",
"@iconify-icons/mdi": "^1.2.41", "@iconify-icons/mdi": "^1.2.43",
"@iconify-icons/radix-icons": "^1.2.8", "@iconify-icons/radix-icons": "^1.2.8",
"@iconify-icons/simple-icons": "^1.2.43", "@iconify-icons/simple-icons": "^1.2.44",
"@leveluptuts/svelte-side-menu": "^1.0.5", "@leveluptuts/svelte-side-menu": "^1.0.5",
"@leveluptuts/svelte-toy": "^2.0.3", "@leveluptuts/svelte-toy": "^2.0.3",
"@playwright/test": "^1.31.1", "@playwright/test": "^1.31.2",
"@rgossiaux/svelte-headlessui": "^1.0.2", "@rgossiaux/svelte-headlessui": "^1.0.2",
"@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.10.0",
"@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.1",
"@typescript-eslint/parser": "^5.53.0", "@typescript-eslint/parser": "^5.54.1",
"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.7.0",
"eslint-plugin-svelte3": "^4.0.0", "eslint-plugin-svelte3": "^4.0.0",
"iconify-icon": "^1.0.7", "iconify-icon": "^1.0.7",
"just-intersect": "^4.3.0", "just-intersect": "^4.3.0",
@ -47,7 +47,7 @@
"sass": "^1.58.3", "sass": "^1.58.3",
"scrape-it": "^5.3.2", "scrape-it": "^5.3.2",
"svelte": "^3.54.0", "svelte": "^3.54.0",
"svelte-check": "^3.0.4", "svelte-check": "^3.1.0",
"svelte-lazy-loader": "^1.0.0", "svelte-lazy-loader": "^1.0.0",
"svelte-preprocess": "^4.10.7", "svelte-preprocess": "^4.10.7",
"tslib": "^2.5.0", "tslib": "^2.5.0",

154
pnpm-lock.yaml
View file

@ -1,24 +1,24 @@
lockfileVersion: 5.4 lockfileVersion: 5.4
specifiers: specifiers:
'@iconify-icons/material-symbols': ^1.2.30 '@iconify-icons/material-symbols': ^1.2.31
'@iconify-icons/mdi': ^1.2.41 '@iconify-icons/mdi': ^1.2.43
'@iconify-icons/radix-icons': ^1.2.8 '@iconify-icons/radix-icons': ^1.2.8
'@iconify-icons/simple-icons': ^1.2.43 '@iconify-icons/simple-icons': ^1.2.44
'@leveluptuts/svelte-side-menu': ^1.0.5 '@leveluptuts/svelte-side-menu': ^1.0.5
'@leveluptuts/svelte-toy': ^2.0.3 '@leveluptuts/svelte-toy': ^2.0.3
'@playwright/test': ^1.31.1 '@playwright/test': ^1.31.2
'@rgossiaux/svelte-headlessui': ^1.0.2 '@rgossiaux/svelte-headlessui': ^1.0.2
'@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.10.0
'@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.1
'@typescript-eslint/parser': ^5.53.0 '@typescript-eslint/parser': ^5.54.1
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.7.0
eslint-plugin-svelte3: ^4.0.0 eslint-plugin-svelte3: ^4.0.0
iconify-icon: ^1.0.7 iconify-icon: ^1.0.7
ioredis: ^5.3.1 ioredis: ^5.3.1
@ -35,7 +35,7 @@ specifiers:
sass: ^1.58.3 sass: ^1.58.3
scrape-it: ^5.3.2 scrape-it: ^5.3.2
svelte: ^3.54.0 svelte: ^3.54.0
svelte-check: ^3.0.4 svelte-check: ^3.1.0
svelte-lazy-loader: ^1.0.0 svelte-lazy-loader: ^1.0.0
svelte-preprocess: ^4.10.7 svelte-preprocess: ^4.10.7
tslib: ^2.5.0 tslib: ^2.5.0
@ -48,24 +48,24 @@ dependencies:
ioredis: 5.3.1 ioredis: 5.3.1
devDependencies: devDependencies:
'@iconify-icons/material-symbols': 1.2.30 '@iconify-icons/material-symbols': 1.2.31
'@iconify-icons/mdi': 1.2.41 '@iconify-icons/mdi': 1.2.43
'@iconify-icons/radix-icons': 1.2.8 '@iconify-icons/radix-icons': 1.2.8
'@iconify-icons/simple-icons': 1.2.43 '@iconify-icons/simple-icons': 1.2.44
'@leveluptuts/svelte-side-menu': 1.0.5 '@leveluptuts/svelte-side-menu': 1.0.5
'@leveluptuts/svelte-toy': 2.0.3 '@leveluptuts/svelte-toy': 2.0.3
'@playwright/test': 1.31.1 '@playwright/test': 1.31.2
'@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.10.0
'@sveltejs/adapter-static': 2.0.1_@sveltejs+kit@1.8.5 '@sveltejs/adapter-static': 2.0.1_@sveltejs+kit@1.10.0
'@sveltejs/adapter-vercel': 1.0.6_@sveltejs+kit@1.8.5 '@sveltejs/adapter-vercel': 1.0.6_@sveltejs+kit@1.10.0
'@sveltejs/kit': 1.8.5_svelte@3.55.1+vite@4.1.4 '@sveltejs/kit': 1.10.0_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.1_mlk7dnz565t663n4razh6a6v6i
'@typescript-eslint/parser': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu '@typescript-eslint/parser': 5.54.1_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.7.0_eslint@8.35.0
eslint-plugin-svelte3: 4.0.0_n4ieifq2d7jq3sqoe474cgqlim eslint-plugin-svelte3: 4.0.0_n4ieifq2d7jq3sqoe474cgqlim
iconify-icon: 1.0.7 iconify-icon: 1.0.7
just-intersect: 4.3.0 just-intersect: 4.3.0
@ -81,7 +81,7 @@ devDependencies:
sass: 1.58.3 sass: 1.58.3
scrape-it: 5.3.2 scrape-it: 5.3.2
svelte: 3.55.1 svelte: 3.55.1
svelte-check: 3.0.4_yqhbri7c5yusomev55u36f7etq svelte-check: 3.1.0_yqhbri7c5yusomev55u36f7etq
svelte-lazy-loader: 1.0.0 svelte-lazy-loader: 1.0.0
svelte-preprocess: 4.10.7_o53ofcihxu4urxldnfcp5z27ga svelte-preprocess: 4.10.7_o53ofcihxu4urxldnfcp5z27ga
tslib: 2.5.0 tslib: 2.5.0
@ -574,14 +574,14 @@ packages:
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
dev: true dev: true
/@iconify-icons/material-symbols/1.2.30: /@iconify-icons/material-symbols/1.2.31:
resolution: {integrity: sha512-P8bEZglt2lJ9EY5Ao3ZoPXrKdf0EJOxTwHTSBD1nYBjbprXTXQiVnFl5MaNyuBPCUfKzHFOpfBGfL7AsrR7CHA==} resolution: {integrity: sha512-sGuk1FoNSzsBFsUxy1lfI0Scu3mV718jB8zHop8FrT/tYeyYef34oFN+y5vKSQ9QoR6+ET4cS30jBvy0sQGQgw==}
dependencies: dependencies:
'@iconify/types': 2.0.0 '@iconify/types': 2.0.0
dev: true dev: true
/@iconify-icons/mdi/1.2.41: /@iconify-icons/mdi/1.2.43:
resolution: {integrity: sha512-duqTSmY0H+e/LdSZD5B8PxnJfdfh6qdLVnrI6klHGSSykz23d1KdvoPpfFpgF8mWWDm4UlHIO+rrvsqMLEb3NQ==} resolution: {integrity: sha512-FfidsQn+m7NzZrc92UO/Ul6YXJmL5liEs9593tdWqY4DIqTgwO7Srw5WQ8LAhvS/D+LnuYwrJCUsIs6Yj3CPwA==}
dependencies: dependencies:
'@iconify/types': 2.0.0 '@iconify/types': 2.0.0
dev: true dev: true
@ -592,8 +592,8 @@ packages:
'@iconify/types': 2.0.0 '@iconify/types': 2.0.0
dev: true dev: true
/@iconify-icons/simple-icons/1.2.43: /@iconify-icons/simple-icons/1.2.44:
resolution: {integrity: sha512-BEheEwSJCPNmL0xdpAqp/rTAHADcz4VPgYsvXOHvwX72brH9YQlBVFJQm4TGv+vjM2GCs+vIpXX4Gs3wJH0YmA==} resolution: {integrity: sha512-iXZLANPS7DbKSK1wbiWxcWabdn7x8nvCt5LbVLsgJI9zzfHXOc3KdMBLpZH/ZlvdMGsZ2RIF0FmOp9YyuwCatQ==}
dependencies: dependencies:
'@iconify/types': 2.0.0 '@iconify/types': 2.0.0
dev: true dev: true
@ -671,13 +671,13 @@ packages:
fastq: 1.15.0 fastq: 1.15.0
dev: true dev: true
/@playwright/test/1.31.1: /@playwright/test/1.31.2:
resolution: {integrity: sha512-IsytVZ+0QLDh1Hj83XatGp/GsI1CDJWbyDaBGbainsh0p2zC7F4toUocqowmjS6sQff2NGT3D9WbDj/3K2CJiA==} resolution: {integrity: sha512-BYVutxDI4JeZKV1+ups6dt5WiqKhjBtIYowyZIJ3kBDmJgsuPKsqqKNIMFbUePLSCmp2cZu+BDL427RcNKTRYw==}
engines: {node: '>=14'} engines: {node: '>=14'}
hasBin: true hasBin: true
dependencies: dependencies:
'@types/node': 18.11.18 '@types/node': 18.11.18
playwright-core: 1.31.1 playwright-core: 1.31.2
optionalDependencies: optionalDependencies:
fsevents: 2.3.2 fsevents: 2.3.2
dev: true dev: true
@ -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.10.0:
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.10.0_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.10.0:
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.10.0_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.10.0:
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.10.0_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.10.0_svelte@3.55.1+vite@4.1.4:
resolution: {integrity: sha512-b6kbjVAivoPd3oL9IVBaZBWiuHeI0qBKfszSDXcqsPfiSMyUK7ilHDFVSWNn+2EMPO48+87iuho71yTCOXZE3w==} resolution: {integrity: sha512-0P35zHrByfbF3Ym3RdQL+RvzgsCDSyO3imSwuZ67XAD5HoCQFF3a8Mhh0V3sObz3rc5aJd4Qn82UpAihJqZ6gQ==}
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.1_mlk7dnz565t663n4razh6a6v6i:
resolution: {integrity: sha512-alFpFWNucPLdUOySmXCJpzr6HKC3bu7XooShWM+3w/EL6J2HIoB2PFxpLnq4JauWVk6DiVeNKzQlFEaE+X9sGw==} resolution: {integrity: sha512-a2RQAkosH3d3ZIV08s3DcL/mcGc2M/UC528VkPULFxR9VnVPT8pBu0IyBAJJmVsCmhVfwQX1v6q+QGnmSe1bew==}
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.1_ycpbpc6yetojsgtrx3mwntkhsu
'@typescript-eslint/scope-manager': 5.53.0 '@typescript-eslint/scope-manager': 5.54.1
'@typescript-eslint/type-utils': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu '@typescript-eslint/type-utils': 5.54.1_ycpbpc6yetojsgtrx3mwntkhsu
'@typescript-eslint/utils': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu '@typescript-eslint/utils': 5.54.1_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.1_ycpbpc6yetojsgtrx3mwntkhsu:
resolution: {integrity: sha512-MKBw9i0DLYlmdOb3Oq/526+al20AJZpANdT6Ct9ffxcV8nKCHz63t/S0IhlTFNsBIHJv+GY5SFJ0XfqVeydQrQ==} resolution: {integrity: sha512-8zaIXJp/nG9Ff9vQNh7TI+C3nA6q6iIsGJ4B4L6MhZ7mHnTMR4YP5vp2xydmFXIy8rpyIVbNAG44871LMt6ujg==}
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.1
'@typescript-eslint/types': 5.53.0 '@typescript-eslint/types': 5.54.1
'@typescript-eslint/typescript-estree': 5.53.0_typescript@4.9.5 '@typescript-eslint/typescript-estree': 5.54.1_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.1:
resolution: {integrity: sha512-Opy3dqNsp/9kBBeCPhkCNR7fmdSQqA+47r21hr9a14Bx0xnkElEQmhoHga+VoaoQ6uDHjDKmQPIYcUcKJifS7w==} resolution: {integrity: sha512-zWKuGliXxvuxyM71UA/EcPxaviw39dB2504LqAmFDjmkpO8qNLHcmzlh6pbHs1h/7YQ9bnsO8CCcYCSA8sykUg==}
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.1
'@typescript-eslint/visitor-keys': 5.53.0 '@typescript-eslint/visitor-keys': 5.54.1
dev: true dev: true
/@typescript-eslint/type-utils/5.53.0_ycpbpc6yetojsgtrx3mwntkhsu: /@typescript-eslint/type-utils/5.54.1_ycpbpc6yetojsgtrx3mwntkhsu:
resolution: {integrity: sha512-HO2hh0fmtqNLzTAme/KnND5uFNwbsdYhCZghK2SoxGp3Ifn2emv+hi0PBUjzzSh0dstUIFqOj3bp0AwQlK4OWw==} resolution: {integrity: sha512-WREHsTz0GqVYLIbzIZYbmUUr95DKEKIXZNH57W3s+4bVnuF1TKe2jH8ZNH8rO1CeMY3U4j4UQeqPNkHMiGem3g==}
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.1_typescript@4.9.5
'@typescript-eslint/utils': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu '@typescript-eslint/utils': 5.54.1_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.1:
resolution: {integrity: sha512-5kcDL9ZUIP756K6+QOAfPkigJmCPHcLN7Zjdz76lQWWDdzfOhZDTj1irs6gPBKiXx5/6O3L0+AvupAut3z7D2A==} resolution: {integrity: sha512-G9+1vVazrfAfbtmCapJX8jRo2E4MDXxgm/IMOF4oGh3kq7XuK3JRkOg6y2Qu1VsTRmWETyTkWt1wxy7X7/yLkw==}
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.1_typescript@4.9.5:
resolution: {integrity: sha512-eKmipH7QyScpHSkhbptBBYh9v8FxtngLquq292YTEQ1pxVs39yFBlLC1xeIZcPPz1RWGqb7YgERJRGkjw8ZV7w==} resolution: {integrity: sha512-bjK5t+S6ffHnVwA0qRPTZrxKSaFYocwFIkZx5k7pvWfsB1I57pO/0M0Skatzzw1sCkjJ83AfGTL0oFIFiDX3bg==}
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.1
'@typescript-eslint/visitor-keys': 5.53.0 '@typescript-eslint/visitor-keys': 5.54.1
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.1_ycpbpc6yetojsgtrx3mwntkhsu:
resolution: {integrity: sha512-VUOOtPv27UNWLxFwQK/8+7kvxVC+hPHNsJjzlJyotlaHjLSIgOCKj9I0DBUjwOOA64qjBwx5afAPjksqOxMO0g==} resolution: {integrity: sha512-IY5dyQM8XD1zfDe5X8jegX6r2EVU5o/WJnLu/znLPWCBF7KNGC+adacXnt5jEYS9JixDcoccI6CvE4RCjHMzCQ==}
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.1
'@typescript-eslint/types': 5.53.0 '@typescript-eslint/types': 5.54.1
'@typescript-eslint/typescript-estree': 5.53.0_typescript@4.9.5 '@typescript-eslint/typescript-estree': 5.54.1_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.1:
resolution: {integrity: sha512-JqNLnX3leaHFZEN0gCh81sIvgrp/2GOACZNgO4+Tkf64u51kTpAyWFOY8XHx8XuXr3N2C9zgPPHtcpMg6z1g0w==} resolution: {integrity: sha512-q8iSoHTgwCfgcRJ2l2x+xCbu8nBlRAlsQ33k24Adj8eoVBE0f8dUeI+bAa8F84Mv05UGbAx57g2zrRsYIooqQg==}
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.1
eslint-visitor-keys: 3.3.0 eslint-visitor-keys: 3.3.0
dev: true dev: true
@ -1765,8 +1765,8 @@ packages:
dev: true dev: true
optional: true optional: true
/eslint-config-prettier/8.6.0_eslint@8.35.0: /eslint-config-prettier/8.7.0_eslint@8.35.0:
resolution: {integrity: sha512-bAF0eLpLVqP5oEVUFKpMA+NnRFICwn9X8B5jrR9FcqnYBuPbqWEjTEspPWMj5ye6czoSLDweCzSo3Ko7gGrZaA==} resolution: {integrity: sha512-HHVXLSlVUhMSmyW4ZzEuvjpwqamgmlfkutD53cYXLikh4pt/modINRcCIApJ84czDxM4GZInwUrromsDdTImTA==}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
eslint: '>=7.0.0' eslint: '>=7.0.0'
@ -2902,8 +2902,8 @@ packages:
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
dev: true dev: true
/playwright-core/1.31.1: /playwright-core/1.31.2:
resolution: {integrity: sha512-JTyX4kV3/LXsvpHkLzL2I36aCdml4zeE35x+G5aPc4bkLsiRiQshU5lWeVpHFAuC8xAcbI6FDcw/8z3q2xtJSQ==} resolution: {integrity: sha512-a1dFgCNQw4vCsG7bnojZjDnPewZcw7tZUNFN0ZkcLYKj+mPmXvg4MpaaKZ5SgqPsOmqIf2YsVRkgqiRDxD+fDQ==}
engines: {node: '>=14'} engines: {node: '>=14'}
hasBin: true hasBin: true
dev: true dev: true
@ -3798,8 +3798,8 @@ packages:
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
dev: true dev: true
/svelte-check/3.0.4_yqhbri7c5yusomev55u36f7etq: /svelte-check/3.1.0_yqhbri7c5yusomev55u36f7etq:
resolution: {integrity: sha512-feIyBAA5cSIxq4vq6mwGvGQTHy/wBVQbs5b+/VvE21WN8X7nonAuSqwvZv0UDBowzRka3Rh4gmLPH8rPePz3/w==} resolution: {integrity: sha512-aSdnsGtndfqtb0dmN5qm9Zjl7wGpqh3cWF35WVCcK96TmGn2NEar4M40QW6bvaPPu089mrkZdpeD3Yar2SERBg==}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
svelte: ^3.55.0 svelte: ^3.55.0

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);

43
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,49 @@
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;
/* 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) auto;
width: 100%; /* width: 100%; */
gap: 2rem; margin: 1.5rem 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) {
list-style-type: disc;
padding-left: 1.5rem;
}
</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

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

@ -0,0 +1,31 @@
---
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>.
You can view the previous archived version of my personal website <ExternalLink showIcon
href="https://web.archive.org/web/20210224002046/https://bradleyshellnut.com/"
ariaLabel="Archive before Syntax Podcast">here</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

6
src/routes/about/+page.svelte
View file

@ -9,7 +9,6 @@
import Remix from '@iconify-icons/simple-icons/remix'; import Remix from '@iconify-icons/simple-icons/remix';
import Svelte from '@iconify-icons/simple-icons/svelte'; import Svelte from '@iconify-icons/simple-icons/svelte';
import TypeScript from '@iconify-icons/simple-icons/typescript'; import TypeScript from '@iconify-icons/simple-icons/typescript';
import SEO from "$root/lib/components/SEO.svelte";
import space_needle from '$lib/assets/images/space-needle.png?format=webp;avif;png&metadata'; import space_needle from '$lib/assets/images/space-needle.png?format=webp;avif;png&metadata';
import space_needle_blurred from '$lib/assets/images/space-needle.png?w=100&png&blur=10'; import space_needle_blurred from '$lib/assets/images/space-needle.png?w=100&png&blur=10';
import tortie_derp from '$lib/assets/images/tortie_derp.jpg?format=webp;avif;jpg&metadata'; import tortie_derp from '$lib/assets/images/tortie_derp.jpg?format=webp;avif;jpg&metadata';
@ -18,10 +17,11 @@
import orange_derp_blurred from '$lib/assets/images/orange_derp.jpg?w=100&jpg&blur=10'; import orange_derp_blurred from '$lib/assets/images/orange_derp.jpg?w=100&jpg&blur=10';
import Tag from '$root/lib/components/Tag.svelte'; import Tag from '$root/lib/components/Tag.svelte';
import ExternalLink from '$root/lib/components/ExternalLink.svelte'; import ExternalLink from '$root/lib/components/ExternalLink.svelte';
import { Disclosure } from '@rgossiaux/svelte-headlessui';
</script> </script>
<SEO title="About" /> <svelte:head>
<title>About | Bradley Shellnut</title>
</svelte:head>
<div class="about"> <div class="about">
<div> <div>

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');
}
};

419
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,89 @@
</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> formats={personalSiteFormats}>
<Tab value="professional-sites" class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}> <PersonalWebsiteGatsby slot="portfolio-details" />
<h2>Professional Sites</h2> </Portfolio>
</Tab> <Portfolio name="Wedding Website"
</TabList> placeholder={weddingWebsiteBlurred}
<TabPanels> src={weddingWebsite}
<TabPanel> alt="Picture of Bradley Shellnut's Gatsby Personal Website"
<div class="portfolioStyles"> formats={weddingWebsiteFormats}>
<div class="gridItemStyles"> <span slot="portfolio-links">
<div class="portfolioPicture"> <p>
<h2>Personal Website</h2> <ExternalLink ariaLabel="View Wedding Website" href="https://weddingsite-six.vercel.app/" showIcon>View Site</ExternalLink>
<Picture placeholder={personalSiteBlurred} src={personalSite} loading="eager" alt="Home Page of bradleyshellnut.com"> </p>
{#each personalSiteFormats as { src, format }} <p>
<source data-srcset={src} type="image/{format}" /> <ExternalLink ariaLabel="View GitHub repository for the wedding site" href="https://github.com/BradNut/weddingsite" icon={GitHub} showIcon>GitHub repository</ExternalLink>
{/each} </p>
</Picture> </span>
</div> <WeddingWebsite slot="portfolio-details" />
<div class="portfolio-details"> </Portfolio>
<p> <Portfolio name="Old Personal Website"
My personal website written using the following placeholder={oldSiteBlurred}
technologies. src={oldSite}
</p> alt="Home Page of the old bradleyshellnut.com website"
<p>Tech Stack:</p> formats={oldSiteFormats}>
<ul> <span slot="portfolio-links">
<li>React 18</li> <p>
<li>Gatsby 5</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>
<li> </p>
<a </span>
target="_blank" <OldWebsite slot="portfolio-details" />
href="https://radix-ui.com" </Portfolio>
title="Radix UI" </TabPanel>
rel="noreferrer" <TabPanel>
> <!-- <div class="portfolioStyles"> -->
Radix UI <Portfolio name="Mark Shellnut Architect"
</a> placeholder={shellnutArchitectWebsiteBlurred}
</li> src={shellnutArchitectWebsite}
<li>Styled Components</li> alt="Picture of Mark Shellnut Architect's Website"
<li>GraphQL</li> formats={shellnutArchitectWebsiteFormats}>
<li>Deployed using Netlify</li> <MarkShellnutArchitect slot="portfolio-details" />
<li> </Portfolio>
Most icons from{' '} <!-- </div> -->
<a </TabPanel>
target="_blank" </TabPanels>
href="https://github.com/react-icons/react-icons" </TabGroup>
title="react icons"
rel="noreferrer"
>
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;
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;

34
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: {