From e2815feea5fff0ef4966c729348c2d6d21f183e1 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Mon, 30 Jan 2023 23:10:17 -0800 Subject: [PATCH] Getting portfolio to show and using headless ui for tabs. Image heights at small screens not working yet. --- .vscode/settings.json | 2 +- package.json | 1 + pnpm-lock.yaml | 10 + src/routes/about/+page.svelte | 10 +- src/routes/portfolio/+page.svelte | 340 ++++++++++++++++++++++++++++++ src/routes/privacy/+page.svelte | 217 ++++++++++++++++++- 6 files changed, 573 insertions(+), 7 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index cd8a672..600971e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "cSpell.words": ["iconify", "Obispo"] + "cSpell.words": ["iconify", "Mullvad", "Obispo", "Syncthing"] } diff --git a/package.json b/package.json index e890d7c..6cda40b 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e693a38..3ad0fc1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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'} diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index d3fae80..21336a3 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -1,5 +1,5 @@ + +

Portfolio!

+
+ + + selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}> +

Personal Sites

+
+ selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}> +

Professional Sites

+
+
+ + +
+
+
+

Personal Website

+ Home Page bradleyshellnut.com +
+
+

+ My personal website written using the following + technologies. +

+

Tech Stack:

+ +

+ Current version was improved after the suggestions on{' '} + + Show 444 + {' '} + of the{' '} + + Syntax Podcast + + . +

+

+ Previous archived version of my{' '} + + personal website + + . +

+
+
+
+
+

Wedding Website

+ Wedding Website +

+ + View Site + {' '} + + + +

+

+ + Github Repo + {' '} + + + +

+
+
+

+ An application that allows viewing of wedding details and + provides the ability to RSVP to the wedding. +

+

+ 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
  • +
  • + + Radix UI + +
  • +
  • MongoDB
  • +
  • Styled Components
  • +
  • Next Iron Session
  • +
+
+
+
+
+

Old Personal Website

+ Home Page of old bradleyshellnut.com +

+ + Link to an archive snapshot + +

+
+
+

+ This was my first real personal website hosted on + DigitalOcean. It was built using the following: +

+
    +
  • React
  • +
  • Redux for any state management
  • +
  • ReactStrap for CSS grid management
  • +
  • React Router for routing links in the page
  • +
+
+
+
+
+ +
+
+

Mark Shellnut Architect

+ Mark Shellnut Architect +

+ + View Site + {' '} + + + +

+
+
+

Company website for Mark Shellnut Architect.

+

Tech stack:

+
    +
  • React 18
  • +
  • Gatsby 5
  • +
  • + + Radix UI + +
  • +
  • Styled Components
  • +
  • GraphQL
  • +
  • Lambda Functions
  • +
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/src/routes/privacy/+page.svelte b/src/routes/privacy/+page.svelte index 7c33f3a..48201e6 100644 --- a/src/routes/privacy/+page.svelte +++ b/src/routes/privacy/+page.svelte @@ -2,4 +2,219 @@ import SEO from "$root/lib/components/SEO.svelte"; - \ No newline at end of file + + +
+
+

Privacy

+

+ 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. +

+

+ However, it is ultimately up to each person to determine how much data + they are willing to give to any business/entity. +

+

+ For the sake of transparency I am using{' '} + + Umami Analytics + {' '} + to anonymously track visits to my site. You can completely block this + if you want by either using an AdBlocker like{' '} + + uBlock Origin + {' '} + and/or set your browser to send "Do Not Track" requests as I honor + them. +

+
+
+

Useful Resources

+

+ Here are a few sites/lists of privacy oriented software for you to + check out: +

+ +
+
+

Privacy Centric Paid Services I use:

+ +
+
+

NAS Servers for Self Hosting:

+
    +
  • + + Synology + + : An easy, not cheap, local solution for Google Services like Drive, + Drive, Photos, Calendar, other services using Docker, etc. (Yes I + should use{' '} + + NextCloud + + ...maybe eventually) +
  • +
  • + Mac Mini: Used as a{' '} + + Plex Server + {' '} + for my Movies/TV/Music until I build a dedicated NAS and maybe + switch to{' '} + + JellyFin + {' '} + once it is more mature. +
  • +
+
+
+

Software Deployed:

+ +
+
+ + \ No newline at end of file