c.stupid.cat/tech-stack/index.html

203 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clove Twilight - Tech Stack</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/themes/mocha.css">
<link rel="stylesheet" href="/css/themes/macchiato.css">
<link rel="stylesheet" href="/css/themes/frappe.css">
<link rel="stylesheet" href="/css/themes/latte.css">
<link rel="stylesheet" href="/api/api.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="Tech Stack for Clove Twilight" />
<meta name="keywords" content="Clove Twilight, Portfolio, Personal, Developer" />
<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/tech-stack" />
<!-- Alternate for mobile -->
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://clove.is-a.dev/tech-stack" />
<!-- 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 | Tech Stack" />
<meta property="og:description" content="Tech Stack for Clove Twilight" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://clove.is-a.dev/tech-stack" />
<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 | Tech Stack" />
<meta name="twitter:description" content="Tech Stack for Clove Twilight" />
</head>
<body>
<header class="nav">
<nav class="nav-links">
<a class="nav-link" data-href="/">Link Center</a>
<a class="nav-link selected" data-href="/tech-stack">Tech Stack</a>
<a class="nav-link" data-href="/discord-bots">Discord Bots</a>
</nav>
</header>
<a class="now-playing" id="now-playing" target="_blank" rel="noopener" hidden>
<img class="np-art" alt="" referrerpolicy="no-referrer" crossorigin="anonymous">
<span class="np-bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
<span class="np-text">
<span class="np-head">
<span class="np-status" aria-hidden="true"></span>
<span class="np-status-label"></span>
<span class="np-label">Now playing</span>
</span>
<span class="np-track"></span>
<span class="np-artist"></span>
<span class="np-progress" aria-hidden="true">
<span class="np-bar"><span class="np-fill"></span></span>
<span class="np-times"><span class="np-cur">0:00</span><span class="np-dur">0:00</span></span>
</span>
</span>
</a>
<main class="hub">
<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">Tech Stack</p>
</header>
<section class="tech-stack" aria-label="Tech stack">
<span class="tech-icon pink" style="--si:url('https://cdn.simpleicons.org/javascript')" role="img"
aria-label="JavaScript"></span>
<span class="tech-icon mauve" style="--si:url('https://cdn.simpleicons.org/openjdk')" role="img"
aria-label="Java"></span>
<span class="tech-icon lavender" style="--si:url('https://cdn.simpleicons.org/html5')" role="img"
aria-label="HTML5"></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>
<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>
<span class="tech-icon red" style="--si:url('https://cdn.simpleicons.org/python')" role="img"
aria-label="Python"></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>
<span class="tech-icon lavender" style="--si:url('https://cdn.simpleicons.org/bootstrap')" role="img"
aria-label="Bootstrap"></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>
<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 red" style="--si:url('https://cdn.simpleicons.org/insomnia')" role="img"
aria-label="Insomnia"></span>
<span class="tech-icon maroon" style="--si:url('https://cdn.simpleicons.org/jsonwebtokens')" role="img"
aria-label="JWT"></span>
<span class="tech-icon sapphire" style="--si:url('https://cdn.simpleicons.org/npm')" role="img"
aria-label="NPM"></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 pink" style="--si:url('https://cdn.simpleicons.org/nodedotjs')" role="img"
aria-label="NodeJS"></span>
<span class="tech-icon mauve" style="--si:url('https://cdn.simpleicons.org/nodemon')" role="img"
aria-label="Nodemon"></span>
<span class="tech-icon lavender" style="--si:url('https://cdn.simpleicons.org/pnpm')" role="img"
aria-label="PNPM"></span>
<span class="tech-icon blue" style="--si:url('https://cdn.simpleicons.org/react')" role="img"
aria-label="React"></span>
<span class="tech-icon red" style="--si:url('https://cdn.simpleicons.org/tailwindcss')" role="img"
aria-label="TailwindCSS"></span>
<span class="tech-icon maroon" style="--si:url('https://cdn.simpleicons.org/vite')" role="img"
aria-label="Vite"></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/wordpress')" role="img"
aria-label="WordPress"></span>
<span class="tech-icon mauve" style="--si:url('https://cdn.simpleicons.org/nginx')" role="img"
aria-label="Nginx"></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 teal" style="--si:url('https://cdn.simpleicons.org/postgresql')" role="img"
aria-label="Postgres"></span>
<span class="tech-icon green" style="--si:url('https://cdn.simpleicons.org/redis')" role="img"
aria-label="Redis"></span>
<span class="tech-icon red" style="--si:url('https://cdn.simpleicons.org/inkscape')" role="img"
aria-label="Inkscape"></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 sapphire" style="--si:url('https://cdn.simpleicons.org/git')" role="img"
aria-label="Git"></span>
<span class="tech-icon rosewater" style="--si:url('https://cdn.simpleicons.org/gitea')" role="img"
aria-label="Gitea"></span>
<span class="tech-icon pink" style="--si:url('https://cdn.simpleicons.org/arduino')" role="img"
aria-label="Arduino"></span>
<span class="tech-icon lavender" style="--si:url('https://cdn.simpleicons.org/docker')" role="img"
aria-label="Docker"></span>
<span class="tech-icon blue" style="--si:url('https://cdn.simpleicons.org/eslint')" role="img"
aria-label="ESLint"></span>
<span class="tech-icon teal" style="--si:url('https://cdn.simpleicons.org/ffmpeg')" role="img"
aria-label="FFmpeg"></span>
<span class="tech-icon green" style="--si:url('https://cdn.simpleicons.org/gradle')" role="img"
aria-label="Gradle"></span>
<span class="tech-icon red" style="--si:url('https://cdn.simpleicons.org/raspberrypi')" role="img"
aria-label="Raspberry Pi"></span>
<span class="tech-icon blue" style="--si:url('https://cdn.simpleicons.org/vscodium')" role="img"
aria-label="VSCodium"></span>
</section>
</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="/api/now-playing.js"></script>
<script src="/js/flavors.js"></script>
<script src="/js/dev-mode.js" user-data="1464890289922641993"></script>
<script src="/js/site-switcher.js"></script>
</body>
</html>