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 #10 from BradNut/development

Browse source 
Development
This commit is contained in:
Bradley Shellnut 2023-07-12 23:19:42 -07:00 committed by GitHub
commit b064c0cc3c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 101 additions and 4969 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
package.json
View file

@ -16,28 +16,27 @@
},
"devDependencies": {
"@iconify-icons/material-symbols": "^1.2.48",
"@iconify-icons/mdi": "^1.2.46",
"@iconify-icons/mdi": "^1.2.47",
"@iconify-icons/radix-icons": "^1.2.8",
"@iconify-icons/simple-icons": "^1.2.57",
"@iconify-icons/simple-icons": "^1.2.59",
"@leveluptuts/svelte-side-menu": "^1.0.5",
"@leveluptuts/svelte-toy": "^2.0.3",
"@playwright/test": "^1.35.1",
"@rgossiaux/svelte-headlessui": "^2.0.0",
"@playwright/test": "^1.36.0",
"@sveltejs/adapter-static": "^2.0.2",
"@sveltejs/adapter-vercel": "^1.0.6",
"@sveltejs/kit": "^1.21.0",
"@typescript-eslint/eslint-plugin": "^5.60.1",
"@typescript-eslint/parser": "^5.60.1",
"@sveltejs/kit": "^1.22.3",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"@zerodevx/svelte-img": "^1.2.11",
"autoprefixer": "^10.4.14",
"eslint": "^8.44.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-svelte3": "^4.0.0",
"eslint-plugin-svelte": "^2.32.2",
"iconify-icon": "^1.0.8",
"just-intersect": "^4.3.0",
"mdsvex": "^0.10.6",
"mdsvex-relative-images": "^1.0.3",
"postcss": "^8.4.24",
"postcss": "^8.4.25",
"postcss-import": "^15.1.0",
"postcss-load-config": "^4.0.1",
"postcss-preset-env": "^8.5.1",
@ -45,20 +44,21 @@
"prettier-plugin-svelte": "^2.10.1",
"sass": "^1.63.6",
"scrape-it": "^5.3.2",
"sharp": "^0.31.3",
"svelte": "^3.59.2",
"svelte-check": "^3.4.4",
"sharp": "^0.32.2",
"svelte": "^4.0.5",
"svelte-check": "^3.4.6",
"svelte-lazy-loader": "^1.0.0",
"svelte-preprocess": "^4.10.7",
"svelte-preprocess": "^5.0.4",
"tslib": "^2.6.0",
"typescript": "^4.9.5",
"typescript": "^5.1.6",
"vanilla-lazyload": "^17.8.3",
"vite": "^4.3.9",
"vite-imagetools": "^4.0.19",
"vite": "^4.4.3",
"vite-imagetools": "^5.0.5",
"vitest": "^0.25.3"
},
"type": "module",
"dependencies": {
"@melt-ui/svelte": "^0.19.0",
"@types/nprogress": "^0.2.0",
"ioredis": "^5.3.2",
"nprogress": "^0.2.0"

4875
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

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

@ -1,11 +1,5 @@
<script lang="ts">
import {
Tab,
TabGroup,
TabList,
TabPanel,
TabPanels,
} from "@rgossiaux/svelte-headlessui";
import { createTabs } from '@melt-ui/svelte';
import GitHub from '@iconify-icons/simple-icons/github';
import SEO from '$lib/components/SEO.svelte';
import Portfolio from '$lib/components/Portfolio.svelte';
@ -18,100 +12,113 @@
import MarkShellnutArchitect from '$lib/content/portfolio/professional/mark-shellnut-architect.md?run';
import OldWebsite from '$lib/content/portfolio/personal/old-website.md';
import ExternalLink from '$lib/components/ExternalLink.svelte';
const { root, list, content, trigger } = createTabs({
value: 'personal',
});
</script>
<SEO title="Portfolio" />
<h1>Portfolio!</h1>
<TabGroup class="tab-group">
<TabList aria-label="tabs portfolios" class="tab-list">
<Tab class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}>
<div {...$root} class="root tab-group">
<div {...$list} aria-label="tabs portfolios" class="list tab-list">
<button {...$trigger('personal')} use:trigger class="trigger">
<h2>Personal Sites</h2>
</Tab>
<Tab value="professional-sites" class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}>
</button>
<button {...$trigger('professional')} use:trigger value="professional-sites" class="trigger">
<h2>Professional Sites</h2>
</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Portfolio name="Personal Website"
style="max-height: 640px;"
src={personalSite}
loading="eager"
alt="Picture of Bradley Shellnut's Personal Website">
<span slot="portfolio-links">
<p>
<ExternalLink ariaLabel="View GitHub repository for my personal website" href="https://github.com/BradNut/personal-website-sveltekit" icon={GitHub} showIcon>GitHub repository</ExternalLink>
</p>
</span>
<PersonalWebsiteSvelteKit slot="portfolio-details" />
</Portfolio>
<Portfolio name="Wedding Website"
style="max-height: 640px;"
src={weddingWebsite}
alt="Picture of NextJS Wedding Website">
<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"
style="max-height: 320px;"
src={oldSite}
alt="Home Page of the old bradleyshellnut.com website">
<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>
<Portfolio name="Mark Shellnut Architect"
style="max-height: 640px;"
src={shellnutArchitectWebsite}
alt="Picture of Mark Shellnut Architect's Website">
<MarkShellnutArchitect slot="portfolio-details" />
</Portfolio>
</TabPanel>
</TabPanels>
</TabGroup>
</button>
</div>
<div {...$content('personal')} class="content">
<Portfolio name="Personal Website"
style="max-height: 640px;"
src={personalSite}
loading="eager"
alt="Picture of Bradley Shellnut's Personal Website">
<span slot="portfolio-links">
<p>
<ExternalLink ariaLabel="View GitHub repository for my personal website" href="https://github.com/BradNut/personal-website-sveltekit" icon={GitHub} showIcon>GitHub repository</ExternalLink>
</p>
</span>
<PersonalWebsiteSvelteKit slot="portfolio-details" />
</Portfolio>
<Portfolio name="Wedding Website"
style="max-height: 640px;"
src={weddingWebsite}
alt="Picture of NextJS Wedding Website">
<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"
style="max-height: 320px;"
src={oldSite}
alt="Home Page of the old bradleyshellnut.com website">
<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>
</div>
<div {...$content('professional')} class="content">
<Portfolio name="Mark Shellnut Architect"
style="max-height: 640px;"
src={shellnutArchitectWebsite}
alt="Picture of Mark Shellnut Architect's Website">
<MarkShellnutArchitect slot="portfolio-details" />
</Portfolio>
</div>
</div>
<style lang="postcss">
:global(.tab-group) {
.root {
display: flex;
flex-direction: column;
/* overflow: hidden; */
/* border-radius: var(--border-radius); */
& [data-orientation="vertical"] {
flex-direction: row;
}
@media(min-width: 1000px) {
max-width: 50vw;
}
}
:global(.tab-list) {
.list {
display: grid;
gap: 1rem;
grid-template-columns: auto auto;
place-content: start;
place-items: center;
margin-bottom: 1.5rem;
cursor: default;
user-select: none;
}
.trigger[data-state='active'] {
& h2 {
border-bottom: 2px solid var(--shellYellow);
}
}
.trigger[data-state='inactive'] {
& h2 {
border-bottom: 2px solid var(--white);
}
}
:global(img) {
border-radius: 3px;
}
:global(.tab-unselected) {
& h2 {
border-bottom: 2px solid var(--white);
}
}
:global(.tab-selected) {
& h2 {
border-bottom: 2px solid var(--shellYellow);
}
}
</style>