mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
Getting portfolio to show and using headless ui for tabs. Image heights at small screens not working yet.
This commit is contained in:
parent
11e5e9aac5
commit
e2815feea5
6 changed files with 573 additions and 7 deletions
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
|
@ -1,3 +1,3 @@
|
|||
{
|
||||
"cSpell.words": ["iconify", "Obispo"]
|
||||
"cSpell.words": ["iconify", "Mullvad", "Obispo", "Syncthing"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
"@leveluptuts/svelte-side-menu": "^1.0.5",
|
||||
"@leveluptuts/svelte-toy": "^2.0.3",
|
||||
"@playwright/test": "^1.28.1",
|
||||
"@rgossiaux/svelte-headlessui": "^1.0.2",
|
||||
"@sveltejs/adapter-auto": "^1.0.0",
|
||||
"@sveltejs/adapter-vercel": "^1.0.5",
|
||||
"@sveltejs/kit": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ specifiers:
|
|||
'@leveluptuts/svelte-side-menu': ^1.0.5
|
||||
'@leveluptuts/svelte-toy': ^2.0.3
|
||||
'@playwright/test': ^1.28.1
|
||||
'@rgossiaux/svelte-headlessui': ^1.0.2
|
||||
'@sveltejs/adapter-auto': ^1.0.0
|
||||
'@sveltejs/adapter-vercel': ^1.0.5
|
||||
'@sveltejs/kit': ^1.0.0
|
||||
|
|
@ -43,6 +44,7 @@ devDependencies:
|
|||
'@leveluptuts/svelte-side-menu': 1.0.5
|
||||
'@leveluptuts/svelte-toy': 2.0.3
|
||||
'@playwright/test': 1.29.2
|
||||
'@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.55.1
|
||||
'@sveltejs/adapter-auto': 1.0.2_@sveltejs+kit@1.2.2
|
||||
'@sveltejs/adapter-vercel': 1.0.5_@sveltejs+kit@1.2.2
|
||||
'@sveltejs/kit': 1.2.2_svelte@3.55.1+vite@4.0.4
|
||||
|
|
@ -651,6 +653,14 @@ packages:
|
|||
resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
|
||||
dev: true
|
||||
|
||||
/@rgossiaux/svelte-headlessui/1.0.2_svelte@3.55.1:
|
||||
resolution: {integrity: sha512-sauopYTSivhzXe1kAvgawkhyYJcQlK8Li3p0d2OtcCIVprOzdbard5lbqWB4xHDv83zAobt2mR08oizO2poHLQ==}
|
||||
peerDependencies:
|
||||
svelte: ^3.44.0
|
||||
dependencies:
|
||||
svelte: 3.55.1
|
||||
dev: true
|
||||
|
||||
/@rollup/pluginutils/4.2.1:
|
||||
resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
|
||||
engines: {node: '>= 8.0.0'}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import SEO from "$root/lib/components/SEO.svelte";
|
||||
import { Image } from 'svelte-lazy-loader';
|
||||
import Graphql from '@iconify-icons/simple-icons/graphql';
|
||||
import Nextdotjs from '@iconify-icons/simple-icons/next-dot-js';
|
||||
import Prisma from '@iconify-icons/simple-icons/prisma';
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
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 adventure from '$lib/assets/images/adventure.png';
|
||||
import orange_derp from '$lib/assets/images/orange_derp.jpg';
|
||||
import tortie_derp from '$lib/assets/images/tortie_derp.jpg';
|
||||
|
|
@ -288,7 +288,7 @@
|
|||
"
|
||||
>
|
||||
<figure>
|
||||
<img src={adventure} alt="Road Trip Adventure" />
|
||||
<Image src={adventure} alt="Road Trip Adventure" />
|
||||
<p class="center">Route 66 Road Trip</p>
|
||||
</figure>
|
||||
</div>
|
||||
|
|
@ -297,11 +297,11 @@
|
|||
<p>Bringing these two cats, Turnip and Taco, along for the ride.</p>
|
||||
<div class="cat-pics">
|
||||
<figure>
|
||||
<img src={tortie_derp} alt="Turnip Cat" />
|
||||
<Image src={tortie_derp} alt="Turnip Cat" />
|
||||
<p class="center">Turnip</p>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src={orange_derp} alt="Taco Cat" />
|
||||
<Image src={orange_derp} alt="Taco Cat" />
|
||||
<p class="center">Taco 🌮</p>
|
||||
</figure>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,345 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
Tab,
|
||||
TabGroup,
|
||||
TabList,
|
||||
TabPanel,
|
||||
TabPanels,
|
||||
} from "@rgossiaux/svelte-headlessui";
|
||||
import { Image } from "svelte-lazy-loader";
|
||||
import SEO from "$root/lib/components/SEO.svelte";
|
||||
import oldSite from '$lib/assets/images/Old_Website_Bradley_Shellnut.png';
|
||||
import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png";
|
||||
import weddingWebsite from "$lib/assets/images/Wedding_Website.png";
|
||||
import shellnutArchitectWebsite from "$lib/assets/images/Mark_Shellnut_Architect.png";
|
||||
</script>
|
||||
|
||||
<SEO title="Portfolio" />
|
||||
|
||||
<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>
|
||||
<h2>Personal Website</h2>
|
||||
<Image
|
||||
src={personalSite}
|
||||
alt="Home Page bradleyshellnut.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<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 Adventure 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>
|
||||
<Image src={weddingWebsite} alt="Wedding Website" />
|
||||
<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>
|
||||
<Image
|
||||
src={oldSite}
|
||||
alt="Home Page of old bradleyshellnut.com"
|
||||
/>
|
||||
<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>
|
||||
<Image
|
||||
src={shellnutArchitectWebsite}
|
||||
alt="Mark Shellnut Architect"
|
||||
/>
|
||||
<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">
|
||||
:global(.portfolioStyles) {
|
||||
margin-top: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto, minmax(300px, 400px));
|
||||
gap: 3rem;
|
||||
margin: 0.5rem auto;
|
||||
|
||||
@media (max-width: 580px) {
|
||||
grid-template-columns: repeat(1, minmax(150px, 400px));
|
||||
grid-gap: 1.2rem;
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.gridItemStyles) {
|
||||
display: grid;
|
||||
grid-template-columns: 0.5fr 0.5fr;
|
||||
width: 100%;
|
||||
gap: 2rem;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: 580px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 3px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.tab-unselected) {
|
||||
h2 {
|
||||
border-bottom: 2px solid var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.tab-selected) {
|
||||
h2 {
|
||||
border-bottom: 2px solid var(--shellYellow);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,3 +3,218 @@
|
|||
</script>
|
||||
|
||||
<SEO title="Privacy Blog" />
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<h1>Privacy</h1>
|
||||
<p>
|
||||
Long story short, I believe everyone should know who has your personal
|
||||
data, how it is being collected/stored, and what it is being used for.
|
||||
</p>
|
||||
<p>
|
||||
However, it is ultimately up to each person to determine how much data
|
||||
they are willing to give to any business/entity.
|
||||
</p>
|
||||
<p>
|
||||
For the sake of transparency I am using{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="Umami Analytics FAQ"
|
||||
href="https://umami.is/docs/faq"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Umami Analytics
|
||||
</a>{' '}
|
||||
to anonymously track visits to my site. You can completely block this
|
||||
if you want by either using an AdBlocker like{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="uBlock Origin"
|
||||
href="https://ublockorigin.com/"
|
||||
rel="noreferrer"
|
||||
>
|
||||
uBlock Origin
|
||||
</a>{' '}
|
||||
and/or set your browser to send "Do Not Track" requests as I honor
|
||||
them.
|
||||
</p>
|
||||
</div>
|
||||
<div style="margin-top: 2.5rem;">
|
||||
<h2>Useful Resources</h2>
|
||||
<p>
|
||||
Here are a few sites/lists of privacy oriented software for you to
|
||||
check out:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="Privacy Respecting Software"
|
||||
href="https://github.com/Lissy93/personal-security-checklist/blob/master/5_Privacy_Respecting_Software.md"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Privacy Respecting Software
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="Privacy Guides"
|
||||
href="https://www.privacyguides.org/"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Privacy Guides
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="Ethical Alternatives"
|
||||
href="https://ethical.net/resources/"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Ethical Alternatives
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Privacy Centric Paid Services I use:</h3>
|
||||
<ul>
|
||||
<li>
|
||||
Article Saving:{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="Wallabag Article Saver"
|
||||
href="https://github.com/wallabag/wallabag"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Wallabag
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Anonymous Email Forwarding:{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="AnonAddy Email Forwarding"
|
||||
href="https://anonaddy.com/"
|
||||
rel="noreferrer"
|
||||
>
|
||||
AnonAddy
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Email:{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="ProtonMail"
|
||||
href="https://protonmail.com"
|
||||
rel="noreferrer"
|
||||
>
|
||||
ProtonMail
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
Notes:{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="Standard Notes"
|
||||
href="https://standardnotes.org/"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Standard Notes
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
VPN:{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="Mullvad VPN"
|
||||
href="https://mullvad.net/en/"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Mullvad VPN
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3>NAS Servers for Self Hosting:</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="Synology NAS"
|
||||
href="https://synology.com/"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Synology
|
||||
</a>
|
||||
: An easy, not cheap, local solution for Google Services like Drive,
|
||||
Drive, Photos, Calendar, other services using Docker, etc. (Yes I
|
||||
should use{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="NextCloud Local Hosting Service"
|
||||
href="https://nextcloud.com/"
|
||||
rel="noreferrer"
|
||||
>
|
||||
NextCloud
|
||||
</a>
|
||||
...maybe eventually)
|
||||
</li>
|
||||
<li>
|
||||
Mac Mini: Used as a{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="Plex"
|
||||
href="https://www.plex.tv/"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Plex Server
|
||||
</a>{' '}
|
||||
for my Movies/TV/Music until I build a dedicated NAS and maybe
|
||||
switch to{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="JellyFin"
|
||||
href="https://jellyfin.org/"
|
||||
rel="noreferrer"
|
||||
>
|
||||
JellyFin
|
||||
</a>{' '}
|
||||
once it is more mature.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Software Deployed:</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="Traefik Cloud Proxy"
|
||||
href="https://github.com/traefik/traefik"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Traefik
|
||||
</a>
|
||||
: A HTTP reverse proxy and load balancer.
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
target="_blank"
|
||||
aria-label="Syncthing File Synchronization"
|
||||
href="https://github.com/syncthing/syncthing"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Syncthing
|
||||
</a>
|
||||
: An open source file synchronization program.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
</style>
|
||||
Loading…
Reference in a new issue