tonybtw.com
tonybtw.com
https://git.tonybtw.com/tonybtw.com.git
git://git.tonybtw.com/tonybtw.com.git
First commit.
Diff
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..476ddcf
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Ignore Hugo's generated public folder
+/public/
+
+# Ignore backup or temp files
+*~
+*.swp
+*.swo
+.DS_Store
+Thumbs.db
+
+# Ignore Hugo cache
+/resources/_gen/
+hugo_stats.json
+
+# Ignore logs or local env files
+.env
+*.log
+
+# Ignore OS crap
+ehthumbs.db
+Icon?
+.Trashes
+.Spotlight-V100
+
diff --git a/.hugo_build.lock b/.hugo_build.lock
new file mode 100644
index 0000000..e69de29
diff --git a/archetypes/default.md b/archetypes/default.md
new file mode 100644
index 0000000..25b6752
--- /dev/null
+++ b/archetypes/default.md
@@ -0,0 +1,5 @@
++++
+date = '{{ .Date }}'
+draft = true
+title = '{{ replace .File.ContentBaseName "-" " " | title }}'
++++
diff --git a/content/org-files/dwm.org b/content/org-files/dwm.org
new file mode 100644
index 0000000..20e1f88
--- /dev/null
+++ b/content/org-files/dwm.org
@@ -0,0 +1,289 @@
+#+TITLE: DWM on Arch | Minimal Config Tutorial
+#+AUTHOR: Tony, btw
+#+DATE: 2025-04-27
+#+HUGO_TITLE: DWM on Arch | Minimal Config Tutorial
+#+HUGO_FRONT_MATTER_FORMAT: yaml
+#+HUGO_CUSTOM_FRONT_MATTER: :image "/img/dwm.png" :showTableOfContents true
+#+HUGO_BASE_DIR: ~/www/tonybtw.com
+#+HUGO_SECTION: tutorial/dwm
+#+EXPORT_FILE_NAME: index
+#+OPTIONS: toc:nil broken-links:mark
+#+HUGO_AUTO_SET_HEADLINE_SECTION: nil
+#+DESCRIPTION: A complete DWM setup on Arch Linux with minimal patches, autostart, custom bar, and keybinds.
+
+* Table of Contents :toc:noexport:
+- [[#introduction][Introduction]]
+- [[#installation][Installation]]
+- [[#modifying-configh-keybinds][Modifying config.h (Keybinds)]]
+- [[#aliases][Aliases]]
+- [[#commands][Commands]]
+- [[#autostart][Autostart]]
+- [[#patches][Patches]]
+- [[#dwmblocks][DWMBlocks]]
+- [[#custom-icons--fonts][Custom Icons & Fonts]]
+- [[#my-personal-keybinds][My personal keybinds]]
+- [[#dwm-keybindings][DWM Keybindings]]
+- [[#final-thoughts][Final Thoughts]]
+
+* Introduction
+
+This is a full DWM tutorial for Arch users who want a minimal, fast, patched build without bloat.
+
+The philosophy of the developers of dwm is as follows:
+Keep things simple, minimal and usable.
+
+#+begin_quote
+"Unfortunately, the tendency for complex, error-prone and slow software seems to be prevalent in the present-day software industry. We intend to prove the opposite with our software projects. "
+– DWM Developers
+#+end_quote
+
+Because of this philosophy, DWM is blazingly fast, and strikes a balance of minimalism, efficienty, and extensibility.
+
+You’ll get a working, beautiful setup with basic patches, autostart, a functional bar, and a clean workflow.
+
+* Installation
+
+The pre-requisites for today's tutorial are: xorg, make, gcc, and a few others. If you follow the video guide,
+I'm starting from almost a brand new arch install, so you can just start from that, and get the following packages like so:
+
+
+#+begin_src sh
+pacman -S git base-devel xorg xorg-xinit xorg-xrandr
+git clone https://git.suckless.org/dwm
+cd dwm
+sudo make clean install
+#+end_src
+
+We will need st as well, a terminal manager made by the developers of dwm. Same concept here.
+
+#+begin_src sh
+git clone https://git.suckless.org/st
+cd st
+sudo make clean install
+#+end_src
+
+Note: If you are on another distribution such as Debian, or Gentoo, getting dwm will be exactly the same, but getting the xorg server and developer tools to build dwm (base-devel on arch) will be slightly different. Refer
+to your distribution's handbook on how to get these tools.
+
+I personally am a 'startx' kinda guy, but if you have a display manager, just add dwm to your display manager list.
+
+Last thing here is to add exec dwm to the .xinitrc file:
+
+#+begin_src sh
+echo 'exec dwm' >> .xinitrc
+#+end_src
+
+* Modifying config.h (Keybinds)
+
+Alright, let's open a terminal here and start modifying config.h.
+
+#+begin_src sh
+chown -R dwm
+cd dwm; vim config.h
+#+end_src
+
+The first thing we want to do is head on down to the modkey section, and change
+mod1mask to mod4mask (this changes the mod key from alt to super)
+
+#+begin_src c
+#define MODKEY Mod4Mask
+#define TAGKEYS(KEY,TAG) \
+ { MODKEY, KEY, view, {.ui = 1 << TAG} }, \
+ { MODKEY|ControlMask, KEY, toggleview, {.ui = 1 << TAG} }, \
+ { MODKEY|ShiftMask, KEY, tag, {.ui = 1 << TAG} }, \
+ { MODKEY|ControlMask|ShiftMask, KEY, toggletag, {.ui = 1 << TAG} },
+#+end_src
+
+Let's take a look at the keybinds section here, and I'm going to change stuff for my personal needs, you feel free to tinker with this as usual. The usual suspects for me are, change opening a terminal to Super + Enter,
+change the application launcher menu to Super + D, and change closing a program to Super + Q.
+
+#+begin_src c
+static const Key keys[] = {
+ /* modifier key function argument */
+ { MODKEY, XK_r, spawn, {.v = dmenucmd } },
+ { MODKEY, XK_Return, spawn, {.v = termcmd } },
+ { MODKEY, XK_b, togglebar, {0} },
+ { MODKEY, XK_q, killclient, {0} },
+ TAGKEYS( XK_1, 0)
+ TAGKEYS( XK_2, 1)
+};
+#+end_src
+
+Once you're done with these first small changes, go ahead and run:
+
+#+begin_src sh
+sudo make clean install; pkill x; startx
+#+end_src
+
+Beautiful. You've succesfully rebuilt your first DWM binary. You can officialy tell all of your friends that you are a C developer. Let's move on to the next step.
+
+* Aliases
+
+For QoL, I like to use 2 aliases for dwm, one to just jump into the config file, and another to rebuild dwm.
+So if you want those, open up your bashrc file and add these aliases:
+
+#+begin_src bash
+alias cdwm="vim ~/dwm/config.h"
+alias mdwm="cd ~/dwm; sudo make clean install; cd -";
+#+end_src
+
+This will make it so you can jump straight into your config.h file, and rebuild dwm from anywhere and return back to whatever directory you were in after rebuilding it.
+
+* Commands
+
+Let's mess with some of the commands. I like to use rofi, although dmenu is perfectly fine if not better, rofi just ports over really nice to all my other configs, so I'll show you how to set that up in dwm.
+
+First, ensure rofi is installed, and a config.rasi exists in .config/rofi/config.rasi (feel free to copy my config.rasi file [[https://www.github.com/tonybanters/rofi][here]])
+
+Let's jump back into config.h, and look at the commands section.
+
+#+begin_src c
+static char dmenumon[2] = "0"; /* component of dmenucmd, manipulated in spawn() */
+static const char *dmenucmd[] = { "dmenu_run", "-m", dmenumon, "-fn", dmenufont, "-nb", col_gray1, "-nf", col_gray3, "-sb", col_cyan, "-sf", col_gray4, NULL };
+static const char *termcmd[] = { "st", NULL };
+static const char *firefoxcmd[] = { "firefox-bin", NULL };
+static const char *slock[] = { "slock", NULL };
+static const char *screenshotcmd[] = { "/bin/sh", "-c", "maim -s | xclip -selection clipboard -t image/png", NULL };
+static const char *rofi[] = { "rofi", "-show", "drun", "-theme", "~/.config/rofi/config.rasi", NULL };
+static const char *emacsclient[] = { "emacsclient", "-c", "-a", "", NULL };
+#+end_src
+
+These are some of my commands. Notice I have rofi, slock which is a minimal screen lock tool, a screenshot command which just utilizes main and xclip, and i've got an emacsclient command. Don't worry about that emacs command if you are below the age of 30.
+
+Make sure to add these commands to the keybind section like so:
+
+#+begin_src c
+static const Key keys[] = {
+ /* modifier key function argument */
+ { MODKEY, XK_r, spawn, {.v = dmenucmd } },
+ { MODKEY, XK_e, spawn, {.v = emacsclient } },
+ { MODKEY, XK_Return, spawn, {.v = termcmd } },
+ { MODKEY, XK_l, spawn, {.v = slock } },
+ { ControlMask, XK_Print, spawn, {.v = screenshotcmd } },
+ { MODKEY, XK_d, spawn, {.v = rofi } },
+ { MODKEY, XK_b, spawn, {.v = firefoxcmd } },
+ ...
+};
+#+end_src
+
+* Autostart
+
+Use this to launch programs like wallpaper setter, bar, compositor: (if they are not in .xinitrc)
+
+#+begin_src c
+/* add this to config.h */
+static const char *autostart[] = {
+ "dwm-autostart.sh", NULL
+};
+#+end_src
+
+Example script:
+
+#+begin_src sh
+#!/bin/sh
+xwallpaper --zoom ~/wall.png &
+dwmblocks &
+picom -b
+#+end_src
+
+* Patches
+
+Alright, patches are something that deters people from using dwm because they feel it can be daunting, but its really easy.
+
+Head on over to: [[https://dwm.suckless.org/patches][DWM's Official Community Patch List]]
+
+Grab a patch, vanity-gaps for example, and right click the patch, and save link as. Put this in dwm/patches/
+
+To patch your dwm, just run
+
+#+begin_src sh
+patch -i ~/dwm/patches/name-of-patch.diff
+#+end_src
+
+Hopefully you don't get any errors, but if you do, they are usually pretty simple to resolve. Checkout my video on dwm to learn more about resolving patches.
+
+After that, remake dwm with the `mdwm` alias, and restart x. Boom, your patch is ready to go.
+
+* DWMBlocks
+
+DWM Blocks is a program that renders blocks in the top right of the dwm bar. Similar to widgets in Qtile, or polybar modules. These blocks can all be customizable sh scripts, and ricing this will be for another tutorial, but for now the base version is good enough. You can take mine as well:
+
+Install:
+#+begin_src sh
+git clone https://github.com/tonybanters/dwmblocks
+cd dwmblocks
+sudo make clean install
+#+end_src
+
+Basic usage:
+Add `dwmblocks &` to your autostart script.
+
+* Custom Icons & Fonts
+For a custom font, I like jetbrains mono nerd font, and we can just install it like so:
+
+#+begin_src sh
+sudo pacman -S ttf-jetbrains-mono-nerd
+#+end_src
+
+And we can set that font in `config.h`:
+
+#+begin_src c
+static const char *fonts[] = { "JetBrainsMono Nerd Font:size=14" };
+#+end_src
+
+* My personal keybinds
+
+If you want to just clone my build of dwm, thats perfectly fine, just take a look at this table here for my keybinds as a guide:
+
+* DWM Keybindings
+
+| Modifier | Key | Action | Description |
+|---------------------+-------------+-------------------+-------------------------------------|
+| MOD | r | spawn | Launch dmenu |
+| MOD | Return | spawn | Launch terminal |
+| MOD | l | spawn | Lock screen (slock) |
+| Ctrl | Print | spawn | Screenshot |
+| MOD | d | spawn | Launch Rofi |
+| MOD | b | togglebar | Toggle top bar |
+| MOD | j | focusstack +1 | Focus next window |
+| MOD | k | focusstack -1 | Focus previous window |
+| MOD | i | incnmaster +1 | Increase master windows |
+| MOD | p | incnmaster -1 | Decrease master windows |
+| MOD | g | setmfact -0.05 | Shrink master area |
+| MOD | h | setmfact +0.05 | Grow master area |
+| MOD | z | incrgaps +3 | Increase gaps |
+| MOD | x | incrgaps -3 | Decrease gaps |
+| MOD | a | togglegaps | Toggle gaps |
+| MOD+Shift | a | defaultgaps | Reset gaps |
+| MOD | Tab | view | Toggle last workspace |
+| MOD | q | killclient | Close focused window |
+| MOD | t | setlayout tile | Set tiling layout |
+| MOD | f | setlayout float | Set floating layout |
+| MOD | m | setlayout monocle | Set monocle layout |
+| MOD | c | setlayout custom1 | Custom layout (slot 3) |
+| MOD | o | setlayout custom2 | Custom layout (slot 4) |
+| MOD+Shift | Return | setlayout default | Reset to default layout |
+| MOD+Shift | f | fullscreen | Toggle fullscreen |
+| MOD+Shift | Space | togglefloating | Toggle floating |
+| MOD | 0 | view all tags | View all workspaces |
+| MOD+Shift | 0 | tag all | Move window to all tags |
+| MOD | , | focusmon -1 | Focus monitor left |
+| MOD | . | focusmon +1 | Focus monitor right |
+| MOD+Shift | , | tagmon -1 | Send window to monitor left |
+| MOD+Shift | . | tagmon +1 | Send window to monitor right |
+| MOD | 1–9 | view tag N | Switch to tag N |
+| MOD+Shift | 1–9 | tag window to N | Move window to tag N |
+| MOD+Shift | q | quit | Exit DWM |
+| (none) | XF86Audio+ | pactl +3% | Raise volume |
+| (none) | XF86Audio- | pactl -3% | Lower volume |
+
+#+caption: Default keybindings in my DWM setup
+
+* Final Thoughts
+
+This setup is minimalist but powerful. From here, you can add more patches (like systray or gaps), or just keep it lean.
+
+Thanks so much for checking out this tutorial. If you got value from it, and you want to find more tutorials like this, check out
+my youtube channel here: [[https://youtube.com/@tony-btw][YouTube]], or my website here: [[https://www.tonybtw.com][tony,btw]]
+
+You can support me here: [[https://ko-fi.com/tonybtw][kofi]]
diff --git a/content/org-files/hyprland.org b/content/org-files/hyprland.org
new file mode 100644
index 0000000..9d9c193
--- /dev/null
+++ b/content/org-files/hyprland.org
@@ -0,0 +1,840 @@
+#+TITLE: Hyprland on Arch — Minimal Setup Guide
+#+AUTHOR: Tony, btw
+#+DATE: 2025-08-24
+#+HUGO_TITLE: Hyprland on Arch | Minimal Customization Tutorial
+#+HUGO_FRONT_MATTER_FORMAT: yaml
+#+HUGO_CUSTOM_FRONT_MATTER: :image "/img/hyprland.png" :showTableOfContents true
+#+HUGO_CUSTOM_FRONT_MATTER: :showTableOfContents true
+#+HUGO_BASE_DIR: ~/www/tonybtw.com
+#+HUGO_SECTION: tutorial/hyprland
+#+EXPORT_FILE_NAME: index
+#+OPTIONS: toc:nil broken-links:mark
+#+HUGO_AUTO_SET_HEADLINE_SECTION: nil
+#+DESCRIPTION: A zero to hero Hyprland setup, which if you follow along, will help you produce a rice thats truly yours.
+
+* Table of Contents :toc:noexport:
+- [[#intro][Intro]]
+- [[#install-arch-linux][Install Arch Linux]]
+- [[#install-required-tools-for-hyprland][Install required tools for hyprland]]
+- [[#create-config-file][Create config file]]
+- [[#load-hyprland][Load hyprland]]
+- [[#foot-config][Foot config]]
+- [[#hyprland-and-waybar][Hyprland and Waybar]]
+- [[#waybar][Waybar]]
+ - [[#configjsonc][Config.jsonc]]
+ - [[#styles][Styles]]
+- [[#wallpaper][Wallpaper]]
+- [[#wofi][Wofi]]
+- [[#hyprland-keybinds][Hyprland Keybinds]]
+ - [[#directional-focus][Directional Focus]]
+ - [[#workspaces][Workspaces]]
+ - [[#special-workspace][Special Workspace]]
+ - [[#scroll-to-switch-workspaces][Scroll to Switch Workspaces]]
+- [[#final-thoughts][Final Thoughts]]
+
+* Intro
+What's up guys, my name is Tony, and today, I'm going to give you a quick and painless guide
+on installing Hyprland on Arch linux.
+
+Hyprland is a dynamic window manager and wayland compositor that is highly customizable, and it
+emphasizes aesthetics, functionality, and extensibility.
+
+We're going to be using Arch linux today, but hyprland is available on most distrobutions, so if you
+are a NixOS user, or Gentoo, or even Debian, check out the wiki for installation instructions, but other
+than that, the customization aspect of this guide will still apply to you.
+
+At the end of this guide, you will no longer be using x11, and you will be able to fully
+customize your own build of hyprland on your own hardware.
+
+* Install Arch Linux
+- basic stuff
+- pacstrap everything
+
+The first thing I'm going to do is install a fresh Arch linux, and since today's guide is not about
+how to install Arch linux, I'm going to speed through that process and catch you guys at the login
+screen. If you want help installing arch linux, check out my Arch Linux tutorial.
+
+[[https://youtu.be/oeDbo-HRaZo][Arch Linux Tutorial]]
+
+* Install required tools for hyprland
+
+Alright, so we're staring at a very minimal arch build, we only installed base, base-devel, linux, linux-firmware, and sof-firmware.
+That's all you need to get started, and if you are an arch user, you can start basically anywhere as long as you've installed these
+basic packages, and got a bootloader up and running.
+
+So lets start by installing all of the required packages for today's setup. The beatiful thing about starting on a fresh install
+like this is that, you guys get to see the most minimal setup as possible in terms of packages. So let's grab all the hyprland
+tools.
+
+The 'hyprland' package actually comes with a lot on Arch linux. It comes with the wayland compositor among other things. Let's grab that,
+xorg-xwayland (just in case we need to use xwayland utils), and hyprpaper (a minimal hyprland wallpaper tool)
+
+[[https://archlinux.org/packages/extra/x86_64/hyprland/][Hyprland Arch Wiki Page]]
+
+For other packages, I'm going to be using vim today to edit all the files, you can feel free to use your text editor of choice.
+We need wofi (an application launcher for wayland), foot (a terminal emulator in wayland), waybar (the powerbar that we'll be using today),
+dolphin (a file manager that works in wayland), and firefox. Let's also grab git for version controlling.
+
+Lastly, we want a nerd font to render some of the icons here, so lets grab `ttf-jetbrains-mono-nerd`
+
+And that's basically it. We really don't need much, and if we need anything else along the way, we can just grab it from pacman.
+
+- hyprland
+- vim
+- git
+- foot
+- waybar
+- firefox
+- wofi
+- kitty (hyprland default terminal)
+- dolphin
+- jetbrains mono nerd
+
+#+begin_src sh
+sudo pacman -S hyprland xorg-xwayland hyprpaper
+sudo pacman -S vim wofi git foot waybar firefox dolphin
+sudo pacman -S ttf-jetbrains-mono-nerd
+#+end_src
+
+* Create config file
+
+Let's create the directory for the hyprland config file here, and copy the template config file into it. This is important because we're using foot
+instead of kitty, we have to do this before launching hyprland.
+
+#+begin_src sh
+mkdir -p ~/.config/hypr; cp /usr/share/hypr/hyprland.conf ~/.config/hypr/
+#+end_src
+
+Edit this file, swap kitty with foot.
+
+#+begin_src hyprlang
+$terminal = foot;
+#+end_src
+
+* Load hyprland
+
+We're ready to launch hyprland, and we can do so easily by just typing hyprland.
+
+#+begin_src sh
+hyprland
+#+end_src
+
+From inside of hyprland, we'll open a terminal with super Q
+and lets immediately edit the monitors block:
+
+Since my monitor is 1920x1080, I'll set that in my hyprland config. Also, we'll change this last 'auto' flag to 1.0.
+This is the scale flag, and auto will set it to 1.5.
+
+#+begin_example
+monitor=,1920x1080,auto,1.0
+#+end_example
+
+You can display what monitor we have with:
+
+#+begin_src sh
+hyprctl monitors
+#+end_src
+
+* Foot config
+
+Now lets jump into our foot config to quickly make our terminal readable
+lets set this up,
+#+begin_src sh
+mkdir .config/foot
+vim .config/foot/foot.ini
+#+end_src
+
+#+begin_src ini
+font=JetBrainsMono NF:size=16
+pad=8x8 center-when-maximized-and-fullscreen
+#+end_src
+
+And we're going to go with a tokyonight theme for todays rice, so lets check this website out for tokyonight ports. I'll leave a link
+to this site below the subscribe button of this video.
+
+[[https://wixdaq.github.io/Tokyo-Night-Website/ports.html][Tokyo Night Theme Site]]
+
+Let's navigate to 'foot', and copy this colors block, and add it to our foot.ini file.
+
+#+begin_src ini
+[colors]
+foreground=c0caf5
+background=1a1b26
+
+## Normal/regular colors (color palette 0-7)
+regular0=15161E # black
+regular1=f7768e # red
+regular2=9ece6a # green
+regular3=e0af68 # yellow
+regular4=7aa2f7 # blue
+regular5=bb9af7 # magenta
+regular6=7dcfff # cyan
+regular7=a9b1d6 # white
+
+## Bright colors (color palette 8-15)
+bright0=414868 # bright black
+bright1=f7768e # bright red
+bright2=9ece6a # bright green
+bright3=e0af68 # bright yellow
+bright4=7aa2f7 # bright blue
+bright5=bb9af7 # bright magenta
+bright6=7dcfff # bright cyan
+bright7=c0caf5 # bright white
+
+## dimmed colors (see foot.ini(5) man page)
+dim0=ff9e64
+dim1=db4b4b
+
+alpha=0.9
+#+end_src
+
+Alright that looks great. Let's jump into the next step
+
+* Hyprland and Waybar
+
+When we modify hyprlands config file, it automatically refreshes hyprland on save, which is convenient.
+lets jump back into the hyprland.conf file and change a few things for QoL
+
+We're gonna use waybar today, and in order to quickly reload that, we can use one line command here:
+Also, to add it to start when we load hyprland, lets add it to exec-once.
+
+#+begin_src conf
+$reload_waybar = pkill waybar; waybar &
+exec-once = waybar &
+#+end_src
+
+And we scroll down here and ensure our reload waybar script is binded:
+
+#+begin_src conf
+bind = $mainMod, R, exec, $reload_waybar
+#+end_src
+
+While we're in the binding section, lets clean up some of these binds. I like Q for quit, Enter for
+terminal, and D for $menu (which is wofi)
+
+#+begin_src conf
+bind = $mainMod, Return, exec, $terminal
+bind = $mainMod, Q, killactive,
+bind = $mainMod, D, exec, $menu
+#+end_src
+
+Now that these are good to go, lets do one or two more huge qol updates:
+
+#+begin_src conf
+input {
+ # xset r rate 200 35
+ # This allows your key repeat rate set to 200ms delay, 35 repeats per second
+ repeat_rate = 35
+ repeat_delay = 200
+}
+
+cursor {
+ # this ensures your mouse cursor doesn't glitch out
+ inactive_timeout = 30
+ no_hardware_cursors = true
+}
+#+end_src
+
+Alright, we should be good to go for now and move on to the next step.
+
+* Waybar
+
+Now that Waybar is binded to super R, lets go ahead and load it once with super R.
+Let's customize this by opening up the config file:
+Lets copy over the default waybar config, since its loading a null config file now.
+To ensure we can edit it, we need to change ownership of the file from root to tony. (use your username here)
+
+#+begin_src bash
+sudo cp -R /etc/xdg/waybar ~/.config/waybar
+sudo chown -R tony:tony .config/waybar
+vim .config/waybar/.
+#+end_src
+
+So this has 2 parts to it, style.css, and config.jsconc. let's start with config.jsonc, thats where all the
+widgets, and workspace stuff lives.
+
+At the top of this file we see layer, position, etc. If you are a bottom bar user, you can swap this to bottom, and it would look like this:
+We're gonna put the bar on the top today, and build it out from there.
+
+** Config.jsonc
+*** Left Modules
+
+So we see in config.jsonc, there are a bunch of modules loaded on the left side.
+
+#+begin_src json
+"modules-left": [
+ "sway/workspaces",
+ "sway/mode",
+ "sway/scratchpad",
+ "custom/media"
+],
+#+end_src
+
+We can delete the bottom 3 of these, they aren't needed. We only want the workspaces module on the left for now
+and since we're not using sway, we're using hyprland, lets just change sway to hyprland. Sway is an i3 clone for
+wayland. Will be a video on that in the future.
+
+#+begin_src json
+"modules-left": [
+ "hyprland/workspaces",
+],
+#+end_src
+
+So this module exists, but its not defined in our file, lets go down to where the sway/workspaces module was defined.
+Luckily, these modules use the same syntax, so all we need to do is switch sway to hyprland here too.
+
+#+begin_src json
+"hyprland/workspaces": {
+ "disable-scroll": true,
+ "all-outputs": true,
+ "warp-on-scroll": false,
+ "format": "{name}: {icon}",
+ "format-icons": {
+ "1": "",
+ "2": "",
+ "3": "",
+ "4": "",
+ "5": "",
+ "urgent": "",
+ "focused": "",
+ "default": ""
+ }
+},
+#+end_src
+
+So lets just uncomment this block, and change 'sway' to 'hyprland'.
+Lets save this file, and reload waybar with that super R keybind.
+
+And now we see this workpace module on the left side. Beautiful. Let's clean this up a little bit.
+
+These Icons are customizable, similar to my dwm config, where if you know whats going on that workspace
+at all times, you can use a font awesome or nerd font icon for that application, and throw it on that
+workspace number. For us today, we're going to just go with the classic 1,2,3,4 ... so lets delete this block
+here, and change this to just {name}
+
+#+begin_src json
+"hyprland/workspaces": {
+ "disable-scroll": true,
+ "all-outputs": true,
+ "warp-on-scroll": false,
+ "format": "{name}",
+},
+#+end_src
+
+We can reload this again with super R, and there we go. much better already.
+
+Also, we'll add persistent-workspaces, so that all the numbers show even if they aren't active.
+
+#+begin_src json
+ "persistent-workspaces": {
+ "*": 9,
+ }
+#+end_src
+
+One more thing for now, lets add the window module that displays what is open in your current window.
+lets just put it on the left side for now
+
+And let's define this module here, and add 2 attributes to it:
+max-length, and separate-outputs: false
+Max length is just making the max length 40 characters, so it doesn't impede on the right side that we'll setup next.
+Separate-outputs: This is for those of you with multiple monitors, it will show the window thats focused on all monitors
+instead of showing it on a per monitor basis.
+
+#+begin_src json
+"modules-left": [
+ "hyprland/workspaces",
+ "hyprland/window"
+],
+
+"hyprland/window": {
+ "max-length": 40,
+ "separate-outputs": false
+},
+#+end_src
+
+Let's work on some of these right-side modules.
+
+*** Center Module
+
+Lets leave this empty for now. It's easier to handle spacing imo if we just do left and right side modules.
+
+#+begin_src json
+"modules-center": [],
+#+end_src
+
+*** Right Modules
+
+Lets start by deleting a lot of these modules. most of them aren't needed, and we are going for a semi-minimal
+config today. Remember, that you can take this information from this tutorial, and really make your bar custom for
+your own setup.
+
+#+begin_src json
+"modules-right": [
+ "mpd",
+ "idle_inhibitor",
+ "pulseaudio",
+ "network",
+ "power-profiles-daemon",
+ "cpu",
+ "memory",
+ "temperature",
+ "backlight",
+ "keyboard-state",
+ "sway/language",
+ "battery",
+ "battery#bat2",
+ "clock",
+ "tray",
+ "custom/power"
+],
+#+end_src
+
+Let's trim this down to just this for now: we can remove all of these, lets remove temperature
+, lets get backlight, keyboard-state, language out of here. if you're on a laptop, keep batery. otherwise, get rid of it.
+lets keep clock, and keep tray. we'll add some in here as well, but this is good for now.
+
+#+begin_src json
+"modules-right": [
+ "network",
+ "cpu",
+ "memory",
+ // "battery",
+ "clock",
+ "tray"
+],
+#+end_src
+
+Let's reload this with super R, and there we go. super minimal config for now. lets add 1 or 2 custom modules here, and then move onto
+the styling.
+
+Let's make this network widget super minimal.
+
+#+begin_src json
+"network": {
+ "format": "Online",
+ "format-disconnected": "Disconnected ()"
+},
+#+end_src
+
+Let's change the CPU widget to something more clean:
+
+#+begin_src json
+"cpu": {
+ "format": "CPU: {usage}%",
+ "tooltip": false
+},
+#+end_src
+
+Same thing for RAM:
+
+#+begin_src json
+"memory": {
+ "format": "Mem: {used}GiB"
+},
+#+end_src
+
+Let's add a disk widget, and this is inspired by DT's xmonad widgets a little bit, which i've been interested in for my qtile setup.
+
+Interval so that it doesnt run every 1 seconds (the default value)
+#+begin_src json
+"disk": {
+ "interval": 60,
+ "path": "/",
+ "format": "Disk: {free}",
+},
+#+end_src
+
+And let's add "disk" to the right modules array:
+
+#+begin_src json
+"modules-right": [
+ "cpu",
+ "memory",
+ "disk",
+ "battery",
+ "clock",
+ "tray"
+],
+#+end_src
+
+Heres the battery modifications: (for those of you with laptops, this should be included)
+
+#+begin_src json
+"battery": {
+ "states": {
+ "good": 80,
+ "warning": 30,
+ "critical": 15
+ },
+ "format": "Bat: {capacity}% {icon} {time}",
+ "format-alt": "Bat: {capacity}%",
+ "format-time": "{H}:{M}",
+ "format-icons": ["", "", "", "", ""]
+},
+#+end_src
+
+And lets add a simple separator module as follows:
+
+#+begin_src json
+"custom/sep": {
+ "format": "|",
+ "interval": 0,
+ "tooltip": false
+},
+#+end_src
+
+Now lets add this separator in between all of our widgets. it will look weird for now, but we'll fix the styling after.
+
+#+begin_src json
+"modules-left": [
+ "hyprland/workspaces",
+ "custom/sep",
+ "hyprland/window",
+ "custom/sep"
+],
+"modules-center": [
+],
+
+"modules-right": [
+ "custom/sep",
+ "network",
+ "custom/sep",
+ "cpu",
+ "custom/sep",
+ "memory",
+ "custom/sep",
+ "disk",
+ "custom/sep",
+ "clock",
+ "custom/sep",
+ "tray"
+],
+#+end_src
+
+And thats it for the modules, we can move into the styles of these now.
+
+** Styles
+
+The first thing we want to do is have our colors match the tokyonight aesthetic, so lets define these colors at the top of the file. Note, you can just copy and
+paste these from my github repo.
+
+[[https://github.com/tonybanters/hyprland-btw][Github Repo]]
+
+#+begin_src css
+@define-color bg #1a1b26;
+@define-color fg #a9b1d6;
+@define-color blk #32344a;
+@define-color red #f7768e;
+@define-color grn #9ece6a;
+@define-color ylw #e0af68;
+@define-color blu #7aa2f7;
+@define-color mag #ad8ee6;
+@define-color cyn #0db9d7;
+@define-color brblk #444b6a;
+@define-color wht #ffffff;
+#+end_src
+
+Alright, now we see the global styles with '*', lets add some options here.
+
+#+begin_src css
+,* {
+ font-family: "JetBrainsMono Nerd Font", monospace;
+ font-size: 16px;
+ font-weight: bold;
+}
+#+end_src
+
+We're just changing the font to Jetbrains mono, and we are making it bold, and increasing the zie a little bit so its readable.
+
+Now for the actual window on waybar, lets change some stuff here:
+#+begin_src css
+window#waybar {
+ background: @bg;
+ color: @fg;
+}
+#+end_src
+
+Let's get rid of the border, and get rid of the transition propertys for now. Keep it minimal,
+since we added those variables at the top for the colors, its going to make our lives much easier when setting up these styles.
+
+And yea, this is already looking much better as far as usability, and stylistically speaking. Let's keep going.
+
+Lets handle the behaviour of the workspace toggles, so that the colors of the workspaces that have applications running on them
+are all the same, but there is a visual indicator of the active workspace.
+
+#+begin_src css
+#workspaces button {
+ padding: 0 6px;
+ color: @cyn;
+ background: transparent;
+ border-bottom: 3px solid @bg;
+}
+#workspaces button.active {
+ color: @cyn;
+ border-bottom: 3px solid @mag;
+}
+#workspaces button.empty {
+ color: @wht;
+}
+#workspaces button.empty.active {
+ color: @cyn;
+ border-bottom: 3px solid @mag;
+}
+#+end_src
+
+So this basically says that if the workspace is active, it will be visually indicated with the purple underline. if it
+is not active, but not empty, it will still be cyan, but not be underlined. Waybar has a weird issue where when you swap
+to a new workspace, and dont open an application on it yet, its technically empty, and active. so we will cover for that case here
+as well. Feel free to copy and paste this from my config file.
+
+Let's clean up this file now. I think we can delete pretty much everything except this massive block that just adds padding to every
+widget here.
+
+We're going to add custom separators here, so lets add that to this list, and add the css for it now, so when we jump back into the json file
+we can already have it styled
+
+#+begin_src css
+#clock,
+#custom-sep,
+#battery,
+#cpu,
+#memory,
+#disk,
+#network,
+#tray {
+ padding: 0 8px;
+ color: @white;
+}
+
+#custom-sep {
+ color: @brblk;
+}
+#+end_src
+
+This tells waybar to show a white font for all the text on all these widgets by default, and
+also tells the separator to use this special black font, which will add later.
+
+Let's quickly go through these right side widgets, and make them more minimal.
+I like the underline style here, feel free to tinker with the colors on your setup, but im going for the
+more minimal tokyonight style.
+
+#+begin_src css
+#clock {
+ color: @cyn;
+ border-bottom: 4px solid @cyn;
+}
+
+#battery {
+ color: @mag;
+ border-bottom: 4px solid @mag;
+}
+
+#disk {
+ color: @ylw;
+ border-bottom: 4px solid @ylw;
+}
+
+#memory {
+ color: @mag;
+ border-bottom: 4px solid @mag;
+}
+
+#cpu {
+ color: @grn;
+ border-bottom: 4px solid @grn;
+}
+
+#network {
+ color: @blu;
+ border-bottom: 4px solid @blu;
+}
+#+end_src
+
+Alright, thats enough css for one day... This bar is looking really good. Feel free to customize it even further from here.
+Let's setup wofi, add a wallpaper, and get this show on the road.
+
+* Wallpaper
+First thing we need to do is get a wallpaper.. so lets head over to firefox and grab this one i picked out for this rice, its on my github.
+Let's save this into a folder in the home directory called walls, and save it is wall1.png
+
+Now let's create a hyprpaper.conf file in the hypr directory like so:
+
+vim .config/hypr/hyprpaper.conf
+#+begin_src conf
+preload = ~/walls/wall1.jpg
+wallpaper = ,~/walls/wall1.jpg
+#+end_src
+
+Now in our hyprland.conf, lets turn on hyprpaper like so:
+
+#+begin_src
+exec-once waybar & hyprpaper
+#+end_src
+
+I'll run this in a terminal here but it will now always launch when we start hyprland. And there we go. Awesome
+Last thing to do is get a proper config for wofi.
+
+* Wofi
+
+For this wofi config, we'll grab it from that same website of tokyonight configs, but I modified it slightly as follows:
+#+begin_src sh
+mkdir .config/wofi
+vim .config/wofi/config
+#+end_src
+
+#+begin_src
+# mode & placement
+show=drun
+location=top
+width=700
+lines=8
+columns=2
+dynamic_lines=false
+
+# icons
+allow_images=true
+image_size=36
+
+# search & UX
+matching=fuzzy
+insensitive=true
+hide_scroll=false
+prompt=
+
+# terminal
+term=foot
+
+# keybinds (vim-ish)
+key_up=Ctrl-k
+key_down=Ctrl-j
+key_left=Ctrl-h
+key_right=Ctrl-l
+key_submit=Return
+key_forward=Tab
+key_backward=Shift-ISO_Left_Tab
+
+# stylesheet
+style=/home/tony/.config/wofi/style.css
+#+end_src
+
+And to make that stylesheet, its right here in the style.css file of that config,
+
+so lets make this file:
+#+begin_src sh
+vim ~/.config/wofi/style.css
+#+end_src
+
+#+begin_src css
+,* {
+ font-family: "JetBrainsMono Nerd Font", monospace;
+ font-size: 16px;
+ font-weight: bold;
+}
+
+window {
+ margin: 0px;
+ border: 2px solid #414868;
+ border-radius: 5px;
+ background-color: #24283b;
+ font-family: monospace;
+ font-size: 12px;
+}
+
+#input {
+ margin: 5px;
+ border: 1px solid #24283b;
+ color: #c0caf5;
+ background-color: #24283b;
+}
+
+#input image {
+ color: #c0caf5;
+}
+
+#inner-box {
+ margin: 5px;
+ border: none;
+ background-color: #24283b;
+}
+
+#outer-box {
+ margin: 5px;
+ border: none;
+ background-color: #24283b;
+}
+
+#scroll {
+ margin: 0px;
+ border: none;
+}
+
+#text {
+ margin: 5px;
+ border: none;
+ color: #c0caf5;
+}
+
+#entry:selected {
+ background-color: #414868;
+ font-weight: normal;
+}
+
+#text:selected {
+ background-color: #414868;
+ font-weight: normal;
+}
+#+end_src
+
+And this system is looking pretty good. We got our waybar all setup, our widgets, we have our foot terminal looking good, our wallpaper, and our wofi config.
+This is just the beginning of hyprland, but this should be a great source for you to start customizing your own personal setup.
+
+* Hyprland Keybinds
+
+| Mod Key | Key / Input | Action | Target / Notes |
+|---------------+--------------+------------------------+-------------------------|
+| SUPER | Return | exec | $terminal |
+| SUPER | Q | killactive | |
+| SUPER | M | exit | |
+| SUPER | E | exec | $fileManager |
+| SUPER | V | togglefloating | |
+| SUPER | D | exec | $menu |
+| SUPER | R | exec | $reload_waybar |
+| SUPER | P | pseudo | dwindle only |
+| SUPER | J | togglesplit | dwindle only |
+
+** Directional Focus
+
+| Mod Key | Key | Action | Direction |
+|---------------+----------+-------------+-----------|
+| SUPER | left | movefocus | l |
+| SUPER | right | movefocus | r |
+| SUPER | up | movefocus | u |
+| SUPER | down | movefocus | d |
+
+** Workspaces
+
+| Mod Key | Key | Action | Workspace |
+|---------------+-----------+-------------------+-----------|
+| SUPER | 1–0 | workspace | 1–10 |
+| SUPER+SHIFT | 1–0 | movetoworkspace | 1–10 |
+
+** Special Workspace
+
+| Mod Key | Key | Action | Workspace |
+|---------------+-----------+-------------------------+----------------|
+| SUPER | S | togglespecialworkspace | magic |
+| SUPER+SHIFT | S | movetoworkspace | special:magic |
+
+** Scroll to Switch Workspaces
+
+| Mod Key | Mouse Input | Action | Workspace |
+|---------------+-------------+------------+---------------|
+| SUPER | mouse_down | workspace | e+1 (next) |
+| SUPER | mouse_up | workspace | e-1 (previous) |
+
+* Final Thoughts
+
+Thanks so much for checking out this tutorial. If you got value from it, and you want to find more tutorials like this, check out
+my youtube channel here: [[https://youtube.com/@tony-btw][YouTube]], or my website here: [[https://www.tonybtw.com][tony,btw]]
+
+You can support me here: [[https://ko-fi.com/tonybtw][kofi]]
diff --git a/content/org-files/neovim.org b/content/org-files/neovim.org
new file mode 100644
index 0000000..3f610f1
--- /dev/null
+++ b/content/org-files/neovim.org
@@ -0,0 +1,348 @@
+#+TITLE: Neovim on Linux — Complete IDE Tutorial
+#+AUTHOR: Tony, btw
+#+DATE: 2025-05-10
+#+HUGO_CUSTOM_FRONT_MATTER: :image "/img/neovim.png" :showTableOfContents true
+#+HUGO_BASE_DIR: ~/www/tonybtw.com
+#+HUGO_SECTION: tutorial/neovim
+#+EXPORT_FILE_NAME: index
+#+OPTIONS: toc:nil broken-links:mark
+#+HUGO_AUTO_SET_HEADLINE_SECTION: nil
+#+HUGO_TITLE: Neovim | Complete IDE Tutorial
+#+DESCRIPTION: A quick and painless guide on installing and configuring Neovim, and how to use it as your full daily driver IDE, btw.
+#+IMAGE: /img/neovim.png
+
+* Intro
+
+A clean and painless guide to turning Neovim into a modern IDE.
+
+Neovim is a Vim-based text editor built for extensibility and usability. In this tutorial, you’ll learn how to set it up with plugins, keybinds, and full LSP support. This guide assumes you're using a Unix-like system and are comfortable with basic terminal commands.
+
+* Install Neovim and dependencies
+
+Use your system’s package manager to install Neovim, along with a few tools that will be required later (like npm and ripgrep).
+
+#+begin_src sh
+# Gentoo
+sudo emerge app-editors/neovim
+sudo emerge net-libs/nodejs
+sudo emerge sys-apps/ripgrep
+
+# Arch
+sudo pacman -S neovim nodejs npm ripgrep
+#+end_src
+
+* Set up your Neovim config directory
+
+Create your config folder and add the main config file.
+
+#+begin_src sh
+mkdir -p ~/.config/nvim
+cd ~/.config/nvim
+nvim .
+#+end_src
+
+In Neovim, press =%= to create a new file named =init.lua=:
+
+#+begin_src lua
+print("I use Neovim by the way")
+#+end_src
+
+Save and quit with =:wq=, then reopen Neovim.
+
+* Create a Lua module for options
+
+#+begin_src sh
+mkdir -p ~/.config/nvim/lua/config
+nvim lua/config/options.lua
+#+end_src
+
+#+begin_src lua
+vim.opt.number = true
+vim.opt.relativenumber = true
+vim.opt.cursorline = true
+vim.opt.shiftwidth = 4
+#+end_src
+
+Then in =init.lua=:
+
+#+begin_src lua
+require("config.options")
+#+end_src
+
+* Add keybindings
+
+#+begin_src lua
+vim.g.mapleader = " "
+vim.keymap.set("n", "<leader>cd", vim.cmd.Ex)
+#+end_src
+
+In =init.lua=:
+
+#+begin_src lua
+require("config.keybinds")
+#+end_src
+
+* Install Lazy.nvim
+
+Clone it into your runtime path.
+
+#+begin_src lua
+local lazypath = vim.fn.stdpath("data") .. "/lazy/lazy.nvim"
+if not vim.loop.fs_stat(lazypath) then
+ vim.fn.system({
+ "git",
+ "clone",
+ "--filter=blob:none",
+ "https://github.com/folke/lazy.nvim.git",
+ "--branch=stable",
+ lazypath,
+ })
+end
+vim.opt.rtp:prepend(lazypath)
+
+require("lazy").setup({})
+#+end_src
+
+Then:
+
+#+begin_src lua
+require("config.lazy")
+#+end_src
+
+* Add a theme plugin
+
+#+begin_src lua
+return {
+ "folke/tokyonight.nvim",
+ config = function()
+ vim.cmd.colorscheme("tokyonight")
+ end,
+}
+#+end_src
+
+* Add Telescope for fuzzy finding
+
+#+begin_src lua
+return {
+ "nvim-telescope/telescope.nvim",
+ dependencies = { "nvim-lua/plenary.nvim" },
+ config = function()
+ local builtin = require("telescope.builtin")
+ vim.keymap.set("n", "<leader>ff", builtin.find_files)
+ vim.keymap.set("n", "<leader>fg", builtin.live_grep)
+ vim.keymap.set("n", "<leader>fb", builtin.buffers)
+ vim.keymap.set("n", "<leader>fh", builtin.help_tags)
+ end,
+}
+#+end_src
+
+* Add Treesitter for syntax highlighting
+
+#+begin_src lua
+return {
+ "nvim-treesitter/nvim-treesitter",
+ build = ":TSUpdate",
+ config = function()
+ require("nvim-treesitter.configs").setup({
+ highlight = { enable = true },
+ indent = { enable = true },
+ ensure_installed = { "lua" },
+ auto_install = false,
+ })
+ end,
+}
+#+end_src
+
+* Add Harpoon for file bookmarking
+
+#+begin_src lua
+return {
+ "ThePrimeagen/harpoon",
+ config = function()
+ local harpoon = require("harpoon")
+ vim.keymap.set("n", "<leader>a", function() harpoon:list():add() end)
+ vim.keymap.set("n", "<C-e>", function() harpoon.ui:toggle_quick_menu(harpoon:list()) end)
+ end,
+}
+#+end_src
+
+* Add LSP, autocompletion, and snippets
+
+#+begin_src lua
+return {
+ "neovim/nvim-lspconfig",
+ dependencies = {
+ "williamboman/mason.nvim",
+ "hrsh7th/nvim-cmp",
+ "L3MON4D3/LuaSnip",
+ },
+ config = function()
+ require("mason").setup()
+ require("mason-lspconfig").setup({ ensure_installed = { "lua_ls" } })
+
+ local lspconfig = require("lspconfig")
+ lspconfig.lua_ls.setup({})
+
+ local cmp = require("cmp")
+ cmp.setup({
+ snippet = {
+ expand = function(args)
+ require("luasnip").lsp_expand(args.body)
+ end,
+ },
+ mapping = cmp.mapping.preset.insert({
+ ["<Tab>"] = cmp.mapping.select_next_item(),
+ ["<S-Tab>"] = cmp.mapping.select_prev_item(),
+ }),
+ sources = { { name = "nvim_lsp" }, { name = "luasnip" } },
+ })
+ end,
+}
+#+end_src
+
+* One-liner utility plugins
+
+#+begin_src lua
+return {
+ { "tpope/vim-fugitive" },
+ { "ojroques/nvim-osc52" },
+ {
+ "norcalli/nvim-colorizer.lua",
+ config = function()
+ require("colorizer").setup()
+ end,
+ },
+}
+#+end_src
+
+* Final =init.lua= Example
+
+#+begin_src lua
+require("config.options")
+require("config.keybinds")
+require("config.lazy")
+#+end_src
+#+begin_src sh
+/home/tony/.config/nvim
+├── init.lua
+├── lazy-lock.json
+├── lua
+│ ├── config
+│ │ ├── keybinds.lua
+│ │ ├── lazy.lua
+│ │ └── options.lua
+│ └── plugins
+│ ├── colors.lua
+│ ├── harpoon.lua
+│ ├── init.lua
+│ ├── lsp.lua
+│ ├── lualine.lua
+│ ├── one-liners.lua
+│ ├── orgmode.lua
+│ ├── telescope.lua
+│ └── treesitter.lua
+├── plugin
+│ └── flterm.lua
+└── README.md
+
+5 directories, 16 files
+
+#+end_src
+
+* My keybinds
+
+If you want to just copy my nvim config, my keybind documentation is here:
+
+** General
+
+| Mode | Key | Action |
+|------+-----------------+--------------------------------------------------------|
+| n | <leader>cd | Open Ex mode (`:Ex`) |
+| n | J | Join lines while keeping the cursor in place |
+| n | <C-d> | Scroll half-page down and center cursor |
+| n | <C-u> | Scroll half-page up and center cursor |
+| n | n | Next search result (centered) |
+| n | N | Prev search result (centered) |
+| n | Q | Disable Ex mode |
+| n | <C-k> | Next quickfix entry (centered) |
+| n | <C-j> | Prev quickfix entry (centered) |
+| n | <leader>k | Next location list entry (centered) |
+| n | <leader>j | Prev location list entry (centered) |
+| i | <C-c> | Exit insert mode |
+| n | <leader>x | Make current file executable |
+| n | <leader>u | Toggle Undotree |
+| n | <leader>rl | Reload config |
+| n | <leader><leader>| Source current file |
+
+** Visual Mode
+
+| Mode | Key | Action |
+|------+-------------+---------------------------------------------|
+| v | J | Move block down |
+| v | K | Move block up |
+| x | <leader>p | Paste without overwriting clipboard |
+| v | <leader>y | Yank to system clipboard |
+
+** Linting & Formatting
+
+| Mode | Key | Action |
+|------+----------+---------------------------------|
+| n | <leader>cc | Run php-cs-fixer |
+| n | <F3> | Format (LSP) |
+
+** Telescope
+
+| Mode | Key | Action |
+|------+-------------+-----------------------------------------|
+| n | <leader>ff | Find files |
+| n | <leader>fg | Git-tracked files |
+| n | <leader>fo | Recent files |
+| n | <leader>fq | Quickfix list |
+| n | <leader>fh | Help tags |
+| n | <leader>fb | Buffers |
+| n | <leader>fs | Grep string under cursor |
+| n | <leader>fc | Grep current filename (no extension) |
+| n | <leader>fi | Search in ~/.config/nvim |
+
+** Harpoon
+
+| Mode | Key | Action |
+|------+-------------+----------------------------------|
+| n | <leader>a | Add to Harpoon |
+| n | <C-e> | Toggle Harpoon quick menu |
+| n | <leader>fl | Telescope Harpoon marks |
+| n | <C-p> | Prev Harpoon mark |
+| n | <C-n> | Next Harpoon mark |
+
+** LSP
+
+| Mode | Key | Action |
+|----------+---------+-----------------------------------|
+| n | K | Hover docs |
+| n | gd | Go to definition |
+| n | gD | Go to declaration |
+| n | gi | Go to implementation |
+| n | go | Go to type definition |
+| n | gr | List references |
+| n | gs | Signature help |
+| n | gl | Show diagnostics float |
+| n | <F2> | Rename symbol |
+| n,x | <F3> | Format code |
+| n | <F4> | Code actions |
+
+** Misc
+
+| Mode | Key | Action |
+|------+-------------+--------------------------------------------|
+| n | <leader>dg | Run DogeGenerate |
+| n | <leader>s | Replace word on current line |
+
+
+* Final Thoughts
+
+You're now ready to use Neovim as a modern, fast, and extensible code editor.
+
+Thanks so much for checking out this tutorial. If you got value from it, and you want to find more tutorials like this, check out
+my youtube channel here: [[https://youtube.com/@tony-btw][YouTube]], or my website here: [[https://www.tonybtw.com][tony,btw]]
+
+You can support me here: [[https://ko-fi.com/tonybtw][kofi]]
diff --git a/content/posts/my-first-post.md b/content/posts/my-first-post.md
new file mode 100644
index 0000000..4e89bac
--- /dev/null
+++ b/content/posts/my-first-post.md
@@ -0,0 +1,797 @@
+---
+title: "Hyprland on Arch — Minimal Setup Guide"
+author: ["Tony", "btw"]
+draft: false
+showTableOfContents: true
+image: "/img/hyprland-header.png"
+---
+
+## Intro {#intro}
+
+What's up guys, my name is Tony, and today, I'm going to give you a quick and painless guide
+on installing Hyprland on Arch linux.
+
+Hyprland is a dynamic window manager and wayland compositor that is highly customizable, and it
+emphasizes aesthetics, functionality, and extensibility.
+
+We're going to be using Arch linux today, but hyprland is available on most distrobutions, so if you
+are a NixOS user, or Gentoo, or even Debian, check out the wiki for installation instructions, but other
+than that, the customization aspect of this guide will still apply to you.
+
+At the end of this guide, you will no longer be using x11, and you will be able to fully
+customize your own build of hyprland on your own hardware.
+
+
+## Install Arch Linux {#install-arch-linux}
+
+- basic stuff
+- pacstrap everything
+
+The first thing I'm going to do is install a fresh Arch linux, and since today's guide is not about
+how to install Arch linux, I'm going to speed through that process and catch you guys at the login
+screen. If you want help installing arch linux, check out my Arch Linux tutorial.
+
+[Arch Linux Tutorial](https://youtu.be/oeDbo-HRaZo)
+
+
+## Install required tools for hyprland {#install-required-tools-for-hyprland}
+
+Alright, so we're staring at a very minimal arch build, we only installed base, base-devel, linux, linux-firmware, and sof-firmware.
+That's all you need to get started, and if you are an arch user, you can start basically anywhere as long as you've installed these
+basic packages, and got a bootloader up and running.
+
+So lets start by installing all of the required packages for today's setup. The beatiful thing about starting on a fresh install
+like this is that, you guys get to see the most minimal setup as possible in terms of packages. So let's grab all the hyprland
+tools.
+
+The 'hyprland' package actually comes with a lot on Arch linux. It comes with the wayland compositor among other things. Let's grab that,
+xorg-xwayland (just in case we need to use xwayland utils), and hyprpaper (a minimal hyprland wallpaper tool)
+
+[Hyprland Arch Wiki Page](https://archlinux.org/packages/extra/x86_64/hyprland/)
+
+For other packages, I'm going to be using vim today to edit all the files, you can feel free to use your text editor of choice.
+We need wofi (an application launcher for wayland), foot (a terminal emulator in wayland), waybar (the powerbar that we'll be using today),
+dolphin (a file manager that works in wayland), and firefox. Let's also grab git for version controlling.
+
+Lastly, we want a nerd font to render some of the icons here, so lets grab \`ttf-jetbrains-mono-nerd\`
+
+And that's basically it. We really don't need much, and if we need anything else along the way, we can just grab it from pacman.
+
+- hyprland
+- vim
+- git
+- foot
+- waybar
+- firefox
+- wofi
+- kitty (hyprland default terminal)
+- dolphin
+- jetbrains mono nerd
+
+<!--listend-->
+
+```sh
+sudo pacman -S hyprland xorg-xwayland hyprpaper
+sudo pacman -S vim wofi git foot waybar firefox dolphin
+sudo pacman -S ttf-jetbrains-mono-nerd
+```
+
+
+## Create config file {#create-config-file}
+
+Let's create the directory for the hyprland config file here, and copy the template config file into it. This is important because we're using foot
+instead of kitty, we have to do this before launching hyprland.
+
+```sh
+mkdir -p ~/.config/hypr; cp /usr/share/hypr/hyprland.conf ~/.config/hypr/
+```
+
+Edit this file, swap kitty with foot.
+
+```hyprlang
+$terminal = foot;
+```
+
+
+## Load hyprland {#load-hyprland}
+
+We're ready to launch hyprland, and we can do so easily by just typing hyprland.
+
+```sh
+hyprland
+```
+
+From inside of hyprland, we'll open a terminal with super Q
+and lets immediately edit the monitors block:
+
+Since my monitor is 1920x1080, I'll set that in my hyprland config. Also, we'll change this last 'auto' flag to 1.0.
+This is the scale flag, and auto will set it to 1.5.
+
+```text
+monitor=,1920x1080,auto,1.0
+```
+
+You can display what monitor we have with:
+
+```sh
+hyprctl monitors
+```
+
+
+## Foot config {#foot-config}
+
+Now lets jump into our foot config to quickly make our terminal readable
+lets set this up,
+
+```sh
+mkdir .config/foot
+vim .config/foot/foot.ini
+```
+
+```ini
+font=JetBrainsMono NF:size=16
+pad=8x8 center-when-maximized-and-fullscreen
+```
+
+And we're going to go with a tokyonight theme for todays rice, so lets check this website out for tokyonight ports. I'll leave a link
+to this site below the subscribe button of this video.
+
+[Tokyo Night Theme Site](https://wixdaq.github.io/Tokyo-Night-Website/ports.html)
+
+Let's navigate to 'foot', and copy this colors block, and add it to our foot.ini file.
+
+```ini
+[colors]
+foreground=c0caf5
+background=1a1b26
+
+## Normal/regular colors (color palette 0-7)
+regular0=15161E # black
+regular1=f7768e # red
+regular2=9ece6a # green
+regular3=e0af68 # yellow
+regular4=7aa2f7 # blue
+regular5=bb9af7 # magenta
+regular6=7dcfff # cyan
+regular7=a9b1d6 # white
+
+## Bright colors (color palette 8-15)
+bright0=414868 # bright black
+bright1=f7768e # bright red
+bright2=9ece6a # bright green
+bright3=e0af68 # bright yellow
+bright4=7aa2f7 # bright blue
+bright5=bb9af7 # bright magenta
+bright6=7dcfff # bright cyan
+bright7=c0caf5 # bright white
+
+## dimmed colors (see foot.ini(5) man page)
+dim0=ff9e64
+dim1=db4b4b
+
+alpha=0.9
+```
+
+Alright that looks great. Let's jump into the next step
+
+
+## Hyprland and Waybar {#hyprland-and-waybar}
+
+When we modify hyprlands config file, it automatically refreshes hyprland on save, which is convenient.
+lets jump back into the hyprland.conf file and change a few things for QoL
+
+We're gonna use waybar today, and in order to quickly reload that, we can use one line command here:
+Also, to add it to start when we load hyprland, lets add it to exec-once.
+
+```cfg
+$reload_waybar = pkill waybar; waybar &
+exec-once = waybar &
+```
+
+And we scroll down here and ensure our reload waybar script is binded:
+
+```cfg
+bind = $mainMod, R, exec, $reload_waybar
+```
+
+While we're in the binding section, lets clean up some of these binds. I like Q for quit, Enter for
+terminal, and D for $menu (which is wofi)
+
+```cfg
+bind = $mainMod, Return, exec, $terminal
+bind = $mainMod, Q, killactive,
+bind = $mainMod, D, exec, $menu
+```
+
+Now that these are good to go, lets do one or two more huge qol updates:
+
+```cfg
+input {
+ # xset r rate 200 35
+ # This allows your key repeat rate set to 200ms delay, 35 repeats per second
+ repeat_rate = 35
+ repeat_delay = 200
+}
+
+cursor {
+ # this ensures your mouse cursor doesn't glitch out
+ inactive_timeout = 30
+ no_hardware_cursors = true
+}
+```
+
+Alright, we should be good to go for now and move on to the next step.
+
+
+## Waybar {#waybar}
+
+Now that Waybar is binded to super R, lets go ahead and load it once with super R.
+Let's customize this by opening up the config file:
+Lets copy over the default waybar config, since its loading a null config file now.
+To ensure we can edit it, we need to change ownership of the file from root to tony. (use your username here)
+
+```bash
+sudo cp -R /etc/xdg/waybar ~/.config/waybar
+sudo chown -R tony:tony .config/waybar
+vim .config/waybar/.
+```
+
+So this has 2 parts to it, style.css, and config.jsconc. let's start with config.jsonc, thats where all the
+widgets, and workspace stuff lives.
+
+At the top of this file we see layer, position, etc. If you are a bottom bar user, you can swap this to bottom, and it would look like this:
+We're gonna put the bar on the top today, and build it out from there.
+
+
+### Config.jsonc {#config-dot-jsonc}
+
+
+#### Left Modules {#left-modules}
+
+So we see in config.jsonc, there are a bunch of modules loaded on the left side.
+
+```json
+"modules-left": [
+ "sway/workspaces",
+ "sway/mode",
+ "sway/scratchpad",
+ "custom/media"
+],
+```
+
+We can delete the bottom 3 of these, they aren't needed. We only want the workspaces module on the left for now
+and since we're not using sway, we're using hyprland, lets just change sway to hyprland. Sway is an i3 clone for
+wayland. Will be a video on that in the future.
+
+```json
+"modules-left": [
+ "hyprland/workspaces",
+],
+```
+
+So this module exists, but its not defined in our file, lets go down to where the sway/workspaces module was defined.
+Luckily, these modules use the same syntax, so all we need to do is switch sway to hyprland here too.
+
+```json
+"hyprland/workspaces": {
+ "disable-scroll": true,
+ "all-outputs": true,
+ "warp-on-scroll": false,
+ "format": "{name}: {icon}",
+ "format-icons": {
+ "1": "",
+ "2": "",
+ "3": "",
+ "4": "",
+ "5": "",
+ "urgent": "",
+ "focused": "",
+ "default": ""
+ }
+},
+```
+
+So lets just uncomment this block, and change 'sway' to 'hyprland'.
+Lets save this file, and reload waybar with that super R keybind.
+
+And now we see this workpace module on the left side. Beautiful. Let's clean this up a little bit.
+
+These Icons are customizable, similar to my dwm config, where if you know whats going on that workspace
+at all times, you can use a font awesome or nerd font icon for that application, and throw it on that
+workspace number. For us today, we're going to just go with the classic 1,2,3,4 ... so lets delete this block
+here, and change this to just {name}
+
+```json
+"hyprland/workspaces": {
+ "disable-scroll": true,
+ "all-outputs": true,
+ "warp-on-scroll": false,
+ "format": "{name}",
+},
+```
+
+We can reload this again with super R, and there we go. much better already.
+
+Also, we'll add persistent-workspaces, so that all the numbers show even if they aren't active.
+
+```json
+ "persistent-workspaces": {
+ "*": 9,
+ }
+```
+
+One more thing for now, lets add the window module that displays what is open in your current window.
+lets just put it on the left side for now
+
+And let's define this module here, and add 2 attributes to it:
+max-length, and separate-outputs: false
+Max length is just making the max length 40 characters, so it doesn't impede on the right side that we'll setup next.
+Separate-outputs: This is for those of you with multiple monitors, it will show the window thats focused on all monitors
+instead of showing it on a per monitor basis.
+
+```json
+"modules-left": [
+ "hyprland/workspaces",
+ "hyprland/window"
+],
+
+"hyprland/window": {
+ "max-length": 40,
+ "separate-outputs": false
+},
+```
+
+Let's work on some of these right-side modules.
+
+
+#### Center Module {#center-module}
+
+Lets leave this empty for now. It's easier to handle spacing imo if we just do left and right side modules.
+
+```json
+"modules-center": [],
+```
+
+
+#### Right Modules {#right-modules}
+
+Lets start by deleting a lot of these modules. most of them aren't needed, and we are going for a semi-minimal
+config today. Remember, that you can take this information from this tutorial, and really make your bar custom for
+your own setup.
+
+```json
+"modules-right": [
+ "mpd",
+ "idle_inhibitor",
+ "pulseaudio",
+ "network",
+ "power-profiles-daemon",
+ "cpu",
+ "memory",
+ "temperature",
+ "backlight",
+ "keyboard-state",
+ "sway/language",
+ "battery",
+ "battery#bat2",
+ "clock",
+ "tray",
+ "custom/power"
+],
+```
+
+Let's trim this down to just this for now: we can remove all of these, lets remove temperature
+, lets get backlight, keyboard-state, language out of here. if you're on a laptop, keep batery. otherwise, get rid of it.
+lets keep clock, and keep tray. we'll add some in here as well, but this is good for now.
+
+```json
+"modules-right": [
+ "network",
+ "cpu",
+ "memory",
+ // "battery",
+ "clock",
+ "tray"
+],
+```
+
+Let's reload this with super R, and there we go. super minimal config for now. lets add 1 or 2 custom modules here, and then move onto
+the styling.
+
+Let's make this network widget super minimal.
+
+```json
+"network": {
+ "format": "Online",
+ "format-disconnected": "Disconnected ()"
+},
+```
+
+Let's change the CPU widget to something more clean:
+
+```json
+"cpu": {
+ "format": "CPU: {usage}%",
+ "tooltip": false
+},
+```
+
+Same thing for RAM:
+
+```json
+"memory": {
+ "format": "Mem: {used}GiB"
+},
+```
+
+Let's add a disk widget, and this is inspired by DT's xmonad widgets a little bit, which i've been interested in for my qtile setup.
+
+Interval so that it doesnt run every 1 seconds (the default value)
+
+```json
+"disk": {
+ "interval": 60,
+ "path": "/",
+ "format": "Disk: {free}",
+},
+```
+
+And let's add "disk" to the right modules array:
+
+```json
+"modules-right": [
+ "cpu",
+ "memory",
+ "disk",
+ "battery",
+ "clock",
+ "tray"
+],
+```
+
+Heres the battery modifications: (for those of you with laptops, this should be included)
+
+```json
+"battery": {
+ "states": {
+ "good": 80,
+ "warning": 30,
+ "critical": 15
+ },
+ "format": "Bat: {capacity}% {icon} {time}",
+ "format-alt": "Bat: {capacity}%",
+ "format-time": "{H}:{M}",
+ "format-icons": ["", "", "", "", ""]
+},
+```
+
+And lets add a simple separator module as follows:
+
+```json
+"custom/sep": {
+ "format": "|",
+ "interval": 0,
+ "tooltip": false
+},
+```
+
+Now lets add this separator in between all of our widgets. it will look weird for now, but we'll fix the styling after.
+
+```json
+"modules-left": [
+ "hyprland/workspaces",
+ "custom/sep",
+ "hyprland/window",
+ "custom/sep"
+],
+"modules-center": [
+],
+
+"modules-right": [
+ "custom/sep",
+ "network",
+ "custom/sep",
+ "cpu",
+ "custom/sep",
+ "memory",
+ "custom/sep",
+ "disk",
+ "custom/sep",
+ "clock",
+ "custom/sep",
+ "tray"
+],
+```
+
+And thats it for the modules, we can move into the styles of these now.
+
+
+### Styles {#styles}
+
+The first thing we want to do is have our colors match the tokyonight aesthetic, so lets define these colors at the top of the file. Note, you can just copy and
+paste these from my github repo.
+
+[Github Repo](https://github.com/tonybanters/hyprland-btw)
+
+```css
+@define-color bg #1a1b26;
+@define-color fg #a9b1d6;
+@define-color blk #32344a;
+@define-color red #f7768e;
+@define-color grn #9ece6a;
+@define-color ylw #e0af68;
+@define-color blu #7aa2f7;
+@define-color mag #ad8ee6;
+@define-color cyn #0db9d7;
+@define-color brblk #444b6a;
+@define-color wht #ffffff;
+```
+
+Alright, now we see the global styles with '\*', lets add some options here.
+
+```css
+* {
+ font-family: "JetBrainsMono Nerd Font", monospace;
+ font-size: 16px;
+ font-weight: bold;
+}
+```
+
+We're just changing the font to Jetbrains mono, and we are making it bold, and increasing the zie a little bit so its readable.
+
+Now for the actual window on waybar, lets change some stuff here:
+
+```css
+window#waybar {
+ background: @bg;
+ color: @fg;
+}
+```
+
+Let's get rid of the border, and get rid of the transition propertys for now. Keep it minimal,
+since we added those variables at the top for the colors, its going to make our lives much easier when setting up these styles.
+
+And yea, this is already looking much better as far as usability, and stylistically speaking. Let's keep going.
+
+Lets handle the behaviour of the workspace toggles, so that the colors of the workspaces that have applications running on them
+are all the same, but there is a visual indicator of the active workspace.
+
+```css
+#workspaces button {
+ padding: 0 6px;
+ color: @cyn;
+ background: transparent;
+ border-bottom: 3px solid @bg;
+}
+#workspaces button.active {
+ color: @cyn;
+ border-bottom: 3px solid @mag;
+}
+#workspaces button.empty {
+ color: @wht;
+}
+#workspaces button.empty.active {
+ color: @cyn;
+ border-bottom: 3px solid @mag;
+}
+```
+
+So this basically says that if the workspace is active, it will be visually indicated with the purple underline. if it
+is not active, but not empty, it will still be cyan, but not be underlined. Waybar has a weird issue where when you swap
+to a new workspace, and dont open an application on it yet, its technically empty, and active. so we will cover for that case here
+as well. Feel free to copy and paste this from my config file.
+
+Let's clean up this file now. I think we can delete pretty much everything except this massive block that just adds padding to every
+widget here.
+
+We're going to add custom separators here, so lets add that to this list, and add the css for it now, so when we jump back into the json file
+we can already have it styled
+
+```css
+#clock,
+#custom-sep,
+#battery,
+#cpu,
+#memory,
+#disk,
+#network,
+#tray {
+ padding: 0 8px;
+ color: @white;
+}
+
+#custom-sep {
+ color: @brblk;
+}
+```
+
+This tells waybar to show a white font for all the text on all these widgets by default, and
+also tells the separator to use this special black font, which will add later.
+
+Let's quickly go through these right side widgets, and make them more minimal.
+I like the underline style here, feel free to tinker with the colors on your setup, but im going for the
+more minimal tokyonight style.
+
+```css
+#clock {
+ color: @cyn;
+ border-bottom: 4px solid @cyn;
+}
+
+#battery {
+ color: @mag;
+ border-bottom: 4px solid @mag;
+}
+
+#disk {
+ color: @ylw;
+ border-bottom: 4px solid @ylw;
+}
+
+#memory {
+ color: @mag;
+ border-bottom: 4px solid @mag;
+}
+
+#cpu {
+ color: @grn;
+ border-bottom: 4px solid @grn;
+}
+
+#network {
+ color: @blu;
+ border-bottom: 4px solid @blu;
+}
+```
+
+Alright, thats enough css for one day... This bar is looking really good. Feel free to customize it even further from here.
+Let's setup wofi, add a wallpaper, and get this show on the road.
+
+
+## Wallpaper {#wallpaper}
+
+First thing we need to do is get a wallpaper.. so lets head over to firefox and grab this one i picked out for this rice, its on my github.
+Let's save this into a folder in the home directory called walls, and save it is wall1.png
+
+Now let's create a hyprpaper.conf file in the hypr directory like so:
+
+vim .config/hypr/hyprpaper.conf
+
+```cfg
+preload = ~/walls/wall1.jpg
+wallpaper = ,~/walls/wall1.jpg
+```
+
+Now in our hyprland.conf, lets turn on hyprpaper like so:
+
+```nil
+exec-once waybar & hyprpaper
+```
+
+I'll run this in a terminal here but it will now always launch when we start hyprland. And there we go. Awesome
+Last thing to do is get a proper config for wofi.
+
+
+## Wofi {#wofi}
+
+For this wofi config, we'll grab it from that same website of tokyonight configs, but I modified it slightly as follows:
+
+```sh
+mkdir .config/wofi
+vim .config/wofi/config
+```
+
+```nil
+# mode & placement
+show=drun
+location=top
+width=700
+lines=8
+columns=2
+dynamic_lines=false
+
+# icons
+allow_images=true
+image_size=36
+
+# search & UX
+matching=fuzzy
+insensitive=true
+hide_scroll=false
+prompt=
+
+# terminal
+term=foot
+
+# keybinds (vim-ish)
+key_up=Ctrl-k
+key_down=Ctrl-j
+key_left=Ctrl-h
+key_right=Ctrl-l
+key_submit=Return
+key_forward=Tab
+key_backward=Shift-ISO_Left_Tab
+
+# stylesheet
+style=/home/tony/.config/wofi/style.css
+```
+
+And to make that stylesheet, its right here in the style.css file of that config,
+
+so lets make this file:
+
+```sh
+vim ~/.config/wofi/style.css
+```
+
+```css
+* {
+ font-family: "JetBrainsMono Nerd Font", monospace;
+ font-size: 16px;
+ font-weight: bold;
+}
+
+window {
+ margin: 0px;
+ border: 2px solid #414868;
+ border-radius: 5px;
+ background-color: #24283b;
+ font-family: monospace;
+ font-size: 12px;
+}
+
+#input {
+ margin: 5px;
+ border: 1px solid #24283b;
+ color: #c0caf5;
+ background-color: #24283b;
+}
+
+#input image {
+ color: #c0caf5;
+}
+
+#inner-box {
+ margin: 5px;
+ border: none;
+ background-color: #24283b;
+}
+
+#outer-box {
+ margin: 5px;
+ border: none;
+ background-color: #24283b;
+}
+
+#scroll {
+ margin: 0px;
+ border: none;
+}
+
+#text {
+ margin: 5px;
+ border: none;
+ color: #c0caf5;
+}
+
+#entry:selected {
+ background-color: #414868;
+ font-weight: normal;
+}
+
+#text:selected {
+ background-color: #414868;
+ font-weight: normal;
+}
+```
+
+And this system is looking pretty good. We got our waybar all setup, our widgets, we have our foot terminal looking good, our wallpaper, and our wofi config.
+This is just the beginning of hyprland, but this should be a great source for you to start customizing your own personal setup.
+
+
+## Final Thoughts {#final-thoughts}
+
+Thanks so much for checking out this tutorial. If you got value from it, and you want to find more tutorials like this, check out
+my youtube channel here: [YouTube](https://youtube.com/@tony-btw), or my website here: [tony,btw](https://www.tonybtw.com)
+
+You can support me here: [kofi](https://ko-fi.com/tonybtw)
diff --git a/content/support/index.md b/content/support/index.md
new file mode 100644
index 0000000..fa9da22
--- /dev/null
+++ b/content/support/index.md
@@ -0,0 +1,6 @@
+---
+title: Support
+url: /support/
+layout: support
+---
+
diff --git a/content/tutorial/dwm/dwm.png b/content/tutorial/dwm/dwm.png
new file mode 100755
index 0000000..fc040e2
Binary files /dev/null and b/content/tutorial/dwm/dwm.png differ
diff --git a/content/tutorial/dwm/index.md b/content/tutorial/dwm/index.md
new file mode 100644
index 0000000..ff131bd
--- /dev/null
+++ b/content/tutorial/dwm/index.md
@@ -0,0 +1,280 @@
+---
+title: "DWM on Arch | Minimal Config Tutorial"
+author: ["Tony", "btw"]
+description: "A complete DWM setup on Arch Linux with minimal patches, autostart, custom bar, and keybinds."
+date: 2025-04-27
+draft: false
+image: "/img/dwm.png"
+showTableOfContents: true
+---
+
+## Introduction {#introduction}
+
+This is a full DWM tutorial for Arch users who want a minimal, fast, patched build without bloat.
+
+The philosophy of the developers of dwm is as follows:
+Keep things simple, minimal and usable.
+
+> "Unfortunately, the tendency for complex, error-prone and slow software seems to be prevalent in the present-day software industry. We intend to prove the opposite with our software projects. "
+> – DWM Developers
+
+Because of this philosophy, DWM is blazingly fast, and strikes a balance of minimalism, efficienty, and extensibility.
+
+You’ll get a working, beautiful setup with basic patches, autostart, a functional bar, and a clean workflow.
+
+
+## Installation {#installation}
+
+The pre-requisites for today's tutorial are: xorg, make, gcc, and a few others. If you follow the video guide,
+I'm starting from almost a brand new arch install, so you can just start from that, and get the following packages like so:
+
+```sh
+pacman -S git base-devel xorg xorg-xinit xorg-xrandr
+git clone https://git.suckless.org/dwm
+cd dwm
+sudo make clean install
+```
+
+We will need st as well, a terminal manager made by the developers of dwm. Same concept here.
+
+```sh
+git clone https://git.suckless.org/st
+cd st
+sudo make clean install
+```
+
+Note: If you are on another distribution such as Debian, or Gentoo, getting dwm will be exactly the same, but getting the xorg server and developer tools to build dwm (base-devel on arch) will be slightly different. Refer
+to your distribution's handbook on how to get these tools.
+
+I personally am a 'startx' kinda guy, but if you have a display manager, just add dwm to your display manager list.
+
+Last thing here is to add exec dwm to the .xinitrc file:
+
+```sh
+echo 'exec dwm' >> .xinitrc
+```
+
+
+## Modifying config.h (Keybinds) {#modifying-config-dot-h--keybinds}
+
+Alright, let's open a terminal here and start modifying config.h.
+
+```sh
+chown -R dwm
+cd dwm; vim config.h
+```
+
+The first thing we want to do is head on down to the modkey section, and change
+mod1mask to mod4mask (this changes the mod key from alt to super)
+
+```c
+#define MODKEY Mod4Mask
+#define TAGKEYS(KEY,TAG) \
+ { MODKEY, KEY, view, {.ui = 1 << TAG} }, \
+ { MODKEY|ControlMask, KEY, toggleview, {.ui = 1 << TAG} }, \
+ { MODKEY|ShiftMask, KEY, tag, {.ui = 1 << TAG} }, \
+ { MODKEY|ControlMask|ShiftMask, KEY, toggletag, {.ui = 1 << TAG} },
+```
+
+Let's take a look at the keybinds section here, and I'm going to change stuff for my personal needs, you feel free to tinker with this as usual. The usual suspects for me are, change opening a terminal to Super + Enter,
+change the application launcher menu to Super + D, and change closing a program to Super + Q.
+
+```c
+static const Key keys[] = {
+ /* modifier key function argument */
+ { MODKEY, XK_r, spawn, {.v = dmenucmd } },
+ { MODKEY, XK_Return, spawn, {.v = termcmd } },
+ { MODKEY, XK_b, togglebar, {0} },
+ { MODKEY, XK_q, killclient, {0} },
+ TAGKEYS( XK_1, 0)
+ TAGKEYS( XK_2, 1)
+};
+```
+
+Once you're done with these first small changes, go ahead and run:
+
+```sh
+sudo make clean install; pkill x; startx
+```
+
+Beautiful. You've succesfully rebuilt your first DWM binary. You can officialy tell all of your friends that you are a C developer. Let's move on to the next step.
+
+
+## Aliases {#aliases}
+
+For QoL, I like to use 2 aliases for dwm, one to just jump into the config file, and another to rebuild dwm.
+So if you want those, open up your bashrc file and add these aliases:
+
+```bash
+alias cdwm="vim ~/dwm/config.h"
+alias mdwm="cd ~/dwm; sudo make clean install; cd -";
+```
+
+This will make it so you can jump straight into your config.h file, and rebuild dwm from anywhere and return back to whatever directory you were in after rebuilding it.
+
+
+## Commands {#commands}
+
+Let's mess with some of the commands. I like to use rofi, although dmenu is perfectly fine if not better, rofi just ports over really nice to all my other configs, so I'll show you how to set that up in dwm.
+
+First, ensure rofi is installed, and a config.rasi exists in .config/rofi/config.rasi (feel free to copy my config.rasi file [here](https://www.github.com/tonybanters/rofi))
+
+Let's jump back into config.h, and look at the commands section.
+
+```c
+static char dmenumon[2] = "0"; /* component of dmenucmd, manipulated in spawn() */
+static const char *dmenucmd[] = { "dmenu_run", "-m", dmenumon, "-fn", dmenufont, "-nb", col_gray1, "-nf", col_gray3, "-sb", col_cyan, "-sf", col_gray4, NULL };
+static const char *termcmd[] = { "st", NULL };
+static const char *firefoxcmd[] = { "firefox-bin", NULL };
+static const char *slock[] = { "slock", NULL };
+static const char *screenshotcmd[] = { "/bin/sh", "-c", "maim -s | xclip -selection clipboard -t image/png", NULL };
+static const char *rofi[] = { "rofi", "-show", "drun", "-theme", "~/.config/rofi/config.rasi", NULL };
+static const char *emacsclient[] = { "emacsclient", "-c", "-a", "", NULL };
+```
+
+These are some of my commands. Notice I have rofi, slock which is a minimal screen lock tool, a screenshot command which just utilizes main and xclip, and i've got an emacsclient command. Don't worry about that emacs command if you are below the age of 30.
+
+Make sure to add these commands to the keybind section like so:
+
+```c
+static const Key keys[] = {
+ /* modifier key function argument */
+ { MODKEY, XK_r, spawn, {.v = dmenucmd } },
+ { MODKEY, XK_e, spawn, {.v = emacsclient } },
+ { MODKEY, XK_Return, spawn, {.v = termcmd } },
+ { MODKEY, XK_l, spawn, {.v = slock } },
+ { ControlMask, XK_Print, spawn, {.v = screenshotcmd } },
+ { MODKEY, XK_d, spawn, {.v = rofi } },
+ { MODKEY, XK_b, spawn, {.v = firefoxcmd } },
+ ...
+};
+```
+
+
+## Autostart {#autostart}
+
+Use this to launch programs like wallpaper setter, bar, compositor: (if they are not in .xinitrc)
+
+```c
+/* add this to config.h */
+static const char *autostart[] = {
+ "dwm-autostart.sh", NULL
+};
+```
+
+Example script:
+
+```sh
+#!/bin/sh
+xwallpaper --zoom ~/wall.png &
+dwmblocks &
+picom -b
+```
+
+
+## Patches {#patches}
+
+Alright, patches are something that deters people from using dwm because they feel it can be daunting, but its really easy.
+
+Head on over to: [DWM's Official Community Patch List](https://dwm.suckless.org/patches)
+
+Grab a patch, vanity-gaps for example, and right click the patch, and save link as. Put this in dwm/patches/
+
+To patch your dwm, just run
+
+```sh
+patch -i ~/dwm/patches/name-of-patch.diff
+```
+
+Hopefully you don't get any errors, but if you do, they are usually pretty simple to resolve. Checkout my video on dwm to learn more about resolving patches.
+
+After that, remake dwm with the \`mdwm\` alias, and restart x. Boom, your patch is ready to go.
+
+
+## DWMBlocks {#dwmblocks}
+
+DWM Blocks is a program that renders blocks in the top right of the dwm bar. Similar to widgets in Qtile, or polybar modules. These blocks can all be customizable sh scripts, and ricing this will be for another tutorial, but for now the base version is good enough. You can take mine as well:
+
+Install:
+
+```sh
+git clone https://github.com/tonybanters/dwmblocks
+cd dwmblocks
+sudo make clean install
+```
+
+Basic usage:
+Add \`dwmblocks &\` to your autostart script.
+
+
+## Custom Icons & Fonts {#custom-icons-and-fonts}
+
+For a custom font, I like jetbrains mono nerd font, and we can just install it like so:
+
+```sh
+sudo pacman -S ttf-jetbrains-mono-nerd
+```
+
+And we can set that font in \`config.h\`:
+
+```c
+static const char *fonts[] = { "JetBrainsMono Nerd Font:size=14" };
+```
+
+
+## My personal keybinds {#my-personal-keybinds}
+
+If you want to just clone my build of dwm, thats perfectly fine, just take a look at this table here for my keybinds as a guide:
+
+
+## DWM Keybindings {#dwm-keybindings}
+
+| Modifier | Key | Action | Description |
+|-----------|------------|-------------------|------------------------------|
+| MOD | r | spawn | Launch dmenu |
+| MOD | Return | spawn | Launch terminal |
+| MOD | l | spawn | Lock screen (slock) |
+| Ctrl | Print | spawn | Screenshot |
+| MOD | d | spawn | Launch Rofi |
+| MOD | b | togglebar | Toggle top bar |
+| MOD | j | focusstack +1 | Focus next window |
+| MOD | k | focusstack -1 | Focus previous window |
+| MOD | i | incnmaster +1 | Increase master windows |
+| MOD | p | incnmaster -1 | Decrease master windows |
+| MOD | g | setmfact -0.05 | Shrink master area |
+| MOD | h | setmfact +0.05 | Grow master area |
+| MOD | z | incrgaps +3 | Increase gaps |
+| MOD | x | incrgaps -3 | Decrease gaps |
+| MOD | a | togglegaps | Toggle gaps |
+| MOD+Shift | a | defaultgaps | Reset gaps |
+| MOD | Tab | view | Toggle last workspace |
+| MOD | q | killclient | Close focused window |
+| MOD | t | setlayout tile | Set tiling layout |
+| MOD | f | setlayout float | Set floating layout |
+| MOD | m | setlayout monocle | Set monocle layout |
+| MOD | c | setlayout custom1 | Custom layout (slot 3) |
+| MOD | o | setlayout custom2 | Custom layout (slot 4) |
+| MOD+Shift | Return | setlayout default | Reset to default layout |
+| MOD+Shift | f | fullscreen | Toggle fullscreen |
+| MOD+Shift | Space | togglefloating | Toggle floating |
+| MOD | 0 | view all tags | View all workspaces |
+| MOD+Shift | 0 | tag all | Move window to all tags |
+| MOD | , | focusmon -1 | Focus monitor left |
+| MOD | . | focusmon +1 | Focus monitor right |
+| MOD+Shift | , | tagmon -1 | Send window to monitor left |
+| MOD+Shift | . | tagmon +1 | Send window to monitor right |
+| MOD | 1–9 | view tag N | Switch to tag N |
+| MOD+Shift | 1–9 | tag window to N | Move window to tag N |
+| MOD+Shift | q | quit | Exit DWM |
+| (none) | XF86Audio+ | pactl +3% | Raise volume |
+| (none) | XF86Audio- | pactl -3% | Lower volume |
+
+
+## Final Thoughts {#final-thoughts}
+
+This setup is minimalist but powerful. From here, you can add more patches (like systray or gaps), or just keep it lean.
+
+Thanks so much for checking out this tutorial. If you got value from it, and you want to find more tutorials like this, check out
+my youtube channel here: [YouTube](https://youtube.com/@tony-btw), or my website here: [tony,btw](https://www.tonybtw.com)
+
+You can support me here: [kofi](https://ko-fi.com/tonybtw)
diff --git a/content/tutorial/hyprland/index.md b/content/tutorial/hyprland/index.md
new file mode 100644
index 0000000..a6b0542
--- /dev/null
+++ b/content/tutorial/hyprland/index.md
@@ -0,0 +1,849 @@
+---
+title: "Hyprland on Arch — Minimal Setup Guide"
+author: ["Tony", "btw"]
+description: "A zero to hero Hyprland setup, which if you follow along, will help you produce a rice thats truly yours."
+date: 2025-08-24
+draft: false
+image: "/img/hyprland.png"
+showTableOfContents: true
+showTableOfContents: true
+---
+
+## Intro {#intro}
+
+What's up guys, my name is Tony, and today, I'm going to give you a quick and painless guide
+on installing Hyprland on Arch linux.
+
+Hyprland is a dynamic window manager and wayland compositor that is highly customizable, and it
+emphasizes aesthetics, functionality, and extensibility.
+
+We're going to be using Arch linux today, but hyprland is available on most distrobutions, so if you
+are a NixOS user, or Gentoo, or even Debian, check out the wiki for installation instructions, but other
+than that, the customization aspect of this guide will still apply to you.
+
+At the end of this guide, you will no longer be using x11, and you will be able to fully
+customize your own build of hyprland on your own hardware.
+
+
+## Install Arch Linux {#install-arch-linux}
+
+- basic stuff
+- pacstrap everything
+
+The first thing I'm going to do is install a fresh Arch linux, and since today's guide is not about
+how to install Arch linux, I'm going to speed through that process and catch you guys at the login
+screen. If you want help installing arch linux, check out my Arch Linux tutorial.
+
+[Arch Linux Tutorial](https://youtu.be/oeDbo-HRaZo)
+
+
+## Install required tools for hyprland {#install-required-tools-for-hyprland}
+
+Alright, so we're staring at a very minimal arch build, we only installed base, base-devel, linux, linux-firmware, and sof-firmware.
+That's all you need to get started, and if you are an arch user, you can start basically anywhere as long as you've installed these
+basic packages, and got a bootloader up and running.
+
+So lets start by installing all of the required packages for today's setup. The beatiful thing about starting on a fresh install
+like this is that, you guys get to see the most minimal setup as possible in terms of packages. So let's grab all the hyprland
+tools.
+
+The 'hyprland' package actually comes with a lot on Arch linux. It comes with the wayland compositor among other things. Let's grab that,
+xorg-xwayland (just in case we need to use xwayland utils), and hyprpaper (a minimal hyprland wallpaper tool)
+
+[Hyprland Arch Wiki Page](https://archlinux.org/packages/extra/x86_64/hyprland/)
+
+For other packages, I'm going to be using vim today to edit all the files, you can feel free to use your text editor of choice.
+We need wofi (an application launcher for wayland), foot (a terminal emulator in wayland), waybar (the powerbar that we'll be using today),
+dolphin (a file manager that works in wayland), and firefox. Let's also grab git for version controlling.
+
+Lastly, we want a nerd font to render some of the icons here, so lets grab \`ttf-jetbrains-mono-nerd\`
+
+And that's basically it. We really don't need much, and if we need anything else along the way, we can just grab it from pacman.
+
+- hyprland
+- vim
+- git
+- foot
+- waybar
+- firefox
+- wofi
+- kitty (hyprland default terminal)
+- dolphin
+- jetbrains mono nerd
+
+<!--listend-->
+
+```sh
+sudo pacman -S hyprland xorg-xwayland hyprpaper
+sudo pacman -S vim wofi git foot waybar firefox dolphin
+sudo pacman -S ttf-jetbrains-mono-nerd
+```
+
+
+## Create config file {#create-config-file}
+
+Let's create the directory for the hyprland config file here, and copy the template config file into it. This is important because we're using foot
+instead of kitty, we have to do this before launching hyprland.
+
+```sh
+mkdir -p ~/.config/hypr; cp /usr/share/hypr/hyprland.conf ~/.config/hypr/
+```
+
+Edit this file, swap kitty with foot.
+
+```hyprlang
+$terminal = foot;
+```
+
+
+## Load hyprland {#load-hyprland}
+
+We're ready to launch hyprland, and we can do so easily by just typing hyprland.
+
+```sh
+hyprland
+```
+
+From inside of hyprland, we'll open a terminal with super Q
+and lets immediately edit the monitors block:
+
+Since my monitor is 1920x1080, I'll set that in my hyprland config. Also, we'll change this last 'auto' flag to 1.0.
+This is the scale flag, and auto will set it to 1.5.
+
+```text
+monitor=,1920x1080,auto,1.0
+```
+
+You can display what monitor we have with:
+
+```sh
+hyprctl monitors
+```
+
+
+## Foot config {#foot-config}
+
+Now lets jump into our foot config to quickly make our terminal readable
+lets set this up,
+
+```sh
+mkdir .config/foot
+vim .config/foot/foot.ini
+```
+
+```ini
+font=JetBrainsMono NF:size=16
+pad=8x8 center-when-maximized-and-fullscreen
+```
+
+And we're going to go with a tokyonight theme for todays rice, so lets check this website out for tokyonight ports. I'll leave a link
+to this site below the subscribe button of this video.
+
+[Tokyo Night Theme Site](https://wixdaq.github.io/Tokyo-Night-Website/ports.html)
+
+Let's navigate to 'foot', and copy this colors block, and add it to our foot.ini file.
+
+```ini
+[colors]
+foreground=c0caf5
+background=1a1b26
+
+## Normal/regular colors (color palette 0-7)
+regular0=15161E # black
+regular1=f7768e # red
+regular2=9ece6a # green
+regular3=e0af68 # yellow
+regular4=7aa2f7 # blue
+regular5=bb9af7 # magenta
+regular6=7dcfff # cyan
+regular7=a9b1d6 # white
+
+## Bright colors (color palette 8-15)
+bright0=414868 # bright black
+bright1=f7768e # bright red
+bright2=9ece6a # bright green
+bright3=e0af68 # bright yellow
+bright4=7aa2f7 # bright blue
+bright5=bb9af7 # bright magenta
+bright6=7dcfff # bright cyan
+bright7=c0caf5 # bright white
+
+## dimmed colors (see foot.ini(5) man page)
+dim0=ff9e64
+dim1=db4b4b
+
+alpha=0.9
+```
+
+Alright that looks great. Let's jump into the next step
+
+
+## Hyprland and Waybar {#hyprland-and-waybar}
+
+When we modify hyprlands config file, it automatically refreshes hyprland on save, which is convenient.
+lets jump back into the hyprland.conf file and change a few things for QoL
+
+We're gonna use waybar today, and in order to quickly reload that, we can use one line command here:
+Also, to add it to start when we load hyprland, lets add it to exec-once.
+
+```cfg
+$reload_waybar = pkill waybar; waybar &
+exec-once = waybar &
+```
+
+And we scroll down here and ensure our reload waybar script is binded:
+
+```cfg
+bind = $mainMod, R, exec, $reload_waybar
+```
+
+While we're in the binding section, lets clean up some of these binds. I like Q for quit, Enter for
+terminal, and D for $menu (which is wofi)
+
+```cfg
+bind = $mainMod, Return, exec, $terminal
+bind = $mainMod, Q, killactive,
+bind = $mainMod, D, exec, $menu
+```
+
+Now that these are good to go, lets do one or two more huge qol updates:
+
+```cfg
+input {
+ # xset r rate 200 35
+ # This allows your key repeat rate set to 200ms delay, 35 repeats per second
+ repeat_rate = 35
+ repeat_delay = 200
+}
+
+cursor {
+ # this ensures your mouse cursor doesn't glitch out
+ inactive_timeout = 30
+ no_hardware_cursors = true
+}
+```
+
+Alright, we should be good to go for now and move on to the next step.
+
+
+## Waybar {#waybar}
+
+Now that Waybar is binded to super R, lets go ahead and load it once with super R.
+Let's customize this by opening up the config file:
+Lets copy over the default waybar config, since its loading a null config file now.
+To ensure we can edit it, we need to change ownership of the file from root to tony. (use your username here)
+
+```bash
+sudo cp -R /etc/xdg/waybar ~/.config/waybar
+sudo chown -R tony:tony .config/waybar
+vim .config/waybar/.
+```
+
+So this has 2 parts to it, style.css, and config.jsconc. let's start with config.jsonc, thats where all the
+widgets, and workspace stuff lives.
+
+At the top of this file we see layer, position, etc. If you are a bottom bar user, you can swap this to bottom, and it would look like this:
+We're gonna put the bar on the top today, and build it out from there.
+
+
+### Config.jsonc {#config-dot-jsonc}
+
+
+#### Left Modules {#left-modules}
+
+So we see in config.jsonc, there are a bunch of modules loaded on the left side.
+
+```json
+"modules-left": [
+ "sway/workspaces",
+ "sway/mode",
+ "sway/scratchpad",
+ "custom/media"
+],
+```
+
+We can delete the bottom 3 of these, they aren't needed. We only want the workspaces module on the left for now
+and since we're not using sway, we're using hyprland, lets just change sway to hyprland. Sway is an i3 clone for
+wayland. Will be a video on that in the future.
+
+```json
+"modules-left": [
+ "hyprland/workspaces",
+],
+```
+
+So this module exists, but its not defined in our file, lets go down to where the sway/workspaces module was defined.
+Luckily, these modules use the same syntax, so all we need to do is switch sway to hyprland here too.
+
+```json
+"hyprland/workspaces": {
+ "disable-scroll": true,
+ "all-outputs": true,
+ "warp-on-scroll": false,
+ "format": "{name}: {icon}",
+ "format-icons": {
+ "1": "",
+ "2": "",
+ "3": "",
+ "4": "",
+ "5": "",
+ "urgent": "",
+ "focused": "",
+ "default": ""
+ }
+},
+```
+
+So lets just uncomment this block, and change 'sway' to 'hyprland'.
+Lets save this file, and reload waybar with that super R keybind.
+
+And now we see this workpace module on the left side. Beautiful. Let's clean this up a little bit.
+
+These Icons are customizable, similar to my dwm config, where if you know whats going on that workspace
+at all times, you can use a font awesome or nerd font icon for that application, and throw it on that
+workspace number. For us today, we're going to just go with the classic 1,2,3,4 ... so lets delete this block
+here, and change this to just {name}
+
+```json
+"hyprland/workspaces": {
+ "disable-scroll": true,
+ "all-outputs": true,
+ "warp-on-scroll": false,
+ "format": "{name}",
+},
+```
+
+We can reload this again with super R, and there we go. much better already.
+
+Also, we'll add persistent-workspaces, so that all the numbers show even if they aren't active.
+
+```json
+"persistent-workspaces": {
+ "*": 9,
+}
+```
+
+One more thing for now, lets add the window module that displays what is open in your current window.
+lets just put it on the left side for now
+
+And let's define this module here, and add 2 attributes to it:
+max-length, and separate-outputs: false
+Max length is just making the max length 40 characters, so it doesn't impede on the right side that we'll setup next.
+Separate-outputs: This is for those of you with multiple monitors, it will show the window thats focused on all monitors
+instead of showing it on a per monitor basis.
+
+```json
+"modules-left": [
+ "hyprland/workspaces",
+ "hyprland/window"
+],
+
+"hyprland/window": {
+ "max-length": 40,
+ "separate-outputs": false
+},
+```
+
+Let's work on some of these right-side modules.
+
+
+#### Center Module {#center-module}
+
+Lets leave this empty for now. It's easier to handle spacing imo if we just do left and right side modules.
+
+```json
+"modules-center": [],
+```
+
+
+#### Right Modules {#right-modules}
+
+Lets start by deleting a lot of these modules. most of them aren't needed, and we are going for a semi-minimal
+config today. Remember, that you can take this information from this tutorial, and really make your bar custom for
+your own setup.
+
+```json
+"modules-right": [
+ "mpd",
+ "idle_inhibitor",
+ "pulseaudio",
+ "network",
+ "power-profiles-daemon",
+ "cpu",
+ "memory",
+ "temperature",
+ "backlight",
+ "keyboard-state",
+ "sway/language",
+ "battery",
+ "battery#bat2",
+ "clock",
+ "tray",
+ "custom/power"
+],
+```
+
+Let's trim this down to just this for now: we can remove all of these, lets remove temperature
+, lets get backlight, keyboard-state, language out of here. if you're on a laptop, keep batery. otherwise, get rid of it.
+lets keep clock, and keep tray. we'll add some in here as well, but this is good for now.
+
+```json
+"modules-right": [
+ "network",
+ "cpu",
+ "memory",
+ // "battery",
+ "clock",
+ "tray"
+],
+```
+
+Let's reload this with super R, and there we go. super minimal config for now. lets add 1 or 2 custom modules here, and then move onto
+the styling.
+
+Let's make this network widget super minimal.
+
+```json
+"network": {
+ "format": "Online",
+ "format-disconnected": "Disconnected ()"
+},
+```
+
+Let's change the CPU widget to something more clean:
+
+```json
+"cpu": {
+ "format": "CPU: {usage}%",
+ "tooltip": false
+},
+```
+
+Same thing for RAM:
+
+```json
+"memory": {
+ "format": "Mem: {used}GiB"
+},
+```
+
+Let's add a disk widget, and this is inspired by DT's xmonad widgets a little bit, which i've been interested in for my qtile setup.
+
+Interval so that it doesnt run every 1 seconds (the default value)
+
+```json
+"disk": {
+ "interval": 60,
+ "path": "/",
+ "format": "Disk: {free}",
+},
+```
+
+And let's add "disk" to the right modules array:
+
+```json
+"modules-right": [
+ "cpu",
+ "memory",
+ "disk",
+ "battery",
+ "clock",
+ "tray"
+],
+```
+
+Heres the battery modifications: (for those of you with laptops, this should be included)
+
+```json
+"battery": {
+ "states": {
+ "good": 80,
+ "warning": 30,
+ "critical": 15
+ },
+ "format": "Bat: {capacity}% {icon} {time}",
+ "format-alt": "Bat: {capacity}%",
+ "format-time": "{H}:{M}",
+ "format-icons": ["", "", "", "", ""]
+},
+```
+
+And lets add a simple separator module as follows:
+
+```json
+"custom/sep": {
+ "format": "|",
+ "interval": 0,
+ "tooltip": false
+},
+```
+
+Now lets add this separator in between all of our widgets. it will look weird for now, but we'll fix the styling after.
+
+```json
+"modules-left": [
+ "hyprland/workspaces",
+ "custom/sep",
+ "hyprland/window",
+ "custom/sep"
+],
+"modules-center": [
+],
+
+"modules-right": [
+ "custom/sep",
+ "network",
+ "custom/sep",
+ "cpu",
+ "custom/sep",
+ "memory",
+ "custom/sep",
+ "disk",
+ "custom/sep",
+ "clock",
+ "custom/sep",
+ "tray"
+],
+```
+
+And thats it for the modules, we can move into the styles of these now.
+
+
+### Styles {#styles}
+
+The first thing we want to do is have our colors match the tokyonight aesthetic, so lets define these colors at the top of the file. Note, you can just copy and
+paste these from my github repo.
+
+[Github Repo](https://github.com/tonybanters/hyprland-btw)
+
+```css
+@define-color bg #1a1b26;
+@define-color fg #a9b1d6;
+@define-color blk #32344a;
+@define-color red #f7768e;
+@define-color grn #9ece6a;
+@define-color ylw #e0af68;
+@define-color blu #7aa2f7;
+@define-color mag #ad8ee6;
+@define-color cyn #0db9d7;
+@define-color brblk #444b6a;
+@define-color wht #ffffff;
+```
+
+Alright, now we see the global styles with '\*', lets add some options here.
+
+```css
+* {
+ font-family: "JetBrainsMono Nerd Font", monospace;
+ font-size: 16px;
+ font-weight: bold;
+}
+```
+
+We're just changing the font to Jetbrains mono, and we are making it bold, and increasing the zie a little bit so its readable.
+
+Now for the actual window on waybar, lets change some stuff here:
+
+```css
+window#waybar {
+ background: @bg;
+ color: @fg;
+}
+```
+
+Let's get rid of the border, and get rid of the transition propertys for now. Keep it minimal,
+since we added those variables at the top for the colors, its going to make our lives much easier when setting up these styles.
+
+And yea, this is already looking much better as far as usability, and stylistically speaking. Let's keep going.
+
+Lets handle the behaviour of the workspace toggles, so that the colors of the workspaces that have applications running on them
+are all the same, but there is a visual indicator of the active workspace.
+
+```css
+#workspaces button {
+ padding: 0 6px;
+ color: @cyn;
+ background: transparent;
+ border-bottom: 3px solid @bg;
+}
+#workspaces button.active {
+ color: @cyn;
+ border-bottom: 3px solid @mag;
+}
+#workspaces button.empty {
+ color: @wht;
+}
+#workspaces button.empty.active {
+ color: @cyn;
+ border-bottom: 3px solid @mag;
+}
+```
+
+So this basically says that if the workspace is active, it will be visually indicated with the purple underline. if it
+is not active, but not empty, it will still be cyan, but not be underlined. Waybar has a weird issue where when you swap
+to a new workspace, and dont open an application on it yet, its technically empty, and active. so we will cover for that case here
+as well. Feel free to copy and paste this from my config file.
+
+Let's clean up this file now. I think we can delete pretty much everything except this massive block that just adds padding to every
+widget here.
+
+We're going to add custom separators here, so lets add that to this list, and add the css for it now, so when we jump back into the json file
+we can already have it styled
+
+```css
+#clock,
+#custom-sep,
+#battery,
+#cpu,
+#memory,
+#disk,
+#network,
+#tray {
+ padding: 0 8px;
+ color: @white;
+}
+
+#custom-sep {
+ color: @brblk;
+}
+```
+
+This tells waybar to show a white font for all the text on all these widgets by default, and
+also tells the separator to use this special black font, which will add later.
+
+Let's quickly go through these right side widgets, and make them more minimal.
+I like the underline style here, feel free to tinker with the colors on your setup, but im going for the
+more minimal tokyonight style.
+
+```css
+#clock {
+ color: @cyn;
+ border-bottom: 4px solid @cyn;
+}
+
+#battery {
+ color: @mag;
+ border-bottom: 4px solid @mag;
+}
+
+#disk {
+ color: @ylw;
+ border-bottom: 4px solid @ylw;
+}
+
+#memory {
+ color: @mag;
+ border-bottom: 4px solid @mag;
+}
+
+#cpu {
+ color: @grn;
+ border-bottom: 4px solid @grn;
+}
+
+#network {
+ color: @blu;
+ border-bottom: 4px solid @blu;
+}
+```
+
+Alright, thats enough css for one day... This bar is looking really good. Feel free to customize it even further from here.
+Let's setup wofi, add a wallpaper, and get this show on the road.
+
+
+## Wallpaper {#wallpaper}
+
+First thing we need to do is get a wallpaper.. so lets head over to firefox and grab this one i picked out for this rice, its on my github.
+Let's save this into a folder in the home directory called walls, and save it is wall1.png
+
+Now let's create a hyprpaper.conf file in the hypr directory like so:
+
+vim .config/hypr/hyprpaper.conf
+
+```cfg
+preload = ~/walls/wall1.jpg
+wallpaper = ,~/walls/wall1.jpg
+```
+
+Now in our hyprland.conf, lets turn on hyprpaper like so:
+
+```nil
+exec-once waybar & hyprpaper
+```
+
+I'll run this in a terminal here but it will now always launch when we start hyprland. And there we go. Awesome
+Last thing to do is get a proper config for wofi.
+
+
+## Wofi {#wofi}
+
+For this wofi config, we'll grab it from that same website of tokyonight configs, but I modified it slightly as follows:
+
+```sh
+mkdir .config/wofi
+vim .config/wofi/config
+```
+
+```nil
+# mode & placement
+show=drun
+location=top
+width=700
+lines=8
+columns=2
+dynamic_lines=false
+
+# icons
+allow_images=true
+image_size=36
+
+# search & UX
+matching=fuzzy
+insensitive=true
+hide_scroll=false
+prompt=
+
+# terminal
+term=foot
+
+# keybinds (vim-ish)
+key_up=Ctrl-k
+key_down=Ctrl-j
+key_left=Ctrl-h
+key_right=Ctrl-l
+key_submit=Return
+key_forward=Tab
+key_backward=Shift-ISO_Left_Tab
+
+# stylesheet
+style=/home/tony/.config/wofi/style.css
+```
+
+And to make that stylesheet, its right here in the style.css file of that config,
+
+so lets make this file:
+
+```sh
+vim ~/.config/wofi/style.css
+```
+
+```css
+* {
+ font-family: "JetBrainsMono Nerd Font", monospace;
+ font-size: 16px;
+ font-weight: bold;
+}
+
+window {
+ margin: 0px;
+ border: 2px solid #414868;
+ border-radius: 5px;
+ background-color: #24283b;
+ font-family: monospace;
+ font-size: 12px;
+}
+
+#input {
+ margin: 5px;
+ border: 1px solid #24283b;
+ color: #c0caf5;
+ background-color: #24283b;
+}
+
+#input image {
+ color: #c0caf5;
+}
+
+#inner-box {
+ margin: 5px;
+ border: none;
+ background-color: #24283b;
+}
+
+#outer-box {
+ margin: 5px;
+ border: none;
+ background-color: #24283b;
+}
+
+#scroll {
+ margin: 0px;
+ border: none;
+}
+
+#text {
+ margin: 5px;
+ border: none;
+ color: #c0caf5;
+}
+
+#entry:selected {
+ background-color: #414868;
+ font-weight: normal;
+}
+
+#text:selected {
+ background-color: #414868;
+ font-weight: normal;
+}
+```
+
+And this system is looking pretty good. We got our waybar all setup, our widgets, we have our foot terminal looking good, our wallpaper, and our wofi config.
+This is just the beginning of hyprland, but this should be a great source for you to start customizing your own personal setup.
+
+
+## Hyprland Keybinds {#hyprland-keybinds}
+
+| Mod Key | Key / Input | Action | Target / Notes |
+|---------|-------------|----------------|----------------|
+| SUPER | Return | exec | $terminal |
+| SUPER | Q | killactive | |
+| SUPER | M | exit | |
+| SUPER | E | exec | $fileManager |
+| SUPER | V | togglefloating | |
+| SUPER | D | exec | $menu |
+| SUPER | R | exec | $reload_waybar |
+| SUPER | P | pseudo | dwindle only |
+| SUPER | J | togglesplit | dwindle only |
+
+
+### Directional Focus {#directional-focus}
+
+| Mod Key | Key | Action | Direction |
+|---------|-------|-----------|-----------|
+| SUPER | left | movefocus | l |
+| SUPER | right | movefocus | r |
+| SUPER | up | movefocus | u |
+| SUPER | down | movefocus | d |
+
+
+### Workspaces {#workspaces}
+
+| Mod Key | Key | Action | Workspace |
+|-------------|-----|-----------------|-----------|
+| SUPER | 1–0 | workspace | 1–10 |
+| SUPER+SHIFT | 1–0 | movetoworkspace | 1–10 |
+
+
+### Special Workspace {#special-workspace}
+
+| Mod Key | Key | Action | Workspace |
+|-------------|-----|------------------------|---------------|
+| SUPER | S | togglespecialworkspace | magic |
+| SUPER+SHIFT | S | movetoworkspace | special:magic |
+
+
+### Scroll to Switch Workspaces {#scroll-to-switch-workspaces}
+
+| Mod Key | Mouse Input | Action | Workspace |
+|---------|-------------|-----------|----------------|
+| SUPER | mouse_down | workspace | e+1 (next) |
+| SUPER | mouse_up | workspace | e-1 (previous) |
+
+
+## Final Thoughts {#final-thoughts}
+
+Thanks so much for checking out this tutorial. If you got value from it, and you want to find more tutorials like this, check out
+my youtube channel here: [YouTube](https://youtube.com/@tony-btw), or my website here: [tony,btw](https://www.tonybtw.com)
+
+You can support me here: [kofi](https://ko-fi.com/tonybtw)
diff --git a/content/tutorial/neovim/index.md b/content/tutorial/neovim/index.md
new file mode 100644
index 0000000..501ddf8
--- /dev/null
+++ b/content/tutorial/neovim/index.md
@@ -0,0 +1,366 @@
++++
+title = "Neovim on Linux — Complete IDE Tutorial"
+author = ["Tony", "btw"]
+description = "A quick and painless guide on installing and configuring Neovim, and how to use it as your full daily driver IDE, btw."
+date = 2025-05-10
+draft = false
+image = "/img/neovim.png"
+showTableOfContents = true
++++
+
+## Intro {#intro}
+
+A clean and painless guide to turning Neovim into a modern IDE.
+
+Neovim is a Vim-based text editor built for extensibility and usability. In this tutorial, you’ll learn how to set it up with plugins, keybinds, and full LSP support. This guide assumes you're using a Unix-like system and are comfortable with basic terminal commands.
+
+
+## Install Neovim and dependencies {#install-neovim-and-dependencies}
+
+Use your system’s package manager to install Neovim, along with a few tools that will be required later (like npm and ripgrep).
+
+```sh
+# Gentoo
+sudo emerge app-editors/neovim
+sudo emerge net-libs/nodejs
+sudo emerge sys-apps/ripgrep
+
+# Arch
+sudo pacman -S neovim nodejs npm ripgrep
+```
+
+
+## Set up your Neovim config directory {#set-up-your-neovim-config-directory}
+
+Create your config folder and add the main config file.
+
+```sh
+mkdir -p ~/.config/nvim
+cd ~/.config/nvim
+nvim .
+```
+
+In Neovim, press `%` to create a new file named `init.lua`:
+
+```lua
+print("I use Neovim by the way")
+```
+
+Save and quit with `:wq`, then reopen Neovim.
+
+
+## Create a Lua module for options {#create-a-lua-module-for-options}
+
+```sh
+mkdir -p ~/.config/nvim/lua/config
+nvim lua/config/options.lua
+```
+
+```lua
+vim.opt.number = true
+vim.opt.relativenumber = true
+vim.opt.cursorline = true
+vim.opt.shiftwidth = 4
+```
+
+Then in `init.lua`:
+
+```lua
+require("config.options")
+```
+
+
+## Add keybindings {#add-keybindings}
+
+```lua
+vim.g.mapleader = " "
+vim.keymap.set("n", "<leader>cd", vim.cmd.Ex)
+```
+
+In `init.lua`:
+
+```lua
+require("config.keybinds")
+```
+
+
+## Install Lazy.nvim {#install-lazy-dot-nvim}
+
+Clone it into your runtime path.
+
+```lua
+local lazypath = vim.fn.stdpath("data") .. "/lazy/lazy.nvim"
+if not vim.loop.fs_stat(lazypath) then
+ vim.fn.system({
+ "git",
+ "clone",
+ "--filter=blob:none",
+ "https://github.com/folke/lazy.nvim.git",
+ "--branch=stable",
+ lazypath,
+ })
+end
+vim.opt.rtp:prepend(lazypath)
+
+require("lazy").setup({})
+```
+
+Then:
+
+```lua
+require("config.lazy")
+```
+
+
+## Add a theme plugin {#add-a-theme-plugin}
+
+```lua
+return {
+ "folke/tokyonight.nvim",
+ config = function()
+ vim.cmd.colorscheme("tokyonight")
+ end,
+}
+```
+
+
+## Add Telescope for fuzzy finding {#add-telescope-for-fuzzy-finding}
+
+```lua
+return {
+ "nvim-telescope/telescope.nvim",
+ dependencies = { "nvim-lua/plenary.nvim" },
+ config = function()
+ local builtin = require("telescope.builtin")
+ vim.keymap.set("n", "<leader>ff", builtin.find_files)
+ vim.keymap.set("n", "<leader>fg", builtin.live_grep)
+ vim.keymap.set("n", "<leader>fb", builtin.buffers)
+ vim.keymap.set("n", "<leader>fh", builtin.help_tags)
+ end,
+}
+```
+
+
+## Add Treesitter for syntax highlighting {#add-treesitter-for-syntax-highlighting}
+
+```lua
+return {
+ "nvim-treesitter/nvim-treesitter",
+ build = ":TSUpdate",
+ config = function()
+ require("nvim-treesitter.configs").setup({
+ highlight = { enable = true },
+ indent = { enable = true },
+ ensure_installed = { "lua" },
+ auto_install = false,
+ })
+ end,
+}
+```
+
+
+## Add Harpoon for file bookmarking {#add-harpoon-for-file-bookmarking}
+
+```lua
+return {
+ "ThePrimeagen/harpoon",
+ config = function()
+ local harpoon = require("harpoon")
+ vim.keymap.set("n", "<leader>a", function() harpoon:list():add() end)
+ vim.keymap.set("n", "<C-e>", function() harpoon.ui:toggle_quick_menu(harpoon:list()) end)
+ end,
+}
+```
+
+
+## Add LSP, autocompletion, and snippets {#add-lsp-autocompletion-and-snippets}
+
+```lua
+return {
+ "neovim/nvim-lspconfig",
+ dependencies = {
+ "williamboman/mason.nvim",
+ "hrsh7th/nvim-cmp",
+ "L3MON4D3/LuaSnip",
+ },
+ config = function()
+ require("mason").setup()
+ require("mason-lspconfig").setup({ ensure_installed = { "lua_ls" } })
+
+ local lspconfig = require("lspconfig")
+ lspconfig.lua_ls.setup({})
+
+ local cmp = require("cmp")
+ cmp.setup({
+ snippet = {
+ expand = function(args)
+ require("luasnip").lsp_expand(args.body)
+ end,
+ },
+ mapping = cmp.mapping.preset.insert({
+ ["<Tab>"] = cmp.mapping.select_next_item(),
+ ["<S-Tab>"] = cmp.mapping.select_prev_item(),
+ }),
+ sources = { { name = "nvim_lsp" }, { name = "luasnip" } },
+ })
+ end,
+}
+```
+
+
+## One-liner utility plugins {#one-liner-utility-plugins}
+
+```lua
+return {
+ { "tpope/vim-fugitive" },
+ { "ojroques/nvim-osc52" },
+ {
+ "norcalli/nvim-colorizer.lua",
+ config = function()
+ require("colorizer").setup()
+ end,
+ },
+}
+```
+
+
+## Final `init.lua` Example {#final-init-dot-lua-example}
+
+```lua
+require("config.options")
+require("config.keybinds")
+require("config.lazy")
+```
+
+```sh
+/home/tony/.config/nvim
+├── init.lua
+├── lazy-lock.json
+├── lua
+│ ├── config
+│ │ ├── keybinds.lua
+│ │ ├── lazy.lua
+│ │ └── options.lua
+│ └── plugins
+│ ├── colors.lua
+│ ├── harpoon.lua
+│ ├── init.lua
+│ ├── lsp.lua
+│ ├── lualine.lua
+│ ├── one-liners.lua
+│ ├── orgmode.lua
+│ ├── telescope.lua
+│ └── treesitter.lua
+├── plugin
+│ └── flterm.lua
+└── README.md
+
+5 directories, 16 files
+
+```
+
+
+## My keybinds {#my-keybinds}
+
+If you want to just copy my nvim config, my keybind documentation is here:
+
+
+### General {#general}
+
+| Mode | Key | Action |
+|------|------------------------------|----------------------------------------------|
+| n | <leader>cd | Open Ex mode (\`:Ex\`) |
+| n | J | Join lines while keeping the cursor in place |
+| n | <C-d> | Scroll half-page down and center cursor |
+| n | <C-u> | Scroll half-page up and center cursor |
+| n | n | Next search result (centered) |
+| n | N | Prev search result (centered) |
+| n | Q | Disable Ex mode |
+| n | <C-k> | Next quickfix entry (centered) |
+| n | <C-j> | Prev quickfix entry (centered) |
+| n | <leader>k | Next location list entry (centered) |
+| n | <leader>j | Prev location list entry (centered) |
+| i | <C-c> | Exit insert mode |
+| n | <leader>x | Make current file executable |
+| n | <leader>u | Toggle Undotree |
+| n | <leader>rl | Reload config |
+| n | <leader><leader> | Source current file |
+
+
+### Visual Mode {#visual-mode}
+
+| Mode | Key | Action |
+|------|-----------------|-------------------------------------|
+| v | J | Move block down |
+| v | K | Move block up |
+| x | <leader>p | Paste without overwriting clipboard |
+| v | <leader>y | Yank to system clipboard |
+
+
+### Linting & Formatting {#linting-and-formatting}
+
+| Mode | Key | Action |
+|------|------------------|------------------|
+| n | <leader>cc | Run php-cs-fixer |
+| n | <F3> | Format (LSP) |
+
+
+### Telescope {#telescope}
+
+| Mode | Key | Action |
+|------|------------------|--------------------------------------|
+| n | <leader>ff | Find files |
+| n | <leader>fg | Git-tracked files |
+| n | <leader>fo | Recent files |
+| n | <leader>fq | Quickfix list |
+| n | <leader>fh | Help tags |
+| n | <leader>fb | Buffers |
+| n | <leader>fs | Grep string under cursor |
+| n | <leader>fc | Grep current filename (no extension) |
+| n | <leader>fi | Search in ~/.config/nvim |
+
+
+### Harpoon {#harpoon}
+
+| Mode | Key | Action |
+|------|------------------|---------------------------|
+| n | <leader>a | Add to Harpoon |
+| n | <C-e> | Toggle Harpoon quick menu |
+| n | <leader>fl | Telescope Harpoon marks |
+| n | <C-p> | Prev Harpoon mark |
+| n | <C-n> | Next Harpoon mark |
+
+
+### LSP {#lsp}
+
+| Mode | Key | Action |
+|------|------------|------------------------|
+| n | K | Hover docs |
+| n | gd | Go to definition |
+| n | gD | Go to declaration |
+| n | gi | Go to implementation |
+| n | go | Go to type definition |
+| n | gr | List references |
+| n | gs | Signature help |
+| n | gl | Show diagnostics float |
+| n | <F2> | Rename symbol |
+| n,x | <F3> | Format code |
+| n | <F4> | Code actions |
+
+
+### Misc {#misc}
+
+| Mode | Key | Action |
+|------|------------------|------------------------------|
+| n | <leader>dg | Run DogeGenerate |
+| n | <leader>s | Replace word on current line |
+
+
+## Final Thoughts {#final-thoughts}
+
+You're now ready to use Neovim as a modern, fast, and extensible code editor.
+
+Thanks so much for checking out this tutorial. If you got value from it, and you want to find more tutorials like this, check out
+my youtube channel here: [YouTube](https://youtube.com/@tony-btw), or my website here: [tony,btw](https://www.tonybtw.com)
+
+You can support me here: [kofi](https://ko-fi.com/tonybtw)
diff --git a/hugo.toml b/hugo.toml
new file mode 100644
index 0000000..a48bd55
--- /dev/null
+++ b/hugo.toml
@@ -0,0 +1,3 @@
+baseURL = 'https://example.org/'
+languageCode = 'en-us'
+title = 'Tony, btw.'
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
new file mode 100644
index 0000000..7dc8032
--- /dev/null
+++ b/layouts/_default/single.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="author" content="Tony, btw." />
+ <link rel="icon" type="image/png" href="/img/favicon.png" />
+ <link rel="stylesheet" href="/css/code.css" />
+ <link rel="stylesheet" href="/css/site.css" />
+ <title>{{ .Title }}</title>
+ </head>
+ <body>
+
+ {{ partial "header.html" . }}
+
+ <main class="container">
+ <div class="row" style="display: flex; align-items: flex-start; gap: 2rem;">
+
+ <!-- Main Content -->
+ <div class="column" style="flex: 1;">
+ <article class="site-post">
+ <h1 class="site-post-title center">{{ .Title }}</h1>
+ {{ with .Params.date }}<p class="site-post-meta center">{{ . }}</p>{{ end }}
+
+ {{ with .Params.image }}
+ <div class="post-hero">
+ <img src="{{ . | relURL }}" alt="{{ $.Title }}" loading="lazy" />
+ </div>
+ {{ end }}
+
+ {{ if .Params.video }}
+ <div class="video">
+ <iframe src="https://www.youtube.com/embed/{{ .Params.video }}" allowfullscreen></iframe>
+ </div>
+ {{ end }}
+
+ <div id="content" class="mb-10">
+ {{ .Content }}
+ </div>
+ </article>
+ </div>
+
+ <!-- Sidebar TOC -->
+ {{ if gt (len .TableOfContents) 80 }}
+ <aside class="content-panel" style="flex: 0 0 250px; max-width: 250px; position: sticky; top: 100px; align-self: flex-start;">
+ <div class="pb-3">
+ <strong class="text-xl">Table of Contents</strong>
+ </div>
+ <div id="tableOfContentContainer" style="max-height: calc(100vh - 8rem); overflow-y: auto;">
+ {{ .TableOfContents }}
+ </div>
+ </aside>
+ {{ end }}
+
+ </div>
+ </main>
+ </body>
+</html>
+
diff --git a/layouts/index.html b/layouts/index.html
new file mode 100644
index 0000000..d65f1c2
--- /dev/null
+++ b/layouts/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <link rel="icon" type="image/png" href="/img/favicon.png" />
+ <title>{{ .Site.Title }}</title>
+ <link rel="stylesheet" href="/css/site.css" />
+ </head>
+ <body>
+
+ {{ partial "header.html" . }}
+
+ <main class="container">
+
+ <!-- Hero Section -->
+ <section class="hero-section" style="padding: 4rem 1rem; text-align: center;">
+ <h1 style="font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem;">
+ Creating <span style="color: var(--cyn);">Quick and Painless</span> Linux Tutorials
+ </h1>
+ <p style="font-size: 1.2rem; max-width: 700px; margin: 0 auto 2rem auto;">
+ My name is Tony, and I encourage you all to visit the command line and learn how to maneuver the CLI.
+ Installing Linux distributions, window managers, text editors, and more will help you grow not only as a developer, but as a computer enthusiast.
+ </p>
+ <div style="margin-top: 1.5rem;">
+ <a href="https://www.youtube.com/@tony-btw" target="_blank" class="btn-primary">YouTube Channel</a>
+ <a href="/support/" class="btn-outline" style="margin-left: 1rem;">Support!</a>
+ </div>
+ </section>
+
+ <!-- Tutorials Section -->
+ <section style="margin-top: 3rem; margin-bottom: 4rem;">
+ <h2 style="font-size: 1.8rem; font-weight: bold; text-align: center; margin-bottom: 1rem;">
+ Recent Tutorials
+ </h2>
+ <p style="text-align: center; margin-bottom: 2rem;">
+ Stay tuned for new videos and writeups!
+ </p>
+
+<div class="recent-tutorials-grid">
+ {{ $recent := first 3 (where site.RegularPages.ByDate.Reverse "Section" "tutorial") }}
+ {{ range $recent }}
+ {{ $page := . }}
+ <div class="tutorial-card">
+ {{ with $page.Params.image }}
+ <a href="{{ $page.RelPermalink }}">
+ <img
+ src="{{ . }}"
+ alt="{{ $page.Title }}"
+ class="tutorial-card-image"
+ loading="lazy"
+ />
+ </a>
+ {{ end }}
+
+ <h4 class="tutorial-card-title">
+ <a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
+ </h4>
+ <p class="tutorial-card-date">{{ $page.Date.Format "January 2, 2006" }}</p>
+ <p class="tutorial-card-description">{{ $page.Description }}</p>
+ </div>
+ {{ else }}
+ <p style="text-align: center; color: var(--tokyonight-comment);">No tutorials yet. Coming soon!</p>
+ {{ end }}
+</div>
+
+ <div style="text-align: center; margin-top: 2rem;">
+ <a href="/tutorial/" class="btn-primary">Explore All Tutorials</a>
+ </div>
+ </section>
+
+ </main>
+ </body>
+</html>
+
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
new file mode 100644
index 0000000..a5159b4
--- /dev/null
+++ b/layouts/partials/header.html
@@ -0,0 +1,230 @@
+<header class="site-header sticky z-30">
+ <div class="site-masthead">
+ <nav class="navbar container">
+ <!-- Logo -->
+ <div class="nav-logo">
+ <a class="navbar-brand" href="/">Tony, btw.</a>
+ </div>
+
+ <!-- Hamburger Toggler -->
+ <button id="nav-toggler" class="nav-toggle" aria-label="Open Mobile Menu">
+ <svg viewBox="0 0 20 20" class="hamburger-icon" fill="currentColor">
+ <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
+ </svg>
+ </button>
+
+ <!-- Desktop Nav -->
+ <ul id="nav-menu" class="nav-menu">
+ <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
+ <li class="nav-item"><a class="nav-link" href="/support/">Support</a></li>
+ <li class="nav-item"><a class="nav-link" href="/tutorial/">Tutorials</a></li>
+ <div class="nav-right">
+ <a href="https://discord.gg/CXAz6m4sWE" class="discord-desktop-btn" target="_blank" rel="noopener">
+ <!-- 💬 Join Discord -->
+ Join Discord
+ </a>
+ </div>
+ </ul>
+
+ </nav>
+ </div>
+</header>
+
+<!-- Mobile Nav -->
+<div id="mobile-nav-panel" class="mobile-nav hidden">
+ <ul class="mobile-nav-list">
+ <li><a class="mobile-nav-link" href="/">Home</a></li>
+ <li><a class="mobile-nav-link" href="/getting-involved/">Support</a></li>
+ <li><a class="mobile-nav-link" href="/tutorial/">Tutorials</a></li>
+ <li class="mobile-nav-link">
+ <a href="https://discord.gg/CXAz6m4sWE" target="_blank" rel="noopener">💬 Join Discord</a>
+ </li>
+ </ul>
+</div>
+
+<!-- Discord Desktop -->
+
+<style>
+
+.navbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end; /* <--- this aligns logo + nav to bottom */
+ padding: 1rem 0;
+}
+
+.nav-logo {
+ font-size: 1.75rem;
+ font-weight: bold;
+ margin: 0;
+ padding: 0;
+ line-height: 1;
+}
+
+.navbar-brand {
+ text-decoration: none;
+ color: white;
+}
+
+.nav-menu {
+ display: flex;
+ align-items: flex-end; /* ensure nav links align with logo */
+ gap: 1rem;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.navbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.nav-logo .navbar-brand {
+ font-size: 1.6rem;
+ font-weight: bold;
+ background: linear-gradient(to right, #7aa2f7, #ad8ee6);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ text-decoration: none;
+}
+
+.nav-menu {
+ display: none;
+ flex-direction: row;
+ list-style: none;
+ gap: 2rem;
+ padding-left: 0;
+}
+
+.nav-item {
+ display: inline-block;
+}
+
+.nav-link {
+ text-decoration: none;
+ color: #c0caf5;
+ padding: 0.5rem 1rem;
+}
+
+.nav-link:hover {
+ color: #7aa2f7;
+}
+
+.nav-toggle {
+ display: inline-block;
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.hamburger-icon {
+ width: 24px;
+ height: 24px;
+ color: #c0caf5;
+}
+
+.nav-right {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.theme-switcher {
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.discord-btn {
+ background-color: #7aa2f7;
+ color: #1a1b26;
+ padding: 0.4rem 0.8rem;
+ border-radius: 4px;
+ text-decoration: none;
+ font-weight: bold;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.discord-btn:hover {
+ background-color: #5e8eff;
+}
+
+/* Mobile nav panel */
+.mobile-nav {
+ background-color: #1a1b26;
+ padding: 1rem;
+}
+
+.mobile-nav-list {
+ list-style: none;
+ padding-left: 0;
+}
+
+.mobile-nav-link {
+ display: block;
+ padding: 0.5rem 0;
+ color: #c0caf5;
+ text-decoration: none;
+ border-bottom: 1px solid #292d3e;
+}
+
+.mobile-nav-link:hover {
+ color: #7aa2f7;
+}
+
+.hidden {
+ display: none !important;
+}
+
+/* Mobile only */
+@media (max-width: 768px) {
+ .nav-logo {
+ padding-left: 1rem;
+ }
+ .nav-toggle {
+ padding-right: 1rem;
+ }
+}
+
+/* Show desktop nav at large screens */
+@media screen and (min-width: 1024px) {
+ .nav-menu {
+ display: flex;
+ }
+
+ .nav-toggle {
+ display: none;
+ }
+
+ .mobile-nav {
+ display: none !important;
+ }
+}
+</style>
+
+<script>
+ const navToggler = document.getElementById('nav-toggler');
+ const mobileNav = document.getElementById('mobile-nav-panel');
+ navToggler?.addEventListener('click', () => {
+ mobileNav?.classList.toggle('hidden');
+ });
+
+ const themeSwitcherBtn = document.getElementById('theme-switcher-btn');
+ const applyTheme = (theme) => {
+ document.documentElement.classList.toggle('dark', theme === 'dark');
+ };
+ const toggleTheme = () => {
+ const isDark = document.documentElement.classList.toggle('dark');
+ localStorage.setItem('theme', isDark ? 'dark' : 'light');
+ };
+ const initialTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+ applyTheme(initialTheme);
+ document.addEventListener('DOMContentLoaded', () => {
+ themeSwitcherBtn?.addEventListener('click', toggleTheme);
+ });
+</script>
diff --git a/layouts/support.html b/layouts/support.html
new file mode 100644
index 0000000..b7019f2
--- /dev/null
+++ b/layouts/support.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="author" content="Tony, btw." />
+ <link rel="icon" type="image/png" href="/img/favicon.png" />
+ <link rel="stylesheet" href="/css/code.css" />
+ <link rel="stylesheet" href="/css/site.css" />
+ <title>Support Tony</title>
+ </head>
+ <body>
+
+ {{ partial "header.html" . }}
+
+ <main class="container">
+ <section style="padding: 4rem 1rem; max-width: 960px; margin: 0 auto;">
+ <h1 style="text-align: center; font-size: 2rem; margin-bottom: 1rem;">
+ Support the Channel
+ </h1>
+ <p style="text-align: center; color: #a9b1d6; margin-bottom: 2rem;">
+ If you get value from the videos and tutorials, here are a few ways to contribute and help me keep creating.
+ </p>
+ <div style="
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: 2rem;
+ justify-content: center;
+ margin: 2rem 0;
+ ">
+ <div style="flex: 1 1 260px; border: 1px solid #7aa2f7; border-radius: 8px; padding: 1rem;">
+ <h3 style="margin-top: 0;">Subscribe on YouTube</h3>
+ <p>Support the channel by subscribing — it's free and helps spread the word. New tutorials frequently.</p>
+ <p><a href="https://www.youtube.com/@tony-btw" target="_blank">Go to YouTube</a></p>
+ </div>
+
+ <div style="flex: 1 1 260px; border: 1px solid #7aa2f7; border-radius: 8px; padding: 1rem;">
+ <h3 style="margin-top: 0;">Donate via PayPal</h3>
+ <p>Help keep the content flowing by donating through Square/PayPal. Every contribution makes a difference.</p>
+ <p><a href="https://square.link/u/tC3glUCo" target="_blank">Donate via Square</a></p>
+ </div>
+
+ <div style="flex: 1 1 260px; border: 1px solid #7aa2f7; border-radius: 8px; padding: 1rem;">
+ <h3 style="margin-top: 0;">Support on Ko-Fi</h3>
+ <p>Prefer Ko-Fi? You can buy me a coffee and support future videos directly. Thanks for your kindness.</p>
+ <p><a href="https://ko-fi.com/tonybtw" target="_blank">Go to Ko-Fi</a></p>
+ </div>
+ </div>
+ </section>
+
+ </main>
+ </body>
+</html>
diff --git a/layouts/tutorial/list.html b/layouts/tutorial/list.html
new file mode 100644
index 0000000..767120b
--- /dev/null
+++ b/layouts/tutorial/list.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/png" href="/img/favicon.png" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>{{ .Title }}</title>
+ <link rel="stylesheet" href="/css/site.css" />
+</head>
+<body>
+
+ {{ partial "header.html" . }}
+<main class="container">
+ <h1 class="site-post-title center" style="margin-bottom: 2rem;">Tutorials</h1>
+
+<div class="tutorial-grid">
+ {{ $paginator := .Paginate .Pages }}
+ {{ range $page := $paginator.Pages }}
+ <div class="tutorial-card">
+ {{ with $page.Params.image }}
+ <a href="{{ $page.RelPermalink }}">
+ <img
+ src="{{ . }}"
+ alt="{{ $page.Title }}"
+ class="tutorial-card-image"
+ loading="lazy"
+ />
+ </a>
+ {{ end }}
+ <h4 class="tutorial-card-title">
+ <a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a>
+ </h4>
+ <p class="tutorial-card-date">{{ $page.Date.Format "January 2, 2006" }}</p>
+ <p class="tutorial-card-description">{{ $page.Description }}</p>
+ </div>
+ {{ end }}
+</div>
+
+ {{ if gt $paginator.TotalPages 1 }}
+ <div style="margin-top: 2rem; text-align: center;">
+ {{ template "_internal/pagination.html" . }}
+ </div>
+ {{ end }}
+</main>
+</body>
+</html>
diff --git a/layouts/tutorial/single.html b/layouts/tutorial/single.html
new file mode 100644
index 0000000..7dc8032
--- /dev/null
+++ b/layouts/tutorial/single.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="author" content="Tony, btw." />
+ <link rel="icon" type="image/png" href="/img/favicon.png" />
+ <link rel="stylesheet" href="/css/code.css" />
+ <link rel="stylesheet" href="/css/site.css" />
+ <title>{{ .Title }}</title>
+ </head>
+ <body>
+
+ {{ partial "header.html" . }}
+
+ <main class="container">
+ <div class="row" style="display: flex; align-items: flex-start; gap: 2rem;">
+
+ <!-- Main Content -->
+ <div class="column" style="flex: 1;">
+ <article class="site-post">
+ <h1 class="site-post-title center">{{ .Title }}</h1>
+ {{ with .Params.date }}<p class="site-post-meta center">{{ . }}</p>{{ end }}
+
+ {{ with .Params.image }}
+ <div class="post-hero">
+ <img src="{{ . | relURL }}" alt="{{ $.Title }}" loading="lazy" />
+ </div>
+ {{ end }}
+
+ {{ if .Params.video }}
+ <div class="video">
+ <iframe src="https://www.youtube.com/embed/{{ .Params.video }}" allowfullscreen></iframe>
+ </div>
+ {{ end }}
+
+ <div id="content" class="mb-10">
+ {{ .Content }}
+ </div>
+ </article>
+ </div>
+
+ <!-- Sidebar TOC -->
+ {{ if gt (len .TableOfContents) 80 }}
+ <aside class="content-panel" style="flex: 0 0 250px; max-width: 250px; position: sticky; top: 100px; align-self: flex-start;">
+ <div class="pb-3">
+ <strong class="text-xl">Table of Contents</strong>
+ </div>
+ <div id="tableOfContentContainer" style="max-height: calc(100vh - 8rem); overflow-y: auto;">
+ {{ .TableOfContents }}
+ </div>
+ </aside>
+ {{ end }}
+
+ </div>
+ </main>
+ </body>
+</html>
+
diff --git a/static/css/code.css b/static/css/code.css
new file mode 100644
index 0000000..6938300
--- /dev/null
+++ b/static/css/code.css
@@ -0,0 +1,1057 @@
+body {
+ color: #eeffff;
+ background-color: #292d3e;
+}
+.org-ansi-color-black {
+ /* ansi-color-black */
+ color: #292d3e;
+ background-color: #292d3e;
+}
+.org-ansi-color-blue {
+ /* ansi-color-blue */
+ color: #82aaff;
+ background-color: #82aaff;
+}
+.org-ansi-color-bright-black {
+ /* ansi-color-bright-black */
+ color: #1c1f2b;
+ background-color: #232635;
+}
+.org-ansi-color-bright-blue {
+ /* ansi-color-bright-blue */
+ color: #94b6ff;
+ background-color: #94b6ff;
+}
+.org-ansi-color-bright-cyan {
+ /* ansi-color-bright-cyan */
+ color: #9ae2ff;
+ background-color: #9ae2ff;
+}
+.org-ansi-color-bright-green {
+ /* ansi-color-bright-green */
+ color: #cbeb9e;
+ background-color: #cbeb9e;
+}
+.org-ansi-color-bright-magenta {
+ /* ansi-color-bright-magenta */
+ color: #cfa2ed;
+ background-color: #cfa2ed;
+}
+.org-ansi-color-bright-red {
+ /* ansi-color-bright-red */
+ color: #ff6c85;
+ background-color: #ff6c85;
+}
+.org-ansi-color-bright-white {
+ /* ansi-color-bright-white */
+ color: #a6accd;
+ background-color: #a6accd;
+}
+.org-ansi-color-bright-yellow {
+ /* ansi-color-bright-yellow */
+ color: #ffd281;
+ background-color: #ffd281;
+}
+.org-ansi-color-cyan {
+ /* ansi-color-cyan */
+ color: #89ddff;
+ background-color: #89ddff;
+}
+.org-ansi-color-faint {
+}
+.org-ansi-color-fast-blink {
+}
+.org-ansi-color-green {
+ /* ansi-color-green */
+ color: #c3e88d;
+ background-color: #c3e88d;
+}
+.org-ansi-color-inverse {
+}
+.org-ansi-color-magenta {
+ /* ansi-color-magenta */
+ color: #c792ea;
+ background-color: #c792ea;
+}
+.org-ansi-color-red {
+ /* ansi-color-red */
+ color: #ff5370;
+ background-color: #ff5370;
+}
+.org-ansi-color-slow-blink {
+}
+.org-ansi-color-white {
+ /* ansi-color-white */
+ color: #eeffff;
+ background-color: #eeffff;
+}
+.org-ansi-color-yellow {
+ /* ansi-color-yellow */
+ color: #ffcb6b;
+ background-color: #ffcb6b;
+}
+.org-bold {
+ /* bold */
+ font-weight: bold;
+}
+.org-border {
+}
+.org-buffer-menu-buffer {
+ /* buffer-menu-buffer */
+ font-weight: bold;
+}
+.org-builtin {
+ /* font-lock-builtin-face */
+ color: #82aaff;
+}
+.org-button {
+ /* button */
+ color: #c792ea;
+ font-weight: bold;
+ text-decoration: underline;
+}
+.org-calendar-month-header {
+ /* calendar-month-header */
+ color: #82aaff;
+}
+.org-calendar-today {
+ /* calendar-today */
+ text-decoration: underline;
+}
+.org-calendar-weekday-header {
+ /* calendar-weekday-header */
+ color: #f78c6c;
+}
+.org-calendar-weekend-header {
+ /* calendar-weekend-header */
+ color: #676e95;
+}
+.org-center {
+ margin: auto;
+ width: 50%;
+ text-align: center;
+}
+.org-child-frame-border {
+}
+.org-comint-highlight-input {
+ /* comint-highlight-input */
+ font-weight: bold;
+}
+.org-comint-highlight-prompt {
+ /* comint-highlight-prompt */
+ color: #c792ea;
+}
+.org-comment {
+ /* font-lock-comment-face */
+ color: #676e95;
+}
+.org-comment-delimiter {
+ /* font-lock-comment-delimiter-face */
+ color: #676e95;
+}
+.org-completions-common-part {
+ /* completions-common-part */
+ color: #add8e6;
+}
+.org-completions-first-difference {
+ /* completions-first-difference */
+ font-weight: bold;
+}
+.org-completions-group-separator {
+ /* completions-group-separator */
+ color: #676e95;
+ text-decoration: line-through;
+}
+.org-completions-group-title {
+ /* completions-group-title */
+ color: #676e95;
+ font-style: italic;
+}
+.org-constant {
+ /* font-lock-constant-face */
+ color: #f78c6c;
+}
+.org-cursor {
+ /* cursor */
+ background-color: #c792ea;
+}
+.org-diary {
+ /* diary */
+ color: #ffff00;
+}
+.org-doc {
+ /* font-lock-doc-face */
+ color: #8d92af;
+}
+.org-doc-markup {
+ /* font-lock-doc-markup-face */
+ color: #f78c6c;
+}
+.org-eldoc-highlight-function-argument {
+ /* eldoc-highlight-function-argument */
+ font-weight: bold;
+}
+.org-elisp-shorthand-font-lock {
+ /* elisp-shorthand-font-lock-face */
+ color: #00ffff;
+}
+.org-error {
+ /* error */
+ color: #ff5370;
+}
+.org-escape-glyph {
+ /* escape-glyph */
+ color: #89ddff;
+}
+.org-file-name-shadow {
+ /* file-name-shadow */
+ color: #676e95;
+}
+.org-fill-column-indicator {
+ /* fill-column-indicator */
+ color: #676e95;
+}
+.org-fixed-pitch {
+}
+.org-fixed-pitch-serif {
+}
+.org-fringe {
+ /* fringe */
+ color: #4e5579;
+ background-color: #292d3e;
+}
+.org-function-name {
+ /* font-lock-function-name-face */
+ color: #82aaff;
+}
+.org-glyphless-char {
+ /* glyphless-char */
+ font-size: 60%;
+}
+.org-header-line {
+ /* header-line */
+ color: #a6accd;
+ background-color: #232635;
+}
+.org-header-line-highlight {
+ /* header-line-highlight */
+ color: #1c1f2b;
+ background-color: #c792ea;
+}
+.org-help-argument-name {
+ /* help-argument-name */
+ font-style: italic;
+}
+.org-help-for-help-header {
+ /* help-for-help-header */
+ font-size: 126%;
+}
+.org-help-key-binding {
+ /* help-key-binding */
+ color: #add8e6;
+ background-color: #303030;
+}
+.org-highlight {
+ /* highlight */
+ color: #1c1f2b;
+ background-color: #c792ea;
+}
+.org-holiday {
+ /* holiday */
+ background-color: #8b4513;
+}
+.org-homoglyph {
+ /* homoglyph */
+ color: #00ffff;
+}
+.org-internal-border {
+}
+.org-isearch {
+ /* isearch */
+ color: #eeffff;
+ background-color: #4e5579;
+ font-weight: bold;
+}
+.org-isearch-fail {
+ /* isearch-fail */
+ color: #1c1f2b;
+ background-color: #ff5370;
+ font-weight: bold;
+}
+.org-isearch-group-1 {
+ /* isearch-group-1 */
+ color: #8b2323;
+ background-color: #ff82ab;
+}
+.org-isearch-group-2 {
+ /* isearch-group-2 */
+ color: #8b2323;
+ background-color: #cd6889;
+}
+.org-italic {
+ /* italic */
+ font-style: italic;
+}
+.org-keyword {
+ /* font-lock-keyword-face */
+ color: #89ddff;
+}
+.org-lazy-highlight {
+ /* lazy-highlight */
+ color: #eeffff;
+ background-color: #4e5579;
+ font-weight: bold;
+}
+.org-line-number {
+ /* line-number */
+ color: #676e95;
+ background-color: #292d3e;
+}
+.org-line-number-major-tick {
+ /* line-number-major-tick */
+ background-color: #bfbfbf;
+ font-weight: bold;
+}
+.org-line-number-minor-tick {
+ /* line-number-minor-tick */
+ background-color: #8c8c8c;
+ font-weight: bold;
+}
+.org-link {
+ /* link */
+ color: #c792ea;
+ font-weight: bold;
+ text-decoration: underline;
+}
+.org-link-visited {
+ /* link-visited */
+ color: #ee82ee;
+ font-weight: bold;
+ text-decoration: underline;
+}
+.org-match {
+ /* match */
+ color: #c3e88d;
+ background-color: #1c1f2b;
+ font-weight: bold;
+}
+.org-menu {
+}
+.org-minibuffer-prompt {
+ /* minibuffer-prompt */
+ color: #c792ea;
+}
+.org-mode-line {
+ /* mode-line */
+ color: #a6accd;
+ background-color: #232635;
+}
+.org-mode-line-buffer-id {
+ /* mode-line-buffer-id */
+ font-weight: bold;
+}
+.org-mode-line-emphasis {
+ /* mode-line-emphasis */
+ color: #c792ea;
+}
+.org-mode-line-highlight {
+ /* mode-line-highlight */
+ color: #1c1f2b;
+ background-color: #c792ea;
+}
+.org-mode-line-inactive {
+ /* mode-line-inactive */
+ color: #676e95;
+ background-color: #282c3d;
+}
+.org-mouse {
+}
+.org-mouse-drag-and-drop-region {
+ /* mouse-drag-and-drop-region */
+ background-color: #3c435e;
+}
+.org-negation-char {
+ /* font-lock-negation-char-face */
+ color: #89ddff;
+ font-weight: bold;
+}
+.org-next-error {
+ /* next-error */
+ background-color: #3c435e;
+}
+.org-next-error-message {
+ /* next-error-message */
+ color: #1c1f2b;
+ background-color: #c792ea;
+}
+.org-nobreak-hyphen {
+ /* nobreak-hyphen */
+ color: #00ffff;
+}
+.org-nobreak-space {
+ /* nobreak-space */
+ color: #89ddff;
+ text-decoration: underline;
+}
+.org-org-agenda-calendar-event {
+ /* org-agenda-calendar-event */
+ color: #eeffff;
+ background-color: #292d3e;
+}
+.org-org-agenda-calendar-sexp {
+ /* org-agenda-calendar-sexp */
+ color: #eeffff;
+ background-color: #292d3e;
+}
+.org-org-agenda-clocking {
+ /* org-agenda-clocking */
+ background-color: #3a4664;
+}
+.org-org-agenda-column-dateline {
+ /* org-agenda-column-dateline */
+ background-color: #4d4d4d;
+}
+.org-org-agenda-current-time {
+ /* org-agenda-current-time */
+ color: #676e95;
+}
+.org-org-agenda-date {
+ /* org-agenda-date */
+ color: #bb80b3;
+}
+.org-org-agenda-date-today {
+ /* org-agenda-date-today */
+ color: #d6b2d1;
+}
+.org-org-agenda-date-weekend {
+ /* org-agenda-date-weekend */
+ color: #704c6b;
+}
+.org-org-agenda-date-weekend-today {
+ /* org-agenda-date-weekend-today */
+ color: #d6b2d1;
+}
+.org-org-agenda-diary {
+ /* org-agenda-diary */
+ color: #eeffff;
+ background-color: #292d3e;
+}
+.org-org-agenda-dimmed-todo {
+ /* org-agenda-dimmed-todo-face */
+ color: #676e95;
+}
+.org-org-agenda-done {
+ /* org-agenda-done */
+ color: #676e95;
+ font-weight: bold;
+}
+.org-org-agenda-filter-category {
+ /* org-agenda-filter-category */
+ color: #a6accd;
+ background-color: #232635;
+}
+.org-org-agenda-filter-effort {
+ /* org-agenda-filter-effort */
+ color: #a6accd;
+ background-color: #232635;
+}
+.org-org-agenda-filter-regexp {
+ /* org-agenda-filter-regexp */
+ color: #a6accd;
+ background-color: #232635;
+}
+.org-org-agenda-filter-tags {
+ /* org-agenda-filter-tags */
+ color: #a6accd;
+ background-color: #232635;
+}
+.org-org-agenda-restriction-lock {
+ /* org-agenda-restriction-lock */
+ background-color: #1c1c1c;
+}
+.org-org-agenda-structure {
+ /* org-agenda-structure */
+ color: #eeffff;
+}
+.org-org-agenda-structure-secondary {
+ /* org-agenda-structure-secondary */
+ color: #eeffff;
+}
+.org-org-archived {
+ /* org-archived */
+ color: #8d92af;
+}
+.org-org-block {
+ /* org-block */
+ background-color: #232635;
+}
+.org-org-block-begin-line {
+ /* org-block-begin-line */
+ color: #676e95;
+ background-color: #232635;
+}
+.org-org-block-end-line {
+ /* org-block-end-line */
+ color: #676e95;
+ background-color: #232635;
+}
+.org-org-checkbox {
+ /* org-checkbox */
+ color: #c3e88d;
+ font-weight: bold;
+}
+.org-org-checkbox-statistics-done {
+ /* org-checkbox-statistics-done */
+ color: #676e95;
+ font-weight: bold;
+}
+.org-org-checkbox-statistics-todo {
+ /* org-checkbox-statistics-todo */
+ color: #c3e88d;
+ font-weight: bold;
+}
+.org-org-cite {
+ /* org-cite */
+ color: #55c0b8;
+}
+.org-org-cite-key {
+ /* org-cite-key */
+ color: #88d4d0;
+ text-decoration: underline;
+}
+.org-org-clock-overlay {
+ /* org-clock-overlay */
+ color: #ffffff;
+ background-color: #4a708b;
+}
+.org-org-code {
+ /* org-code */
+ color: #f78c6c;
+ background-color: #232635;
+}
+.org-org-column {
+ /* org-column */
+ background-color: #4d4d4d;
+}
+.org-org-column-title {
+ /* org-column-title */
+ background-color: #4d4d4d;
+ font-weight: bold;
+ text-decoration: underline;
+}
+.org-org-date {
+ /* org-date */
+ color: #ffcb6b;
+}
+.org-org-date-selected {
+ /* org-date-selected */
+ color: #ffc0cb;
+}
+.org-org-default {
+}
+.org-org-dispatcher-highlight {
+ /* org-dispatcher-highlight */
+ color: #ffd700;
+ background-color: #333333;
+ font-weight: bold;
+}
+.org-org-document-info {
+ /* org-document-info */
+ color: #82aaff;
+}
+.org-org-document-info-keyword {
+ /* org-document-info-keyword */
+ color: #676e95;
+}
+.org-org-document-title {
+ /* org-document-title */
+ color: #82aaff;
+ font-weight: bold;
+}
+.org-org-done {
+ /* org-done */
+ color: #676e95;
+ font-weight: bold;
+}
+.org-org-drawer {
+ /* org-drawer */
+ color: #676e95;
+}
+.org-org-ellipsis {
+ /* org-ellipsis */
+ color: #676e95;
+}
+.org-org-footnote {
+ /* org-footnote */
+ color: #f78c6c;
+}
+.org-org-formula {
+ /* org-formula */
+ color: #89ddff;
+}
+.org-org-headline-done {
+ /* org-headline-done */
+ color: #676e95;
+}
+.org-org-headline-todo {
+ /* org-headline-todo */
+ color: #eea9b8;
+}
+.org-org-hide {
+ /* org-hide */
+ color: #292d3e;
+}
+.org-org-imminent-deadline {
+ /* org-imminent-deadline */
+ color: #ffcb6b;
+}
+.org-org-inline-src-block {
+ /* org-inline-src-block */
+ background-color: #232635;
+}
+.org-org-latex-and-related {
+ /* org-latex-and-related */
+ color: #a6accd;
+ font-weight: bold;
+}
+.org-org-level-1 {
+ /* org-level-1 */
+ color: #82aaff;
+ font-weight: bold;
+}
+.org-org-level-2 {
+ /* org-level-2 */
+ color: #c792ea;
+ font-weight: bold;
+}
+.org-org-level-3 {
+ /* org-level-3 */
+ color: #bb80b3;
+ font-weight: bold;
+}
+.org-org-level-4 {
+ /* org-level-4 */
+ color: #a1bfff;
+ font-weight: bold;
+}
+.org-org-level-5 {
+ /* org-level-5 */
+ color: #d5adef;
+ font-weight: bold;
+}
+.org-org-level-6 {
+ /* org-level-6 */
+ color: #c0d4ff;
+ font-weight: bold;
+}
+.org-org-level-7 {
+ /* org-level-7 */
+ color: #e3c8f4;
+ font-weight: bold;
+}
+.org-org-level-8 {
+ /* org-level-8 */
+ color: #e6eeff;
+ font-weight: bold;
+}
+.org-org-link {
+ /* org-link */
+ color: #c792ea;
+ font-weight: bold;
+ text-decoration: underline;
+}
+.org-org-list-dt {
+ /* org-list-dt */
+ color: #c792ea;
+}
+.org-org-macro {
+ /* org-macro */
+ color: #a6accd;
+ font-weight: bold;
+}
+.org-org-meta-line {
+ /* org-meta-line */
+ color: #8d92af;
+}
+.org-org-mode-line-clock {
+ /* org-mode-line-clock */
+ color: #a6accd;
+ background-color: #232635;
+}
+.org-org-mode-line-clock-overrun {
+ /* org-mode-line-clock-overrun */
+ color: #a6accd;
+ background-color: #ff0000;
+}
+.org-org-priority {
+ /* org-priority */
+ color: #ff5370;
+}
+.org-org-property-value {
+ /* org-property-value */
+ color: #8d92af;
+}
+.org-org-quote {
+ /* org-quote */
+ background-color: #232635;
+ font-style: italic;
+}
+.org-org-scheduled {
+ /* org-scheduled */
+ color: #eeffff;
+}
+.org-org-scheduled-previously {
+ /* org-scheduled-previously */
+ color: #a6accd;
+}
+.org-org-scheduled-today {
+ /* org-scheduled-today */
+ color: #717cb4;
+}
+.org-org-sexp-date {
+ /* org-sexp-date */
+ color: #eeffff;
+}
+.org-org-special-keyword {
+ /* org-special-keyword */
+ color: #8d92af;
+}
+.org-org-table {
+ /* org-table */
+ color: #bb80b3;
+}
+.org-org-table-header {
+ /* org-table-header */
+ color: #000000;
+ background-color: #d3d3d3;
+}
+.org-org-tag {
+ /* org-tag */
+ color: #8d92af;
+}
+.org-org-tag-group {
+ /* org-tag-group */
+ color: #8d92af;
+}
+.org-org-target {
+ /* org-target */
+ text-decoration: underline;
+}
+.org-org-time-grid {
+ /* org-time-grid */
+ color: #676e95;
+}
+.org-org-todo {
+ /* org-todo */
+ color: #c3e88d;
+ font-weight: bold;
+}
+.org-org-upcoming-deadline {
+ /* org-upcoming-deadline */
+ color: #c6d5d8;
+}
+.org-org-upcoming-distant-deadline {
+ /* org-upcoming-distant-deadline */
+ color: #8b969e;
+}
+.org-org-verbatim {
+ /* org-verbatim */
+ color: #c3e88d;
+}
+.org-org-verse {
+ /* org-verse */
+ background-color: #232635;
+}
+.org-org-warning {
+ /* org-warning */
+ color: #ffcb6b;
+}
+.org-outline-1 {
+ /* outline-1 */
+ color: #82aaff;
+ font-weight: bold;
+}
+.org-outline-2 {
+ /* outline-2 */
+ color: #c792ea;
+ font-weight: bold;
+}
+.org-outline-3 {
+ /* outline-3 */
+ color: #bb80b3;
+ font-weight: bold;
+}
+.org-outline-4 {
+ /* outline-4 */
+ color: #a1bfff;
+ font-weight: bold;
+}
+.org-outline-5 {
+ /* outline-5 */
+ color: #d5adef;
+ font-weight: bold;
+}
+.org-outline-6 {
+ /* outline-6 */
+ color: #c0d4ff;
+ font-weight: bold;
+}
+.org-outline-7 {
+ /* outline-7 */
+ color: #e3c8f4;
+ font-weight: bold;
+}
+.org-outline-8 {
+ /* outline-8 */
+ color: #e6eeff;
+ font-weight: bold;
+}
+.org-preprocessor {
+ /* font-lock-preprocessor-face */
+ color: #89ddff;
+ font-weight: bold;
+}
+.org-query-replace {
+ /* query-replace */
+ color: #eeffff;
+ background-color: #4e5579;
+ font-weight: bold;
+}
+.org-read-multiple-choice {
+ /* read-multiple-choice-face */
+ font-weight: bold;
+ text-decoration: underline;
+}
+.org-regexp-grouping-backslash {
+ /* font-lock-regexp-grouping-backslash */
+ color: #89ddff;
+ font-weight: bold;
+}
+.org-regexp-grouping-construct {
+ /* font-lock-regexp-grouping-construct */
+ color: #89ddff;
+ font-weight: bold;
+}
+.org-region {
+ /* region */
+ background-color: #3c435e;
+}
+.org-scroll-bar {
+ /* scroll-bar */
+ color: #ffffff;
+}
+.org-secondary-selection {
+ /* secondary-selection */
+ background-color: #676e95;
+}
+.org-separator-line {
+ /* separator-line */
+ background-color: #505050;
+ font-size: 10%;
+}
+.org-shadow {
+ /* shadow */
+ color: #676e95;
+}
+.org-show-paren-match {
+ /* show-paren-match */
+ color: #ff5370;
+ background-color: #1c1f2b;
+}
+.org-show-paren-match-expression {
+ /* show-paren-match-expression */
+ color: #ff5370;
+ background-color: #1c1f2b;
+}
+.org-show-paren-mismatch {
+ /* show-paren-mismatch */
+ color: #1c1f2b;
+ background-color: #ff5370;
+}
+.org-string {
+ /* font-lock-string-face */
+ color: #c3e88d;
+}
+.org-success {
+ /* success */
+ color: #c3e88d;
+}
+.org-tab-bar {
+ /* tab-bar */
+ color: #242837;
+ background-color: #242837;
+}
+.org-tab-bar-tab {
+ /* tab-bar-tab */
+ color: #eeffff;
+ background-color: #292d3e;
+}
+.org-tab-bar-tab-group-current {
+ /* tab-bar-tab-group-current */
+ color: #eeffff;
+ background-color: #292d3e;
+ font-weight: bold;
+}
+.org-tab-bar-tab-inactive {
+ /* tab-bar-tab-inactive */
+ color: #bfc7d5;
+ background-color: #242837;
+}
+.org-tab-line {
+ /* tab-line */
+ color: #242837;
+ background-color: #242837;
+}
+.org-tab-line-close-highlight {
+ /* tab-line-close-highlight */
+ color: #c792ea;
+}
+.org-tab-line-highlight {
+ /* tab-line-highlight */
+ color: #eeffff;
+ background-color: #292d3e;
+}
+.org-tab-line-tab {
+ /* tab-line-tab */
+ color: #eeffff;
+ background-color: #292d3e;
+}
+.org-tab-line-tab-current {
+ /* tab-line-tab-current */
+ color: #eeffff;
+ background-color: #292d3e;
+}
+.org-tab-line-tab-group {
+ /* tab-line-tab-group */
+ color: #242837;
+ background-color: #242837;
+}
+.org-tab-line-tab-inactive {
+ /* tab-line-tab-inactive */
+ color: #bfc7d5;
+ background-color: #242837;
+}
+.org-tab-line-tab-inactive-alternate {
+ /* tab-line-tab-inactive-alternate */
+ color: #bfc7d5;
+ background-color: #242837;
+}
+.org-tab-line-tab-modified {
+ /* tab-line-tab-modified */
+ color: #8d92af;
+}
+.org-tab-line-tab-special {
+ /* tab-line-tab-special */
+ font-style: italic;
+}
+.org-table-cell {
+ /* table-cell */
+ color: #e5e5e5;
+ background-color: #0000ff;
+}
+.org-tabulated-list-fake-header {
+ /* tabulated-list-fake-header */
+ font-weight: bold;
+ text-decoration: underline;
+ text-decoration: overline;
+}
+.org-tool-bar {
+ /* tool-bar */
+ color: #000000;
+ background-color: #bfbfbf;
+}
+.org-tooltip {
+ /* tooltip */
+ color: #eeffff;
+ background-color: #1c202c;
+}
+.org-trailing-whitespace {
+ /* trailing-whitespace */
+ background-color: #ff5370;
+}
+.org-tty-menu-disabled {
+ /* tty-menu-disabled-face */
+ color: #d3d3d3;
+ background-color: #0000ff;
+}
+.org-tty-menu-enabled {
+ /* tty-menu-enabled-face */
+ color: #ffff00;
+ background-color: #0000ff;
+ font-weight: bold;
+}
+.org-tty-menu-selected {
+ /* tty-menu-selected-face */
+ background-color: #ff0000;
+}
+.org-type {
+ /* font-lock-type-face */
+ color: #c792ea;
+}
+.org-underline {
+ /* underline */
+ text-decoration: underline;
+}
+.org-variable-name {
+ /* font-lock-variable-name-face */
+ color: #ffcb6b;
+}
+.org-variable-pitch {
+}
+.org-vc-conflict-state {
+}
+.org-vc-edited-state {
+}
+.org-vc-locally-added-state {
+}
+.org-vc-locked-state {
+}
+.org-vc-missing-state {
+}
+.org-vc-needs-update-state {
+}
+.org-vc-removed-state {
+}
+.org-vc-state-base {
+}
+.org-vc-up-to-date-state {
+}
+.org-vertical-border {
+ /* vertical-border */
+ color: #232635;
+ background-color: #232635;
+}
+.org-warning {
+ /* warning */
+ color: #ffcb6b;
+}
+.org-warning-1 {
+ /* font-lock-warning-face */
+ color: #ffcb6b;
+}
+.org-window-divider {
+ /* window-divider */
+ color: #232635;
+ background-color: #232635;
+}
+.org-window-divider-first-pixel {
+ /* window-divider-first-pixel */
+ color: #232635;
+ background-color: #232635;
+}
+.org-window-divider-last-pixel {
+ /* window-divider-last-pixel */
+ color: #232635;
+ background-color: #232635;
+}
+
+a {
+ color: inherit;
+ background-color: inherit;
+ font: inherit;
+ text-decoration: inherit;
+}
+a:hover {
+ text-decoration: underline;
+}
+
diff --git a/static/css/site.css b/static/css/site.css
new file mode 100644
index 0000000..48abbae
--- /dev/null
+++ b/static/css/site.css
@@ -0,0 +1,797 @@
+@import url('https://fonts.cdnfonts.com/css/jost');
+@import url('https://fonts.cdnfonts.com/css/jetbrains-mono-2');
+
+/*
+ * Globals
+ */
+:root {
+ --tokyonight-bg: #1a1b26;
+ --tokyonight-fg: #c0caf5;
+ --tokyonight-blue: #7aa2f7;
+ --tokyonight-green: #9ece6a;
+ --tokyonight-red: #f7768e;
+ --tokyonight-yellow: #e0af68;
+ --tokyonight-comment: #565f89;
+ --cyan: #565f89;
+ --bg: #1a1b26; /* colors[0] */
+ --fg: #a9b1d6; /* colors[1] */
+ --blk: #32344a; /* colors[2] */
+ --red: #f7768e; /* colors[3] */
+ --grn: #9ece6a; /* colors[4] */
+ --ylw: #e0af68; /* colors[5] */
+ --blu: #7aa2f7; /* colors[6] */
+ --mag: #ad8ee6; /* colors[7] */
+ --cyn: #0db9d7; /* colors[8] */
+ --brblk: #444b6a; /* colors[9] */
+}
+
+@font-face {
+ font-family: "JetBrainsMono Nerd Font";
+ src: url('/fonts/JetBrainsMonoNerdFont-Regular.ttf') format('truetype');
+ /* src: url('/fonts/JetBrainsMonoNerdFontMono-Regular.ttf') format('truetype'); */
+ /* src: url("/fonts/JetBrainsMonoNerdFont-Regular.ttf") format("ttf"); */
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+::root {
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 16px;
+ font-weight: bold;
+}
+
+
+.container {
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: 0.75rem;
+ padding-left: 0.75rem;
+ max-width: 80rem;
+}
+
+@media screen and (max-width: 767px) {
+ html {
+ font-size: 16px;
+ }
+
+ .logo {
+ max-width: 200px;
+ }
+
+ .row .column:not(:last-child) {
+ margin-bottom: 1rem;
+ }
+
+ .video {
+ width: 100%;
+ }
+
+ .list-form {
+ width: 90%;
+ }
+
+ .newsletter-text {
+ font-size: 0.42em;
+ }
+
+ blockquote {
+ margin: 1rem 0rem;
+ }
+ aside.content-panel {
+ display: none;
+ }
+
+ .container {
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: 1rem;
+ padding-left: 1rem;
+ max-width: 100%;
+ }
+}
+
+/* sm */
+@media screen and (min-width: 768px) {
+ html {
+ font-size: 16px;
+ }
+
+ .logo {
+ max-width: 200px;
+ }
+
+ .row {
+ display: flex;
+ flex-direction: row;
+ padding: 0;
+ width: 100%;
+ }
+
+ .row .column {
+ display: block;
+ flex: 1 1 auto;
+ max-width: 100%;
+ width: 100%;
+ }
+
+ .row .column:not(:last-child) {
+ margin-right: 10px;
+ }
+
+ .align-right {
+ text-align: right;
+ }
+
+ .video {
+ width: 70%;
+ }
+
+ .list-form {
+ width: 60%;
+ }
+
+ .newsletter-text {
+ font-size: 0.9em;
+ }
+
+ blockquote {
+ margin: 1rem 2rem;
+ }
+}
+
+/* md */
+@media screen and (min-width: 992px) {
+ html {
+ font-size: 18px;
+ }
+
+ .logo {
+ max-width: 300px;
+ }
+
+ blockquote {
+ margin: 1rem 4rem;
+ }
+}
+
+/* lg */
+@media screen and (min-width: 2560px) {
+ html {
+ font-size: 18px;
+ }
+}
+
+body {
+ background-color: var(--tokyonight-bg);
+ color: var(--tokyonight-fg);
+ font-family: 'JetBrainsMono Nerd Font';
+ margin: 0;
+ line-height: 1.5;
+}
+
+p {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+b {
+ font-weight: 700;
+}
+
+blockquote {
+ background-color: #232635;
+ font-style: italic;
+ border: 1px solid;
+ border-radius: 4px;
+ border-image: linear-gradient(45deg, #f78c6c, rgb(250,224,66)) 1;
+ padding: 1.4rem 1.4rem 0.4rem 1.4rem;
+}
+
+blockquote p {
+ margin-bottom: 0.6rem;
+}
+
+dt {
+ font-weight: bold;
+}
+
+dd {
+ border-left: 3px solid #89aaeb;
+ margin: 10px 40px;
+ padding-left: 10px;
+}
+
+
+.nav {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.subnav {
+ background-color: #232635;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+ font-weight: bold;
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
+ border-top: 0.05rem solid #c3e88d;
+ border-bottom: 0.05rem solid #c3e88d;
+}
+
+.subnav a { /* margin-top: 2rem; */
+ /* margin-bottom: 2rem; */
+
+ margin-left: 0.5rem;
+ margin-right: 0.5rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: var(--tokyonight-blue);
+ font-weight: 600;
+ line-height: 1.3;
+ margin-top: 1.3rem;
+ margin-bottom: 0.5rem;
+}
+
+h1 {
+ color: var(--tokyonight-blue);
+ font-size: 1.3rem;
+}
+
+h2 {
+ color: var(--cyn);
+ line-height: 1.2;
+}
+
+h3 {
+ color: var(--tokyonight-blue);
+ line-height: 1.1;
+}
+
+h4 {
+ line-height: 1.0;
+ color: #c3e88d;
+}
+
+a {
+ color: var(--tokyonight-blue);
+}
+
+a:hover,
+a:focus {
+ text-decoration: underline;
+ color: #82aaff;
+}
+
+.anchor {
+ color: #292d3e;
+ float: left;
+ padding-right: 4px;
+ margin-left: -23px;
+}
+
+.anchor:hover {
+ text-decoration: none;
+}
+
+h2:hover .anchor,
+h3:hover .anchor,
+h4:hover .anchor {
+ color: inherit;
+}
+
+kbd {
+ font-family: "JetBrainsMono Nerd Font";
+ font-weight: 200;
+}
+
+pre {
+ background-color: #232635;
+ padding: 1em;
+ overflow-x: scroll;
+ max-width: 100%;
+ box-sizing: border-box;
+}
+
+
+code {
+ color: var(--mag);
+ word-break: break-word;
+ white-space: pre-wrap;
+}
+
+pre, code {
+ /* font-size: 0.75em; */
+ font-family: "JetBrainsMono Nerd Font";
+}
+
+strong {
+ font-weight: 700;
+}
+
+.content {
+ margin-top:
+}
+
+
+.logo {
+ display: block;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: center;
+}
+
+/* Nav links */
+.nav-link {
+ position: relative;
+ padding: 0rem;
+ font-size: 1.1rem;
+ margin: 0.4rem 0.8rem 0.4rem 0rem;
+ font-weight: bold;
+ color: #cdddeb;
+}
+.nav-link:hover,
+.nav-link:focus {
+ color: #fff;
+ background-color: transparent;
+}
+
+/* Active state gets a caret at the bottom */
+.nav-link.active {
+ color: #fff;
+ font-weight: bolder;
+}
+
+.nav-icon {
+ float: right;
+}
+
+.nav-icons {
+ width: auto;
+}
+
+.site-header {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ font-weight: bold;
+ /* background-image: url("/img/header_bg.png"); */
+ /* background-image: url("/img/samarkand-bg.png"); */
+ /* background-image: url("/img/castle-bg.png"); */
+ background-image: url("/img/forrest-1-bg.png");
+ /* background-image: url("/img/forrest-2-bg.png"); */
+ /* background-image: url("/img/mountain-3-bg.png"); */
+ /* background-image: url("/img/mountain-as-is-bg.png"); */
+ /* background-image: url("/img/mountain-bg.png"); */
+ background-size: cover;
+ background-position: center;
+ color: #1a1b26;
+ border-bottom: 1px solid #292d3e;
+
+ min-height: 160px;
+ padding: 0;
+}
+
+.site-masthead {
+ margin-bottom: 0;
+ background-color: rgba(28, 31, 38, 0.5);
+ border-bottom: 0.05rem solid var(--cyn);
+ -webkit-box-shadow: inset 0 -0.1rem 0.25rem rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 -0.1rem 0.25rem rgba(0, 0, 0, 0.1);
+}
+
+.site-title {
+ margin-bottom: 0rem;
+ font-size: 2rem;
+ font-weight: bold;
+ color: #82aaff;
+}
+.site-description {
+ font-size: 1.5rem;
+ color: #999;
+}
+
+@media (max-width: 40em) {
+ .site-description {
+ margin-bottom: 1rem;
+ }
+}
+
+/*
+ * Site pages
+ */
+
+.site-post {
+ margin-bottom: 2rem;
+}
+
+.site-post-title {
+ font-size: 2.2rem;
+}
+
+.site-post-meta {
+ color: #AAA;
+}
+
+.site-post-tags {
+ margin-top: 3rem;
+ margin-bottom: 1.25rem;
+ font-size: 1.1rem;
+ color: #999;
+}
+
+/*
+ * Footer
+ */
+
+.site-footer {
+ padding: 1.3rem 0;
+ margin-top: 1rem;
+ color: #cdddeb;
+ font-size: 0.8rem;
+ background-color: #232635;
+ border-top: 0.05rem solid #c3e88d;
+}
+
+.site-footer p:last-child {
+ margin-bottom: 0;
+}
+
+.site-footer-right {
+ text-align: right;
+}
+
+.site-footer-line {
+ margin-bottom: 0.4rem;
+}
+
+.video {
+ position: relative;
+ overflow: hidden;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: center;
+}
+
+.center {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: center;
+}
+
+.bold {
+ font-weight: bold;
+}
+
+hr {
+ border-bottom: 0.05rem solid #c3e88d;
+}
+
+.video::after {
+ display: block;
+ content: "";
+ padding-top: 56.25%;
+}
+
+.video iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ border: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.cta {
+ width: 80%;
+ padding: 1rem;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ border: 1px solid #f78c6c;
+ border-radius: 4px;
+ background-color: #232635;
+}
+
+.cta p {
+ margin: 5px;
+}
+
+.stream-time {
+ width: 80%;
+ padding: 1rem;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ border: 1px solid #c792ea;
+ border-radius: 4px;
+ background-color: #232635;
+}
+
+.list-form {
+ font-size: 0.8rem;
+ padding: 1rem;
+ margin-bottom: 1rem;
+ border: 1px solid #c3e88d;
+ border-radius: 4px;
+ background-color: #232635;
+}
+
+.list-form-title {
+ font-weight: 600;
+ font-size: 1.1rem;
+ margin-bottom: 0.5rem;
+ color: #c3e88d;
+}
+
+.list-form-label {
+ margin-top: 0.8rem;
+ font-weight: bold;
+}
+
+.list-form input[type="text"] {
+ width: 100%;
+ padding: 7px 7px;
+ margin: 8px 0;
+ box-sizing: border-box;
+ border: 1px solid #c3e88d;
+ border-radius: 4px;
+ background-color: #232635;
+ color: #eeffff;
+}
+
+.list-form input[type="submit"] {
+ width: 50%;
+ padding: 10px 10px;
+ margin: 8px 0;
+ box-sizing: border-box;
+ border: 1px solid #89aaeb;
+ border-radius: 4px;
+ background-color: #89aaeb;
+ color: #232635;
+}
+
+.newsletter-text {
+}
+
+.register-button {
+ width: 60%;
+ padding: 10px 10px;
+ border: 1px solid #89aaeb;
+ border-radius: 4px;
+ background-color: #89aaeb;
+ color: #232635;
+}
+
+a:hover.register-button,
+a:focus.register-button {
+ color: #232635;
+}
+
+aside.content-panel {
+ margin-top: 0.75rem;
+ background-color: #232635;
+ border: 1px solid #565f89;
+ border-radius: 6px;
+ padding: 1rem;
+ font-size: 0.9rem;
+}
+
+#tableOfContentContainer nav {
+ padding-left: 0;
+}
+
+#tableOfContentContainer nav ul,
+#tableOfContentContainer nav ol {
+ list-style: none;
+ padding-left: 0;
+}
+
+#tableOfContentContainer nav ol li > ol,
+#tableOfContentContainer nav ul li > ul {
+ margin-left: 1rem;
+ padding-left: 0.5rem;
+ border-left: 1px solid #444b6a;
+}
+
+#tableOfContentContainer nav li {
+ margin-bottom: 0.5rem;
+}
+
+#tableOfContentContainer nav a {
+ color: var(--tokyonight-blue);
+ text-decoration: none;
+}
+
+#tableOfContentContainer nav a:hover {
+ text-decoration: underline;
+}
+
+.row {
+ flex-wrap: wrap;
+}
+
+.row .column {
+ min-width: 0;
+ box-sizing: border-box;
+}
+
+.post-hero {
+ margin: 1.5rem 0;
+ text-align: center;
+}
+
+.post-hero img {
+ width: 100%;
+ max-width: 100%;
+ height: auto;
+ border-radius: 8px;
+ border: 1px solid #3b4261; /* optional tokyonight border */
+}
+
+
+.tutorial-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 2rem;
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 0 1rem;
+}
+.tutorial-card-title {
+ font-size: 1.2rem;
+ color: #7aa2f7;
+ margin-bottom: 0.5rem;
+}
+
+.tutorial-card-title a {
+ text-decoration: none;
+ color: inherit;
+}
+
+.tutorial-card-title a:hover {
+ text-decoration: underline;
+}
+
+.tutorial-card-date {
+ font-size: 0.875rem;
+ color: #565f89;
+ margin-bottom: 0.5rem;
+}
+
+.tutorial-card-description {
+ font-size: 0.95rem;
+ color: #c0caf5;
+}
+
+.tutorial-card {
+ width: 426px;
+ background-color: var(--blk);
+ border: 1px solid var(--blu);
+ border-radius: 8px;
+ padding: 1rem;
+ color: #c0caf5;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+ box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+ .tutorial-card {
+ width: 100%;
+ }
+}
+
+.tutorial-card-image {
+ width: 100%;
+ aspect-ratio: 16 / 9;
+ border: 1px solid var(--blu);
+ border-radius: 4px;
+ margin-bottom: 1rem;
+ background-color: #16161e;
+ box-sizing: border-box;
+}
+
+.btn-primary {
+ display: inline-block;
+ padding: 0.5rem 1.25rem;
+ border: 2px solid var(--blu);
+ color: var(--blu);
+ text-decoration: none;
+ border-radius: 0.25rem;
+ font-weight: 600;
+}
+
+.btn-primary:hover {
+ background-color: var(--blu);
+ color: #000;
+}
+
+.btn-outline {
+ display: inline-block;
+ padding: 0.5rem 1.25rem;
+ border: 2px solid var(--cyn);
+ color: var(--cyn);
+ text-decoration: none;
+ border-radius: 0.25rem;
+ font-weight: 600;
+}
+
+.btn-outline:hover {
+ background-color: var(--cyn);
+ color: #000;
+}
+
+.recent-tutorials-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 2rem;
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 0 1rem;
+}
+
+table {
+ border-collapse: collapse;
+ width: 100%;
+ margin: 1.5rem 0;
+ font-size: 0.95rem;
+}
+
+th, td {
+ border: 1px solid #444;
+ padding: 0.5rem 0.75rem;
+ text-align: left;
+}
+
+th {
+ background-color: #1a1b26; /* or your Tokyonight bg */
+ color: #c0caf5; /* Tokyonight fg */
+}
+
+td {
+ background-color: #24283b; /* Slightly lighter bg */
+ color: #a9b1d6;
+}
+
+@media screen and (max-width: 768px) {
+ table, thead, tbody, th, td, tr {
+ display: block;
+ }
+
+ tr {
+ margin-bottom: 1rem;
+ }
+
+ th {
+ display: none;
+ }
+
+ td {
+ border: none;
+ position: relative;
+ padding-left: 1.5rem;
+ }
+
+ td::before {
+ content: attr(data-label);
+ position: absolute;
+ left: 0;
+ top: 0;
+ font-weight: bold;
+ color: #7aa2f7;
+ }
+}
diff --git a/static/fonts/JetBrainsMonoNerdFont-Regular.ttf b/static/fonts/JetBrainsMonoNerdFont-Regular.ttf
new file mode 100644
index 0000000..235a07a
Binary files /dev/null and b/static/fonts/JetBrainsMonoNerdFont-Regular.ttf differ
diff --git a/static/img/castle-bg.png b/static/img/castle-bg.png
new file mode 100644
index 0000000..db1fbbf
Binary files /dev/null and b/static/img/castle-bg.png differ
diff --git a/static/img/dwm.png b/static/img/dwm.png
new file mode 100755
index 0000000..fc040e2
Binary files /dev/null and b/static/img/dwm.png differ
diff --git a/static/img/favicon.png b/static/img/favicon.png
new file mode 100644
index 0000000..5ba7616
Binary files /dev/null and b/static/img/favicon.png differ
diff --git a/static/img/forrest-1-bg.png b/static/img/forrest-1-bg.png
new file mode 100644
index 0000000..55994a4
Binary files /dev/null and b/static/img/forrest-1-bg.png differ
diff --git a/static/img/forrest-2-bg.png b/static/img/forrest-2-bg.png
new file mode 100644
index 0000000..74de735
Binary files /dev/null and b/static/img/forrest-2-bg.png differ
diff --git a/static/img/header_bg.png b/static/img/header_bg.png
new file mode 100644
index 0000000..f43d2b9
Binary files /dev/null and b/static/img/header_bg.png differ
diff --git a/static/img/hyprland-header.png b/static/img/hyprland-header.png
new file mode 100644
index 0000000..60c686d
Binary files /dev/null and b/static/img/hyprland-header.png differ
diff --git a/static/img/hyprland.png b/static/img/hyprland.png
new file mode 100644
index 0000000..be956a6
Binary files /dev/null and b/static/img/hyprland.png differ
diff --git a/static/img/mountain-3-bg.png b/static/img/mountain-3-bg.png
new file mode 100644
index 0000000..0d56aed
Binary files /dev/null and b/static/img/mountain-3-bg.png differ
diff --git a/static/img/mountain-as-is-bg.png b/static/img/mountain-as-is-bg.png
new file mode 100644
index 0000000..4ebde7d
Binary files /dev/null and b/static/img/mountain-as-is-bg.png differ
diff --git a/static/img/mountain-bg.png b/static/img/mountain-bg.png
new file mode 100644
index 0000000..aa2ebff
Binary files /dev/null and b/static/img/mountain-bg.png differ
diff --git a/static/img/neovim.png b/static/img/neovim.png
new file mode 100755
index 0000000..34b5bf9
Binary files /dev/null and b/static/img/neovim.png differ
diff --git a/static/img/samarkand-bg.png b/static/img/samarkand-bg.png
new file mode 100644
index 0000000..c9e8949
Binary files /dev/null and b/static/img/samarkand-bg.png differ
diff --git a/static/img/wall1.png b/static/img/wall1.png
new file mode 100644
index 0000000..9474333
Binary files /dev/null and b/static/img/wall1.png differ