mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
Removing headless ui and using Melt-UI for tabs.
This commit is contained in:
parent
e459f40fe3
commit
9047fa5d52
3 changed files with 605 additions and 541 deletions
28
package.json
28
package.json
|
|
@ -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-svelte": "^2.31.1",
|
||||
"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.32.1",
|
||||
"svelte": "^4.0.1",
|
||||
"svelte-check": "^3.4.3",
|
||||
"sharp": "^0.32.2",
|
||||
"svelte": "^4.0.5",
|
||||
"svelte-check": "^3.4.6",
|
||||
"svelte-lazy-loader": "^1.0.0",
|
||||
"svelte-preprocess": "^5.0.4",
|
||||
"tslib": "^2.6.0",
|
||||
"typescript": "^5.1.6",
|
||||
"vanilla-lazyload": "^17.8.3",
|
||||
"vite": "^4.3.9",
|
||||
"vite-imagetools": "^5.0.4",
|
||||
"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"
|
||||
|
|
|
|||
955
pnpm-lock.yaml
955
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -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>
|
||||
Loading…
Reference in a new issue