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-side-menu": "^1.0.5",
|
||||||
"@leveluptuts/svelte-toy": "^2.0.3",
|
"@leveluptuts/svelte-toy": "^2.0.3",
|
||||||
"@playwright/test": "^1.28.1",
|
"@playwright/test": "^1.28.1",
|
||||||
|
"@rgossiaux/svelte-headlessui": "^1.0.2",
|
||||||
"@sveltejs/adapter-auto": "^1.0.0",
|
"@sveltejs/adapter-auto": "^1.0.0",
|
||||||
"@sveltejs/adapter-vercel": "^1.0.5",
|
"@sveltejs/adapter-vercel": "^1.0.5",
|
||||||
"@sveltejs/kit": "^1.0.0",
|
"@sveltejs/kit": "^1.0.0",
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ specifiers:
|
||||||
'@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.28.1
|
'@playwright/test': ^1.28.1
|
||||||
|
'@rgossiaux/svelte-headlessui': ^1.0.2
|
||||||
'@sveltejs/adapter-auto': ^1.0.0
|
'@sveltejs/adapter-auto': ^1.0.0
|
||||||
'@sveltejs/adapter-vercel': ^1.0.5
|
'@sveltejs/adapter-vercel': ^1.0.5
|
||||||
'@sveltejs/kit': ^1.0.0
|
'@sveltejs/kit': ^1.0.0
|
||||||
|
|
@ -43,6 +44,7 @@ devDependencies:
|
||||||
'@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.29.2
|
'@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-auto': 1.0.2_@sveltejs+kit@1.2.2
|
||||||
'@sveltejs/adapter-vercel': 1.0.5_@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
|
'@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==}
|
resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
|
||||||
dev: true
|
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:
|
/@rollup/pluginutils/4.2.1:
|
||||||
resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
|
resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
|
||||||
engines: {node: '>= 8.0.0'}
|
engines: {node: '>= 8.0.0'}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts">
|
<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 Graphql from '@iconify-icons/simple-icons/graphql';
|
||||||
import Nextdotjs from '@iconify-icons/simple-icons/next-dot-js';
|
import Nextdotjs from '@iconify-icons/simple-icons/next-dot-js';
|
||||||
import Prisma from '@iconify-icons/simple-icons/prisma';
|
import Prisma from '@iconify-icons/simple-icons/prisma';
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
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 adventure from '$lib/assets/images/adventure.png';
|
import adventure from '$lib/assets/images/adventure.png';
|
||||||
import orange_derp from '$lib/assets/images/orange_derp.jpg';
|
import orange_derp from '$lib/assets/images/orange_derp.jpg';
|
||||||
import tortie_derp from '$lib/assets/images/tortie_derp.jpg';
|
import tortie_derp from '$lib/assets/images/tortie_derp.jpg';
|
||||||
|
|
@ -288,7 +288,7 @@
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<figure>
|
<figure>
|
||||||
<img src={adventure} alt="Road Trip Adventure" />
|
<Image src={adventure} alt="Road Trip Adventure" />
|
||||||
<p class="center">Route 66 Road Trip</p>
|
<p class="center">Route 66 Road Trip</p>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -297,11 +297,11 @@
|
||||||
<p>Bringing these two cats, Turnip and Taco, along for the ride.</p>
|
<p>Bringing these two cats, Turnip and Taco, along for the ride.</p>
|
||||||
<div class="cat-pics">
|
<div class="cat-pics">
|
||||||
<figure>
|
<figure>
|
||||||
<img src={tortie_derp} alt="Turnip Cat" />
|
<Image src={tortie_derp} alt="Turnip Cat" />
|
||||||
<p class="center">Turnip</p>
|
<p class="center">Turnip</p>
|
||||||
</figure>
|
</figure>
|
||||||
<figure>
|
<figure>
|
||||||
<img src={orange_derp} alt="Taco Cat" />
|
<Image src={orange_derp} alt="Taco Cat" />
|
||||||
<p class="center">Taco 🌮</p>
|
<p class="center">Taco 🌮</p>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,345 @@
|
||||||
<script lang="ts">
|
<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 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>
|
</script>
|
||||||
|
|
||||||
<SEO title="Portfolio" />
|
<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>
|
||||||
|
|
@ -2,4 +2,219 @@
|
||||||
import SEO from "$root/lib/components/SEO.svelte";
|
import SEO from "$root/lib/components/SEO.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<SEO title="Privacy Blog" />
|
<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