fix: start script for npm

revert Delete old GitHub configs

.codacy.yml

@@ -0,0 +1,2 @@
+exclude_paths:
+  - "src/css/base.css"

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"

.github/workflows/codacy.yml

@@ -0,0 +1,61 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+# This workflow checks out code, performs a Codacy security scan
+# and integrates the results with the
+# GitHub Advanced Security code scanning feature.  For more information on
+# the Codacy security scan action usage and parameters, see
+# https://github.com/codacy/codacy-analysis-cli-action.
+# For more information on Codacy Analysis CLI in general, see
+# https://github.com/codacy/codacy-analysis-cli.
+
+name: Codacy Security Scan
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "main" ]
+  schedule:
+    - cron: '35 8 * * 2'
+
+permissions:
+  contents: read
+
+jobs:
+  codacy-security-scan:
+    permissions:
+      contents: read # for actions/checkout to fetch code
+      security-events: write # for github/codeql-action/upload-sarif to upload SARIF results
+      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
+    name: Codacy Security Scan
+    runs-on: ubuntu-latest
+    steps:
+      # Checkout the repository to the GitHub Actions runner
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      # Execute Codacy Analysis CLI and generate a SARIF output with the security issues identified during the analysis
+      - name: Run Codacy Analysis CLI
+        uses: codacy/codacy-analysis-cli-action@d840f886c4bd4edc059706d09c6a1586111c540b
+        with:
+          # Check https://github.com/codacy/codacy-analysis-cli#project-token to get your project token from your Codacy repository
+          # You can also omit the token and run the tools that support default configurations
+          project-token: ${{ secrets.CODACY_PROJECT_TOKEN }}
+          verbose: true
+          output: results.sarif
+          format: sarif
+          # Adjust severity of non-security issues
+          gh-code-scanning-compat: true
+          # Force 0 exit code to allow SARIF file generation
+          # This will handover control about PR rejection to the GitHub side
+          max-allowed-issues: 2147483647
+
+      # Upload the SARIF file generated in the previous step
+      - name: Upload SARIF results file
+        uses: github/codeql-action/upload-sarif@v3
+        with:
+          sarif_file: results.sarif

.gitignore

@@ -137,6 +137,11 @@ config.json
 .db_init
 public/
 src/css/main.css
+.njs.provider
 
 # exclude idea folder
 .idea/
+
+# bun
+bun.lock
+bun.lockb

README.md

@@ -1,55 +1,94 @@
 # aidxnFUN
