<!-- 
⣿⣿⣿⠏⣴⣿⣿⣿⣿⡿⠟⢹⣿⣿⣿⡿⠋⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣷⣦⡉⠻⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⢇⣾⣿⣿⣿⡿⢋⢀⣴⣿⣿⡿⠋⠀⠘⣿⣿⣿⣿⣿⠿⣿⣿⣿⣿⣿⣿⣿⣦⣤⣀⠻⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⡏⣼⣿⣿⣿⠏⣴⢃⣾⣿⡿⢋⣴⠟⣠⣾⣿⣿⣿⠏⢁⣼⣿⣿⣿⣿⣿⣿⠟⣿⣿⣿⠟⠂⠙⢿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠿⠟⠛⠀⠘⠛⠛⣛⣛⣋⢉⣉⣉⣛⡛⠻⠿⣿⣿
⡟⣸⣿⣿⣿⡏⡸⢡⣾⣿⢋⣤⡿⢡⣾⣿⣿⣿⠟⠁⣰⣿⠟⣹⡿⢿⣿⠋⢀⣾⣿⣿⠏⡄⢻⡆⢀⠙⣿⣿⡿⠟⢋⣩⣤⣶⣾⣿⣿⣿⠟⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣶⣶
⢠⣿⣿⣿⣿⠃⢡⣿⡟⣡⣾⠏⣰⣿⣿⣿⡿⠋⢀⣾⡿⢁⣼⠟⢠⠞⠁⣰⣿⣿⡿⢣⣾⡇⢸⣿⣾⠆⠙⠁⣰⣾⣿⣿⣿⣿⣿⣿⣿⠏⣰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⡏⢠⣿⠏⣴⣿⠟⣰⣿⣿⣿⡿⣡⢃⣾⠟⢀⡞⠁⣴⢋⠄⣼⣿⣿⠏⣰⣿⡟⢀⡼⠋⣠⡶⠀⣴⣿⢿⣿⣿⢿⠏⣸⣿⡏⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣧⣿⠏⣼⡿⠿⢠⣿⣿⣿⡟⣰⢃⣾⠏⢀⠞⠀⡼⢡⠟⣼⣿⡟⣡⣾⣿⠏⠀⠄⠀⣾⡿⠁⣼⡿⢃⡜⣽⡏⠈⣰⡟⠀⠁⣾⣿⣿⣿⣿⣿⣿⡇⢹⣿⣿⣿⣿⣿⡇⢻
⣿⣿⣿⣿⣿⡏⣸⣿⠃⠀⣼⣿⣿⡟⣴⢃⣾⠏⠀⢀⢀⡾⢡⡟⣰⣿⢋⣴⡿⠋⠁⣀⠀⠀⣰⡿⠁⡌⡸⢁⣾⣿⡟⠀⢠⣿⡇⠀⣸⣿⣿⣿⣿⣿⣿⣿⡇⢸⣿⣿⣿⣿⣿⡇⢸
⣿⣿⣿⣿⡿⢰⣿⠃⡆⢀⣿⣿⡟⣸⠏⣾⠏⣴⠂⠂⣾⢡⡟⣰⡟⣡⠞⣩⠄⢀⣼⠁⠀⣼⣿⠇⡼⠠⠃⣼⣿⡿⠁⢀⣾⠿⠀⠀⡏⢸⣿⣿⣿⠃⣿⣿⠇⢸⣿⣿⣿⣿⣿⡇⢸
⣿⣿⡇⢸⠇⣾⡏⣸⠃⢸⣿⡿⢱⡟⣸⡟⣼⠃⠂⣼⢃⠏⢠⠏⠰⠋⠀⢁⣠⣾⠇⠀⣼⣿⡟⠀⠁⣦⣾⣿⡿⠀⣴⡾⠀⠀⠀⠠⠁⣿⡿⢹⠉⢠⣿⣿⠀⢸⣿⣿⣿⣿⣿⡇⢸
⣿⣿⠀⣼⢰⣿⡀⡿⢀⢸⣿⢡⣿⢡⡿⠰⡏⠀⢰⠇⡞⠀⠀⣾⠞⠀⢴⣿⣿⣷⠀⣼⣿⣿⠃⠀⣸⣿⡿⡿⠀⢀⣿⠇⠀⠀⠀⠐⢀⣿⠇⡌⢠⣸⣿⡇⠀⢸⣿⣿⣿⣿⣿⠃⣸
⣿⡟⠀⡇⣸⣿⢠⡇⣏⣾⡏⣼⡇⡼⠁⠘⠁⠀⡟⡸⠀⠐⠚⢁⣦⣶⣿⣿⣿⡇⠀⣿⠇⡟⠀⠀⣿⡿⠁⠀⠀⢸⡟⠀⢰⠆⠀⡄⢸⡏⢠⠃⣿⡟⢹⡇⠀⣿⣿⣿⣿⣿⡿⠀⡏
⣿⡇⠀⡇⣿⣿⢸⡇⡟⣿⢰⣿⢡⠃⠀⠀⣰⠃⢡⠁⠈⠀⣴⣿⣿⣿⣿⣿⠟⡁⡀⢻⠀⡇⠀⢀⣿⠃⠀⠀⡄⢸⠃⠀⣿⡇⠀⠀⣼⡇⢸⢀⣿⡇⢸⠀⢀⣿⣿⣿⣿⣿⠇⢸⠁
⣿⢃⡆⡇⢿⣿⢸⣷⡇⠏⣼⡏⡌⠀⠀⠀⡏⢀⣼⡘⢀⣤⡈⠛⢿⣿⣿⣧⣾⡇⣇⠘⠀⠁⠀⢸⡏⠀⠀⣼⠃⡏⠀⢸⣿⡇⠀⠀⣿⠀⣾⣼⣿⠀⡟⠀⢸⣿⣿⣿⣿⡟⢀⡟⢠
⣿⣿⡇⡇⢸⣿⢸⠛⡇⠀⣿⠇⠁⠀⠏⣼⣷⢸⡿⢃⣾⣿⣷⣄⠀⠈⠛⢿⣿⡇⣿⡀⠀⠀⠀⠈⠀⠀⣼⣿⠀⠀⠀⣀⠙⢧⠀⠀⣿⠀⣿⣿⣿⠀⡇⠀⣼⣿⣿⣿⣿⠃⣼⠃⣾
⣿⣿⡇⠁⢸⣿⠘⠀⡇⠀⣿⠀⠀⠀⢰⣿⣿⡆⠃⣼⣿⣿⣿⣿⣷⣤⣄⣤⣽⣇⢹⡇⠀⣦⡄⠀⠀⢸⣿⡟⠀⠀⢠⣿⣷⣄⠀⠀⣿⠀⣿⣿⡇⢰⠁⠀⣿⣿⣿⣿⡟⢠⡏⢰⡿
⣿⠻⣷⠀⢸⣿⡄⠀⣷⣾⣧⠀⠀⠀⠈⣿⣿⠇⢀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣷⣦⡘⡷⠄⠀⣿⣿⡇⠀⣰⣾⣿⣿⣿⡇⠀⠈⠀⣿⣿⠁⠈⠀⢸⣿⣿⣿⡿⢀⣾⣧⣿⠃
⣿⡆⣿⠀⢸⣿⣇⠀⣿⣿⣿⣷⠀⢀⠀⣿⣿⣷⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠻⠷⢂⣤⣼⣿⣿⣇⢀⣿⣿⣿⣿⣿⣷⠀⠀⠀⣿⣿⠀⠀⠀⣼⣿⣿⣿⠃⣸⣿⣿⠃⠀
⣿⣧⢸⡆⠘⣿⣿⠀⢻⣿⣿⡇⠈⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⣶⣶⣿⣿⣿⣿⣿⣿⣿⠘⠛⣻⣿⣿⣿⣿⡀⠀⠀⣿⡏⢠⠀⠀⣾⣿⣿⠇⠠⢿⢻⠏⠀⠀
⢹⣿⡌⣧⠀⠻⣿⣷⣾⣿⣿⡇⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⣿⣿⣿⣿⣿⣿⣿⣿⣇⠀⠀⠻⣿⣿⣿⣿⣷⡆⠀⢿⠃⠀⠀⠀⣿⣿⠏⠀⠀⠆⠀⠀⠀⠀
⡌⢿⣷⢹⡆⠈⢿⣿⣿⣿⣿⠧⣿⡟⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣦⣄⡈⠛⠿⣿⣿⣷⠀⠸⠀⠀⡄⢸⣿⡏⢠⠂⠘⠀⠀⠀⠀⠀
⣷⠘⣿⡆⢿⣧⡈⠻⢿⣿⣿⠀⣿⣧⠹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⣡⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣾⣿⡆⠀⠀⢠⠁⣸⡟⢀⠎⠀⠀⠀⠀⠀⠀⢠
⣿⣧⢹⣿⡘⣿⣷⣀⠈⣿⣿⠀⣿⣿⣧⡹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⢸⠀⠟⠁⡼⠀⠀⠀⠀⠀⠀⢀⣾
⣿⣿⣆⢻⣷⡘⣿⣿⡀⠘⣿⡆⢹⣿⣿⣷⡌⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠗⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⡄⢸⠀⠀⢰⠁⠀⠀⢀⠀⠀⢀⣿⣿
⢿⢿⣿⣦⠹⣷⠸⣿⣷⠀⠹⡇⠘⣿⣿⠿⢿⣦⣙⣿⣿⣿⣿⣿⣿⣿⣿⠟⣡⣄⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣇⠸⠀⠀⠌⠀⠀⢀⠆⠀⢀⣿⣿⣿
⠀⠈⢿⣿⣷⡙⢧⠹⣿⣇⢧⠉⠀⣿⠏⣰⣶⣤⣍⡛⠿⣿⣿⣿⣿⠟⣡⣾⣿⣿⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡀⠀⠀⠀⠀⠀⠈⠀⢠⣾⣿⡿⠟
⣀⠀⠈⠻⣿⣿⣌⠣⠙⣿⡌⢧⠀⠁⣼⣿⣿⣿⣿⣿⣷⣶⣬⣭⣥⣾⣿⣿⣿⣿⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠗⠀⠀⠀⠀⠀⠀⣰⣿⡟⠁⠀⠀
⣿⣿⣶⠀⠈⠛⢿⣷⡄⠈⢿⡌⣇⠸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡆⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣯⠸⣟⡀⣀⠀⢠⣼⣿⣿⣷⣿⠀⠀
⣿⣿⣿⣿⣷⣤⡀⠉⠛⢦⣀⣿⡘⡄⢹⣬⡙⣿⣿⣿⠟⣹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣤⣙⠻⠿⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⡙⠛⠠⠶⠃⣸⣿⣿⣿⣿⠀⠀
⣿⣿⣿⣿⣿⣿⣧⡀⠀⠰⣿⣿⣷⠸⡄⠙⣷⣼⣧⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣶⣶⣦⣭⣭⡉⣙⡛⠛⠿⣿⣿⣿⣿⣿⡇⠐⠄⢀⢂⡀⢘⣿⣿⣿⣿⣿⣷⡄
⣿⣿⣿⣿⣿⣿⣿⣿⣧⡀⢹⣿⣿⣧⢹⡄⠘⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢇⣿⢿⣷⡄⠘⣿⣿⣿⣿⠇⣾⣿⣦⣤⡀⢸⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣷⣤⣈⡙⠻⢿⡇⠀⢿⣇⢻⡆⢿⡀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣧⡀⡜⢁⣤⡘⣿⣿⡿⢠⣿⣿⣿⣿⠁⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⡿⢿⣿⣿⣿⣿⡀⠘⣿⣄⢻⡘⡇⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⣸⣿⡀⠀⣷⡘⣿⠇⣼⣿⣿⣿⡿⢸⣿⣿⣿⣿⣿⣿⣿⣿
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clove Twilight - Dev Info</title>
    <link rel="stylesheet" href="/css/main.css">
    <script>try { var f = localStorage.getItem('ctpFlavor'); document.documentElement.setAttribute('data-flavor', ['mocha', 'macchiato', 'frappe', 'latte'].indexOf(f) >= 0 ? f : 'mocha'); } catch (e) { document.documentElement.setAttribute('data-flavor', 'mocha'); }</script>
    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">

    <!-- SEO Meta Tags -->
    <meta name="description" content="What Clove has been coding lately, tracked by dev-info" />
    <meta name="keywords" content="Portfolio, Personal, Developer, dev-info, Dev Info" />
    <meta name="author" content="doughmination" />
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />

    <!-- Canonical URL -->
    <link rel="canonical" href="https://clove.is-a.dev/dev-info" />

    <!-- Alternate for mobile -->
    <link rel="alternate" media="only screen and (max-width: 640px)" href="https://clove.is-a.dev/dev-info" />

    <!-- Theme Color -->
    <meta name="theme-color" content="#f5c2e7" />

    <!-- Open Graph / Discord / Facebook -->
    <meta property="og:image" content="https://clove.is-a.dev/assets/favicon/favicon.png" />
    <meta property="og:site_name" content="clove.is-a.dev" />
    <meta property="og:title" content="Clove Twilight | Dev Info" />
    <meta property="og:description" content="What Clove has been coding lately, tracked by dev-info" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://clove.is-a.dev/dev-info" />
    <meta property="og:locale" content="en_GB" />

    <!-- Twitter Card -->
    <meta name="twitter:image" content="https://clove.is-a.dev/assets/favicon/favicon.png" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="Clove Twilight | Dev Info" />
    <meta name="twitter:description" content="What Clove has been coding lately, tracked by dev-info" />
