Improve layout, add icon, & update web-safety

src/_includes/layouts/page.njk

@@ -25,7 +25,7 @@
                     {% include "src/_includes/layouts/sidebar.njk" %}
                 </div>
                 <div class="column is-8-fullhd is-9-widescreen is-9-desktop mt-4-touch">
-                    <div class="section py-0">
+                    <div class="section py-0{% if center_section !== false %} is-flex is-justify-content-center{% endif %}">
                         <div class="content">
                             {{ content | safe }}
                         </div>

src/index.md

@@ -8,13 +8,31 @@ eleventyNavigation:
 
 image: /img/avatar.png
 ---
+{% include "photoswipe.njk" %}
+{% import "photoswipe.njk" as ps %}
 
 # {{ title }}
 
+<div class="columns">
+<div class="column is-narrow">
+<div class="pswp-gallery">
+{{ ps.image(url='/img/butterscotch.jpg', width='2000', height='2000', thumb_width='300', alt='An icon of my skunk character Butterscotch.') }}
+</div>
+
 Welcome to my homepage, I'm Butterscotch!
 
-You can find me at:
+</div>
+<div class="column">
+
+## Social/Work Accounts
 
-* [Bluesky (18+)](https://bsky.app/profile/butterscotchv.bsky.social)
 * [GitHub](https://github.com/ButterscotchV)
 * [SlimeVR Discord](https://discord.gg/slimevr) as `butterscotch.v`
+
+## Art Accounts
+
+* [Bluesky Art Feed](https://bsky.app/profile/butterscotchv.bsky.social)
+* [Itaku Art Gallery](https://itaku.ee/profile/butterscotch)
+
+</div>
+</div>

src/other-projects.md

@@ -12,10 +12,22 @@ description: "Links to my other projects"
 
 # {{ title }}
 
+## [ButterSTT](https://github.com/ButterscotchV/ButterSTT)
+
+My open source speech to text program for VRChat! This is a passion project of mine built to provide a local free speech to text service that is fast.
+
 ## [Bingus Search](https://bingus.bscotch.ca/)
 
 Bingus Search is a passion project of mine to assist with technical support, helping people find accurate information through a simple question-based search.
 
 ## [SlimeVR Firmware Tool](https://slimevr-firmware.bscotch.ca/)
 
 I host a fork of the SlimeVR Firmware Tool for people to use as the original is no longer hosted or maintained. There is a version being developed to be integrated within the SlimeVR software, but as of writing, it is not yet released.
+
+## [SlimeVR Testing Checklist](https://slimevr-testing.bscotch.ca/)
+
+This is a simple checklist I made to help with testing SlimeVR!
+
+## [SlimeVR Web GUI](https://slimevr-gui.bscotch.ca/)
+
+Originally made for use with Termux for standalone SlimeVR, now it's no longer needed and it's recommended you follow the [mobile setup guide](https://docs.slimevr.dev/tools/mobile-installation.html).

src/page.scss

@@ -16,6 +16,7 @@ $beige-lighter: #eff0eb;
 
 @use "bulma/sass/utilities/mixins";
 @use "bulma/sass/helpers/spacing";
+@use "bulma/sass/helpers/flexbox";
 
 @forward "bulma/sass/base";
 @forward "bulma/sass/themes";

src/vr/slimevr-skeleton-example.md

@@ -35,8 +35,8 @@ The images below illustrate wearing two physical trackers, a chest tracker mount
 _Note: The input does not include the skeleton, the outline is purely for illustrative purposes._
 
 <div class="pswp-gallery is-flex is-gap-1">
-{{ ps.image(url='/img/vr/slime-skeleton-0.png', width='327', height='544', thumb_width='300', alt='An image of Amber wearing SlimeVR trackers, side view') }}
-{{ ps.image(url='/img/vr/slime-skeleton-0-1.png', width='327', height='544', thumb_width='300', alt='An image of Amber wearing SlimeVR trackers, angled view') }}
+{{ ps.image(url='/img/vr/slime-skeleton-0.png', width='327', height='544', thumb_width='300', alt='An image of Amber wearing SlimeVR trackers, side view.') }}
+{{ ps.image(url='/img/vr/slime-skeleton-0-1.png', width='327', height='544', thumb_width='300', alt='An image of Amber wearing SlimeVR trackers, angled view.') }}
 </div>
 
 ### SlimeVR server internal skeleton
@@ -46,8 +46,8 @@ The images below illustrate the internal skeleton of SlimeVR calculated from the
 _Note: The illustrated skeleton does not accurately represent the skeleton used for SlimeVR, it is an artistic approximation._
 
 <div class="pswp-gallery is-flex is-gap-1">
-{{ ps.image(url='/img/vr/slime-skeleton-1.png', width='327', height='544', thumb_width='300', alt='An image of a SlimeVR skeleton with SlimeVR trackers and a SteamVR tracker on the waist, side view') }}
-{{ ps.image(url='/img/vr/slime-skeleton-1-1.png', width='327', height='544', thumb_width='300', alt='An image of a SlimeVR skeleton with SlimeVR trackers and a SteamVR tracker on the waist, angled view') }}
+{{ ps.image(url='/img/vr/slime-skeleton-1.png', width='327', height='544', thumb_width='300', alt='An image of a SlimeVR skeleton with SlimeVR trackers and a SteamVR tracker on the waist, side view.') }}
+{{ ps.image(url='/img/vr/slime-skeleton-1-1.png', width='327', height='544', thumb_width='300', alt='An image of a SlimeVR skeleton with SlimeVR trackers and a SteamVR tracker on the waist, angled view.') }}
 </div>
 
 ### SteamVR output
@@ -57,8 +57,8 @@ The images below illustrate the resulting SteamVR waist tracker. This tracker is
 _Note: The output does not include the skeleton, the outline is purely for illustrative purposes._
 
 <div class="pswp-gallery is-flex is-gap-1">
-{{ ps.image(url='/img/vr/slime-skeleton-2.png', width='327', height='544', thumb_width='300', alt='An image of a SteamVR tracker, side view') }}
-{{ ps.image(url='/img/vr/slime-skeleton-2-1.png', width='327', height='544', thumb_width='300', alt='An image of a SteamVR tracker, angled view') }}
+{{ ps.image(url='/img/vr/slime-skeleton-2.png', width='327', height='544', thumb_width='300', alt='An image of a SteamVR tracker, side view.') }}
+{{ ps.image(url='/img/vr/slime-skeleton-2-1.png', width='327', height='544', thumb_width='300', alt='An image of a SteamVR tracker, angled view.') }}
 </div>
 
 ## Credit

src/vr/vr.md

@@ -2,6 +2,8 @@
 layout: layouts/page.njk
 title: VR
 
+center_section: false
+
 eleventyNavigation:
   key: VR
   order: 2

src/web-safety/mfa.md

@@ -19,39 +19,43 @@ Multi-factor authentication (MFA) is a method of securing your accounts with a s
 
 ## Options
 
+### Proton Pass
+
+[Mobile / Desktop / Browser](https://proton.me/pass/download)
+
+### Bitwarden
+
+[Mobile / Desktop / Browser](https://bitwarden.com/download/)
+
 ### Duo Mobile
 
 [Mobile](https://duo.com/product/multi-factor-authentication-mfa/duo-mobile-app)
 
 - [Android](https://play.google.com/store/apps/details?id=com.duosecurity.duomobile)
 - [iOS](https://apps.apple.com/us/app/duo-mobile/id422663827)
 
-### Authy
-
-[Mobile / Desktop](https://authy.com/download/)
-
-- [Android](https://play.google.com/store/apps/details?id=com.authy.authy)
-- [iOS](https://apps.apple.com/us/app/authy/id494168017)
-
 ### Enpass
 
 [Mobile / Desktop / Browser](https://www.enpass.io/downloads/)
 
-(You can find all download links on their [website](https://www.enpass.io/downloads/))
-
-### Bitwarden
-
-[Mobile / Desktop / Browser](https://bitwarden.com/download/)
-
-(You can find all download links on their [website](https://bitwarden.com/download/))
-
 ### Microsoft Authenticator
 
 [Mobile](https://www.microsoft.com/en-us/security/mobile-authenticator-app)
 
 - [Android](https://play.google.com/store/apps/details?id=com.azure.authenticator)
 - [iOS](https://apps.apple.com/us/app/microsoft-authenticator/id983156458)
 
+### Authy
+
+[Mobile](https://authy.com/download/)
+
+- [Android](https://play.google.com/store/apps/details?id=com.authy.authy)
+- [iOS](https://apps.apple.com/us/app/authy/id494168017)
+
+### 2fast
+
+[Windows](https://github.com/2fast-team/2fast)
+
 ### LastPass Authenticator
 
 [Mobile / Desktop](https://lastpass.com/auth/)

src/web-safety/safety.md

@@ -56,6 +56,12 @@ Bitwarden is by far my favourite. It's free (with an _optional_ subscription for
 
 [Securing Bitwarden](securing-bitwarden.md)
 
+### Proton Pass
+
+This is a relatively new password manager. It's free and easy to use.
+
+<https://proton.me/pass>
+
 ### Enpass
 
 Enpass is free and lets you store your passwords on your own computer instead of on the cloud, this allows you to choose who and what you trust with your data.

src/web-safety/securing-bitwarden.md

@@ -17,23 +17,23 @@ description: "A guide to making Bitwarden more secure"
 
 ## Introduction
 
-In light of the [recent security incident involving LastPass](https://blog.lastpass.com/2022/12/notice-of-recent-security-incident/), the importance of ensuring the security of password managers has come to the forefront. As a result, some vulnerabilities have been identified in Bitwarden. This guide will provide steps to enhance the security of your Bitwarden vault in accordance with the latest recommendations.
+In light of the [security incident involving LastPass](https://blog.lastpass.com/2022/12/notice-of-recent-security-incident/), the importance of ensuring the security of password managers has come to the forefront. This guide will provide steps to enhance the security of your Bitwarden vault in accordance with the latest recommendations.
 
 ## Increasing the number of PBKDF2 iterations
 
 [Reference Bitwarden documentation](https://bitwarden.com/help/what-encryption-is-used/#changing-kdf-iterations)
 
 ### Why should I change it?
 
-In order to align with the guidelines outlined in the [OWASP Password Storage Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html#pbkdf2), it is recommended to increase the number of PBKDF2 iterations to a minimum of 600,000. While Bitwarden has recently increased the default iterations for new accounts, this change does not apply retroactively. It is possible that your account may still have the previous default of 100,000 iterations or lower set if you created it before they implemented these changes. To ensure the security of your account, it is important to review and update the PBKDF2 iterations accordingly.
+In order to align with the guidelines outlined in the [OWASP Password Storage Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html#pbkdf2), it is recommended to increase the number of PBKDF2 iterations to a minimum of 600,000. While Bitwarden has recently increased the default iterations for new accounts, this change does not apply retroactively. It is possible that your account may still have the previous default of 100,000 iterations or lower set if you created it before they implemented these changes. To ensure the security of your account, it is important to review and update the PBKDF2 iterations accordingly. Alternatively, Argon2id is also available, providing a more secure algorithm at the cost of a bit of performance.
 
 ### How do I change it?
 
 To enhance the security of your account by increasing the PBKDF2 iterations, navigate to the encryption key settings page under **Account Settings → Security → Keys** on the [Bitwarden Web Vault](https://vault.bitwarden.com/). Here, you can adjust the "**KDF iterations**" value to either the recommended minimum value of 600,000 or your desired setting.
 
 <div class="pswp-gallery is-flex is-gap-1">
-{{ ps.image(url='/img/web-safety/PBKDF2-iter-settings-0.png', width='1024', height='855', thumb_width='500', alt='An image illustrating where the settings page is for security keys') }}
-{{ ps.image(url='/img/web-safety/PBKDF2-iter-settings-0-1.png', width='1024', height='855', thumb_width='500', alt='An image illustrating where to set the number of PBKDF2 iterations') }}
+{{ ps.image(url='/img/web-safety/PBKDF2-iter-settings-0.png', width='1024', height='855', thumb_width='500', alt='An image illustrating where the settings page is for security keys.') }}
+{{ ps.image(url='/img/web-safety/PBKDF2-iter-settings-0-1.png', width='1024', height='855', thumb_width='500', alt='An image illustrating where to set the number of PBKDF2 iterations.') }}
 </div>
 
 ## Automatically clearing the clipboard
@@ -58,28 +58,26 @@ To activate the automatic clipboard clearing feature for the various Bitwarden a
 ### Browser Extension
 
 <div class="pswp-gallery is-flex is-gap-1">
-{{ ps.image(url='/img/web-safety/clipboard-settings-0.png', width='389', height='614', thumb_width='300', alt='An image illustrating where the settings page is for automatically clearing the clipboard on the Bitwarden browser extension') }}
-{{ ps.image(url='/img/web-safety/clipboard-settings-0-1.png', width='389', height='614', thumb_width='300', alt='An image illustrating where to change the setting for automatically clearing the clipboard on the Bitwarden browser extension') }}
+{{ ps.image(url='/img/web-safety/clipboard-settings-0.png', width='389', height='614', thumb_width='300', alt='An image illustrating where the settings page is for automatically clearing the clipboard on the Bitwarden browser extension.') }}
+{{ ps.image(url='/img/web-safety/clipboard-settings-0-1.png', width='389', height='614', thumb_width='300', alt='An image illustrating where to change the setting for automatically clearing the clipboard on the Bitwarden browser extension.') }}
 </div>
 
 ### Desktop App (Windows)
 
 <div class="pswp-gallery is-flex is-gap-1">
-{{ ps.image(url='/img/web-safety/clipboard-settings-1.png', width='897', height='614', thumb_width='500', alt='An image illustrating where the settings page is for automatically clearing the clipboard on the Bitwarden desktop app') }}
-{{ ps.image(url='/img/web-safety/clipboard-settings-1-1.png', width='897', height='614', thumb_width='500', alt='An image illustrating where to change the setting for automatically clearing the clipboard on the Bitwarden desktop app') }}
+{{ ps.image(url='/img/web-safety/clipboard-settings-1.png', width='897', height='614', thumb_width='500', alt='An image illustrating where the settings page is for automatically clearing the clipboard on the Bitwarden desktop app.') }}
+{{ ps.image(url='/img/web-safety/clipboard-settings-1-1.png', width='897', height='614', thumb_width='500', alt='An image illustrating where to change the setting for automatically clearing the clipboard on the Bitwarden desktop app.') }}
 </div>
 
 ### Mobile App (Android)
 
 <div class="pswp-gallery is-flex is-gap-1">
-{{ ps.image(url='/img/web-safety/clipboard-settings-2.png', width='1080', height='2340', thumb_width='250', alt='An image illustrating where the settings page is for automatically clearing the clipboard on the Bitwarden mobile app') }}
-{{ ps.image(url='/img/web-safety/clipboard-settings-2-1.png', width='1080', height='2340', thumb_width='250', alt='An image illustrating where to change the setting for automatically clearing the clipboard on the Bitwarden mobile app') }}
+{{ ps.image(url='/img/web-safety/clipboard-settings-2.png', width='1080', height='2340', thumb_width='250', alt='An image illustrating where the settings page is for automatically clearing the clipboard on the Bitwarden mobile app.') }}
+{{ ps.image(url='/img/web-safety/clipboard-settings-2-1.png', width='1080', height='2340', thumb_width='250', alt='An image illustrating where to change the setting for automatically clearing the clipboard on the Bitwarden mobile app.') }}
 </div>
 
 ## See Also
 
 - <https://palant.info/2023/01/23/bitwarden-design-flaw-server-side-iterations/>
-- <https://community.bitwarden.com/t/increasing-the-default-number-of-pbkdf2-for-existing-accounts/49550>
 - <https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html#pbkdf2>
-- <https://github.com/bitwarden/server/issues/589>
 - <https://www.ghacks.net/2023/01/31/bitwarden-to-increase-its-server-side-iterations-to-600000-heres-how-to-set-it-manually/>