+
 [![License: CC0-1.0](https://img.shields.io/badge/License-CC0_1.0-lightgrey.svg)](http://creativecommons.org/publicdomain/zero/1.0/)
-[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fihatenodejs%2FaidxnFUN.svg?type=shield&issueType=license)](https://app.fossa.com/projects/git%2Bgithub.com%2Fihatenodejs%2FaidxnFUN?ref=badge_shield&issueType=license)
+[![Latest Release](https://img.shields.io/badge/latest_version-v.1.40-purple)](https://github.com/ihatenodejs/aidxnFUN/releases)
-[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fihatenodejs%2FaidxnFUN.svg?type=shield&issueType=security)](https://app.fossa.com/projects/git%2Bgithub.com%2Fihatenodejs%2FaidxnFUN?ref=badge_shield&issueType=security)
+
+<a href="https://512kb.club"><img src="https://512kb.club/assets/images/orange-team.svg" alt="a proud member of the orange team of 512KB club" /></a>
 
 The full code of my website, under the CC0-1.0 license (public domain). Built with Tailwind CSS, EJS, Express.js, and Node.js
 
-# Install and self-host
+## Install and self-host
+
 Have a weird obsession? Want a pre-built site you can use for free? Host aidxnFUN! As the code is available under the CC0-1.0 license, which means you should feel free and encouraged to change content, design, whatever!
 
-During this process, `node` (20.08.0), `npm`, and `netcat` will be installed. If you use Windows, you must manually install NodeJS.
+During this process, `node` (20.08.0), `npm`, and `netcat` will be installed. If you use Windows, you must manually install Node.js.
 
 **Please note:** The /status endpoint will be broken with default servers (ones I own) as CORS will block requests not made from aidxn.fun
 
-## Debian/Ubuntu/Other Debian-based systems
+### Debian/Ubuntu/Arch Linux
+
 1. Clone the repo
    ```bash
    git clone https://github.com/ihatenodejs/aidxnFUN
    cd aidxnFUN
    ```
-2. Setup `manage`
+
+2. Setup `manage` (installs everything you need)
+
    ```bash
    ./manage setup
    ```
+
 3. Start the server
+
    ```bash
    ./manage up
    ```
+
    A server will now start on port :5566, and be accessible from your web browser at http://localhost:5566/. I highly suggest creating a NGINX reverse proxy for this, especially if you plan to point this to a domain.
 
-## Windows
+### Windows
-Windows support is still in the works, however it is possible to run aidxnFUN under Windows.
+
+Windows-based hosts are only partially supported. I have no plans to write a script for Windows as of now, though that may change in the future, based on demand. However, `package.json` have bundled scripts to allow hosting on Windows. If you plan to host this website, I **STRONGLY** recommend that you use Linux.
+
+**Windows hosting has not been tested in a while, and may not work perfectly.**
+
+1. Install Node.js and NPM (or Bun) for Windows from [Node.js.org](https://nodejs.org/) or [bun.sh](https://bun.sh/)
 
-1. Install NodeJS and NPM for Windows from [nodejs.org](https://nodejs.org/)
 2. Open a Node.js command prompt
+
 3. Clone the repo
+
    ```bat
    git clone https://github.com/ihatenodejs/aidxnFUN
    cd aidxnFUN
    ```
+   
 4. Build the app
+
+   **Bun**
+
    ```bat
-   npm run winbuild
+   bun run build:win:bun
    ```
-5. Run the app on port 5566
+   
+   **NPM**
+    
    ```bat
-   set PORT=5566 && node app.js
+   npm run build:win:npm   
    ```
+
+5. Run the app
+
+   **Bun**
+
+   ```bat
+   set PORT=5566 && bun run start:win:bun
+   ```
+   
+   **NPM**
+   
+   ```bat
+   set PORT=5566 && npm run start:win:npm
+   ```
+   
    You may use the `PORT` variable to set a custom port. While Windows tends to default to 3000, we will use 5566, which is the default for aidxnFUN on Linux.
 
-# How it works
+## How it works
-This website uses Node.js, Express.js for a server, EJS for templating, and Tailwind CSS for the frontend CSS.
+
+### Stack/Technical Stuff
+
+This website uses Node.js, Express.js, EJS for templating, and Tailwind CSS.
 
 The `manage` script uses all of those tools to manage the server for you executes the repetitive tasks for you automatically.
 
@@ -57,9 +96,14 @@ The views contain both regular page shards (full-ish pages) and generic shards (
 
 Thus far, shards are included for a music widget, the header, and the footer of the pages.
 
+### Music
+
 Music (as featured on the home page) is fetched from an API (hosted on https://biancarosa.com.br), which I am in the process of setting up for myself. It works with a LastFM account (I linked this to my Spotify) and can track your live listening with amazing accuracy. The repo can be found at [biancarosa/lastfm-last-played](https://github.com/biancarosa/lastfm-last-played).
 
-# Using the `manage` script
+I'm in the process of migrating this project over to MusicBrainz.
+
+## Using the `manage` script
+
 You may have noticed you have a `manage` file after cloning. `manage` is a command-line tool to manage the server. It can automatically start, stop, and restart your instance. This script only supports Linux-based systems.
 
 First, you must complete the setup with the following commands:
@@ -70,24 +114,27 @@ chmod +x manage
 
 After doing that, you are now ready to use the script.
 
-## `manage` usage
+### `manage` usage
 `./manage [command] [options]`
 
-## `manage` commands
+### `manage` commands
 + `./manage up` - Builds the project and starts the server
 + `./manage down` - Stops the server
 + `./manage restart` - Restarts the server
 + `./manage status, -s, --status` - Checks if the server is running
 + `./manage help, -h, --help` - Shows the help message
 
-# Troubleshooting
+## Troubleshooting
-I highly suggest you take a peek at the `node.log` file's contents. It's in the same directory as the `manage` script. This file contains the NodeJS server logs, which can be very helpful for debugging and/or troubleshooting.
 
-# To-Do
+I highly suggest you take a peek at the `node.log` file's contents. It's in the same directory as the `manage` script. This file contains the Node.js server logs, which can be very helpful for debugging and/or troubleshooting.
-- [ ] Implement PGP message verification
+
-- [ ] Create `manage` script for Windows
+## To-Do
+
+- [ ] Add instructions for setting up without `manage`
+- [ ] Fix spacing issues with footer (not the same size across pages)
+- [ ] Fix status tracking and add tracking for latest servers
+- [X] Improve dropdown menu style
+- [X] Restructure menu with dropdowns
+- [X] Implement PGP message verification
 - [X] Add menu link to tilde website
 - [X] Update projects page to latest information
-
-# License
-[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fihatenodejs%2FaidxnFUN.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fihatenodejs%2FaidxnFUN?ref=badge_large)

app.js

@@ -23,6 +23,10 @@ app.get('/verify', (req, res) => {
     res.render('verify', { req, verifyResult: null });
 });
 
+app.get('/manifesto', (req, res) => {
+    res.render('manifesto', { req, verifyResult: null });
+});
+
 app.post('/verify', async (req, res) => {
     const { pgpMessage } = req.body;
 

manage

@@ -1,7 +1,7 @@
 #!/bin/bash
 
-SC_VERSION=1.2.1
+SC_VERSION=1.4.0
-SC_CODENAME="bionic"
+SC_CODENAME="seahorse"
 PORT=5566
 SETUP_FILE=".setup_complete"
 COLOR_RESET="\033[0m"
@@ -10,56 +10,145 @@ COLOR_RED="\033[1;31m"
 COLOR_YELLOW="\033[1;33m"
 COLOR_BLUE="\033[1;34m"
 COLOR_CYAN="\033[1;36m"
+DISTRO=$(grep '^NAME=' /etc/os-release | cut -d '=' -f2 | tr -d '"')
+NOB="inactive"
+
+function command_exists() {
+    command -v "$1" &> /dev/null
+}
 
 function install_tools() {
-    if ! command -v node &> /dev/null 2>&1; then
+    # Perform updates
-        echo -e "${COLOR_RED}NodeJS is not installed. Installing now...${COLOR_RESET}"
+    echo -e "${COLOR_BLUE}Updating package lists...${COLOR_RESET}"
-        echo -e "${COLOR_YELLOW}You may need to enter your sudo password.${COLOR_RESET}\n"
+    if [ "$DISTRO" == "Ubuntu" ]; then
-        curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
+        # shellcheck disable=SC2024
-        export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
+        sudo apt-get update >> install.log
-        [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}\n"
-        nvm install 20.18.0
+    elif [ "$DISTRO" == "Arch Linux" ]; then
-        echo -e "\n${COLOR_GREEN}NodeJS installed successfully.${COLOR_RESET}\n"
+        # shellcheck disable=SC2024
+        sudo pacman -Sy >> install.log
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}\n"
+    fi
+
+    echo -e "${COLOR_BLUE}Starting system dependency install...${COLOR_RESET}"
+
+    # Check for curl, and install if not found
+    if ! command_exists curl; then
+        echo -e "${COLOR_RED}curl is not installed. Installing now...${COLOR_RESET}"
+        if [ "$DISTRO" == "Ubuntu" ]; then
+            # shellcheck disable=SC2024
+            sudo apt-get install curl -y >> install.log
+        elif [ "$DISTRO" == "Arch Linux" ]; then
+            # shellcheck disable=SC2024
+            sudo pacman -S --noconfirm curl >> install.log
+        fi
+        echo -e "\n${COLOR_GREEN}curl installed successfully.${COLOR_RESET}\n"
     else
+        echo -e "${COLOR_GREEN}curl is installed.${COLOR_RESET}"
+    fi
+
+    # Check for NodeJS/Bun and install if not found
+    if ! command_exists node && ! command_exists bun; then
+        for i in {1..3}; do
+            echo -e "${COLOR_BLUE}Do you want to install and use Node.js or Bun? (node/bun)${COLOR_RESET}"
+            read -r -p "" NOB
+            if [ "$NOB" == "node" ]; then
+                curl -o .install.sh https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh >> install.log
+                chmod +x .install.sh
+                bash .install.sh >> install.log
+                rm .install.sh # cleanup
+                # shellcheck disable=SC2155
+                export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
+                [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+                nvm install 23 >> install.log
+                echo -e "\n${COLOR_GREEN}NodeJS installed successfully.${COLOR_RESET}\n"
+                NOB="node_installed"
+
+                if ! command_exists npm; then
+                    echo -e "${COLOR_RED}NPM is not installed. Installing now...${COLOR_RESET}"
+                    if [ "$DISTRO" == "Ubuntu" ]; then
+                        # shellcheck disable=SC2024
+                        sudo apt-get install npm -y >> install.log
+                    elif [ "$DISTRO" == "Arch Linux" ]; then
+                        # shellcheck disable=SC2024
+                        sudo pacman -S --noconfirm npm >> install.log
+                    fi
+                    echo -e "\n${COLOR_GREEN}NPM installed successfully.${COLOR_RESET}\n"
+                else
+                    echo -e "${COLOR_GREEN}NPM is installed. Version: $(npm -v)${COLOR_RESET}"
+                fi
+                break
+            elif [ "$NOB" == "bun" ]; then
+                curl -fsSL --output .install.sh https://bun.sh/install >> install.log
+                chmod +x .install.sh
+                bash .install.sh >> install.log
+                rm .install.sh # cleanup
+                # this puts bun in the path for the initial install, we later instruct the user to add it to their shell profile
+                export BUN_INSTALL="$HOME/.bun"
+                export PATH="$BUN_INSTALL/bin:$PATH"
+                echo -e "\n${COLOR_GREEN}Bun installed successfully.${COLOR_RESET}\n"
+                NOB="bun_installed"
+                break
+            else
+                echo -e "${COLOR_RED}Invalid option, please enter 'node' or 'bun'${COLOR_RESET}"
+            fi
+        done
+
+        if [ "$NOB" != "node_installed" ] && [ "$NOB" != "bun_installed" ]; then
+            # this is mainly intended to catch the case where the user doesn't enter anything 3+ times
+            echo -e "${COLOR_RED}[!] Failed to install, exiting.${COLOR_RESET}"
+            exit 1
+        fi
+    elif command_exists bun; then
+        echo -e "${COLOR_GREEN}NodeJS is installed (provided through Bun). Version: $(bun -v)${COLOR_RESET}"
+    elif command_exists node; then
         echo -e "${COLOR_GREEN}NodeJS is installed. Version: $(node -v)${COLOR_RESET}"
     fi
 
-    if ! command -v nc &> /dev/null 2>&1; then
+    # Check for Netcat, and install if not found
+    if ! command_exists nc; then
         echo -e "${COLOR_RED}Netcat is not installed. Installing now...${COLOR_RESET}"
-        echo -e "${COLOR_YELLOW}You may need to enter your sudo password.${COLOR_RESET}\n"
+        if [ "$DISTRO" == "Ubuntu" ]; then
-        sudo apt-get install netcat-traditional
+            # shellcheck disable=SC2024
+            sudo apt-get install netcat-traditional -y >> install.log
+        elif [ "$DISTRO" == "Arch Linux" ]; then
+            # shellcheck disable=SC2024
+            sudo pacman -S --noconfirm netcat >> install.log
+        fi
         echo -e "\n${COLOR_GREEN}Netcat installed successfully.${COLOR_RESET}\n"
     else
         echo -e "${COLOR_GREEN}Netcat is installed.${COLOR_RESET}"
     fi
 
-    if ! command -v npm &> /dev/null 2>&1; then
+    # Check for lsof, and install if not found
-        echo -e "${COLOR_RED}NPM is not installed. Installing now...${COLOR_RESET}"
+    if ! command_exists lsof && [ "$DISTRO" == "Arch Linux" ]; then
-        echo -e "${COLOR_YELLOW}You may need to enter your sudo password.${COLOR_RESET}\n"
+        echo -e "${COLOR_RED}lsof is not installed. Installing now...${COLOR_RESET}"
-        sudo apt-get update
+        # shellcheck disable=SC2024
-        sudo apt-get install npm
+        sudo pacman -S --noconfirm lsof >> install.log
-        if [ ! -f "config.json" ]; then
+        echo -e "\n${COLOR_GREEN}lsof installed successfully.${COLOR_RESET}\n"
-            echo -e "${COLOR_BLUE}Copying config file...${COLOR_RESET}"
-            if [ ! -f "config.json.example" ]; then
-                echo "Couldn't find example config file"
-            else
-                cp config.json.example config.json
-            fi
-        else
-            echo -e "${COLOR_GREEN}config file already exists, skipping.${COLOR_RESET}"
-        fi
-        echo -e "${COLOR_BLUE}Installing NPM deps...${COLOR_RESET}"
-        npm install
-        echo -e "\n${COLOR_GREEN}NPM installed successfully.${COLOR_RESET}\n"
-        touch $SETUP_FILE
     else
-        echo -e "${COLOR_GREEN}NPM is installed. Version: $(npm -v)${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}lsof is installed.${COLOR_RESET}"
-        touch $SETUP_FILE
     fi
 }
 
+# Checks if a config.json file exists
+function check_config() {
+    if [ ! -f "config.json" ]; then
+        echo -e "\n${COLOR_BLUE}Copying config file...${COLOR_RESET}"
+        if [ ! -f "config.json.example" ]; then
+            echo -e "${COLOR_RED}[!] Couldn't find example config file${COLOR_RESET}"
+        else
+            cp config.json.example config.json
+            echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
+        fi
+    else
+        echo -e "${COLOR_GREEN}Config file already exists, skipping.${COLOR_RESET}"
+    fi
+}
+
+# Show help message
 function show_help() {
-    echo -e "${COLOR_GREEN}manage version:${COLOR_RESET} ${COLOR_BLUE}${SC_VERSION} ${SC_CODENAME}${COLOR_RESET}"
+    echo -e "${COLOR_GREEN}manage for aidxnFUN:${COLOR_RESET} ${COLOR_BLUE}v${SC_VERSION} (${SC_CODENAME})${COLOR_RESET}"
     echo -e "${COLOR_BLUE}Usage:${COLOR_RESET} ./manage [command]\n"
     echo -e "${COLOR_YELLOW}Commands:${COLOR_RESET}"
     echo -e "  ${COLOR_CYAN}help, -h, --help${COLOR_RESET}      Shows this help message."
@@ -69,6 +158,7 @@ function show_help() {
     echo -e "  ${COLOR_CYAN}status, -s, --status${COLOR_RESET}  Checks if the server is running.\n"
 }
 
+# Check if essential directories exist (mainly for server startup/shutdown), and create them if they don't already exist
 function check_dirs() {
     local action=$1
     local created_count=0
@@ -83,11 +173,10 @@ function check_dirs() {
             fi
         done
         if [ "$created_count" -gt 0 ]; then
-            echo -e "${COLOR_GREEN}Done.${COLOR_RESET}"
+            echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
         else
-            echo -e "${COLOR_GREEN}Done.${COLOR_RESET}"
+            echo -e "${COLOR_YELLOW}Done, nothing created.${COLOR_RESET}"
         fi
-
     elif [ "$action" == "delete" ]; then
         if [ -d "./public" ]; then
             echo -e "${COLOR_BLUE}Deleting public directory...${COLOR_RESET}"
@@ -96,27 +185,27 @@ function check_dirs() {
         fi
 
         if [ "$deleted_count" -gt 0 ]; then
-            echo -e "${COLOR_GREEN}Done.${COLOR_RESET}"
+            echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
         else
-            echo -e "${COLOR_GREEN}Done.${COLOR_RESET}"
+            echo -e "${COLOR_YELLOW}Done, nothing deleted.${COLOR_RESET}"
         fi
     else
         echo -e "${COLOR_RED}Invalid action: $action. Use 'create' or 'delete'.${COLOR_RESET}"
     fi
 }
 
+# Handles restarting of server
 function restart_server() {
     check_setup
 
     if [ -d './public' ]; then
-        echo -e "${COLOR_BLUE}Deleting public directories...${COLOR_RESET}"
         check_dirs "delete"
     fi
 
     if [ -f './src/css/main.css' ]; then
         echo -e "${COLOR_BLUE}Deleting old Tailwind CSS...${COLOR_RESET}"
         rm ./src/css/main.css
-        echo -e "${COLOR_GREEN}Done.${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
     fi
 
     PIDS=$(lsof -t -i:$PORT)
@@ -124,132 +213,178 @@ function restart_server() {
     if [ -n "$PIDS" ]; then
         echo -e "${COLOR_BLUE}Stopping server...${COLOR_RESET}"
         for PID in $PIDS; do
-            kill "$PID" || echo -e "${COLOR_RED}Failed to kill PID: $PID${COLOR_RESET}"
+            kill "$PID" >> /dev/null || echo -e "${COLOR_RED}Failed to kill PID: $PID${COLOR_RESET}"
         done
-        echo -e "${COLOR_GREEN}Done.${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
     else
         echo -e "${COLOR_YELLOW}No process found on port $PORT.${COLOR_RESET}"
     fi
 
-    echo -e "${COLOR_BLUE}Creating public directories...${COLOR_RESET}"
     check_dirs "create"
 
     echo -e "${COLOR_BLUE}Building project...${COLOR_RESET}"
-    if ! npm run build > node.log 2>&1; then
+    if command_exists bun && command_exists bunx; then
-        echo -e "${COLOR_RED}Build failed. Please check for errors above.${COLOR_RESET}"
+        if ! bun run build:linux:bun > node.log 2>&1; then
-        exit 1
+            echo -e "${COLOR_RED}Build failed. Please check for errors above.${COLOR_RESET}"
+            exit 1
+        else
+            echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
+        fi
+    elif command_exists npm; then
+        if ! npm run build:linux:npm > node.log 2>&1; then
+            echo -e "${COLOR_RED}Build failed. Please check for errors above.${COLOR_RESET}"
+            exit 1
+        else
+            echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
+        fi
     else
-        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
+        echo -e "${COLOR_RED}NodeJS is somehow not installed, exiting.${COLOR_RESET}"
+        exit 1
     fi
 
     if [ -f './public/css/base.css' ]; then
         echo -e "${COLOR_BLUE}Cleaning up base Tailwind CSS file...${COLOR_RESET}"
         rm ./public/css/base.css
-        echo -e "${COLOR_GREEN}Done.${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
     fi
 
     if [ -f './node.log' ]; then
         echo -e "${COLOR_BLUE}Deleting node log...${COLOR_RESET}"
         rm ./node.log
-        echo -e "${COLOR_GREEN}Done.${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
     fi
 
     echo -e "${COLOR_BLUE}Starting server...${COLOR_RESET}"
-    npm start > node.log 2>&1 &
+    if command_exists bun; then
+        bun run start:bun > node.log 2>&1 &
+    elif command_exists npm; then
+        npm run start:npm > node.log 2>&1 &
+    fi
     
-    for i in {1..10}; do
+    MAX_RETRIES=10
+    RETRY_INTERVAL=1
+
+    for ((i=1; i<=MAX_RETRIES; i++)); do
         PIDS=$(lsof -t -i:$PORT)
         if [ -n "$PIDS" ]; then
-            echo -e "${COLOR_GREEN}\nDone. Server up and running on port $PORT!\n${COLOR_RESET}"
+            echo -e "${COLOR_GREEN}\nDone! Server up and running on port $PORT!\n${COLOR_RESET}"
             break
         else
-            echo -e "${COLOR_YELLOW}Waiting for server to start on port $PORT...${COLOR_RESET}"
+            echo -e "${COLOR_YELLOW}[WAITING FOR SERVER]${COLOR_RESET} Attempt $i/${MAX_RETRIES}"
-            sleep 1
+            sleep $RETRY_INTERVAL
         fi
     done
 
+    if [ -z "$PIDS" ]; then
+        echo -e "${COLOR_RED}Failed to start the server on port $PORT after $MAX_RETRIES attempts.${COLOR_RESET}"
+    fi
+
     if [ -z "$PIDS" ]; then
         echo -e "${COLOR_RED}Something went wrong... Check node.log for more details${COLOR_RESET} (no process on port)"
     fi
 }
 
+# Handles starting of server
 function start_server() {
     check_setup
 
     PID=$(lsof -t -i:$PORT)
 
     if [ -n "$PID" ]; then
-        echo -e "${COLOR_YELLOW}Server already running on port $PORT. Skipping server startup.${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}Server already running on port $PORT, opting to restart.\n${COLOR_RESET}"
+        restart_server
         return
     fi
 
-    echo -e "${COLOR_BLUE}Creating public directories...${COLOR_RESET}"
     check_dirs "create"
 
     if [ -f './src/css/main.css' ]; then
         echo -e "${COLOR_BLUE}Deleting old Tailwind CSS...${COLOR_RESET}"
         rm ./src/css/main.css
-        echo -e "${COLOR_GREEN}Done.${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
     fi
 
     if [ -f './node.log' ]; then
         echo -e "${COLOR_BLUE}Deleting node log...${COLOR_RESET}"
         rm ./node.log
-        echo -e "${COLOR_GREEN}Done.${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
     fi
 
     echo -e "${COLOR_BLUE}Building project...${COLOR_RESET}"
-    if ! npm run build > node.log 2>&1; then
+    if command_exists bun && command_exists bunx; then
-        echo -e "${COLOR_RED}Build failed. Please check for errors above.${COLOR_RESET}"
+        if ! bun run build:linux:bun > node.log 2>&1; then
-        exit 1
+            echo -e "${COLOR_RED}Build failed. Please check for errors above.${COLOR_RESET}"
+            exit 1
+        else
+            echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
+        fi
+    elif command_exists npm; then
+        if ! npm run build:linux:npm > node.log 2>&1; then
+            echo -e "${COLOR_RED}Build failed. Please check for errors above.${COLOR_RESET}"
+            exit 1
+        else
+            echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
+        fi
     else
-        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
+        echo -e "${COLOR_RED}NodeJS is somehow not installed, exiting.${COLOR_RESET}"
+        exit 1
     fi
 
     if [ -f './public/css/base.css' ]; then
         echo -e "${COLOR_BLUE}Cleaning up base Tailwind CSS file...${COLOR_RESET}"
         rm ./public/css/base.css
-        echo -e "${COLOR_GREEN}Done.${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
     fi
 
     echo -e "${COLOR_BLUE}Starting server...${COLOR_RESET}"
-    npm start > node.log 2>&1 &
+    if command_exists bun; then
+        bun run start:bun > node.log 2>&1 &
+    elif command_exists npm; then
+        npm run start:npm > node.log 2>&1 &
+    fi
     
-    for i in {1..10}; do
+    MAX_RETRIES=10
+    RETRY_INTERVAL=1
+
+    for ((i=1; i<=MAX_RETRIES; i++)); do
         PIDS=$(lsof -t -i:$PORT)
         if [ -n "$PIDS" ]; then
-            echo -e "${COLOR_GREEN}\nDone. Server up and running on port $PORT!\n${COLOR_RESET}"
+            echo -e "${COLOR_GREEN}\nDone! Server up and running on port $PORT!\n${COLOR_RESET}"
             break
         else
-            echo -e "${COLOR_YELLOW}Waiting for server to start on port $PORT...${COLOR_RESET}"
+            echo -e "${COLOR_YELLOW}[WAITING FOR SERVER]${COLOR_RESET} Attempt $i/${MAX_RETRIES}"
-            sleep 1
+            sleep $RETRY_INTERVAL
         fi
     done
 
+    if [ -z "$PIDS" ]; then
+        echo -e "${COLOR_RED}Failed to start the server on port $PORT after $MAX_RETRIES attempts.${COLOR_RESET}"
+    fi
+
     if [ -z "$PIDS" ]; then
         echo -e "${COLOR_RED}Something went wrong... Check node.log for more details${COLOR_RESET} (no process on port)"
     fi
 }
 
+# Handles stopping of server
 function stop_server() {
     check_setup
     PID=$(lsof -t -i:$PORT)
 
     if [ -d './public' ]; then
-        echo -e "${COLOR_BLUE}Deleting public directories...${COLOR_RESET}"
         check_dirs "delete"
     fi
 
     if [ -f './src/css/main.css' ]; then
         echo -e "${COLOR_BLUE}Deleting Tailwind CSS...${COLOR_RESET}"
         rm ./src/css/main.css
-        echo -e "${COLOR_GREEN}Done.${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
     fi
 
     if [ -f './node.log' ]; then
         echo -e "${COLOR_BLUE}Deleting node log...${COLOR_RESET}"
         rm ./node.log
-        echo -e "${COLOR_GREEN}Done.${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
     fi
 
     PIDS=$(lsof -t -i:$PORT)
@@ -257,53 +392,95 @@ function stop_server() {
     if [ -n "$PIDS" ]; then
         echo -e "${COLOR_BLUE}Stopping server...${COLOR_RESET}"
         for PID in $PIDS; do
-            kill "$PID" || echo -e "${COLOR_RED}Failed to kill PID: $PID${COLOR_RESET}"
+            kill "$PID" >> /dev/null || echo -e "${COLOR_RED}Failed to kill PID: $PID${COLOR_RESET}"
         done
-        echo -e "${COLOR_GREEN}Done.${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
     else
         echo -e "${COLOR_YELLOW}No process found on port $PORT.${COLOR_RESET}"
     fi
 }
 
+# Checks if server is running
 function check_status() {
     check_setup
     PID=$(lsof -t -i:$PORT)
 
+    echo -e "${COLOR_GREEN}manage for aidxnFUN:${COLOR_RESET} ${COLOR_BLUE}v${SC_VERSION} (${SC_CODENAME})${COLOR_RESET}"
+
     if [ -n "$PID" ]; then
-        echo -e "${COLOR_GREEN}Server running with PID: $PID${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}[SERVER]${COLOR_RESET} Running with PID: $PID"
     else
-        echo -e "${COLOR_RED}Server not running.${COLOR_RESET}"
+        echo -e "${COLOR_RED}[SERVER]${COLOR_RESET} Down${COLOR_RESET}"
     fi
 }
 
+# Master setup function/process
 function setup() {
+    if [ "$DISTRO" != "Ubuntu" ] && [ "$DISTRO" != "Arch Linux" ]; then
+        echo -e "${COLOR_RED}This script is only supported on Ubuntu and Arch Linux${COLOR_RESET}"
+        exit 1
+    fi
+
     clear
-    echo -e "${COLOR_BLUE}Welcome to the aidxnFUN 'manage' script setup!\n${COLOR_RESET}${COLOR_CYAN}You are running manage ${SC_VERSION} ${SC_CODENAME}${COLOR_RESET}\n"
+    echo -e "${COLOR_BLUE}Welcome to the aidxnFUN 'manage' script setup!\n${COLOR_RESET}${COLOR_CYAN}You are running manage v${SC_VERSION} (${SC_CODENAME})${COLOR_RESET}\n"
     echo -e "${COLOR_GREEN}A custom script built by ihatenodejs${COLOR_RESET}"
     echo -e "${COLOR_YELLOW}and presented by forkers like you...${COLOR_RESET}"
     echo -e "\nPress any key to continue..."
     read -n 1 -s -r -p ""
     clear
 
-    echo -e "This script requires Node.js, NPM, and Netcat to be installed on your system."
+    echo -e "${COLOR_BLUE}This script requires Node.js+NPM/Bun, curl, lsof, and Netcat to be installed on your system.${COLOR_RESET}"
-    echo "Please ensure you have these tools installed before proceeding."
+    echo -e "${COLOR_BLUE}It will attempt to install all of the required dependencies, although this might not work every time.${COLOR_RESET}"
+    echo -e "${COLOR_YELLOW}You may need to enter your sudo password.${COLOR_RESET}"
     echo -e "\nPress any key to continue with tool installation..."
     read -n 1 -s -r -p ""
     clear
 
+    # Execute install tool script
     install_tools
 
-    echo -e "\n${COLOR_GREEN}Dependancy installation complete!${COLOR_RESET}"
+    # Check if config file exists
-    echo -e "\n${COLOR_BLUE}If you would like to view the install logs, please do so, or click [ENTER] to continue to the next step.${COLOR_RESET}\n"
+    check_config
+
+    # Configure provider and install Node dependencies
+    if command_exists bun; then
+        echo -e "\n${COLOR_BLUE}Setting provider to Bun...${COLOR_RESET}"
+        echo "DO NOT EDIT THIS: bun" > .njs.provider
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
+        echo -e "\n${COLOR_BLUE}Installing dependencies with Bun...${COLOR_RESET}"
+        bun install >> install.log
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
+    elif command_exists npm; then
+        echo -e "\n${COLOR_BLUE}Setting provider to Node/NPM...${COLOR_RESET}"
+        echo "DO NOT EDIT THIS: node" > .njs.provider
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
+        echo -e "\n${COLOR_BLUE}Installing dependencies with NPM...${COLOR_RESET}"
+        npm install >> install.log
+        echo -e "${COLOR_GREEN}Done!${COLOR_RESET}"
+    else
+        echo -e "${COLOR_RED}NodeJS is somehow not installed, exiting.${COLOR_RESET}"
+        exit 1
+    fi
+
+    echo -e "\n${COLOR_GREEN}Dependency installation complete!${COLOR_RESET}"
+    echo -e "${COLOR_BLUE}You can view the complete log of the installation process in the install.log file${COLOR_RESET}"
+    if [ "$NOB" == "bun_installed" ]; then
+        echo -e "\n${COLOR_RED}Make sure to add this to your shell profile (most likely ~/.bashrc):${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}export BUN_INSTALL=\"$HOME/.bun\"${COLOR_RESET}"
+        echo -e "${COLOR_GREEN}export PATH=\"\$BUN_INSTALL/bin:\$PATH\"${COLOR_RESET}"
+    fi
+    echo -e "\nPress [ENTER] to continue to the next step."
     read -n 1 -s -r -p ""
     clear
 
-    echo -e "${COLOR_GREEN}Now, take a look at the commands you can use with this script:${COLOR_RESET}\n"
+    echo -e "${COLOR_GREEN}Take a look at the tasks you can perform automatically with manage:${COLOR_RESET}\n"
+    # Show the user help message
     show_help
     echo -e "\nPress any key to continue to the final step..."
     read -n 1 -s -r -p ""
     clear
 
+    # Quick commands
     echo -e "${COLOR_BLUE}Now, you may start the server with this command:${COLOR_RESET}"
     echo -e "${COLOR_GREEN}./manage up${COLOR_RESET}\n"
     echo -e "\n${COLOR_BLUE}If you need help, or to get info about other commands, simply use:${COLOR_RESET}"
@@ -312,15 +489,18 @@ function setup() {
     read -n 1 -s -r -p ""
     clear
     echo -e "${COLOR_GREEN}Thank you for using manage ${SC_VERSION} ${SC_CODENAME}!${COLOR_RESET}\n"
+    touch $SETUP_FILE
     exit 0
 }
 
 function check_setup() {
+    # Check if setup file exists
     if [ ! -f "$SETUP_FILE" ]; then
         setup
     fi
 }
 
+# Handles user commands
 case $1 in
     up)
         check_setup

package.json

@@ -1,108 +1,114 @@
 {
   "name": "aidxnfun",
-  "version": "1.0.0",
+  "version": "1.4.0",
   "main": "index.js",
   "scripts": {
-    "build:css:linux": "npx tailwindcss -i ./src/css/base.css -o ./src/css/main.css && cp -r ./src/css ./public/",
+    "build:css:linux:npx": "npx @tailwindcss/cli -i ./src/css/base.css -o ./src/css/main.css && cp -r ./src/css ./public/",
+    "build:css:linux:bunx": "bunx @tailwindcss/cli -i ./src/css/base.css -o ./src/css/main.css && cp -r ./src/css ./public/",
     "build:js:linux": "cp -r ./src/js ./public/",
     "build:img:linux": "cp -r ./src/img ./public/",
     "build:pgp:linux": "cp -r ./src/pgp ./public/",
-    "build:css:win": "npx tailwindcss -i ./src/css/base.css -o ./src/css/main.css && xcopy /E /I /Y \"./src/css\" \"./public/css\"",
+    "copy:favicon:linux": "cp ./src/favicon.ico ./public/",
+    "build:css:win:npx": "npx @tailwindcss/cli -i ./src/css/base.css -o ./src/css/main.css && xcopy /E /I /Y \"./src/css\" \"./public/css\"",
+    "build:css:win:bunx": "npx @tailwindcss/cli -i ./src/css/base.css -o ./src/css/main.css && xcopy /E /I /Y \"./src/css\" \"./public/css\"",
     "build:js:win": "xcopy /E /I /Y \"./src/js\" \"./public/js\"",
     "build:img:win": "xcopy /E /I /Y \"./src/img\" \"./public/img\"",
     "build:pgp:win": "xcopy /E /I /Y \"./src/pgp\" \"./public/pgp\"",
-    "build:linux": "npm run build:css:linux && npm run build:js:linux && npm run build:img:linux && npm run build:pgp:linux",
+    "copy:favicon:win": "copy /Y \"./src/favicon.ico\" \"./public/\"",
-    "build:win": "npm run build:css:win && npm run build:js:win && npm run build:img:win && npm run build:pgp:win",
+    "build:linux:npm": "npm run build:css:linux:npx && npm run build:js:linux && npm run build:img:linux && npm run build:pgp:linux && npm run copy:favicon:linux",
-    "build": "npm run build:linux",
+    "build:linux:bun": "bun run build:css:linux:bunx && bun run build:js:linux && bun run build:img:linux && bun run build:pgp:linux && bun run copy:favicon:linux",
-    "winbuild": "npm run build:win",
+    "build:win:npm": "npm run build:css:win:npx && npm run build:js:win && npm run build:img:win && npm run build:pgp:win && npm run copy:favicon:win",
-    "start": "node app.js"
+    "build:win:bun": "bun run build:css:win:bunx && bun run build:js:win && bun run build:img:win && bun run build:pgp:win && bun run copy:favicon:win",
+    "start:bun": "bun app.js",
+    "start:npm": "node app.js"
   },
   "private": true,
   "devDependencies": {
     "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.47",
+    "postcss": "^8.5.3",
-    "tailwindcss": "^3.4.13"
+    "tailwindcss": "^4.0.12"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.6.0",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@tailwindcss/cli": "^4.0.12",
     "ansi-regex": "^6.1.0",
     "ansi-styles": "^6.2.1",
     "any-promise": "^1.3.0",
     "anymatch": "^3.1.3",
     "arg": "^5.0.2",
-    "balanced-match": "^1.0.2",
+    "balanced-match": "^3.0.1",
-    "binary-extensions": "^2.3.0",
+    "binary-extensions": "^3.0.0",
-    "brace-expansion": "^2.0.1",
+    "brace-expansion": "^4.0.0",
     "braces": "^3.0.3",
     "camelcase-css": "^2.0.1",
-    "chokidar": "^3.6.0",
+    "chokidar": "^4.0.3",
     "color-convert": "^2.0.1",
-    "color-name": "^1.1.4",
+    "color-name": "^2.0.0",
-    "commander": "^12.1.0",
+    "commander": "^13.1.0",
-    "cross-spawn": "^7.0.3",
+    "cross-spawn": "^7.0.6",
     "cssesc": "^3.0.0",
     "didyoumean": "^1.2.2",
     "dlv": "^1.1.3",
-    "eastasianwidth": "^0.2.0",
+    "eastasianwidth": "^0.3.0",
     "ejs": "^3.1.10",
-    "emoji-regex": "^9.2.2",
+    "emoji-regex": "^10.4.0",
-    "express": "^4.21.1",
+    "express": "^4.21.2",
-    "fast-glob": "^3.3.2",
+    "fast-glob": "^3.3.3",
-    "fastq": "^1.17.1",
+    "fastq": "^1.19.1",
     "fill-range": "^7.1.1",
-    "foreground-child": "^3.3.0",
+    "foreground-child": "^3.3.1",
     "function-bind": "^1.1.2",
-    "glob": "^10.4.5",
+    "glob": "^11.0.1",
     "glob-parent": "^6.0.2",
     "hasown": "^2.0.2",
-    "is-binary-path": "^2.1.0",
+    "is-binary-path": "^3.0.0",
-    "is-core-module": "^2.15.1",
+    "is-core-module": "^2.16.1",
     "is-extglob": "^2.1.1",
-    "is-fullwidth-code-point": "^3.0.0",
+    "is-fullwidth-code-point": "^5.0.0",
     "is-glob": "^4.0.3",
     "is-number": "^7.0.0",
-    "isexe": "^2.0.0",
+    "isexe": "^3.1.1",
-    "jackspeak": "^3.4.3",
+    "jackspeak": "^4.1.0",
-    "jiti": "^1.21.6",
+    "jiti": "^2.4.2",
-    "lilconfig": "^2.1.0",
+    "lilconfig": "^3.1.3",
-    "lines-and-columns": "^1.2.4",
+    "lines-and-columns": "^2.0.4",
-    "lru-cache": "^10.4.3",
+    "lru-cache": "^11.0.2",
     "merge2": "^1.4.1",
     "micromatch": "^4.0.8",
-    "minimatch": "^9.0.5",
+    "minimatch": "^10.0.1",
     "minipass": "^7.1.2",
-    "mysql2": "^3.11.3",
+    "mysql2": "^3.13.0",
     "mz": "^2.7.0",
-    "nanoid": "^3.3.7",
+    "nanoid": "^5.1.3",
     "normalize-path": "^3.0.0",
     "object-assign": "^4.1.1",
     "object-hash": "^3.0.0",
-    "openpgp": "^6.0.0",
+    "openpgp": "^6.1.0",
     "package-json-from-dist": "^1.0.1",
-    "path-key": "^3.1.1",
+    "path-key": "^4.0.0",
     "path-parse": "^1.0.7",
-    "path-scurry": "^1.11.1",
+    "path-scurry": "^2.0.0",
-    "picocolors": "^1.1.0",
+    "picocolors": "^1.1.1",
-    "picomatch": "^2.3.1",
+    "picomatch": "^4.0.2",
     "pify": "^6.1.0",
     "pirates": "^4.0.6",
-    "postcss-import": "^15.1.0",
+    "postcss-import": "^16.1.0",
     "postcss-js": "^4.0.1",
-    "postcss-load-config": "^4.0.2",
+    "postcss-load-config": "^6.0.1",
-    "postcss-nested": "^6.2.0",
+    "postcss-nested": "^7.0.2",
-    "postcss-selector-parser": "^6.1.2",
+    "postcss-selector-parser": "^7.1.0",
     "postcss-value-parser": "^4.2.0",
     "queue-microtask": "^1.2.3",
     "read-cache": "^1.0.0",
-    "readdirp": "^3.6.0",
+    "readdirp": "^4.1.2",
-    "resolve": "^1.22.8",
+    "resolve": "^1.22.10",
-    "reusify": "^1.0.4",
+    "reusify": "^1.1.0",
     "run-parallel": "^1.2.0",
     "shebang-command": "^2.0.0",
-    "shebang-regex": "^3.0.0",
+    "shebang-regex": "^4.0.0",
     "signal-exit": "^4.1.0",
     "source-map-js": "^1.2.1",
-    "string-width": "^5.1.1",
+    "string-width": "^7.2.0",
     "string-width-cjs": "^5.1.1",
     "strip-ansi": "^7.1.0",
     "strip-ansi-cjs": "^8.0.0",
@@ -111,15 +117,18 @@
     "thenify": "^3.3.1",
     "thenify-all": "^1.6.0",
     "to-regex-range": "^5.0.1",
-    "ts-interface-checker": "^0.1.13",
+    "ts-interface-checker": "^1.0.2",
     "util-deprecate": "^1.0.2",
     "which": "^5.0.0",
-    "wrap-ansi": "^8.1.0",
+    "wrap-ansi": "^9.0.0",
     "wrap-ansi-cjs": "^8.0.0",
-    "yaml": "^2.5.1"
+    "yaml": "^2.7.0"
   },
   "keywords": [],
   "author": "ihatenodejs",
   "license": "CC0-1.0",
-  "description": "The full code of my website"
+  "description": "The full code of my website",
+  "trustedDependencies": [
+    "@parcel/watcher"
+  ]
 }

src/css/base.css

@@ -1,11 +1,31 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
-@tailwind utilities;
 
-.glow {
+@theme {
-    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
+  --font-afacad-flux: 'Afacad Flux', sans-serif;
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+.glow-txt {
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.3);
 }
 
 body {
-    @apply font-afacad-flux;
+  @apply font-afacad-flux;
 }

src/js/main.js

@@ -3,8 +3,13 @@ const closeMenuBtn = document.getElementById('close-menu-btn');
 const mobileMenu = document.getElementById('mobile-menu');
 
 document.addEventListener('DOMContentLoaded', () => {
+    const menuButton = document.getElementById('menu-button');
+    const dropdownMenu = menuButton.nextElementSibling;
     const notificationBanner = document.getElementById('notification-banner');
     const dismissButton = document.getElementById('dismiss-btn');
+    const openMenuBtn = document.getElementById('open-menu-btn');
+    const closeMenuBtn = document.getElementById('close-menu-btn');
+    const mobileMenu = document.getElementById('mobile-menu');
 
     if (localStorage.getItem('notificationDismissed')) {
         notificationBanner.style.display = 'none';
@@ -14,6 +19,28 @@ document.addEventListener('DOMContentLoaded', () => {
         notificationBanner.style.display = 'none';
         localStorage.setItem('notificationDismissed', 'true');
     });
+
+    menuButton.addEventListener('click', function(event) {
+        event.preventDefault();
+        const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
+        menuButton.setAttribute('aria-expanded', !isExpanded);
+        dropdownMenu.classList.toggle('hidden');
+    });
+
+    document.addEventListener('click', function(event) {
+        if (!menuButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
+            menuButton.setAttribute('aria-expanded', 'false');
+            dropdownMenu.classList.add('hidden');
+        }
+    });
+
+    openMenuBtn.addEventListener('click', () => {
+        mobileMenu.style.display = 'block';
+    });
+
+    closeMenuBtn.addEventListener('click', () => {
+        mobileMenu.style.display = 'none';
+    });
 });
 
 openMenuBtn.addEventListener('click', () => {

src/js/status.js

@@ -21,11 +21,11 @@ async function testPing() {
             const time = await ping(url);
             if (url === 'https://aidxn.fun/ping') {
                 const website = document.getElementById("website");
-                website.textContent = `[ONLINE - ${time} ms]`
+                website.textContent = `[ONLINE - ${time} ms]`;
             }
             if (url === 'https://kantor.aidxn.fun/ping') {
                 const status1 = document.getElementById("status1");
-                status1.textContent = `[ONLINE - ${time} ms]`
+                status1.textContent = `[ONLINE - ${time} ms]`;
                 status1.className = 'text-green-500 font-bold';
             }
             return { url, time };
@@ -47,6 +47,9 @@ async function testPing() {
         oldText = status1.textContent;
         status1.textContent = oldText + ' [FASTEST]';
     }
+
+    document.getElementById('loading').classList.add('hidden');
+    document.getElementById('content').classList.remove('hidden');
 }
 
 window.onload = () => {

src/pgp/publickey.asc

@@ -1,52 +1,52 @@
 -----BEGIN PGP PUBLIC KEY BLOCK-----
 
-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
+mQINBGdRPukBEADF0gF7TMndak3zLle4M43OskFp3Scszi5ZWHm8FXO2q2IVwkrl
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-V1aPHWNrezjERB4AY2sBZ4wOeiqMc4TVlItF7G7ilDjyfP2JHSNwqnL+ebuvdKdT
+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
-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
+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
-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
+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
-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
+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
-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
+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
-+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
+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
-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
+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
-txXaoFkuiartftwMvaH5zm0zi3XgFiZTy2QEBB7dI2ke4wiVOlSIPmfD9kckPkU5
++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
-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
+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
-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
+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
-AQlzz7EHJf6s9zr2Wb259vBY/E0qdQI1Bkq7WMv8nwRoC47a5Cfur7+XT5Hg9UA5
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-kdQqDf8ZUwjpND2idaOHk6a506lJfVD4cebDoL1warOEHyKBSTsuwH+aBkEaKgUI
+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
-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
+ZHr2H1DkdkxvEGbX3FW9gBDCpO2Q5W8jsXBT/D93xzJausfiiPFEsOTZIs00wb1i
-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
+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
-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
+y9mSdkFENeCcAa3zv5c25w0/tCz80jhGmWzaiqAoh61XVK6cnlWsiZArBBkXxKsx
-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
+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
-AAGJAjwEGAEKACYWIQSxn+t/QoLtv0D7O166CheEa/bK1gUCZx5SxwIbDAUJA8J3
+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
-uQAKCRC6CheEa/bK1guwD/4rWBHfTKHvHe/9F/TD6BbUibbj7VdvIHHlh5+vkgdY
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-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
+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
-xA==
+l7A3Nlh8
-=J1Vr
+=zowx
 -----END PGP PUBLIC KEY BLOCK-----

tailwind.config.js

@@ -1,13 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./views/**/*.{ejs,js}"],
-  theme: {
-    extend: {
-      fontFamily: {
-        'afacad-flux': ['"Afacad Flux"', 'sans-serif'],
-      },
-    },
-  },
-  plugins: [],
-}
-

views/about.ejs

@@ -3,29 +3,38 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>🎃 aidxn.fun | about</title>
+    <title>❄️ aidxn.fun | about</title>
     <link href="/css/main.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
 </head>
-<body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux">
+<body class="bg-linear-to-br from-slate-900 to-black text-white font-afacad-flux">
 <%- include('shards/header.ejs', { req: req }) %>
 <header class="flex flex-col items-center justify-center h-[40vh] p-6">
     <h1 class="text-5xl font-bold mb-2 text-center">About Me</h1>
     <p class="text-lg text-gray-300 max-w-xl text-center mt-3">Looking to learn more?</p>
 </header>
-<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
+<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
     <h3 class="text-2xl font-bold mb-4 text-white">What you're looking for</h3>
     <p class="text-slate-300 mb-4">Heyo! I'm Aidan, and I'm a human being, like you. I'm a Wikipedia editor, hobbyist programmer (Python, Node.js and PHP) and student. I am a troubled teen industry survivor and I also <i>love</i> music! I love walking (pretty much anywhere), particularly Boston and some Mass suburbs. I'm a cryptocurrency user and love it way more than credit cards/cash. However, I am strongly opposed to the adoption of Web3 technology.</p>
-    <p class="text-slate-300 mb-4">I archive adverts and culture items (especially digital media) over on my secondary website for my online personality, <a href="https://pontus.aidxn.fun" class="underline">pontus.aidxn.fun</a>. Maybe give it a peek!</p>
+    <p class="text-slate-300 mb-4">I archive adverts and culture items (especially digital media) over on my secondary website for my online personality, <a href="https://p0ntus.com" class="underline">p0ntus.com</a>. Maybe give it a peek! Most items are uploaded in full quality, and files are served from a server in Michigan.</p>
     <p class="text-slate-300 mb-4">I strive, as a person, to understand my peers in life. I consider myself to be extremely understanding and accepting, albeit nobody is perfect and I still have biases.</p>
     <p class="text-slate-300 mb-4">Thus, I've tried to do about almost everything and learn about almost everything to get a better understanding of the world around me. I love to debate, talk and learn about other people's views, while keeping it judgement-free. I believe this has helped me find more diverse relationships.</p>
     <p class="text-slate-300 mb-4">In politics, I'm a strong Democrat and a supporter of the <a class="underline" href="https://uspirates.org">Pirate Party</a>. I hope, by the time I die, that everyone may have fair human rights, open source is standard and the troubled teen industry is torn down or rebuilt into a truly healing environment. Also, let's try our best not to let AI take over too fast, eh?</p>
     <p class="text-slate-300 mb-4">If you want, you can check out my LastFM profile <a class="underline" href="https://last.fm/user/aidxn_">here</a>. If you don't already know what LastFM is, you can see more about my music taste there. It's where the sidebar fetches now playing stats from, too!</p>
 
-    <h3 class="text-2xl font-bold mt-6 mb-4 text-white">Technology</h3>
+    <h3 class="text-2xl font-bold mt-6 mb-4 text-white">Technology Experience</h3>
-    <p class="text-slate-300 mb-4">I have a lot of experience with varying types of technologies. From servers to old XP machines, I've tried it all. I currently administer two Linux servers, both running Ubuntu.</p>
+    <p class="text-slate-300 mb-4">I have a lot of experience with varying types of technologies. From servers to old XP machines, I've tried it all. I currently administer three Linux servers, all running Ubuntu.</p>
+    <p class="text-slate-300 mb-4">I take great pride in my laptops, as I believe they have been pivotal to helping me learn Linux, programming, and helping to entertaining myself. I look at my dedication to these laptops as people who are passionate about their car(s). We both take great interest in customizing and maintaining our devices/cars.</p>
+    <p class="text-slate-300 mb-4">A lot of my projects include programming, which I keep on GitHub. In fact, this is one of my many free-and-open-source projects! Most of the code and content I create is released into the public domain.</p>
+    <p class="text-slate-300 mb-4">While this isn't the most common practice, I despise copyright and believe public domain content (whether it be code or images) has a heightened meaning.</p>
+
+    <h3 class="text-2xl font-bold mt-6 mb-4 text-white">My Setup</h3>
+    <p class="text-slate-300 mb-4">I have a pretty basic setup, hardware-wise (I'm not a millionaire, after all), although I like to say I put my things to good use. I own a lot of Apple devices, actually, despite despising them with all my heart. However, they do not run Apple software.</p>
+    <p class="text-slate-300 mb-4">My main laptop is a Thinkpad T470s. I have made upgrades to the memory (16GB), storage (2TB NVMe), and installed a new secondary battery. It is my pride and joy, and runs Arch Linux. I daily drive Xfce on it (I like the design) alongside GNOME and KDE Plasma. Depending on what I am doing with this laptop (programming, school, etc) defines which DE I use. I am a DWM warrior, so it may be installed on this laptop. I have had this laptop since December 2024.</p>
+    <p class="text-slate-300 mb-4">I also own three MacBook Air laptops. I purchased two (a 2013 and a 2015) for $15 each, and they were in rough shape, although functional. One is currently running Ubuntu 24.10 for Home Assistant, and the other runs Gentoo Linux. The system is not dependent on a server for building packages, and does it all on its own (4GB of RAM and a crappy CPU FTW!). The third MacBook Air is a 2020 M1 MacBook Air, which is used for school and runs macOS due to school policy.</p>
+    <p class="text-slate-300 mb-4">In terms of mobile technology, I own a Pixel 7 Pro and a Samsung A32 5G. The Pixel phone is rooted and runs crDroid Android 11.0 Beta, which is Android 15. The Samsung A32 5G is stuck on Android 14, and cannot be rooted due to restrictions on the bootloader unlocking, put in place by T-Mobile.
 
     <h3 class="text-2xl font-bold mt-6 mb-4 text-white">Linux Distro Experience</h3>
     <ul class="space-y-3">
@@ -60,7 +69,8 @@
     
     <h3 class="text-2xl font-bold mt-6 mb-4 text-white">Cloud</h3>
     <p class="text-slate-300 mb-4">I also work a <i class="mr-1">LOT</i> in the cloud, but not the type you might be thinking about. I almost have an obsession with enterprise cloud computing. Hell, you're actually connected to one... right now! Here are some of my favorite platforms, ranked.</p>
-    <p class="text-slate-300 mb-4">This section is a work in progress, for those who don't know cloud computing. I'm working to make the wording clearer, so the non-technical folk can still understand everything here!</p>
+    <p class="text-slate-300 mb-4">I currently manage four servers, all operating in the cloud. They are from various providers, two coming from Oracle Cloud, one coming from Liquid Web, and another from Azure. They all have verying specifications, although my highest powered server has an 8vCPU Xeon paired with 24GB of RAM and ~400GB of SSD storage.</p>
+    <p class="text-slate-300 mb-4">As much as I would like to rant about cloud all day, I will opt keep it short. Here are my favorite cloud platforms, ranked:</p>
 
     <ol class="list-decimal list-inside space-y-3">
         <li class="text-slate-300">Oracle Cloud</li>

views/cloud.ejs

@@ -3,19 +3,19 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>🎃 aidxn.fun | cloud</title>
+    <title>❄️ aidxn.fun | cloud</title>
     <link href="/css/main.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
 </head>
-<body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux">
+<body class="bg-linear-to-br from-slate-900 to-black text-white font-afacad-flux">
 <%- include('shards/header.ejs', { req: req }) %>
 <header class="flex flex-col items-center justify-center h-[40vh] p-6">
     <h1 class="text-5xl font-bold mb-2 text-center">Cloud</h1>
     <p class="text-lg text-gray-300 max-w-xl text-center mt-3">Looking to learn about my experience with the cloud?</p>
 </header>
-<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
+<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
     <h3 class="text-2xl font-bold mb-4 text-white">Platforms</h3>
     <p class="text-slate-300 mb-4">I also work a <i>LOT</i> in the cloud, but not the type you might be thinking about. I almost have an obsession to enterprise cloud computing. Hell, you're actually connected to one... right now! Here are some of my favorite platforms, ranked.</p>
     <p class="text-slate-300 mb-4">This section is a work in progress, for those who don't know cloud computing. I'm working to make the wording clearer, so the non-technical folk can still understand everything here!</p>

views/contact.ejs

@@ -3,14 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>🎃 aidxn.fun | contact</title>
+    <title>❄️ aidxn.fun | contact</title>
     <link href="/css/main.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
-<body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux">
+<body class="bg-linear-to-br from-slate-900 to-black text-white font-afacad-flux">
 <%- include('shards/header.ejs', { req: req }) %>
 
 <header class="flex flex-col items-center justify-center h-[40vh] p-6">
@@ -18,7 +18,7 @@
     <p class="text-lg text-gray-300 max-w-xl text-center mt-3">Looking to contact me? You found it!</p>
 </header>
 
-<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
+<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
     <h3 class="text-2xl font-bold mb-4 text-white">Contact Details</h3>
     <p class="text-slate-300 mb-4">This one can be a hard one for most people, as I'm not a fan of modern social media, albeit I give in here and there.</p>
     <p class="text-slate-300 mb-4">If you're looking for my email, simply replace the brackets with the character it's referencing, like so: test[at]test[dot]com becomes test@test.com. This is in order to prevent bots from contacting me!</p>
@@ -28,12 +28,20 @@
             <b>Email:</b> <span class="text-slate-300 ml-1">i[at]aidxn[dot]fun (PGP encryption preferred)</span>
         </li>
         <li class="flex items-center">
-            <i class="fas fa-comments text-green-400 mr-2"></i>
+            <i class="fas fa-envelope text-pink-500 mr-2"></i>
+            <b>Email:</b> <span class="text-slate-300 ml-1">aidan[at]p0ntus[dot]com (PGP encryption preferred)</span>
+        </li>
+        <li class="flex items-center">
+            <i class="fas fa-comments text-blue-400 mr-2"></i>
             <b>Signal:</b> <span class="text-slate-300 ml-1">[at]iusearchbtw.17</span>
         </li>
+        <li class="flex items-center">
+            <i class="fas fa-comments text-green-400 mr-2"></i>
+            <b>Matrix:</b> <span class="text-slate-300 ml-1">@ihatenodejs:nope.chat</span>
+        </li>
         <li class="flex items-center">
             <i class="fab fa-telegram-plane text-blue-400 mr-2"></i>
-            <b>Telegram:</b> <span class="text-slate-300 ml-1">[at]iusearchbtw42</span>
+            <b>Telegram:</b> <span class="text-slate-300 ml-1">[at]p0ntu5</span>
         </li>
         <li class="flex items-center">
             <i class="fas fa-phone-alt text-yellow-400 mr-2"></i>

views/index.ejs

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>🎃 aidxn.fun | home</title>
+    <title>❄️ aidxn.fun | home</title>
     <link href="/css/main.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -14,27 +14,27 @@
 <div class="relative isolate px-6 pt-13 lg:px-8">
     <div class="mx-auto py-32 sm:py-48 lg:py-56">
         <div class="text-center">
-            <h1 class="text-balance text-4xl font-bold tracking-tight text-slate-200 sm:text-6xl mb-2">Aidan | lxu | pontus</h1>
+            <h1 class="text-balance text-4xl font-bold tracking-tight text-slate-200 sm:text-6xl mb-2 glow-txt">Aidan | lxu | pontus</h1>
             <p class="mt-6 text-lg leading-8 text-slate-200">Personal systems administrator, hardcore Linux user, and casual developer.</p>
         </div>
     </div>
 </div>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4">
-    <div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
+    <div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
         <h1 class="text-4xl font-bold mb-4 text-white">Welcome!</h1>
         <p class="text-slate-300">Outside of the internet, I am known as Aidan. If you are a <a class="underline" href="https://tilde.club">tilde.club</a> user, you will know me as <a class="underline" href="https://tilde.club/~lxu">~lxu</a>! I am a technology enthusiast, Wikipedia editor, personal systems administator, and Linux user.</p>
         <p class="text-slate-300 mt-3">Here, you can learn more about me, put my programming skills to the test, and even have some fun along the way!</p>
-        <p class="text-slate-300 mt-3">You can learn more about my online personality and archival work over on <a href="https://pontus.aidxn.fun" class="underline">pontus.aidxn.fun</a>. It has all the information you need, especially if you have interest in archiving things yourself! I also upload on <a href="https://archive.org/details/@p0ntu5">archive.org</a> occasionally.</p>
+        <p class="text-slate-300 mt-3">You can learn more about my online personality and archival work over on <a href="https://p0ntus.com" class="underline">p0ntus.com</a>. It has all the information you need, especially if you have interest in archiving things yourself! I also upload on <a href="https://archive.org/details/@p0ntu5">archive.org</a> occasionally.</p>
         <p class="text-slate-300 mt-3">This website is currently hosted in Frankfurt, Germany. Page load speeds may be impacted, however my website's data is hosted under stricter data protection laws. I'm not a millionaire, and hosting out of Germany helps me save money on hosting, and serve a wider range of countries with better speeds.</p>
         <p class="text-slate-300 mt-3">The content and code of this website is hereby released under the public domain. You are free to use this servers content for whatever you please, and you can additionally view this website's source code on GitHub <a class="underline" href="https://github.com/ihatenodejs/aidxnFUN/">here</a>.</p>
     </div>
-    <div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
+    <div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
         <h1 class="text-4xl font-bold mb-4 text-white">Where to start</h1>
-        <p class="text-slate-300">This website has a lot of content, albeit spread apart. If you're interested in learning about me as a person, I'd obviously suggest <a class="underline" href="/about">my about page</a>. For opinionated content, my <a class="underline" href="https://blog.aidxn.fun">blog</a> is a great place to check out. I also write casually on my <a class="underline" href="https://tilde.club/~lxu">~tilde page</a> hosted on <a class="underline" href="https://tilde.club/">~tilde.club</a>.</p>
+        <p class="text-slate-300">This website has a lot of content, albeit spread apart. If you're interested in learning about me as a person, I'd obviously suggest <a class="underline" href="/about">my about page</a>. For opinionated content, my <a class="underline" href="https://blog.aidxn.fun">blog</a> (currently down) is a great place to check out. I also write casually on my <a class="underline" href="https://tilde.club/~lxu">tilde site</a> hosted on <a class="underline" href="https://tilde.club/">tilde.club</a>.</p>
         <p class="text-slate-300 mt-3">If you merely need to contact me, check out the <a class="underline" href="/contact">contact page</a> on the sidebar (or you could click that link).</p>
         <p class="text-slate-300 mt-3">This website is always a work in progress, and not every page is going to be finished, however I aim for every page to be functional and relevant. Content is always being added, as I progress through my life. Why not start early?</p>
     </div>
-    <div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
+    <div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
         <h1 class="text-4xl font-bold mb-4 text-white">Music</h1>
         <%- include('shards/music.ejs') %>
         <h1 class="text-3xl text-white py-3.5">My Music Taste</h1>
@@ -42,10 +42,10 @@
         <p class="text-slate-300 mt-3">Some of my favorite artists include tobi lou, Flyana Boss, and Kali Uchis. Some of my "classics" are Mike Stud (before his name change to "mike."), Skizzy Mars, tobi lou, The Neighbourhood, and Ryan Caraveo.</p>
         <p class="text-slate-300 mt-3">If you are interested, you can check out my LastFM profile <a class="underline" href="https://www.last.fm/user/aidxn_">here</a>.
     </div>
-    <div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
+    <div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8">
         <h1 class="text-4xl font-bold mb-4 text-white">About the design</h1>
-        <p class="text-slate-300">With this revision, I was aiming to provide a modern design, with an easy-to-navigate interface.</p>
+        <p class="text-slate-300">With this revision, I was aiming to provide a modern design, with an easy-to-navigate interface. I always appreciate dark-themed websites, and decided to add some subtle gradients with glass effects to spice the design up. While I am a developer more than I am a designer, I quite favor this design and it has become the pinnacle of my design work.</p>
-        <p class="text-slate-300 mt-3">For this design, I chose Tailwind CSS. I appreciate their flexibility, though their documentation is terrible on purpose. They encourage purchasing their components subscription (which costs a lot of money!) all over the place. It has been a poor experience, but I have been able to figure it out with the help of their free elements, documentation, prior knowledge, and the docs.</p>
+        <p class="text-slate-300 mt-3">For this design, I chose Tailwind CSS. I appreciate their flexibility, although it appears their documentation poorly written on purpose. They encourage purchasing their components subscription (which costs a lot of money!) all over the documentation, especially in confusing ways. While it has been a poor experience there, I have been able to figure it out with the help of their free elements, documentation, prior knowledge, and the docs.</p>
         <p class="text-slate-300 mt-3">This code is also under Public Domain, and can be found <a class="underline" href="https://github.com/ihatenodejs/aidxnFUN">here</a>. Feel free to use the code and content how you wish. If you would like to respect my best wishes, please do not use this content or code for AI. Thanks, if you respect me! :]</p>
     </div>
 </div>

views/manifesto.ejs

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>❄️ aidxn.fun | digital manifesto</title>
+    <link href="/css/main.css" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
+</head>
+<body class="bg-linear-to-br from-slate-900 to-black text-white font-afacad-flux">
+<%- include('shards/header.ejs', { req: req }) %>
+<header class="flex flex-col items-center justify-center h-[40vh] p-6">
+    <h1 class="text-5xl font-bold mb-2 text-center">Digital Manifesto</h1>
+    <p class="text-lg text-gray-300 max-w-xl text-center mt-3">A commitment from me for a better Internet space.</p>
+</header>
+<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
+    <h3 class="text-2xl font-bold mb-4 text-white">1. Empathy and Understanding</h3>
+    <p class="text-slate-300 mb-4">We live in a distant world. People I meet are from all over, which can be hard to understand for others. I aim to utilize my ability to connect by understanding and getting <i>interested</i> in people's lives. I pledge to:</p>
+    <ul class="list-disc pl-5 space-y-2">
+        <li class="text-white">Listen deeply and genuinely</li>
+        <li class="text-white">Suspend judgment and seek to understand</li>
+        <li class="text-white">Recognize the humanity in every digital interaction</li>
+    </ul>
+    <h3 class="text-2xl font-bold mb-4 mt-4 text-white">2. Unconditional Sharing</h3>
+    <p class="text-slate-300 mb-4">Information should be free and accessible to all. I will:</p>
+    <ul class="list-disc pl-5 space-y-2">
+        <li class="text-white">Make my contributions free and accessible to all (e.g. public domain Wikipedia contributions)</li>
+        <li class="text-white">Creating and sharing content for others benefit</li>
+        <li class="text-white">Supporting open-source principles</li>
+        <li class="text-white">Creating extensive documentation on all projects</li>
+    </ul>
+    <h3 class="text-2xl font-bold mb-4 mt-4 text-white">2. Genuine Human Connection</h3>
+    <p class="text-slate-300 mb-4">I aim to create a genuine human connection with all people I meet, regardless of who or where they are from.</p>
+    <h3 class="text-2xl font-bold mb-4 mt-4 text-white">3. Commitment to Privacy with Personal Services</h3>
+    <p class="text-slate-300 mb-4">In terms of my personal (some public) services, I commit to never selling, viewing or share personal information with third parties or myself. I will:</p>
+    <ul class="list-disc pl-5 space-y-2">
+        <li class="text-white">Respect user data as a fundamental human right</li>
+        <li class="text-white">Not implement tracking and/or monetization in my services</li>
+        <li class="text-white">Focus my services to focus on being free and open</li>
+        <li class="text-white">Suggest/support technologies that help privacy</li>
+    </ul>
+    <h3 class="text-2xl font-bold mb-4 mt-4 text-white">I commit</h3>
+    <p class="text-slate-300 mb-4">I am not perfect, that's for sure, but I am committed. I promise to continuously learn, grow, and adapt to my environment, goals, purpose, and the people around me.</p>
+</div>
+<script src="js/main.js"></script>
+<%- include('shards/footer.ejs') %>

views/projects.ejs

@@ -3,19 +3,19 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>🎃 aidxn.fun | projects</title>
+    <title>❄️ aidxn.fun | projects</title>
     <link href="/css/main.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
 </head>
-<body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux">
+<body class="bg-linear-to-br from-slate-900 to-black text-white font-afacad-flux">
 <%- include('shards/header.ejs', { req: req }) %>
 <header class="flex flex-col items-center justify-center h-[40vh] p-6">
     <h1 class="text-5xl font-bold mb-2 text-center">Projects</h1>
     <p class="text-lg text-gray-300 max-w-xl text-center mt-3">Looking to learn more about my projects?</p>
 </header>
-<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
+<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
     <h3 class="text-2xl font-bold mb-4 text-white">Currently working on</h3>
     <p class="text-slate-300 mb-4">You can check out my GitHub account right <a href="https://github.com/ihatenodejs">here</a>.</p>
     <p class="text-slate-300 mb-4">I am currently working on the following projects (in order of activity):</p>
@@ -26,19 +26,50 @@
             <span class="text-gray-300">The website you are currently viewing</span>
         </li>
         <li class="text-white">
-            <strong>Adderall</strong><br>
+            <strong>p0ntus mail</strong><br>
-            <span class="text-gray-300">Repo currently private / In development</span><br>
+            <a href="https://github.com/ihatenodejs/pontus-mail" class="text-gray-300 underline">Repo public</a>  | <a href="https://pontusmail.org" class="text-gray-300 underline">Website</a><br>
-            <span class="text-gray-300">Content/file organization system</span><br>
+            <span class="text-gray-300">Mailcow/Docker</span><br>
-            <span class="text-gray-300">Created for my upcoming public archive website</span>
+            <span class="text-gray-300">My self-hosted public email service</span>
+        </li>
+        <li class="text-white">
+            <strong>modules</strong><br>
+            <a href="https://github.com/ihatenodejs/modules" class="text-gray-300 underline">Repo public</a>  | <a href="https://modules.lol" class="text-gray-300 underline">Website</a><br>
+            <span class="text-gray-300">Docker/Node.js/Express/EJS</span><br>
+            <span class="text-gray-300">Magisk module and FOSS/root app "store."</span>
+        </li>
+        <li class="text-white">
+            <strong>pontus-bot</strong><br>
+            <a href="https://github.com/ihatenodejs/pontus-bot" class="text-gray-300 underline">Repo public</a>  | <a href="https://github.com/ihatenodejs/pontus-bot/pkgs/container/pontus-bot/315781719?tag=main" class="text-gray-300 underline">Docker Image</a><br>
+            <span class="text-gray-300">Dockerized</span><br>
+            <span class="text-gray-300">Telegram file indexer bot</span>
+        </li>
+        <li class="text-white">
+            <strong>Android Integrity Alliance</strong><br>
+            <a href="https://github.com/AndroidIntegrity/website" class="text-gray-300 underline">Repo public</a>  | <a href="https://androidintegrity.org" class="text-gray-300 underline">Website</a><br>
+            <span class="text-gray-300">Collaboration with several people</span><br>
+            <span class="text-gray-300">Website for petition against Google Play Integrity</span>
+        </li>
+        <li class="text-white">
+            <strong>pontus</strong><br>
+            <a href="https://github.com/ihatenodejs/pontus" class="text-gray-300 underline">Repo public</a> | <a href="https://p0ntus.com" class="text-gray-300 underline">Website</a><br>
+            <span class="text-gray-300">Website for my online self</span><br>
+            <span class="text-gray-300">Intended for showcasing online projects and storing archives</span>
+            <span class="text-gray-300">Replacement for scrapped project: Adderall.</span>
+        </li>
+        <li class="text-white">
+            <strong>aidxnFUNretro</strong><br>
+            <a href="https://github.com/ihatenodejs/aidxnFUNretro" class="text-gray-300 underline">Repo public</a> | <a href="https://old.aidxn.fun" class="text-gray-300 underline">Website</a><br>
+            <span class="text-gray-300">The retro style of my website</span>
         </li>
         <li class="text-white">
             <strong>Overseerr</strong><br>
-            <span class="text-gray-300">Repo currently private / In development</span><br>
+            <span class="text-gray-300">Repo currently private / In development (backburnered)</span><br>
             <span class="text-gray-300">Manage your server from an easy-to-use and responsive interface</span>
         </li>
     </ul>
     <h3 class="text-2xl font-bold mb-4 mt-4 text-white">Finished projects</h3>
     <p class="text-slate-300 mb-4">I currently have only one public project which is in finished state. It's my old website, which is now being hosted at <a class="underline" href="https://old.aidxn.fun/">old.aidxn.fun</a>. It features a 2000s design and flashy graphics!</p>
+    <p class="text-slate-300 mb-4">Most of my projects are considered production-ready, although will always recieve updates and changes, thus being considered in progress.</p>
 </div>
 <script src="js/main.js"></script>
 <%- include('shards/footer.ejs') %>

views/shards/footer.ejs

@@ -1,6 +1,7 @@
 <footer class="rounded-lg border border-gray-300/50 backdrop-blur-md shadow-lg glow m-4">
     <div class="w-full mx-auto p-4 md:flex md:items-center md:justify-between">
         <span class="text-sm text-gray-500 sm:text-center dark:text-gray-200">Content and code released under public domain</span>
+        <div style="align-content: center;"><a href="https://512kb.club"><img src="https://512kb.club/assets/images/orange-team.svg" alt="A proud member of the orange team of 512KB club" /></a></div>
         <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-200 sm:mt-0">
             <li>
                 <a href="/" class="hover:underline me-4 md:me-6">Home</a>
@@ -8,9 +9,9 @@
             <li>
                 <a href="/about" class="hover:underline me-4 md:me-6">About</a>
             </li>
-            <li>
+            <!-- DISABLED FOR NOW - I forgot to do this a while ago, and need to get back to it <li>
                 <a href="/privacy" class="hover:underline me-4 md:me-6">Privacy Policy</a>
-            </li>
+            </li> -->
             <li>
                 <a href="/contact" class="hover:underline">Contact</a>
             </li>

views/shards/header.ejs

@@ -1,17 +1,17 @@
 <!-- The body/head/html tag is purposely not included here, as it gives the user easier freedom to control the stying and details of the page (such as title) -->
 <div id="notification-banner" class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-800/50 backdrop-blur-md px-6 py-2.5 rounded-lg shadow-lg">
     <div class="absolute left-0 top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl">
-        <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
+        <div class="aspect-577/310 w-[36.0625rem] bg-linear-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
     </div>
     <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
         <p class="text-sm leading-6 text-gray-100">
-            <strong class="font-semibold">old.aidxn.fun</strong>
+            <strong class="font-semibold">Do you prefer a retro design?</strong>
             <svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true">
                 <circle cx="1" cy="1" r="1" />
             </svg>
-            Do you prefer a retro design? Check out old.aidxn.fun!
+            Check out old.aidxn.fun for a retro experience!
         </p>
-        <a href="https://old.aidxn.fun" class="flex-none rounded-full bg-gray-900 px-3.5 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900">Go retro <span aria-hidden="true">&rarr;</span></a>
+        <a href="https://old.aidxn.fun" class="flex-none rounded-full bg-gray-900 px-3.5 py-1 text-sm font-semibold text-white shadow-xs hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-700">Go retro <span aria-hidden="true">&rarr;</span></a>
     </div>
     <div class="flex flex-1 justify-end">
         <button type="button" id="dismiss-btn" class="-m-3 p-3 focus-visible:outline-offset-[-4px]">
@@ -38,15 +38,30 @@
                 </svg>
             </button>
         </div>
-        <div class="hidden lg:flex lg:gap-x-12">
+        <div class="hidden lg:flex lg:gap-x-12 items-center">
             <a href="/" class="text-sm font-semibold leading-6 text-slate-200">Home</a>
             <a href="/about" class="text-sm font-semibold leading-6 text-slate-200">About</a>
-            <a href="https://blog.aidxn.fun" class="text-sm font-semibold leading-6 text-slate-200">Blog</a>
+            <div class="relative inline-block text-left">
-            <a href="https://tilde.club/~lxu" class="text-sm font-semibold leading-6 text-slate-200">Tilde</a>
+                <a href="#" class="text-sm font-semibold leading-6 text-slate-200 flex items-center" id="menu-button" aria-expanded="false" aria-haspopup="true">
+                    Websites
+                    <svg class="ml-1 h-5 w-5 text-slate-200" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+                    </svg>
+                </a>
+                <div class="absolute right-0 z-10 w-56 origin-top-right rounded-md bg-gray-800 shadow-lg ring-1 ring-gray-700 focus:outline-hidden mt-5 hidden" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+                    <div class="py-1" role="none">
+                        <a href="https://aidxn.cc" class="block px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-1">Main Site</a>
+                        <a href="https://blog.aidxn.fun" class="block px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-1">Blog</a>
+                        <a href="https://tilde.club/~lxu" class="block px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-0">Tilde</a>
+                        <a href="https://p0ntus.com" class="block px-4 py-2 text-sm text-gray-100 hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-1">Archive</a>
+                    </div>
+                </div>
+            </div>
             <a href="/contact" class="text-sm font-semibold leading-6 text-slate-200">Contact</a>
             <a href="/verify" class="text-sm font-semibold leading-6 text-slate-200">Verify Message</a>
             <a href="/status" class="text-sm font-semibold leading-6 text-slate-200">Status</a>
             <a href="/projects" class="text-sm font-semibold leading-6 text-slate-200">Projects</a>
+            <a href="/manifesto" class="text-sm font-semibold leading-6 text-slate-200">Manifesto</a>
         </div>
     </nav>
     <div class="lg:hidden" role="dialog" aria-modal="true" id="mobile-menu" style="display: none;">
@@ -67,14 +82,17 @@
             <div class="mt-6 flow-root">
                 <div class="-my-6 divide-y divide-gray-500/10">
                     <div class="space-y-2 py-6">
-                        <a href="/" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-50">Home</a>
+                        <a href="/" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-900">Home</a>
-                        <a href="/about" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-50">About</a>
+                        <a href="/about" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-900">About</a>
-                        <a href="https://blog.aidxn.fun" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-50">Blog</a>
+                        <a href="https://aidxn.cc/" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-900">Main Website</a>
-                        <a href="https://tilde.club/~lxu" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-50">Tilde</a>
+                        <a href="https://blog.aidxn.fun/" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-900">Blog</a>
-                        <a href="/contact" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-50">Contact</a>
+                        <a href="https://tilde.club/~lxu" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-900">Tilde</a>
-                        <a href="/verify" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-50">Verify Message</a>
+                        <a href="https://p0ntus.com" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-900">Archive</a>
-                        <a href="/status" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-50">Status</a>
+                        <a href="/contact" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-900">Contact</a>
-                        <a href="/projects" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-50">Projects</a>
+                        <a href="/verify" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-900">Verify Message</a>
+                        <a href="/status" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-900">Status</a>
+                        <a href="/projects" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-900">Projects</a>
+                        <a href="/manifesto" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-slate-200 hover:bg-gray-900">Manifesto</a>
                     </div>
                 </div>
             </div>

views/status.ejs

@@ -3,14 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>🎃 aidxn.fun | status</title>
+    <title>❄️ aidxn.fun | status</title>
     <link href="/css/main.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
 </head>
-<body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux">
+<body class="bg-linear-to-br from-slate-900 to-black text-white font-afacad-flux">
 <%- include('shards/header.ejs', { req: req }) %>
 
 <header class="flex flex-col items-center justify-center h-[40vh] p-6">
@@ -18,15 +18,25 @@
     <p class="text-lg text-gray-300 max-w-xl text-center mt-3">Interested in my server uptime? Take a peek!</p>
 </header>
 
-<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
+<div id="loading" class="flex flex-col items-center justify-center h-[40vh] p-6">
-    <h3 class="text-2xl font-bold mb-4 text-white">What is this page?</h3>
+    <i class="fas fa-spinner fa-spin text-5xl mb-4"></i>
-    <p class="text-slate-300 mb-4">This page displays information about the status of my personal servers. This excludes private servers, which are used for projects such as my "home" lab (it's hosted in the cloud).</p>
+    <h1 class="text-2xl font-bold">Testing pings...</h1>
-    <p class="text-slate-300 mb-4">Most of these servers are what your computer connects to in order to fetch information, such as the status of the server, or what I'm listening to (see the home page).
-    <h3 class="text-2xl font-bold mb-4 text-white">Status | Website</h3>
-    <p class="text-slate-300 mb-4"><span class="text-green-500 font-bold" id="website">[ONLINE - LOADING ms]</span> aidxn.fun/website.aidxn.fun (Oracle Cloud - Germany)</p>
-    <h3 class="text-2xl font-bold mb-4 text-white">Status | Backend</h3>
-    <p class="text-slate-300 mb-4"><span class="text-gray-500 font-bold" id="status1">[UNKNOWN - LOADING ms]</span> kantor.aidxn.fun (Oracle Cloud - Germany - backend server)</p>
 </div>
+
+<div id="content" class="hidden bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
+    <div>
+        <h3 class="text-2xl font-bold mb-4 text-white">What is this page?</h3>
+        <p class="text-slate-300 mb-4">This page displays information about the status of my personal servers. This excludes private servers, which are used for projects such as my "home" lab (it's hosted in the cloud).</p>
+        <p class="text-slate-300 mb-4">Most of these servers are what your computer connects to in order to fetch information, such as the status of the server, or what I'm listening to (see the home page).</p>
+        <h3 class="text-2xl font-bold mb-4 text-white">Status | Website</h3>
+        <p class="text-slate-300 mb-4"><span class="text-green-500 font-bold" id="website">[ONLINE - LOADING ms]</span> aidxn.fun/website.aidxn.fun (Oracle Cloud - Germany)</p>
+        <h3 class="text-2xl font-bold mb-4 text-white">Status | Backend</h3>
+        <p class="text-slate-300 mb-4"><span class="text-gray-500 font-bold" id="status1">[UNKNOWN - LOADING ms]</span> kantor.aidxn.fun (Oracle Cloud - Germany - backend server)</p>
+    </div>
+</div>
+
 <script src="js/main.js"></script>
 <script src="js/status.js"></script>
 <%- include('shards/footer.ejs') %>
+</body>
+</html>

views/verify.ejs

@@ -3,14 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>🎃 aidxn.fun | verify</title>
+    <title>❄️ aidxn.fun | verify</title>
     <link href="/css/main.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&display=swap" rel="stylesheet">
 </head>
-<body class="bg-gradient-to-br from-slate-900 to-black text-white font-afacad-flux">
+<body class="bg-linear-to-br from-slate-900 to-black text-white font-afacad-flux">
 <%- include('shards/header.ejs', { req: req }) %>
 
 <header class="flex flex-col items-center justify-center h-[40vh] p-6">
@@ -18,7 +18,7 @@
     <p class="text-lg text-gray-300 max-w-xl text-center mt-3">Let's check if that message really came from me!</p>
 </header>
 
-<div class="bg-gradient-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
+<div class="bg-linear-to-br from-slate-800/80 to-slate-900/80 border border-slate-800 backdrop-blur-md shadow-xl rounded-2xl p-8 mx-4">
     <h3 class="text-2xl font-bold mb-4 text-white">Introduction</h3>
     <p class="text-slate-300 mb-4">Did I send you a PGP signed message? Let's check it's actually from me! The form below will verify the message was signed by my key.</p>
     <p class="text-slate-300 mb-4"><span class="font-bold">Remember</span>, if you have confirmed my key in person, you should always trust that key over this page.</p>
@@ -27,10 +27,10 @@
     <form action="/verify" method="POST" class="space-y-4">
         <label for="pgpMessage" class="block text-slate-300">PGP Message:</label>
         <textarea id="pgpMessage" name="pgpMessage" class="w-full p-2 bg-slate-800 text-slate-300 rounded-md" rows="10" placeholder="Paste a PGP-signed message here"></textarea>
-        <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Verify</button>
+        <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-sm">Verify</button>
     </form>
     <% if (verifyResult) { %>
-        <div class="mt-4 p-4 rounded bg-slate-800 text-white">
+        <div class="mt-4 p-4 rounded-sm bg-slate-800 text-white">
             <p><%= verifyResult %></p>
         </div>
     <% } %>