mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
Merge pull request #3 from BradNut/markdown-portfolio
Markdown portfolio
This commit is contained in:
Bradley Shellnut
GitHub
commit
2391d4d050
16 changed files with 411 additions and 461 deletions
14
mdsvex.config.js
Normal file
14
mdsvex.config.js
Normal 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
18
package.json
|
|
@ -14,24 +14,24 @@
|
|||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-icons/material-symbols": "^1.2.30",
|
||||
"@iconify-icons/mdi": "^1.2.41",
|
||||
"@iconify-icons/material-symbols": "^1.2.31",
|
||||
"@iconify-icons/mdi": "^1.2.43",
|
||||
"@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-toy": "^2.0.3",
|
||||
"@playwright/test": "^1.31.1",
|
||||
"@playwright/test": "^1.31.2",
|
||||
"@rgossiaux/svelte-headlessui": "^1.0.2",
|
||||
"@sveltejs/adapter-auto": "^1.0.3",
|
||||
"@sveltejs/adapter-static": "^2.0.1",
|
||||
"@sveltejs/adapter-vercel": "^1.0.6",
|
||||
"@sveltejs/kit": "^1.8.5",
|
||||
"@sveltejs/kit": "^1.10.0",
|
||||
"@types/postcss-preset-env": "^8.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.53.0",
|
||||
"@typescript-eslint/parser": "^5.53.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.54.1",
|
||||
"@typescript-eslint/parser": "^5.54.1",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"eslint": "^8.35.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-config-prettier": "^8.7.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"iconify-icon": "^1.0.7",
|
||||
"just-intersect": "^4.3.0",
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
"sass": "^1.58.3",
|
||||
"scrape-it": "^5.3.2",
|
||||
"svelte": "^3.54.0",
|
||||
"svelte-check": "^3.0.4",
|
||||
"svelte-check": "^3.1.0",
|
||||
"svelte-lazy-loader": "^1.0.0",
|
||||
"svelte-preprocess": "^4.10.7",
|
||||
"tslib": "^2.5.0",
|
||||
|
|
|
|||
154
pnpm-lock.yaml
154
pnpm-lock.yaml
|
|
@ -1,24 +1,24 @@
|
|||
lockfileVersion: 5.4
|
||||
|
||||
specifiers:
|
||||
'@iconify-icons/material-symbols': ^1.2.30
|
||||
'@iconify-icons/mdi': ^1.2.41
|
||||
'@iconify-icons/material-symbols': ^1.2.31
|
||||
'@iconify-icons/mdi': ^1.2.43
|
||||
'@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-toy': ^2.0.3
|
||||
'@playwright/test': ^1.31.1
|
||||
'@playwright/test': ^1.31.2
|
||||
'@rgossiaux/svelte-headlessui': ^1.0.2
|
||||
'@sveltejs/adapter-auto': ^1.0.3
|
||||
'@sveltejs/adapter-static': ^2.0.1
|
||||
'@sveltejs/adapter-vercel': ^1.0.6
|
||||
'@sveltejs/kit': ^1.8.5
|
||||
'@sveltejs/kit': ^1.10.0
|
||||
'@types/postcss-preset-env': ^8.0.0
|
||||
'@typescript-eslint/eslint-plugin': ^5.53.0
|
||||
'@typescript-eslint/parser': ^5.53.0
|
||||
'@typescript-eslint/eslint-plugin': ^5.54.1
|
||||
'@typescript-eslint/parser': ^5.54.1
|
||||
autoprefixer: ^10.4.7
|
||||
eslint: ^8.35.0
|
||||
eslint-config-prettier: ^8.5.0
|
||||
eslint-config-prettier: ^8.7.0
|
||||
eslint-plugin-svelte3: ^4.0.0
|
||||
iconify-icon: ^1.0.7
|
||||
ioredis: ^5.3.1
|
||||
|
|
@ -35,7 +35,7 @@ specifiers:
|
|||
sass: ^1.58.3
|
||||
scrape-it: ^5.3.2
|
||||
svelte: ^3.54.0
|
||||
svelte-check: ^3.0.4
|
||||
svelte-check: ^3.1.0
|
||||
svelte-lazy-loader: ^1.0.0
|
||||
svelte-preprocess: ^4.10.7
|
||||
tslib: ^2.5.0
|
||||
|
|
@ -48,24 +48,24 @@ dependencies:
|
|||
ioredis: 5.3.1
|
||||
|
||||
devDependencies:
|
||||
'@iconify-icons/material-symbols': 1.2.30
|
||||
'@iconify-icons/mdi': 1.2.41
|
||||
'@iconify-icons/material-symbols': 1.2.31
|
||||
'@iconify-icons/mdi': 1.2.43
|
||||
'@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-toy': 2.0.3
|
||||
'@playwright/test': 1.31.1
|
||||
'@playwright/test': 1.31.2
|
||||
'@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.55.1
|
||||
'@sveltejs/adapter-auto': 1.0.3_@sveltejs+kit@1.8.5
|
||||
'@sveltejs/adapter-static': 2.0.1_@sveltejs+kit@1.8.5
|
||||
'@sveltejs/adapter-vercel': 1.0.6_@sveltejs+kit@1.8.5
|
||||
'@sveltejs/kit': 1.8.5_svelte@3.55.1+vite@4.1.4
|
||||
'@sveltejs/adapter-auto': 1.0.3_@sveltejs+kit@1.10.0
|
||||
'@sveltejs/adapter-static': 2.0.1_@sveltejs+kit@1.10.0
|
||||
'@sveltejs/adapter-vercel': 1.0.6_@sveltejs+kit@1.10.0
|
||||
'@sveltejs/kit': 1.10.0_svelte@3.55.1+vite@4.1.4
|
||||
'@types/postcss-preset-env': 8.0.0_postcss@8.4.21
|
||||
'@typescript-eslint/eslint-plugin': 5.53.0_cjo54hduev4bqhpjw5znwiokqu
|
||||
'@typescript-eslint/parser': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu
|
||||
'@typescript-eslint/eslint-plugin': 5.54.1_mlk7dnz565t663n4razh6a6v6i
|
||||
'@typescript-eslint/parser': 5.54.1_ycpbpc6yetojsgtrx3mwntkhsu
|
||||
autoprefixer: 10.4.13_postcss@8.4.21
|
||||
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
|
||||
iconify-icon: 1.0.7
|
||||
just-intersect: 4.3.0
|
||||
|
|
@ -81,7 +81,7 @@ devDependencies:
|
|||
sass: 1.58.3
|
||||
scrape-it: 5.3.2
|
||||
svelte: 3.55.1
|
||||
svelte-check: 3.0.4_yqhbri7c5yusomev55u36f7etq
|
||||
svelte-check: 3.1.0_yqhbri7c5yusomev55u36f7etq
|
||||
svelte-lazy-loader: 1.0.0
|
||||
svelte-preprocess: 4.10.7_o53ofcihxu4urxldnfcp5z27ga
|
||||
tslib: 2.5.0
|
||||
|
|
@ -574,14 +574,14 @@ packages:
|
|||
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
|
||||
dev: true
|
||||
|
||||
/@iconify-icons/material-symbols/1.2.30:
|
||||
resolution: {integrity: sha512-P8bEZglt2lJ9EY5Ao3ZoPXrKdf0EJOxTwHTSBD1nYBjbprXTXQiVnFl5MaNyuBPCUfKzHFOpfBGfL7AsrR7CHA==}
|
||||
/@iconify-icons/material-symbols/1.2.31:
|
||||
resolution: {integrity: sha512-sGuk1FoNSzsBFsUxy1lfI0Scu3mV718jB8zHop8FrT/tYeyYef34oFN+y5vKSQ9QoR6+ET4cS30jBvy0sQGQgw==}
|
||||
dependencies:
|
||||
'@iconify/types': 2.0.0
|
||||
dev: true
|
||||
|
||||
/@iconify-icons/mdi/1.2.41:
|
||||
resolution: {integrity: sha512-duqTSmY0H+e/LdSZD5B8PxnJfdfh6qdLVnrI6klHGSSykz23d1KdvoPpfFpgF8mWWDm4UlHIO+rrvsqMLEb3NQ==}
|
||||
/@iconify-icons/mdi/1.2.43:
|
||||
resolution: {integrity: sha512-FfidsQn+m7NzZrc92UO/Ul6YXJmL5liEs9593tdWqY4DIqTgwO7Srw5WQ8LAhvS/D+LnuYwrJCUsIs6Yj3CPwA==}
|
||||
dependencies:
|
||||
'@iconify/types': 2.0.0
|
||||
dev: true
|
||||
|
|
@ -592,8 +592,8 @@ packages:
|
|||
'@iconify/types': 2.0.0
|
||||
dev: true
|
||||
|
||||
/@iconify-icons/simple-icons/1.2.43:
|
||||
resolution: {integrity: sha512-BEheEwSJCPNmL0xdpAqp/rTAHADcz4VPgYsvXOHvwX72brH9YQlBVFJQm4TGv+vjM2GCs+vIpXX4Gs3wJH0YmA==}
|
||||
/@iconify-icons/simple-icons/1.2.44:
|
||||
resolution: {integrity: sha512-iXZLANPS7DbKSK1wbiWxcWabdn7x8nvCt5LbVLsgJI9zzfHXOc3KdMBLpZH/ZlvdMGsZ2RIF0FmOp9YyuwCatQ==}
|
||||
dependencies:
|
||||
'@iconify/types': 2.0.0
|
||||
dev: true
|
||||
|
|
@ -671,13 +671,13 @@ packages:
|
|||
fastq: 1.15.0
|
||||
dev: true
|
||||
|
||||
/@playwright/test/1.31.1:
|
||||
resolution: {integrity: sha512-IsytVZ+0QLDh1Hj83XatGp/GsI1CDJWbyDaBGbainsh0p2zC7F4toUocqowmjS6sQff2NGT3D9WbDj/3K2CJiA==}
|
||||
/@playwright/test/1.31.2:
|
||||
resolution: {integrity: sha512-BYVutxDI4JeZKV1+ups6dt5WiqKhjBtIYowyZIJ3kBDmJgsuPKsqqKNIMFbUePLSCmp2cZu+BDL427RcNKTRYw==}
|
||||
engines: {node: '>=14'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
'@types/node': 18.11.18
|
||||
playwright-core: 1.31.1
|
||||
playwright-core: 1.31.2
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.2
|
||||
dev: true
|
||||
|
|
@ -716,29 +716,29 @@ packages:
|
|||
picomatch: 2.3.1
|
||||
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==}
|
||||
peerDependencies:
|
||||
'@sveltejs/kit': ^1.0.0
|
||||
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
|
||||
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==}
|
||||
peerDependencies:
|
||||
'@sveltejs/kit': ^1.5.0
|
||||
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
|
||||
|
||||
/@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==}
|
||||
peerDependencies:
|
||||
'@sveltejs/kit': ^1.0.0
|
||||
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
|
||||
esbuild: 0.16.17
|
||||
transitivePeerDependencies:
|
||||
|
|
@ -746,8 +746,8 @@ packages:
|
|||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@sveltejs/kit/1.8.5_svelte@3.55.1+vite@4.1.4:
|
||||
resolution: {integrity: sha512-b6kbjVAivoPd3oL9IVBaZBWiuHeI0qBKfszSDXcqsPfiSMyUK7ilHDFVSWNn+2EMPO48+87iuho71yTCOXZE3w==}
|
||||
/@sveltejs/kit/1.10.0_svelte@3.55.1+vite@4.1.4:
|
||||
resolution: {integrity: sha512-0P35zHrByfbF3Ym3RdQL+RvzgsCDSyO3imSwuZ67XAD5HoCQFF3a8Mhh0V3sObz3rc5aJd4Qn82UpAihJqZ6gQ==}
|
||||
engines: {node: ^16.14 || >=18}
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
|
|
@ -852,8 +852,8 @@ packages:
|
|||
resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
|
||||
dev: true
|
||||
|
||||
/@typescript-eslint/eslint-plugin/5.53.0_cjo54hduev4bqhpjw5znwiokqu:
|
||||
resolution: {integrity: sha512-alFpFWNucPLdUOySmXCJpzr6HKC3bu7XooShWM+3w/EL6J2HIoB2PFxpLnq4JauWVk6DiVeNKzQlFEaE+X9sGw==}
|
||||
/@typescript-eslint/eslint-plugin/5.54.1_mlk7dnz565t663n4razh6a6v6i:
|
||||
resolution: {integrity: sha512-a2RQAkosH3d3ZIV08s3DcL/mcGc2M/UC528VkPULFxR9VnVPT8pBu0IyBAJJmVsCmhVfwQX1v6q+QGnmSe1bew==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
'@typescript-eslint/parser': ^5.0.0
|
||||
|
|
@ -863,10 +863,10 @@ packages:
|
|||
typescript:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@typescript-eslint/parser': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu
|
||||
'@typescript-eslint/scope-manager': 5.53.0
|
||||
'@typescript-eslint/type-utils': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu
|
||||
'@typescript-eslint/utils': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu
|
||||
'@typescript-eslint/parser': 5.54.1_ycpbpc6yetojsgtrx3mwntkhsu
|
||||
'@typescript-eslint/scope-manager': 5.54.1
|
||||
'@typescript-eslint/type-utils': 5.54.1_ycpbpc6yetojsgtrx3mwntkhsu
|
||||
'@typescript-eslint/utils': 5.54.1_ycpbpc6yetojsgtrx3mwntkhsu
|
||||
debug: 4.3.4
|
||||
eslint: 8.35.0
|
||||
grapheme-splitter: 1.0.4
|
||||
|
|
@ -880,8 +880,8 @@ packages:
|
|||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@typescript-eslint/parser/5.53.0_ycpbpc6yetojsgtrx3mwntkhsu:
|
||||
resolution: {integrity: sha512-MKBw9i0DLYlmdOb3Oq/526+al20AJZpANdT6Ct9ffxcV8nKCHz63t/S0IhlTFNsBIHJv+GY5SFJ0XfqVeydQrQ==}
|
||||
/@typescript-eslint/parser/5.54.1_ycpbpc6yetojsgtrx3mwntkhsu:
|
||||
resolution: {integrity: sha512-8zaIXJp/nG9Ff9vQNh7TI+C3nA6q6iIsGJ4B4L6MhZ7mHnTMR4YP5vp2xydmFXIy8rpyIVbNAG44871LMt6ujg==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
|
||||
|
|
@ -890,9 +890,9 @@ packages:
|
|||
typescript:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@typescript-eslint/scope-manager': 5.53.0
|
||||
'@typescript-eslint/types': 5.53.0
|
||||
'@typescript-eslint/typescript-estree': 5.53.0_typescript@4.9.5
|
||||
'@typescript-eslint/scope-manager': 5.54.1
|
||||
'@typescript-eslint/types': 5.54.1
|
||||
'@typescript-eslint/typescript-estree': 5.54.1_typescript@4.9.5
|
||||
debug: 4.3.4
|
||||
eslint: 8.35.0
|
||||
typescript: 4.9.5
|
||||
|
|
@ -900,16 +900,16 @@ packages:
|
|||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@typescript-eslint/scope-manager/5.53.0:
|
||||
resolution: {integrity: sha512-Opy3dqNsp/9kBBeCPhkCNR7fmdSQqA+47r21hr9a14Bx0xnkElEQmhoHga+VoaoQ6uDHjDKmQPIYcUcKJifS7w==}
|
||||
/@typescript-eslint/scope-manager/5.54.1:
|
||||
resolution: {integrity: sha512-zWKuGliXxvuxyM71UA/EcPxaviw39dB2504LqAmFDjmkpO8qNLHcmzlh6pbHs1h/7YQ9bnsO8CCcYCSA8sykUg==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 5.53.0
|
||||
'@typescript-eslint/visitor-keys': 5.53.0
|
||||
'@typescript-eslint/types': 5.54.1
|
||||
'@typescript-eslint/visitor-keys': 5.54.1
|
||||
dev: true
|
||||
|
||||
/@typescript-eslint/type-utils/5.53.0_ycpbpc6yetojsgtrx3mwntkhsu:
|
||||
resolution: {integrity: sha512-HO2hh0fmtqNLzTAme/KnND5uFNwbsdYhCZghK2SoxGp3Ifn2emv+hi0PBUjzzSh0dstUIFqOj3bp0AwQlK4OWw==}
|
||||
/@typescript-eslint/type-utils/5.54.1_ycpbpc6yetojsgtrx3mwntkhsu:
|
||||
resolution: {integrity: sha512-WREHsTz0GqVYLIbzIZYbmUUr95DKEKIXZNH57W3s+4bVnuF1TKe2jH8ZNH8rO1CeMY3U4j4UQeqPNkHMiGem3g==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
eslint: '*'
|
||||
|
|
@ -918,8 +918,8 @@ packages:
|
|||
typescript:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@typescript-eslint/typescript-estree': 5.53.0_typescript@4.9.5
|
||||
'@typescript-eslint/utils': 5.53.0_ycpbpc6yetojsgtrx3mwntkhsu
|
||||
'@typescript-eslint/typescript-estree': 5.54.1_typescript@4.9.5
|
||||
'@typescript-eslint/utils': 5.54.1_ycpbpc6yetojsgtrx3mwntkhsu
|
||||
debug: 4.3.4
|
||||
eslint: 8.35.0
|
||||
tsutils: 3.21.0_typescript@4.9.5
|
||||
|
|
@ -928,13 +928,13 @@ packages:
|
|||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@typescript-eslint/types/5.53.0:
|
||||
resolution: {integrity: sha512-5kcDL9ZUIP756K6+QOAfPkigJmCPHcLN7Zjdz76lQWWDdzfOhZDTj1irs6gPBKiXx5/6O3L0+AvupAut3z7D2A==}
|
||||
/@typescript-eslint/types/5.54.1:
|
||||
resolution: {integrity: sha512-G9+1vVazrfAfbtmCapJX8jRo2E4MDXxgm/IMOF4oGh3kq7XuK3JRkOg6y2Qu1VsTRmWETyTkWt1wxy7X7/yLkw==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
dev: true
|
||||
|
||||
/@typescript-eslint/typescript-estree/5.53.0_typescript@4.9.5:
|
||||
resolution: {integrity: sha512-eKmipH7QyScpHSkhbptBBYh9v8FxtngLquq292YTEQ1pxVs39yFBlLC1xeIZcPPz1RWGqb7YgERJRGkjw8ZV7w==}
|
||||
/@typescript-eslint/typescript-estree/5.54.1_typescript@4.9.5:
|
||||
resolution: {integrity: sha512-bjK5t+S6ffHnVwA0qRPTZrxKSaFYocwFIkZx5k7pvWfsB1I57pO/0M0Skatzzw1sCkjJ83AfGTL0oFIFiDX3bg==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
typescript: '*'
|
||||
|
|
@ -942,8 +942,8 @@ packages:
|
|||
typescript:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 5.53.0
|
||||
'@typescript-eslint/visitor-keys': 5.53.0
|
||||
'@typescript-eslint/types': 5.54.1
|
||||
'@typescript-eslint/visitor-keys': 5.54.1
|
||||
debug: 4.3.4
|
||||
globby: 11.1.0
|
||||
is-glob: 4.0.3
|
||||
|
|
@ -954,17 +954,17 @@ packages:
|
|||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@typescript-eslint/utils/5.53.0_ycpbpc6yetojsgtrx3mwntkhsu:
|
||||
resolution: {integrity: sha512-VUOOtPv27UNWLxFwQK/8+7kvxVC+hPHNsJjzlJyotlaHjLSIgOCKj9I0DBUjwOOA64qjBwx5afAPjksqOxMO0g==}
|
||||
/@typescript-eslint/utils/5.54.1_ycpbpc6yetojsgtrx3mwntkhsu:
|
||||
resolution: {integrity: sha512-IY5dyQM8XD1zfDe5X8jegX6r2EVU5o/WJnLu/znLPWCBF7KNGC+adacXnt5jEYS9JixDcoccI6CvE4RCjHMzCQ==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
|
||||
dependencies:
|
||||
'@types/json-schema': 7.0.11
|
||||
'@types/semver': 7.3.13
|
||||
'@typescript-eslint/scope-manager': 5.53.0
|
||||
'@typescript-eslint/types': 5.53.0
|
||||
'@typescript-eslint/typescript-estree': 5.53.0_typescript@4.9.5
|
||||
'@typescript-eslint/scope-manager': 5.54.1
|
||||
'@typescript-eslint/types': 5.54.1
|
||||
'@typescript-eslint/typescript-estree': 5.54.1_typescript@4.9.5
|
||||
eslint: 8.35.0
|
||||
eslint-scope: 5.1.1
|
||||
eslint-utils: 3.0.0_eslint@8.35.0
|
||||
|
|
@ -974,11 +974,11 @@ packages:
|
|||
- typescript
|
||||
dev: true
|
||||
|
||||
/@typescript-eslint/visitor-keys/5.53.0:
|
||||
resolution: {integrity: sha512-JqNLnX3leaHFZEN0gCh81sIvgrp/2GOACZNgO4+Tkf64u51kTpAyWFOY8XHx8XuXr3N2C9zgPPHtcpMg6z1g0w==}
|
||||
/@typescript-eslint/visitor-keys/5.54.1:
|
||||
resolution: {integrity: sha512-q8iSoHTgwCfgcRJ2l2x+xCbu8nBlRAlsQ33k24Adj8eoVBE0f8dUeI+bAa8F84Mv05UGbAx57g2zrRsYIooqQg==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 5.53.0
|
||||
'@typescript-eslint/types': 5.54.1
|
||||
eslint-visitor-keys: 3.3.0
|
||||
dev: true
|
||||
|
||||
|
|
@ -1765,8 +1765,8 @@ packages:
|
|||
dev: true
|
||||
optional: true
|
||||
|
||||
/eslint-config-prettier/8.6.0_eslint@8.35.0:
|
||||
resolution: {integrity: sha512-bAF0eLpLVqP5oEVUFKpMA+NnRFICwn9X8B5jrR9FcqnYBuPbqWEjTEspPWMj5ye6czoSLDweCzSo3Ko7gGrZaA==}
|
||||
/eslint-config-prettier/8.7.0_eslint@8.35.0:
|
||||
resolution: {integrity: sha512-HHVXLSlVUhMSmyW4ZzEuvjpwqamgmlfkutD53cYXLikh4pt/modINRcCIApJ84czDxM4GZInwUrromsDdTImTA==}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
eslint: '>=7.0.0'
|
||||
|
|
@ -2902,8 +2902,8 @@ packages:
|
|||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/playwright-core/1.31.1:
|
||||
resolution: {integrity: sha512-JTyX4kV3/LXsvpHkLzL2I36aCdml4zeE35x+G5aPc4bkLsiRiQshU5lWeVpHFAuC8xAcbI6FDcw/8z3q2xtJSQ==}
|
||||
/playwright-core/1.31.2:
|
||||
resolution: {integrity: sha512-a1dFgCNQw4vCsG7bnojZjDnPewZcw7tZUNFN0ZkcLYKj+mPmXvg4MpaaKZ5SgqPsOmqIf2YsVRkgqiRDxD+fDQ==}
|
||||
engines: {node: '>=14'}
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
|
@ -3798,8 +3798,8 @@ packages:
|
|||
engines: {node: '>= 0.4'}
|
||||
dev: true
|
||||
|
||||
/svelte-check/3.0.4_yqhbri7c5yusomev55u36f7etq:
|
||||
resolution: {integrity: sha512-feIyBAA5cSIxq4vq6mwGvGQTHy/wBVQbs5b+/VvE21WN8X7nonAuSqwvZv0UDBowzRka3Rh4gmLPH8rPePz3/w==}
|
||||
/svelte-check/3.1.0_yqhbri7c5yusomev55u36f7etq:
|
||||
resolution: {integrity: sha512-aSdnsGtndfqtb0dmN5qm9Zjl7wGpqh3cWF35WVCcK96TmGn2NEar4M40QW6bvaPPu089mrkZdpeD3Yar2SERBg==}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
svelte: ^3.55.0
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<script lang="ts">
|
||||
import OpenInNew from '@iconify-icons/mdi/open-in-new';
|
||||
import type { IconifyIcon } from 'iconify-icon';
|
||||
export let rel = 'noreferrer';
|
||||
export let target = '_blank';
|
||||
export let href: string;
|
||||
export let ariaLabel: string;
|
||||
export let showIcon: boolean = false;
|
||||
export let icon: IconifyIcon = OpenInNew;
|
||||
</script>
|
||||
|
||||
<span class:show-icon={showIcon}>
|
||||
|
|
@ -12,15 +14,14 @@
|
|||
<slot />
|
||||
</a>
|
||||
{#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}
|
||||
</span>
|
||||
|
||||
<style lang="postcss">
|
||||
.show-icon {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
gap: 0.5rem;
|
||||
place-items: center;
|
||||
|
||||
&:hover {
|
||||
color: var(--shellYellow);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts">
|
||||
import type { SvelteComponent } from "svelte";
|
||||
import { Picture } from "svelte-lazy-loader";
|
||||
|
||||
type ImageMeta = {
|
||||
|
|
@ -18,41 +17,49 @@
|
|||
export let formats: ImageMeta[];
|
||||
</script>
|
||||
|
||||
<div class="gridItemStyles">
|
||||
<div class="portfolioPicture">
|
||||
<div class="portfolio">
|
||||
<div class="portfolio-picture">
|
||||
<h2>{name}</h2>
|
||||
<Picture {placeholder} {src} {loading} {alt}>
|
||||
{#each formats as { src, format, width }}
|
||||
<source data-srcset={src} type="image/{format}" {width} />
|
||||
{/each}
|
||||
</Picture>
|
||||
<slot name="portfolio-links" />
|
||||
</div>
|
||||
<div class="portfolio-details">
|
||||
<slot />
|
||||
<slot name="portfolio-details" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
:global(.portfolioPicture) {
|
||||
:global(.portfolio-picture) {
|
||||
border-radius: 3px;
|
||||
max-width: 500px;
|
||||
/* width: minmax(200px, 500px); */
|
||||
}
|
||||
|
||||
:global(.gridItemStyles) {
|
||||
:global(.portfolio) {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(200px, 500px) 1fr;
|
||||
width: 100%;
|
||||
gap: 2rem;
|
||||
margin: 0 auto;
|
||||
grid-template-columns: minmax(200px, 500px) auto;
|
||||
/* width: 100%; */
|
||||
margin: 1.5rem auto;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
padding: 0;
|
||||
grid-template-columns: minmax(200px, 500px);
|
||||
place-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
: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>
|
||||
43
src/lib/content/portfolio/personal-website-gatsby.ts
Normal file
43
src/lib/content/portfolio/personal-website-gatsby.ts
Normal 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
21
src/lib/content/portfolio/personal/old-website.md
Normal 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
|
||||
|
|
@ -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
23
src/lib/content/portfolio/personal/wedding-website.md
Normal 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
|
||||
|
|
@ -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
|
||||
|
|
@ -9,7 +9,6 @@
|
|||
import Remix from '@iconify-icons/simple-icons/remix';
|
||||
import Svelte from '@iconify-icons/simple-icons/svelte';
|
||||
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_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';
|
||||
|
|
@ -18,10 +17,11 @@
|
|||
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 ExternalLink from '$root/lib/components/ExternalLink.svelte';
|
||||
import { Disclosure } from '@rgossiaux/svelte-headlessui';
|
||||
</script>
|
||||
|
||||
<SEO title="About" />
|
||||
<svelte:head>
|
||||
<title>About | Bradley Shellnut</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="about">
|
||||
<div>
|
||||
|
|
|
|||
28
src/routes/portfolio/+page.server.ts
Normal file
28
src/routes/portfolio/+page.server.ts
Normal 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');
|
||||
}
|
||||
};
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<script lang="ts">
|
||||
import type { PageData } from "./$types";
|
||||
import {
|
||||
Tab,
|
||||
TabGroup,
|
||||
|
|
@ -7,15 +8,28 @@
|
|||
TabPanels,
|
||||
} from "@rgossiaux/svelte-headlessui";
|
||||
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 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 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 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 shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png?format=webp;avif;png&metadata";
|
||||
import shellnutArchitectWebsiteBlurred from "$lib/assets/images/Mark_Shellnut_Architect.png?w=400px&blur=10";
|
||||
import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png";
|
||||
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>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -23,346 +37,89 @@
|
|||
</svelte:head>
|
||||
|
||||
<h1>Portfolio!</h1>
|
||||
<div class="portfolioTabStyles">
|
||||
<TabGroup>
|
||||
<TabList
|
||||
aria-label="tabs portfolios"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: auto auto;
|
||||
place-content: start;
|
||||
place-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
"
|
||||
>
|
||||
<Tab class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}>
|
||||
<h2>Personal Sites</h2>
|
||||
</Tab>
|
||||
<Tab value="professional-sites" class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}>
|
||||
<h2>Professional Sites</h2>
|
||||
</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
<div class="portfolioStyles">
|
||||
<div class="gridItemStyles">
|
||||
<div class="portfolioPicture">
|
||||
<h2>Personal Website</h2>
|
||||
<Picture placeholder={personalSiteBlurred} src={personalSite} loading="eager" alt="Home Page of bradleyshellnut.com">
|
||||
{#each personalSiteFormats as { src, format }}
|
||||
<source data-srcset={src} type="image/{format}" />
|
||||
{/each}
|
||||
</Picture>
|
||||
</div>
|
||||
<div class="portfolio-details">
|
||||
<p>
|
||||
My personal website written using the following
|
||||
technologies.
|
||||
</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>Deployed using Netlify</li>
|
||||
<li>
|
||||
Most icons from{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/react-icons/react-icons"
|
||||
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>
|
||||
<TabGroup>
|
||||
<TabList aria-label="tabs portfolios" class="tab-list">
|
||||
<Tab class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}>
|
||||
<h2>Personal Sites</h2>
|
||||
</Tab>
|
||||
<Tab value="professional-sites" class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}>
|
||||
<h2>Professional Sites</h2>
|
||||
</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel>
|
||||
<Portfolio name="Personal Website"
|
||||
placeholder={personalSiteBlurred}
|
||||
src={personalSite}
|
||||
alt="Picture of Bradley Shellnut's Gatsby Personal Website"
|
||||
formats={personalSiteFormats}>
|
||||
<PersonalWebsiteGatsby slot="portfolio-details" />
|
||||
</Portfolio>
|
||||
<Portfolio name="Wedding Website"
|
||||
placeholder={weddingWebsiteBlurred}
|
||||
src={weddingWebsite}
|
||||
alt="Picture of Bradley Shellnut's Gatsby Personal Website"
|
||||
formats={weddingWebsiteFormats}>
|
||||
<span slot="portfolio-links">
|
||||
<p>
|
||||
<ExternalLink ariaLabel="View Wedding Website" href="https://weddingsite-six.vercel.app/" showIcon>View Site</ExternalLink>
|
||||
</p>
|
||||
<p>
|
||||
<ExternalLink ariaLabel="View GitHub repository for the wedding site" href="https://github.com/BradNut/weddingsite" icon={GitHub} showIcon>GitHub repository</ExternalLink>
|
||||
</p>
|
||||
</span>
|
||||
<WeddingWebsite slot="portfolio-details" />
|
||||
</Portfolio>
|
||||
<Portfolio name="Old Personal Website"
|
||||
placeholder={oldSiteBlurred}
|
||||
src={oldSite}
|
||||
alt="Home Page of the old bradleyshellnut.com website"
|
||||
formats={oldSiteFormats}>
|
||||
<span slot="portfolio-links">
|
||||
<p>
|
||||
<ExternalLink ariaLabel="Archive of bradleyshellnut.com" href="https://web.archive.org/web/20201205233507/https://bradleyshellnut.com/about" showIcon>Link to an archive snapshot</ExternalLink>
|
||||
</p>
|
||||
</span>
|
||||
<OldWebsite slot="portfolio-details" />
|
||||
</Portfolio>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<!-- <div class="portfolioStyles"> -->
|
||||
<Portfolio name="Mark Shellnut Architect"
|
||||
placeholder={shellnutArchitectWebsiteBlurred}
|
||||
src={shellnutArchitectWebsite}
|
||||
alt="Picture of Mark Shellnut Architect's Website"
|
||||
formats={shellnutArchitectWebsiteFormats}>
|
||||
<MarkShellnutArchitect slot="portfolio-details" />
|
||||
</Portfolio>
|
||||
<!-- </div> -->
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</TabGroup>
|
||||
|
||||
<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) {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:global(.portfolioStyles) {
|
||||
margin-top: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto, minmax(300px, 400px));
|
||||
gap: 3rem;
|
||||
margin: 0.5rem auto;
|
||||
|
||||
@media (max-width: 767px) {
|
||||
grid-template-columns: repeat(1, minmax(150px, 400px));
|
||||
@media (max-width: 800px) {
|
||||
grid-gap: 1.2rem;
|
||||
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) {
|
||||
h2 {
|
||||
border-bottom: 2px solid var(--white);
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
export const prerender = true;
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
img,
|
||||
|
|
@ -11,22 +11,22 @@ picture,
|
|||
video,
|
||||
canvas,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
iframe,
|
||||
video {
|
||||
width: 100%;
|
||||
border: none;
|
||||
aspect-ratio: 16 / 9;
|
||||
width: 100%;
|
||||
border: none;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
p,
|
||||
|
|
@ -36,23 +36,23 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
border: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button {
|
||||
font: inherit;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
list-style: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
import adapter from '@sveltejs/adapter-vercel';
|
||||
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} */
|
||||
const config = {
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: [vitePreprocess()],
|
||||
extensions: ['.svelte', ...mdsvexConfig.extensions],
|
||||
preprocess: [vitePreprocess(),mdsvex(mdsvexConfig)],
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
alias: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue