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

Fixing footer and getting some global styles to apply.

Browse source
This commit is contained in:
Bradley Shellnut 2023-01-30 00:09:42 -08:00
parent a7b992d2ac
commit 361bc2c9eb
3 changed files with 660 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/footer/index.svelte
View file

@ -63,7 +63,7 @@
margin: 0.5rem;
}
nav .footer-list {
.footer-list {
display: flex;
flex-wrap: wrap;
flex-direction: row;

9
src/routes/+layout.svelte
View file

@ -88,10 +88,15 @@
}
}
p,
li {
:global(p) {
word-wrap: normal;
font-size: var(--bodyTextSize);
color: var(--lightShade);
}
:global(li) {
word-wrap: normal;
font-size: var(--bodyTextSize);
color: var(--lightShade);
}
</style>

653
src/routes/uses/+page.svelte
View file

@ -1,5 +1,656 @@
<script lang="ts">
import SEO from "$root/lib/components/SEO.svelte";
import DesktopImage from '$lib/assets/images/Desktop_so_clean.jpg';
</script>
<SEO title="Uses" />
<SEO title="Uses" />
<div class="uses">
<div>
<h1>/Uses</h1>
<p>
Inspired by{' '}
<a
target="_blank"
href="https://wesbos.com"
aria-label="Wes Bos's website"
rel="noreferrer"
>
Wes Bos's
</a>{' '}
<a
target="_blank"
href="https://wesbos.com/uses"
aria-label="WesBos Uses Site"
rel="noreferrer"
>
/uses
</a>{' '}
page and{' '}
<a
target="_blank"
href="https://uses.tech/"
aria-label="Uses list website"
rel="noreferrer"
>
uses.tech
</a>
, this is a list of what I use everyday for my work and personal life.
</p>
</div>
<div class="uses-block-styles">
<div style="display: grid; grid-template-columns: minmax(400px, 0.65fr); justify-content: center; margin-bottom: 2rem;">
<figure>
<img src={DesktopImage} alt="Clean desktop" width="400px"/>
</figure>
</div>
<h2>Hardware & Accessories</h2>
<ul>
<li>
Computers 💻
<ul>
<li>MacBook Pro 15-inch for work.</li>
<li>
Personal desktop running{' '}
<a
target="_blank"
aria-label="PopOS Linux Distro"
title="https://pop.system76.com/"
href="https://pop.system76.com/"
rel="noreferrer"
>
PopOS
</a>
.
</li>
<li>Dell XPS 13 running PopOS.</li>
</ul>
</li>
<li>
Phone 📱: Pixel 6 running{' '}
<a
target="_blank"
aria-label="GrapheneOS"
title="https://grapheneos.org/"
href="https://grapheneos.org/"
rel="noreferrer"
>
GrapheneOS
</a>
.
</li>
<li>
Keyboard ⌨️:{' '}
<a
target="_blank"
aria-label="Ducky Keyboard"
title="https://www.duckychannel.com.tw/en/"
href="https://www.duckychannel.com.tw/en/Ducky-One2-RGB-TKL"
rel="noreferrer"
>
Ducky One 2 RGB TKL Keyboard
</a>
</li>
<li>
Mouse 🖱️:{' '}
<a
target="_blank"
aria-label="Logitech G502 Gaming Mouse"
title="Amazon Link to Mouse"
href="https://www.amazon.com/Logitech-G502-Performance-Gaming-Mouse/dp/B07GBZ4Q68"
rel="noreferrer"
>
Logitech G502 Gaming Mouse
</a>
</li>
<li>
Chair 🪑:{' '}
<a
target="_blank"
aria-label="Secretlab Omega 2020 Fabric"
title="https://secretlabus.myshopify.com"
href="https://secretlabus.myshopify.com/collections/omega-series#omega_2020-stealth"
rel="noreferrer"
>
Secretlab Omega 2020 Fabric
</a>
</li>
<li>
Monitor 🖥️:{' '}
<a
target="_blank"
aria-label="Samsung Odyssey G7 Gaming Monitor"
title="Samsung Link to Monitor"
href="https://www.samsung.com/us/computing/monitors/gaming/32--odyssey-g7-gaming-monitor-lc32g75tqsnxza/"
rel="noreferrer"
>
Samsung Odyssey G7 Gaming Monitor
</a>
</li>
</ul>
</div>
<div class="uses-block-styles">
<h2>Development</h2>
<p>
My development setup has been documented here:{' '}
<a
target="_blank"
aria-label="Bradley Shellnut Computer Setup"
href="https://github.com/BradNut/computer-setup-info/blob/master/linux/Environment-Setup.md"
rel="noreferrer"
>
Computer Setup Info
</a>
{'. '}
</p>
<p>
And documentation for my terminal and coding setup can be found here:{' '}
<a
target="_blank"
aria-label="Bradley Shellnut Dotfiles"
href="https://github.com/BradNut/dotfiles"
rel="noreferrer"
>
Dotfiles
</a>
.
</p>
<h3>Terminal & Shell Setup</h3>
<ul>
<li>
<a
target="_blank"
aria-label="Hyper JS Terminal"
href="https://hyper.is/"
rel="noreferrer"
>
HyperJS
</a>
: Mostly using for personal development on PopOS or Ubuntu. I get by
with just a few plugins listed below:
<div class="uses-flat-list">
<li>
<a
target="_blank"
aria-label="HyperJS Cobalt Theme"
href="https://github.com/wesbos/hyperterm-cobalt2-theme"
rel="noreferrer"
>
Cobalt2 Theme
</a>
</li>
<li>
<a
target="_blank"
aria-label="Tabs Enhanced Plugin"
href="https://github.com/henrikdahl/hyper-tabs-enhanced"
rel="noreferrer"
>
Hyper Tabs Enhanced
</a>
</li>
<li>
<a
target="_blank"
aria-label="Statusline Plugin"
href="https://github.com/henrikdahl/hyper-statusline"
rel="noreferrer"
>
Hyper Statusline
</a>
</li>
</div>
</li>
<li>
<a
target="_blank"
aria-label="iTerm 2 Terminal"
href="https://iterm2.com/"
rel="noreferrer"
>
iTerm2
</a>
</li>
<li>
<a
target="_blank"
aria-label="Oh My Zsh Link"
href="https://github.com/robbyrussell/oh-my-zsh"
rel="noreferrer"
>
Oh My Zsh
</a>
{': '}
Plugins I use are listed below:
<div class="uses-flat-list">
<li>
<a
target="_blank"
aria-label="Z plugin"
href="https://github.com/agkozak/zsh-z"
rel="noreferrer"
>
Z
</a>
</li>
<li>
<a
target="_blank"
aria-label="Autosuggestion plugin"
href="https://github.com/zsh-users/zsh-autosuggestions"
rel="noreferrer"
>
zsh-autosuggestions
</a>
</li>
<li>
<a
target="_blank"
aria-label="Syntax highlighting plugin"
href="https://github.com/zsh-users/zsh-syntax-highlighting"
rel="noreferrer"
>
zsh-syntax-highlighting
</a>
</li>
</div>
</li>
</ul>
<h3>Useful System Packages</h3>
<div class="uses-flat-list">
<li>
<a
target="_blank"
aria-label="Linux Brew Link"
href="https://docs.brew.sh/Homebrew-on-Linux"
rel="noreferrer"
>
Linux Brew
</a>
</li>
<li>
<a
target="_blank"
aria-label="Homebrew Link"
href="https://brew.sh/"
rel="noreferrer"
>
Homebrew
</a>
</li>
<li>
<a
target="_blank"
aria-label="TLDR Man Pages"
href="https://tldr.sh/"
rel="noreferrer"
>
TLDR Man Pages
</a>
</li>
<li>
<a
target="_blank"
aria-label="Trash-CLI"
href="https://www.npmjs.com/package/trash-cli"
rel="noreferrer"
>
Trash-CLI
</a>
</li>
</div>
<h3>Software</h3>
<ul>
<li>
<a
target="_blank"
href="https://vscodium.com/"
aria-label="VS Codium Website"
rel="noreferrer"
>
VSCodium
</a>
: Editor for non-Java projects. List of mostly used extensions:{' '}
<a
target="_blank"
href="https://github.com/BradNut/dotfiles/blob/master/vs-code-extensions-i-use.md"
aria-label="VS Code Extensions"
rel="noreferrer"
>
VSCode Extensions
</a>
</li>
<li>
<a
target="_blank"
href="https://www.sublimetext.com/3"
aria-label="Sublime Text 3 Website"
rel="noreferrer"
>
Sublime Text 3
</a>
: Text editor of choice with the following packages installed:
<div class="uses-flat-list">
<li>
<a
target="_blank"
href="https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify"
aria-label="Prettify Package"
rel="noreferrer"
>
HTML-CSS-JS Prettify
</a>
</li>
<li>
<a
target="_blank"
href="https://packagecontrol.io/packages/A%20File%20Icon"
aria-label="A File Icon"
rel="noreferrer"
>
A File Icon
</a>
</li>
<li>
<a
target="_blank"
href="https://packagecontrol.io/packages/ColorPicker"
aria-label="Color Picker Package"
rel="noreferrer"
>
Color Picker
</a>
</li>
<li>
<a
target="_blank"
href="https://packagecontrol.io/packages/Gutter%20Color"
aria-label="Git Gutter Color Package"
rel="noreferrer"
>
Gutter Color
</a>
</li>
<li>
<a
target="_blank"
href="https://github.com/absop/RainbowBrackets"
aria-label="Rainbow Brackets Package"
rel="noreferrer"
>
Rainbow Brackets
</a>
</li>
<li>
<a
target="_blank"
href="https://packagecontrol.io/packages/Theme%20-%20Cobalt2"
aria-label="Cobalt2 Theme"
rel="noreferrer"
>
Cobalt2 Theme
</a>
</li>
</div>
</li>
<li>
<a
target="_blank"
href="https://jetbrains.com/idea/"
aria-label="IntelliJ IDEA"
rel="noreferrer"
>
IntelliJ Ultimate
</a>
: Used mainly for Java/Kotlin projects running Tomcat Servers,
Spring/Spring Boot projects, etc. I usually use the following
plugins:
<div class="uses-flat-list">
<li>
<a
target="_blank"
href="https://plugins.jetbrains.com/plugin/7499-gittoolbox"
aria-label="Git Helper Plugin"
rel="noreferrer"
>
GitToolBox
</a>
</li>
<li>
<a
target="_blank"
href="https://plugins.jetbrains.com/plugin/6954-kotlin"
aria-label="Kotlin Helper Plugin"
rel="noreferrer"
>
Kotlin
</a>
</li>
<li>
<a
target="_blank"
href="https://plugins.jetbrains.com/plugin/6317-lombok"
aria-label="Lombok Plugin"
rel="noreferrer"
>
Lombok
</a>
</li>
<li>
<a
target="_blank"
href="https://plugins.jetbrains.com/plugin/10456-prettier"
aria-label="Prettier Formatter"
rel="noreferrer"
>
Prettier
</a>
</li>
<li>
<a
target="_blank"
href="https://plugins.jetbrains.com/plugin/7973-sonarlint"
aria-label="Java Linter"
rel="noreferrer"
>
Sonar Lint
</a>
</li>
<li>
<a
target="_blank"
href="https://plugins.jetbrains.com/plugin/12255-visual-studio-code-dark-plus-theme"
aria-label="VS Code Theme for IntelliJ"
rel="noreferrer"
>
VS Code Dark Plus Theme
</a>
</li>
</div>
</li>
<li>
<a
target="_blank"
aria-label="Postman Website"
href="https://postman.com/"
rel="noreferrer"
>
Postman
</a>
: My go to multi-platform Posting utility
</li>
<li>
Browser of choice:{' '}
<a
target="_blank"
aria-label="Firefox Best Edition"
href="https://www.mozilla.org/en-US/firefox/developer/"
rel="noreferrer"
>
Firefox Developer Edition
</a>
</li>
</ul>
</div>
<div class="uses-block-styles">
<h2>Privacy Hardware and Software</h2>
<p>
For the past few years I've been working towards moving my data to
selfhosted systems and systems I trust to hold my data.
</p>
<p>
If you want to see more info about this head to my{' '}
<a href="/privacy">Privacy</a> page.
</p>
<ul>
<li>
Hardware
<ul>
<li>
Hardware Authentication
<ul>
<li>
<a
target="_blank"
aria-label="YubiKey 5C"
href="https://www.yubico.com/product/yubikey-5c/"
rel="noreferrer"
>
YubiKey 5C
</a>
</li>
</ul>
</li>
<li>
NAS Servers
<ul>
<li>
<a
target="_blank"
aria-label="Synology NAS"
href="https://synology.com/"
rel="noreferrer"
>
Synology DS918+
</a>
</li>
<li>Mac Mini 2015</li>
</ul>
</li>
</ul>
</li>
<li>
Software
<ul>
<li>
<a
target="_blank"
aria-label="Bitwarden Password Manager"
href="https://bitwarden.com/"
rel="noreferrer"
>
Bitwarden
</a>
</li>
<li>
<a
target="_blank"
aria-label="Element Messaging App"
href="https://element.io/"
rel="noreferrer"
>
Element (Riot.im)
</a>
</li>
<li>
<a
target="_blank"
aria-label="FreeTube Video App"
href="https://freetubeapp.io/"
rel="noreferrer"
>
FreeTube App
</a>
</li>
<li>
<a
target="_blank"
aria-label="Mullvad VPN"
href="https://mullvad.net/en/"
rel="noreferrer"
>
Mullvad VPN
</a>
</li>
<li>
<a
target="_blank"
aria-label="Signal Messenger"
href="https://www.signal.org/"
rel="noreferrer"
>
Signal
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<style lang="postcss">
.uses {
li {
a {
:hover {
color: var(--shellYellow);
}
}
}
p {
margin: 1rem;
}
img {
border-radius: 3px;
max-width: 1000px;
}
}
.uses-block-styles {
margin: 4rem 0;
@media (max-width: 800px) {
margin: 2rem 0;
}
h3,
h4,
h5 {
margin-top: 1.5rem;
}
}
.uses-flat-list {
margin: 0.2rem;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: left;
align-items: center;
li {
padding: 0.5rem;
margin: 0.5rem;
list-style: none;
color: var(--lightShade);
background-color: var(--darkGrey);
border-radius: 0.5rem;
a {
text-decoration: none;
:hover {
color: var(--shellYellow);
}
}
}
}
</style>