</head>

<body>

    <div id="now-playing"></div>

    <header class="nav">
        <nav class="nav-links">
            <a class="nav-link" data-href="/">Link Center</a>
            <a class="nav-link" data-href="/cool-people">Cool People</a>
            <a class="nav-link selected" data-href="/dev-info">Dev Info</a>
            <a class="nav-link" data-href="/discord-bots">Discord Bots</a>
            <a class="nav-link" data-href="/music">Music</a>
        </nav>
    </header>

    <main class="waka">

        <header class="hub-header">
            <img class="pfp" src="/assets/favicon/avatar.png" alt="Clove Twilight avatar">
            <h1>Clove Twilight</h1>
            <h2 class="pronouns">(fae/faer)</h2>
            <p class="tagline">Dev Info</p>
            <p class="waka-meta" id="waka-meta" hidden></p>
        </header>

        <details class="waka-section tech-stack" id="tech-stack">
            <summary class="section-title">Tech Stack</summary>
            <section class="dev-info" aria-label="Tech stack">
            <!-- Languages -->
            <span class="tech-icon red" style="--si:url('https://cdn.simpleicons.org/python')" role="img" aria-label="Python"></span>
            <span class="tech-icon mauve" style="--si:url('https://cdn.simpleicons.org/openjdk')" role="img" aria-label="Java"></span>
            <span class="tech-icon pink" style="--si:url('https://cdn.simpleicons.org/javascript')" role="img" aria-label="JavaScript"></span>
            <span class="tech-icon peach" style="--si:url('https://cdn.simpleicons.org/typescript')" role="img" aria-label="TypeScript"></span>
            <span class="tech-icon yellow" style="--si:url('https://cdn.simpleicons.org/gnubash')" role="img" aria-label="Bash Script"></span>

            <!-- Markup, Styling & Docs -->
            <span class="tech-icon lavender" style="--si:url('https://cdn.simpleicons.org/html5')" role="img" aria-label="HTML5"></span>
            <span class="tech-icon teal" style="--si:url('https://cdn.simpleicons.org/css')" role="img" aria-label="CSS"></span>
            <span class="tech-icon blue" style="--si:url('https://cdn.simpleicons.org/markdown')" role="img" aria-label="Markdown"></span>
            <span class="tech-icon teal" style="--si:url('https://cdn.simpleicons.org/latex')" role="img" aria-label="LaTeX"></span>

            <!-- Frontend — Frameworks & Libraries -->
            <span class="tech-icon blue" style="--si:url('https://cdn.simpleicons.org/react')" role="img" aria-label="React"></span>
            <span class="tech-icon sapphire" style="--si:url('https://cdn.simpleicons.org/vuedotjs')" role="img" aria-label="Vue.js"></span>
            <span class="tech-icon rosewater" style="--si:url('https://cdn.simpleicons.org/nextdotjs')" role="img" aria-label="Next JS"></span>
            <span class="tech-icon blue" style="--si:url('https://cdn.simpleicons.org/ejs')" role="img" aria-label="EJS"></span>
            <span class="tech-icon teal" style="--si:url('https://cdn.simpleicons.org/electron')" role="img" aria-label="Electron.js"></span>

            <!-- Frontend — Styling -->
            <span class="tech-icon red" style="--si:url('https://cdn.simpleicons.org/tailwindcss')" role="img" aria-label="TailwindCSS"></span>
            <span class="tech-icon lavender" style="--si:url('https://cdn.simpleicons.org/bootstrap')" role="img" aria-label="Bootstrap"></span>

            <!-- Backend -->
            <span class="tech-icon pink" style="--si:url('https://cdn.simpleicons.org/nodedotjs')" role="img" aria-label="NodeJS"></span>
            <span class="tech-icon green" style="--si:url('https://cdn.simpleicons.org/express')" role="img" aria-label="Express.js"></span>
            <span class="tech-icon peach" style="--si:url('https://cdn.simpleicons.org/fastapi')" role="img" aria-label="FastAPI"></span>
            <span class="tech-icon maroon" style="--si:url('https://cdn.simpleicons.org/jsonwebtokens')" role="img" aria-label="JWT"></span>
            <span class="tech-icon rosewater" style="--si:url('https://cdn.simpleicons.org/wordpress')" role="img" aria-label="WordPress"></span>

            <!-- Databases -->
            <span class="tech-icon teal" style="--si:url('https://cdn.simpleicons.org/postgresql')" role="img" aria-label="Postgres"></span>
            <span class="tech-icon lavender" style="--si:url('https://cdn.simpleicons.org/mysql')" role="img" aria-label="MySQL"></span>
            <span class="tech-icon blue" style="--si:url('https://cdn.simpleicons.org/sqlite')" role="img" aria-label="SQLite"></span>
            <span class="tech-icon green" style="--si:url('https://cdn.simpleicons.org/redis')" role="img" aria-label="Redis"></span>

            <!-- Package Managers & Build Tools -->
            <span class="tech-icon sapphire" style="--si:url('https://cdn.simpleicons.org/npm')" role="img" aria-label="NPM"></span>
            <span class="tech-icon lavender" style="--si:url('https://cdn.simpleicons.org/pnpm')" role="img" aria-label="PNPM"></span>
            <span class="tech-icon maroon" style="--si:url('https://cdn.simpleicons.org/vite')" role="img" aria-label="Vite"></span>
            <span class="tech-icon mauve" style="--si:url('https://cdn.simpleicons.org/nodemon')" role="img" aria-label="Nodemon"></span>
            <span class="tech-icon green" style="--si:url('https://cdn.simpleicons.org/gradle')" role="img" aria-label="Gradle"></span>
            <span class="tech-icon blue" style="--si:url('https://cdn.simpleicons.org/eslint')" role="img" aria-label="ESLint"></span>

            <!-- Version Control & CI/CD -->
            <span class="tech-icon sapphire" style="--si:url('https://cdn.simpleicons.org/git')" role="img" aria-label="Git"></span>
            <span class="tech-icon sky" style="--si:url('https://cdn.simpleicons.org/github')" role="img" aria-label="GitHub"></span>
            <span class="tech-icon maroon" style="--si:url('https://cdn.simpleicons.org/githubactions')" role="img" aria-label="GitHub Actions"></span>
            <span class="tech-icon rosewater" style="--si:url('https://cdn.simpleicons.org/gitea')" role="img" aria-label="Gitea"></span>

            <!-- Infrastructure & Deployment -->
            <span class="tech-icon lavender" style="--si:url('https://cdn.simpleicons.org/docker')" role="img" aria-label="Docker"></span>
            <span class="tech-icon mauve" style="--si:url('https://cdn.simpleicons.org/nginx')" role="img" aria-label="Nginx"></span>
            <span class="tech-icon sapphire" style="--si:url('https://cdn.simpleicons.org/cloudflare')" role="img" aria-label="Cloudflare"></span>
            <span class="tech-icon mauve" style="--si:url('https://cdn.simpleicons.org/vercel')" role="img" aria-label="Vercel"></span>

            <!-- Dev Tools & Utilities -->
            <span class="tech-icon blue" style="--si:url('https://cdn.simpleicons.org/vscodium')" role="img" aria-label="VSCodium"></span>
            <span class="tech-icon red" style="--si:url('https://cdn.simpleicons.org/insomnia')" role="img" aria-label="Insomnia"></span>
            <span class="tech-icon teal" style="--si:url('https://cdn.simpleicons.org/ffmpeg')" role="img" aria-label="FFmpeg"></span>
            <span class="tech-icon red" style="--si:url('https://cdn.simpleicons.org/inkscape')" role="img" aria-label="Inkscape"></span>

            <!-- Hardware / IoT -->
            <span class="tech-icon pink" style="--si:url('https://cdn.simpleicons.org/arduino')" role="img" aria-label="Arduino"></span>
            <span class="tech-icon red" style="--si:url('https://cdn.simpleicons.org/raspberrypi')" role="img" aria-label="Raspberry Pi"></span>
            </section>
        </details>

        <details class="waka-section hardware" id="waka-section-hardware">
            <summary class="section-title">Hardware</summary>
            <p class="hw-intro">This is the beast setup I daily-drive. ✨</p>
            <dl class="hw-list">
                <div class="hw-row">
                    <dt>CPU</dt>
                    <dd>AMD Ryzen 9 9950x3d 4.3 GHz 16-Core Processor</dd>
                </div>
                <div class="hw-row">
                    <dt>GPU</dt>
                    <dd>XFX Speedster MERC 310 Black Edition Radeon RX 7900 XTX 24 GB Video Card</dd>
                </div>
                <div class="hw-row">
                    <dt>RAM</dt>
                    <dd>Corsair Vengeance 64 GB (2 x 32 GB) DDR5-6000 CL40 Memory</dd>
                </div>
                <div class="hw-row">
                    <dt>Storage</dt>
                    <dd>2x 1 TB NVMe + 10TB HDD</dd>
                </div>
                <div class="hw-row">
                    <dt>Motherboard</dt>
                    <dd>Gigabyte B850M AORUS ELITE WIFI6E ICE Micro ATX AM5 Motherboard</dd>
                </div>
                <div class="hw-row">
                    <dt>Cooling</dt>
                    <dd>Thermalright Aqua Elite V3 66.17 CFM Liquid CPU Cooler</dd>
                </div>
                <div class="hw-row">
                    <dt>Keyboard</dt>
                    <dd>Akko Sakura Miku 5108B Plus</dd>
                </div>
                <div class="hw-row">
                    <dt>Mouse</dt>
                    <dd>Logitech G502 X Gaming Lightspeed Wireless</dd>
                </div>
                <div class="hw-row">
                    <dt>Monitor(s)</dt>
                    <dd>Gigabyte G34WQCP 34.0" 3440 x 1440 180 Hz Curved Monitor</dd>
                </div>
                <div class="hw-row">
                    <dt>Headphones</dt>
                    <dd>Yowu  Cat Ear Headphones Hatsune Miku NX</dd>
                </div>
                <div class="hw-row">
                    <dt>Microphone</dt>
                    <dd>Aokeo AK-60 USB Microphone</dd>
                </div>
                <div class="hw-row">
                    <dt>OS</dt>
                    <dd>Arch Linux | Windows 11</dd>
                </div>
            </dl>
        </details>

        <div id="contrib"></div>

        <div id="waka-content" hidden>

            <section class="waka-section waka-total" id="waka-total">
                <div class="waka-total-num" id="waka-total-val">—</div>
                <div class="waka-total-sub" id="waka-total-sub">total coding time</div>
                <div class="waka-week" id="waka-week"></div>
            </section>

            <details class="waka-section" id="waka-section-languages" hidden>
                <summary class="section-title">Languages</summary>
                <div class="waka-bars" id="waka-languages"></div>
            </details>

            <details class="waka-section" id="waka-section-categories" hidden>
                <summary class="section-title">Categories</summary>
                <div class="waka-bars" id="waka-categories"></div>
            </details>

            <div class="waka-grid2">
                <details class="waka-section" id="waka-section-editors" hidden>
                    <summary class="section-title">Editors</summary>
                    <div class="waka-bars" id="waka-editors"></div>
                </details>

                <details class="waka-section" id="waka-section-os" hidden>
                    <summary class="section-title">Operating Systems</summary>
                    <div class="waka-bars" id="waka-os"></div>
                </details>
            </div>

            <p class="waka-credit">Tracked automatically with <a href="https://wakatime.com" target="_blank"
                    rel="noopener">wakatime</a>.</p>
        </div>
    </main>

    <aside class="badges" aria-label="System badges">
        <span class="badge">
            <img class="badge-icon" src="/assets/misc/amd.svg" alt="">
            AMD Purist
        </span>
        <span class="badge">
            <img class="badge-icon" src="/assets/misc/arch.svg" alt="">
            I use arch btw
        </span>
        <span class="badge">
            <img class="badge-icon" src="/assets/misc/debian.svg" alt="">
            Debian Professional
        </span>
        <span class="badge">
            <img class="badge-icon" src="/assets/misc/apple.svg" alt="">
            Apple Ecosystem Enthusiast
        </span>
    </aside>

    <script src="/js/cat.js" data-cat="/assets/oneko/classics/classic.png"></script>
    <script src="/js/nav.js"></script>
    <script src="/js/now-playing.js" data-user="1464890289922641993"></script>
    <script src="/js/flavors.js"></script>
    <script src="/js/dev-mode.js"></script>
    <script src="/js/dev-info.js"></script>
    <script src="/js/site-switcher.js"></script>
    <script src="/js/contrib-heatmap.js"></script>
    <script>ContribHeatmap.render("#contrib", { theme: "trans" });</script>
</body>

</html>