Scan/hardclear
1
0
Fork 0
mirror of https://github.com/Scanode/hardclear.git synced 2026-08-01 05:07:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

First revision

Browse Source
This commit is contained in:
Hazel
2026-04-10 00:36:38 -04:00
parent ce515e4176
commit 807c535ef8
204 changed files with 15370 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
.hugo_build.lock Normal file
View File

5
archetypes/default.md Normal file
View File

@@ -0,0 +1,5 @@
+++
date = '{{ .Date }}'
draft = true
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
+++

46
content/about.md Normal file
View File

@@ -0,0 +1,46 @@
+++
title = "About Me"
date = "2026-04-09"
author = "Scan"
hideComments=true
+++
Once upon a time I ran a WordPress blog called BitBouquet. With the changing pace of my life, I made the decision to switch to a simple static site for my content.
{{< figure src="/img/scan.png" alt="Scan" position="center" style="border-radius: 8px;" caption="Hello, I'm Hazel. Nice to meet you!" captionPosition="center" captionStyle="color: black;" >}}
I love IT infrastructure! I believe that grasping the underlying technologies and systems that move peoples lives and businesses is an incredibly important asset in our modern age,
and this blog serves as a testament to that mentality. I strongly believe in the power of FOSS, and the importance of self-hosting in this cloud-ridden, engagement obsessed,
LLM-ified internet we all participate in.
#### A brief history
My journey with technology started after I graduated university with a bachelors degree in commerce, and a minor in economics.
Despite that, I somehow ended up working as a supervisor at a certain canadian computer store.
Through that job I re-discovered my love for computers and became interested in the deeper side of repair, and server technology. I started self-hosting a NAS,
and got involved in various online communities which helped expand that curiosity into a real job.
In 2023, I got a job with an MSP as tech, and eventually moved into an escalations role. It was an amazingly stressful job, with so many opportunities to learn.
When people joke that MSPs are like an IT bootcamp, they're not lying!
Fast forward to 2025, and I started an independant Japanese import arcade with my friends in Toronto. The business has grown to a point where I was able to quit my IT gig. We do contracts all around
Canada for various gaming and anime conventions, all while running a downtown storefront.
#### Projects
- sweetgum: A stripped down v83 MapleStory server with a single map structure, designed explicitly to be a chatroom with a dress-up element.
- bm2dnix: Continuation of the nixac project, a combination of utilities and scripts to aid in the process of running Beatmania IIDX on linux systems. (deprecated)
- lycoris: A fully automated & containerized self-managed media library hosted through Plex/Jellyfin.
- bitbouquet: Former personal blog that housed all my tech ramblings and personal stories about identity and transition.
It used to run a public AI upscaler (waifu2x) that utilized a fancy CUDA container.
- blossomworks: My multi-site, fully managed network stack. It hosts this website!

155
content/posts/identity.md Normal file
View File

@@ -0,0 +1,155 @@
+++
title = "Identity through branding - my personal logos, banners, and designs from 2016 to 2023"
date = "2023-05-09"
author = "Scan"
hideComments=true
+++
{{< figure src="/img/cathode.png" alt="Cathode by Combo" position="left" style="border-radius: 8px;" caption="Cathode (2020) by Combo" captionPosition="center" captionStyle="color: black;" >}}
For as long as I can remember, I’ve always enjoyed playing with photo editing software. Where most of my hobbies come and go, making silly little things for myself in photoshop has been a semi-regular activity on the computer since I’ve had my YouTube channel.
It’s always felt like sketching to me in the same way that people will doodle on their notebooks or play with coloring books to let their mind run. Most of my designs end up being sketches and only that. I was bored on the computer and had nothing better to do.
I’ve been uploading/streaming to YouTube and Twitch for 10+ years at this point and I treat it like a venue to express my identity rather than a platform to gain a following on.
# YouTube/Twitch: 2016 ~ 2017
{{< image src="/img/haru-2016.jpg" alt="Haru 2016 Stream Layout" position="center" style="border-radius: 8px;" >}}
These are the earliest stream layouts that I still have archived. There was definitely some previous stuff I’d made for myself at that point, but it’s all been lost to time. It’s mostly crude, unhinged usage of Gimp and poorly put together Maplestory and MLP edits. They were pretty bad, embarassing even, but I definitely thought they were super cool back then and that’s all that matters.
There’s only one remaining video from that era and it’s a Maplestory tutorial for Windows 7. I keep it up because I think it’s really cute, and it’s shows how interested I was in teaching people about software. Now I maintain servers and teach businesses how to use software professionally!
# YouTube/Twitch: 2018
{{< image src="/img/haru-2018.jpg" alt="Haru 2018 Stream Layout" position="center" style="border-radius: 8px;" >}}
Idols! Idols! Idols! This was around the time when I fell in love with the 2D idol game franchise THE iDOLM@STER. This one was kind of an improvement? I started learning how to use opacity more effectively.
This one definitely had a little more life. The now playing broke ALL THE TIME because rhythm games all had different ways of doing it, big pain in the butt. There was a Kancolle version of this layout that I also had used for some time,
which is where the texture for the name portion of the design came from!
{{< image src="/img/haru-logo-2018.png" alt="Haru 2018 Logo" position="center" style="border-radius: 8px;" >}}
I think this was the first time I achieved an “effect,” and I was pretty hooked. I really started to enjoy putting things together. Playing with fonts, icons, colours, and filters started to become a semi-regular activity.
# Business Cards: 2018
{{< figure src="/img/haru-pcard.png" alt="Haru P-Card" position="left" style="border-radius: 8px;" caption="These were one of the coolest forms of self-expresison I've ever seen in a community." captionPosition="center" captionStyle="color: black;" >}}
I had this phase where I was making business cards for people, thanks iM@S community. I still have the one on the right buried in a pile of other producer cards. Not much to say about this one. It’s a little boring, and is pretty cookie cutter in terms of pcards. But I put a fair amount of effort into it,
and seeing it come to life once I got them printed to hand out to other producers was really awesome.
# YouTube/Twitch: 2019
{{< image src="/img/harus-room-2019.jpg" alt="Haru 2018 Stream Layout" position="center" style="border-radius: 8px;" >}}
This was the point at which I had started using the name “Haru’s Room.” It was meant to be a way to make the stream feel more close to the viewers/friends/family watching at home. I wanted to make it feel like you were hanging out in my room, I would rotate the stream around my desk, Beatmania IIDX, and retro console setups. It ended up being poorly executed, but it was definitely a fun idea and I ended up rolling with it for close to a year.
As for the design itself, it looked great but it was barely my own work. The background is a ripped scan from a Kors K album (its one of the xenna albums i cant remember the name), and our familiar friend Bebas Neue has made a return once again.
# YouTube/Twitch: 2020
Being a white person with a Japanese name online started to feel pretty embarrassing, so 2020 marked the birth of Scanline and it’s variations. It was far more representative of who I was as it’s a direct reference to the scanlines generated by retro TVs.
{{< image src="/img/scanline-2020.png" alt="Scanline 2020 Stream Layout" position="center" style="border-radius: 8px;" >}}
I really don’t want to talk about this one but for the sake of the timeline I’ll include it. This was honestly kinda lazy and I remember thinking it looked sick, probably because of the scanline effect on my name. Probably could’ve got way more imaginative with the layout but I was too focused on grinding stamina ITG. White backgrounds for streams make them unwatchable at night, something I clearly didnt take into consideration LMAO
# YouTube/Twitch: 2021
{{< image src="/img/scanline-2021.gif" alt="Scanline 2021 Stream Layout" position="center" style="border-radius: 8px;" >}}
Something about this felt like a step up. I started focusing more on cohesive designs that made use of a proper color palette. This was also my first time ever playing with After Effects, it didn’t really end up being for me as I’m not a huge video fx person but I ended up getting a pretty cool looping background! Respect to the people who use that software, I’m a little too dumb for it :’)
I didn’t get to make use of this layout for too long, and that was kind of unfortunate because it was really cute! The colour palette felt super warm and inviting, and it felt like the first time I used monochrome colors effectively. The soft, almost pink reds went incredibly well with Mershark’s drawing of my MapleLegends character Anode. I still use her quite a bit in my own branding,
she’s become a representation of myself instead of an MMO character at this point.
{{< image src="/img/scanline-2021-layout.png" alt="Scanline 2021 Stream Layout" position="center" style="border-radius: 8px;" >}}
I apologize for the sudden shift, but this was a pretty turbulent time in my life. I think it was a tough time for everybody, but covid became a really easy way for me to bury the gender dysphoria and coast along without any critical thought towards my future. I regret not coming out in 2019, but I got pretty consumed by playing MapleLegends day in and day out, and my characters filled a void that I was quite aware of, but I kind of just let it happen.
# MapleLegends & finding myself
Let’s take a moment to talk about this silly little private Maplestory server, because it played a pretty instrumental role in my life, for better or for worse. Bittersweet is probably the best way to describe it.
There is a bit of a subculture within the Maplestory community of having a more distinct look through the use of paid cosmetics. In the private server scene it was even more heightened, since nx was free and the low population of players made it so everyone’s characters were distinguishable if you spent enough time hanging out in the market.
{{< image src="/img/cathode_anode_stand.png" alt="Cathode & Anode" position="right" style="border-radius: 8px;" >}}
I had a bit of a reputation for cute characters and I ended up being in charge of new cosmetics for 2 (maybe 3?) seasonal events when I served as staff. I also maintained a lot of the beauty parlor guides. I guess it was pretty eggy behaviour, now that I look back on it.
To clarify, not every person using an OC that’s not their gender should treat it as a sign that they’re trans, plenty of people do that and are very comfortable with who they are. With that being said, don’t hesitate to question it! Maybe it’s not as deep for you, and you like your OC simply for the sake of liking them. In my case Anode was a bit of a projection, but I was a little too lost at the time to come to terms with that.
{{< image src="/img/anode_dany.jpg" alt="Scanline 2021 Stream Layout" position="center" style="border-radius: 8px;" >}}
{{< figure src="/img/blank.png" alt="Anode (2021) by Dany" position="center" style="border-radius: 8px;" caption="Thank you Dany, I wish I could tell you how much this drawing meant to me in the right context." captionPosition="center" captionStyle="color: black;" >}}
That aforementioned regret still exists, but I don’t feel as bitter about it anymore. I’m here now, and that’s all that matters.
# More designs: 2021
{{< image src="/img/scanline-ytbanner-2021.png" alt="Scanline YouTube Banner 2021" position="center" style="border-radius: 8px;" >}}
The adorable drawing above was done by Haiirojob (灰色), but I never got to utilize it to the same extent as mersharks drawing. Haiirojob’s artwork was beautiful on its own but a little too busy to reliably use with branding. Super cute as a profile picture or wallpaper though!
Also lets talk about that logo… this was my first and only attempt at working with Japanese kawaii pop fonts. I’ve tried my hand, and I just don’t think I’m very good at it. I think to get impactful “kawaii” branding that doesn’t look super cheap, you have to break out the sketchbook and pen tool. Hiiragi Ryo is a great example of this, and continues to be an inspiration for me.
{{< image src="/img/scan-logo-2021.png" alt="Scanline Bow Logo" position="center" style="border-radius: 8px;" >}}
I ended up doing some similar looking stuff, including an unfinished logo I was trying to make for a vtuber friend.
{{< image src="/img/murasaki-logo.png" alt="Murasaki Ch. Logo" position="center" style="border-radius: 8px;" >}}
I don’t think she would’ve liked it, this wasn’t really her aesthetic. I guess it was an alright attempt? Don’t know what I was thinking when I made that tail stroke LOL, didn’t look anything like the typeface I was working with.
# Youtube/Twitch: Late 2021 ~ 2023
I really liked the hearts design at the time, but I remembered seeing the font I had used for the name, thinking I could do so much more with it.
{{< image src="/img/scanline-2022.png" alt="Scanline 2022 Logo" position="center" style="border-radius: 8px;" >}}
The end result ended up being this. This was and arguably still is my best personal logo, and I think it ended up being really difficult to top because I rocked it pretty much all through the COVID lockdown.
The choice of pastel pink and blue made a return which is nice, and so did the bunny TV icons. I remember really focusing on symmetry, and the way the font made it really easy to connect strokes around, and imitate them with a basic brush tool. Also the only time I’ve gone to consult a colleague familiar with design on something I’ve made, because I must’ve felt that I had something a little more than a goofy logo with this one.
{{< image src="/img/scan-heart-2022.jpg" alt="Scanline 2022 Heart Logo" position="center" style="border-radius: 8px;" >}}
This one made it into the mix at some point too. It has a fairly edgy “midnight hotline” vibe to it thanks to the tight RGB shift. Making this definitely got me interested in modernized y2k stuff, and it has since become my primary style (original, I know). The line slice was a really fun way to play with the name again.
# Systems Lab: 2022 ~ Present
{{< image src="/img/blossomnetwork.png" alt="Blossomnetwork Captive Portal" position="center" style="border-radius: 8px;" >}}
The Blossom Network came about after I was looking for a fun hostname structure for virtual machines, servers, and other network devices, as my stack continued to grow.
The servers in the “blossom network” are all named after flowers or plants. The network lets them blossom, you get it. It’s corny as fuck, but it’s been a cute way to give my logs and real time monitoring a little bit more life instead of “oh, there’s host-01 and VM690.”
Mostly made out of public domain assets. It’s cute, I don’t mind it, and it only tends to get used internally.
# Personal Blog/Web Services: 2023 ~ 2025
{{< image src="/img/bitbouquet.png" alt="BitBouquet Homepage" position="center" style="border-radius: 8px;" >}}
BitBouquet became a thing because I was teaching myself how to secure public, self-hosted webservers. Using a CMS like WordPress ended up being a really solid idea since I’m not a developer, and it gave me the level of customization I wanted. I ended up really enjoying playing with the website once I learned how to securely host it, so I kept it up for quite some time, only having moved on from it in place of hardclear. (the site youre on!)
It’s really simple, but this is definitely one of my favourites. I may be biased to it because it was my first website, but the font choice for a name with the word “bit” was perfect due to its blocky look. It feels a little empty and is very hard to fit uniformly in branding because its super unbalanced.
# MapleStory Server: 2023 ~ 2025
{{< image src="/img/sweetgum-registration.png" alt="Sweetgum Registration Page" position="center" style="border-radius: 8px;" >}}
Sweetgum is the successor to my previous v83 private server project, Poinsettia. It’s still unfinished, and will be for a good while. It was going to be the eventual public release of the work that was done on Poinsettia but the colleagues I was working on this with are both busy with life, and I kind of am too.
This login & registration page looks pretty nice though, ngl. I think I nailed the forest fairy vibe I was trying to go for, and being able to play around with Maplestory map artwork was a lot of fun. This one had a lot more planning behind it and wasn’t as sporadic as the others because I was working with others, and I think it shows??
{{< image src="/img/sweetgum-leaf.jpg" alt="Sweetgum Leaf" position="right" style="border-radius: 8px;" >}}
The inspiration for the name “sweetgum,” and the forest-y green color scheme comes from the sweetgum leaf, which is considered to be the closest lookalike to a maple leaf in shape. They’re often confused for silver maple leaves, so I thought it was a funny nod to the fact that its a private server without having the use the words “Maple,” “Story,” or “MS.”
# Youtube: 2023 ~ Present
{{< image src="/img/scan-youtube-2023.png" alt="Scan Youtube Banner 2023" position="center" style="border-radius: 8px;" >}}
This is my most recent work. I don’t know why I really went down this direction, I’ve been obsessed with a house/trap/bass artist named Knock2, and I think his own logos and especially the logos of his label Night Mode gave me the itch to make something new.
Using Solange felt incredibly daunting at first, but when I saw just how sick the lower case “S” instead of the uppercase one, I knew it was meant to be. Added some 3d transforming, waves, text paths, noise, y2k iconography and I was set. Kind of a banger??
# Conclusion - Most of it sucks, and that's okay
I’m an amateur, and I always will be. I don’t plan on having that change, and I’m quite happy with that. This was not meant to be a showcase of my technical skill, because I don’t really know what it takes to have technical proficiency in design. Rather it’s been an exploration of things that I thought looked cool, and how I’ve represented my identity online. Something as stupid as a little twitch layout, or a banner has the ability to capture so much of who you were at the time.
At the very least, I can confidently say that there was an improvement and that’s pretty cool! Looking back, there were some preferences I seemed to pick up very early. I really liked pinks, purples, and blues, and I had an obsession with drop shadows back then because they’re a cheap way to make anything look “decent.”

6
favicon.ico Normal file
View File

@@ -0,0 +1,6 @@
Notice: Function _load_textdomain_just_in_time was called <strong>incorrectly</strong>. Translation loading for the <code>insert-headers-and-footers</code> domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the <code>init</code> action or later. Please see <a href="https://developer.wordpress.org/advanced-administration/debug/debug-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 6.7.0.) in /var/www/html/wp-includes/functions.php on line 6131
Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/wp-includes/functions.php:6131) in /var/www/html/wp-includes/pluggable.php on line 1531
Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/wp-includes/functions.php:6131) in /var/www/html/wp-includes/pluggable.php on line 1534

121
hugo.toml Normal file
View File

@@ -0,0 +1,121 @@
baseURL = 'https://hardclear.net'
locale = 'en-us'
title = 'hardclear'
theme = 're-terminal'
pagination.pagerSize = 5
[params]
# dir name of your main content (default is `content/posts`).
# the list of set content will show up on your index page (baseurl).
contentTypeName = "posts"
# ["orange", "blue", "red", "green", "pink", "paper"]
themeColor = "red"
# if you set this to 0, only submenu trigger will be visible
showMenuItems = 2
# show selector to switch language
showLanguageSelector = false
# set theme to full screen width
fullWidthTheme = false
# center theme with default width
centerTheme = true
# if your resource directory contains an image called `cover.(jpg|png|webp)`,
# then the file will be used as a cover automatically.
# With this option you don't have to put the `cover` param in a front-matter.
autoCover = true
# set post to show the last updated
# If you use git, you can set `enableGitInfo` to `true` and then post will automatically get the last updated
showLastUpdated = false
# set a custom favicon (default is a `themeColor` square)
favicon = "/img/favicon.ico"
# Provide a string as a prefix for the last update date. By default, it looks like this: 2020-xx-xx [Updated: 2020-xx-xx] :: Author
# updatedDatePrefix = "Updated"
# set all headings to their default size (depending on browser settings)
# oneHeadingSize = true # default
# whether to show a page's estimated reading time
# readingTime = false # default
# whether to show a table of contents
# can be overridden in a page's front-matter
# Toc = false # default
# set title for the table of contents
# can be overridden in a page's front-matter
# TocTitle = "Table of Contents" # default
# you can set a banner on the top of the page with a call to action
# defaults: dismissible = false; URL is optional
# [params.banner]
# dismissible = false
# text = "Check it out on GitHub"
# url = "https://github.com/mirus-ua/hugo-theme-re-terminal"
[params.twitter]
# set Twitter handles for Twitter cards
# see https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started#card-and-content-attribution
# do not include @
creator = ""
site = ""
[languages]
[languages.en.params]
languageName = "English"
title = "hardclear"
subtitle = "Dont drop to zero!"
owner = "Scan"
keywords = ""
copyright = "© 2026 Blossom Network"
menuMore = "Show more"
readMore = "Read more"
readOtherPosts = "Read other posts"
newerPosts = "Newer posts"
olderPosts = "Older posts"
missingContentMessage = "Page not found..."
missingBackButtonLabel = "Back to home page"
minuteReadingTime = "min read"
words = "words"
[languages.en.params.logo]
logoText = "hardclear"
logoHomeLink = "/"
[languages.en.menu]
# Submenus is available since v2.1.0
# [[languages.en.menu.main]]
# identifier = "submenuParent"
# name = "Submenu"
# [[languages.en.menu.main]]
# parent = "submenuParent"
# identifier = "anItem"
# name = "AnItem"
[[languages.en.menu.main]]
identifier = "about"
name = "About"
url = "/about"
[[languages.en.menu.main]]
identifier = "gitea"
name = "Gitea"
url = "https://git.bitbouquet.network/"
[module]
# In case you would like to make changes to the theme and keep it locally in you repository,
# uncomment the line below (and correct the local path if necessary).
# --
# replacements = "github.com/mirus-ua/hugo-theme-re-terminal -> themes/re-terminal"
[[module.imports]]
#path = 'themes/re-terminal'

183
public/404.html Normal file
View File

@@ -0,0 +1,183 @@
<!DOCTYPE html>
<html lang="en">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>404 Page not found :: hardclear</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="noodp" />
<link rel="canonical" href="http://localhost:1313/404.html" />
<link rel="stylesheet" href="http://localhost:1313/styles.css">
<link rel="shortcut icon" href="http://localhost:1313/img/favicon.ico">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="" />
<meta name="twitter:creator" content="" />
<meta property="og:locale" content="en" />
<meta property="og:type" content="website" />
<meta property="og:title" content="404 Page not found">
<meta property="og:description" content="" />
<meta property="og:url" content="http://localhost:1313/404.html" />
<meta property="og:site_name" content="hardclear" />
<meta property="og:image" content="http://localhost:1313/img/favicon.ico">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
</head>
<body class="red">
<div class="container center headings--one-size">
<header class="header">
<div class="header__inner">
<div class="header__logo">
<a href="/">
<div class="logo">
hardclear
</div>
</a>
</div>
<ul class="menu menu--mobile">
<li class="menu__trigger">Menu&nbsp;▾</li>
<li>
<ul class="menu__dropdown">
<li><a href="/about">About</a></li>
<li><a href="https://git.bitbouquet.network/">Gitea</a></li>
</ul>
</li>
</ul>
</div>
<nav class="navigation-menu">
<ul class="navigation-menu__inner menu--desktop">
<li><a href="/about" >About</a></li>
<li><a href="https://git.bitbouquet.network/" >Gitea</a></li>
</ul>
</nav>
</header>
<div class="content">
<div class="post">
<h1 class="post-title">404 — Page not found...</h1>
<div class="post-content">
<a href="http://localhost:1313/">Back to home page&nbsp;→</a>
</div>
</div>
</div>
<footer class="footer">
<div class="footer__inner">
<div class="copyright copyright--user">
<span>© 2026 Blossom Network</span>
</div>
</div>
</footer>
<script type="text/javascript" src="/bundle.min.js"></script>
</div>
</body>
</html>

245
public/about/index.html Normal file
View File

@@ -0,0 +1,245 @@
<!DOCTYPE html>
<html lang="en">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>About Me :: hardclear</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Once upon a time I ran a WordPress blog called BitBouquet. With the changing pace of my life, I made the decision to switch to a simple static site for my content.
Hello, I&#39;m Hazel. Nice to meet you! I love IT infrastructure! I believe that grasping the underlying technologies and systems that move peoples lives and businesses is an incredibly important asset in our modern age, and this blog serves as a testament to that mentality. I strongly believe in the power of FOSS, and the importance of self-hosting in this cloud-ridden, engagement obsessed, LLM-ified internet we all participate in.
" />
<meta name="keywords" content="" />
<meta name="robots" content="noodp" />
<link rel="canonical" href="http://localhost:1313/about/" />
<link rel="stylesheet" href="http://localhost:1313/styles.css">
<link rel="shortcut icon" href="http://localhost:1313/img/favicon.ico">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="" />
<meta name="twitter:creator" content="Scan" />
<meta property="og:locale" content="en" />
<meta property="og:type" content="article" />
<meta property="og:title" content="About Me">
<meta property="og:description" content="Once upon a time I ran a WordPress blog called BitBouquet. With the changing pace of my life, I made the decision to switch to a simple static site for my content.
Hello, I&#39;m Hazel. Nice to meet you! I love IT infrastructure! I believe that grasping the underlying technologies and systems that move peoples lives and businesses is an incredibly important asset in our modern age, and this blog serves as a testament to that mentality. I strongly believe in the power of FOSS, and the importance of self-hosting in this cloud-ridden, engagement obsessed, LLM-ified internet we all participate in.
" />
<meta property="og:url" content="http://localhost:1313/about/" />
<meta property="og:site_name" content="hardclear" />
<meta property="og:image" content="http://localhost:1313/img/favicon.ico">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="article:published_time" content="2026-04-09 00:00:00 &#43;0000 UTC" />
</head>
<body class="red">
<div class="container center headings--one-size">
<header class="header">
<div class="header__inner">
<div class="header__logo">
<a href="/">
<div class="logo">
hardclear
</div>
</a>
</div>
<ul class="menu menu--mobile">
<li class="menu__trigger">Menu&nbsp;▾</li>
<li>
<ul class="menu__dropdown">
<li><a href="/about">About</a></li>
<li><a href="https://git.bitbouquet.network/">Gitea</a></li>
</ul>
</li>
</ul>
</div>
<nav class="navigation-menu">
<ul class="navigation-menu__inner menu--desktop">
<li><a href="/about" >About</a></li>
<li><a href="https://git.bitbouquet.network/" >Gitea</a></li>
</ul>
</nav>
</header>
<div class="content">
<article class="post">
<h1 class="post-title">
<a href="http://localhost:1313/about/">About Me</a>
</h1>
<div class="post-meta"><time class="post-date">2026-04-09</time><span class="post-author">Scan</span>
</div>
<div class="post-content"><div>
<p>Once upon a time I ran a WordPress blog called BitBouquet. With the changing pace of my life, I made the decision to switch to a simple static site for my content.</p>
<figure class="center" >
<img src="/img/scan.png" alt="Scan" style="border-radius: 8px;" />
<figcaption class="center" style="color: black;" >Hello, I'm Hazel. Nice to meet you!</figcaption>
</figure>
<p>I love IT infrastructure! I believe that grasping the underlying technologies and systems that move peoples lives and businesses is an incredibly important asset in our modern age,
and this blog serves as a testament to that mentality. I strongly believe in the power of FOSS, and the importance of self-hosting in this cloud-ridden, engagement obsessed,
LLM-ified internet we all participate in.</p>
<h4 id="a-brief-history">A brief history<a href="#a-brief-history" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h4>
<p>My journey with technology started after I graduated university with a bachelors degree in commerce, and a minor in economics.
Despite that, I somehow ended up working as a supervisor at a certain canadian computer store.</p>
<p>Through that job I re-discovered my love for computers and became interested in the deeper side of repair, and server technology. I started self-hosting a NAS,
and got involved in various online communities which helped expand that curiosity into a real job.</p>
<p>In 2023, I got a job with an MSP as tech, and eventually moved into an escalations role. It was an amazingly stressful job, with so many opportunities to learn.
When people joke that MSPs are like an IT bootcamp, they&rsquo;re not lying!</p>
<p>Fast forward to 2025, and I started an independant Japanese import arcade with my friends in Toronto. The business has grown to a point where I was able to quit my IT gig. We do contracts all around
Canada for various gaming and anime conventions, all while running a downtown storefront.</p>
<h4 id="projects">Projects<a href="#projects" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h4>
<ul>
<li>
<p>sweetgum: A stripped down v83 MapleStory server with a single map structure, designed explicitly to be a chatroom with a dress-up element.</p>
</li>
<li>
<p>bm2dnix: Continuation of the nixac project, a combination of utilities and scripts to aid in the process of running Beatmania IIDX on linux systems. (deprecated)</p>
</li>
<li>
<p>lycoris: A fully automated &amp; containerized self-managed media library hosted through Plex/Jellyfin.</p>
</li>
<li>
<p>bitbouquet: Former personal blog that housed all my tech ramblings and personal stories about identity and transition.
It used to run a public AI upscaler (waifu2x) that utilized a fancy CUDA container.</p>
</li>
<li>
<p>blossomworks: My multi-site, fully managed network stack. It hosts this website!</p>
</li>
</ul>
</div></div>
</article>
</div>
<footer class="footer">
<div class="footer__inner">
<div class="copyright copyright--user">
<span>© 2026 Blossom Network</span>
</div>
</div>
</footer>
<script type="text/javascript" src="/bundle.min.js"></script>
</div>
</body>
</html>

53
public/bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

185
public/categories/index.html Normal file
View File

@@ -0,0 +1,185 @@
<!DOCTYPE html>
<html lang="en">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>Categories :: hardclear</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="noodp" />
<link rel="canonical" href="http://localhost:1313/categories/" />
<link rel="stylesheet" href="http://localhost:1313/styles.css">
<link rel="shortcut icon" href="http://localhost:1313/img/favicon.ico">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="" />
<meta name="twitter:creator" content="" />
<meta property="og:locale" content="en" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Categories">
<meta property="og:description" content="" />
<meta property="og:url" content="http://localhost:1313/categories/" />
<meta property="og:site_name" content="hardclear" />
<meta property="og:image" content="http://localhost:1313/img/favicon.ico">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<link href="/categories/index.xml" rel="alternate" type="application/rss+xml" title="hardclear" />
</head>
<body class="red">
<div class="container center headings--one-size">
<header class="header">
<div class="header__inner">
<div class="header__logo">
<a href="/">
<div class="logo">
hardclear
</div>
</a>
</div>
<ul class="menu menu--mobile">
<li class="menu__trigger">Menu&nbsp;▾</li>
<li>
<ul class="menu__dropdown">
<li><a href="/about">About</a></li>
<li><a href="https://git.bitbouquet.network/">Gitea</a></li>
</ul>
</li>
</ul>
</div>
<nav class="navigation-menu">
<ul class="navigation-menu__inner menu--desktop">
<li><a href="/about" >About</a></li>
<li><a href="https://git.bitbouquet.network/" >Gitea</a></li>
</ul>
</nav>
</header>
<div class="content">
<div class="terms">
<h1>Categories</h1>
<ul>
</ul>
</div>
</div>
<footer class="footer">
<div class="footer__inner">
<div class="copyright copyright--user">
<span>© 2026 Blossom Network</span>
</div>
</div>
</footer>
<script type="text/javascript" src="/bundle.min.js"></script>
</div>
</body>
</html>

10
public/categories/index.xml Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Categories on hardclear</title>
<link>http://localhost:1313/categories/</link>
<description>Recent content in Categories on hardclear</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language><atom:link href="http://localhost:1313/categories/index.xml" rel="self" type="application/rss+xml" />
</channel>
</rss>

BIN
public/fonts/FiraCode-Bold.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/FiraCode-Regular.woff Normal file
View File

Binary file not shown.

BIN
public/img/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
public/img/20110710-IMG_1069-3053586245-e1683397440418-1024x883.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

BIN
public/img/277737399_395307609264464_8232259105565268237_n-e1683392075842.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
public/img/IMG_0441-2-832x1024.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

BIN
public/img/MOSHED-2022-1-19-15-31-33-1536x447.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
public/img/PCARD-TEST-2-1024x603.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 586 KiB

BIN
public/img/Rarity_colors.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 381 KiB

BIN
public/img/anode_dany.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
public/img/anode_stand.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
public/img/art2k-banner-wave-WIP2-1536x420.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/img/bitbouquet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 763 KiB

BIN
public/img/blank.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 B

BIN
public/img/blossomnetwork.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
public/img/cathode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
public/img/cathode_anode_stand.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/img/cathode_stand.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
public/img/chrome_s0J62qqSjR.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
public/img/css-variables-update.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
public/img/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/img/haru-2016.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 269 KiB

BIN
public/img/haru-2018.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 KiB

BIN
public/img/haru-logo-2018.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
public/img/haru-pcard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 586 KiB

BIN
public/img/harus-room-2019.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 374 KiB

BIN
public/img/hello.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
public/img/img/css-variables-update.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
public/img/img/hello.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
public/img/img/paper.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
public/img/kancolle-rarity.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 381 KiB

BIN
public/img/mura-768x256.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
public/img/murasaki-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
public/img/nightmode.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
public/img/obs64_64MqZnpqJd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 357 KiB

BIN
public/img/obs64_aXnWvfHf6u.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 MiB

BIN
public/img/paper.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
public/img/scan-heart-2022.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
public/img/scan-logo-2021.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
public/img/scan-youtube-2023.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
public/img/scan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
public/img/scan02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
public/img/scanlieeeene.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/img/scanline-2020.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
public/img/scanline-2021-layout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 357 KiB

BIN
public/img/scanline-2021.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 MiB

BIN
public/img/scanline-2022.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

BIN
public/img/scanline-ytbanner-2021.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 405 KiB

BIN
public/img/stand1_0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
public/img/stand2_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
public/img/sweetgum-leaf.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
public/img/sweetgum-registration.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 521 KiB

BIN
public/img/sweetgum-regsistration-chara2-1536x864.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 521 KiB

BIN
public/img/sweetgum-regsistration.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 521 KiB

BIN
public/img/theme-colors/blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 189 B

BIN
public/img/theme-colors/green.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 B

BIN
public/img/theme-colors/orange.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 B

BIN
public/img/theme-colors/paper.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 B

BIN
public/img/theme-colors/pink.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 190 B

BIN
public/img/theme-colors/red.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 189 B

BIN
public/img/twitter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

BIN
public/img/vivaldi_3i3k4n0JPw.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 KiB

BIN
public/img/vivaldi_Qstye6gQgy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 763 KiB

BIN
public/img/vivaldi_cwL0J2I6fm.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 269 KiB

BIN
public/img/vivaldi_iXT4QtAYE2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 374 KiB

BIN
public/img/vivaldi_jMHVq1L300.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
public/img/ytbanner-1-1536x471.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 405 KiB

238
public/index.html Normal file
View File

@@ -0,0 +1,238 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="Hugo 0.160.0"><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>hardclear</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Dont drop to zero!" />
<meta name="keywords" content="" />
<meta name="robots" content="noodp" />
<link rel="canonical" href="http://localhost:1313/" />
<link rel="stylesheet" href="http://localhost:1313/styles.css">
<link rel="shortcut icon" href="http://localhost:1313/img/favicon.ico">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="" />
<meta name="twitter:creator" content="" />
<meta property="og:locale" content="en" />
<meta property="og:type" content="website" />
<meta property="og:title" content="hardclear">
<meta property="og:description" content="Dont drop to zero!" />
<meta property="og:url" content="http://localhost:1313/" />
<meta property="og:site_name" content="hardclear" />
<meta property="og:image" content="http://localhost:1313/img/favicon.ico">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<link href="/index.xml" rel="alternate" type="application/rss+xml" title="hardclear" />
</head>
<body class="red">
<div class="container center headings--one-size">
<header class="header">
<div class="header__inner">
<div class="header__logo">
<a href="/">
<div class="logo">
hardclear
</div>
</a>
</div>
<ul class="menu menu--mobile">
<li class="menu__trigger">Menu&nbsp;▾</li>
<li>
<ul class="menu__dropdown">
<li><a href="/about">About</a></li>
<li><a href="https://git.bitbouquet.network/">Gitea</a></li>
</ul>
</li>
</ul>
</div>
<nav class="navigation-menu">
<ul class="navigation-menu__inner menu--desktop">
<li><a href="/about" >About</a></li>
<li><a href="https://git.bitbouquet.network/" >Gitea</a></li>
</ul>
</nav>
</header>
<div class="content">
<div class="posts">
<article class="post on-list">
<h1 class="post-title">
<a href="http://localhost:1313/posts/identity/">Identity through branding - my personal logos, banners, and designs from 2016 to 2023</a>
</h1>
<div class="post-meta"><time class="post-date">2023-05-09</time><span class="post-author">Scan</span>
</div>
<div class="post-content">
<p>
<figure class="left" >
<img src="/img/cathode.png" alt="Cathode by Combo" style="border-radius: 8px;" />
<figcaption class="center" style="color: black;" >Cathode (2020) by Combo</figcaption>
</figure>
For as long as I can remember, I’ve always enjoyed playing with photo editing software. Where most of my hobbies come and go, making silly little things for myself in photoshop has been a semi-regular activity on the computer since I’ve had my YouTube channel.</p>
<p>It’s always felt like sketching to me in the same way that people will doodle on their notebooks or play with coloring books to let their mind run. Most of my designs end up being sketches and only that. I was bored on the computer and had nothing better to do.</p>
</div>
<div>
<a class="read-more button" href="/posts/identity/">Read more →</a>
</div>
</article>
<div class="pagination">
<div class="pagination__buttons">
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer__inner">
<div class="copyright copyright--user">
<span>© 2026 Blossom Network</span>
</div>
</div>
</footer>
<script type="text/javascript" src="/bundle.min.js"></script>
</div>
</body>
</html>

255
public/index.xml Normal file
View File

@@ -0,0 +1,255 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>hardclear</title>
<link>http://localhost:1313/</link>
<description>Recent content on hardclear</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<lastBuildDate>Thu, 09 Apr 2026 00:00:00 +0000</lastBuildDate><atom:link href="http://localhost:1313/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>About Me</title>
<link>http://localhost:1313/about/</link>
<pubDate>Thu, 09 Apr 2026 00:00:00 +0000</pubDate>
<guid>http://localhost:1313/about/</guid>
<description>&lt;p&gt;Once upon a time I ran a WordPress blog called BitBouquet. With the changing pace of my life, I made the decision to switch to a simple static site for my content.&lt;/p&gt;
&lt;figure class=&#34;center&#34; &gt;
&lt;img src=&#34;http://localhost:1313/img/scan.png&#34; alt=&#34;Scan&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;figcaption class=&#34;center&#34; style=&#34;color: black;&#34; &gt;Hello, I&#39;m Hazel. Nice to meet you!&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;I love IT infrastructure! I believe that grasping the underlying technologies and systems that move peoples lives and businesses is an incredibly important asset in our modern age,
and this blog serves as a testament to that mentality. I strongly believe in the power of FOSS, and the importance of self-hosting in this cloud-ridden, engagement obsessed,
LLM-ified internet we all participate in.&lt;/p&gt;</description>
<content>&lt;p&gt;Once upon a time I ran a WordPress blog called BitBouquet. With the changing pace of my life, I made the decision to switch to a simple static site for my content.&lt;/p&gt;
&lt;figure class=&#34;center&#34; &gt;
&lt;img src=&#34;http://localhost:1313/img/scan.png&#34; alt=&#34;Scan&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;figcaption class=&#34;center&#34; style=&#34;color: black;&#34; &gt;Hello, I&#39;m Hazel. Nice to meet you!&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;I love IT infrastructure! I believe that grasping the underlying technologies and systems that move peoples lives and businesses is an incredibly important asset in our modern age,
and this blog serves as a testament to that mentality. I strongly believe in the power of FOSS, and the importance of self-hosting in this cloud-ridden, engagement obsessed,
LLM-ified internet we all participate in.&lt;/p&gt;
&lt;h4 id=&#34;a-brief-history&#34;&gt;A brief history&lt;/h4&gt;
&lt;p&gt;My journey with technology started after I graduated university with a bachelors degree in commerce, and a minor in economics.
Despite that, I somehow ended up working as a supervisor at a certain canadian computer store.&lt;/p&gt;
&lt;p&gt;Through that job I re-discovered my love for computers and became interested in the deeper side of repair, and server technology. I started self-hosting a NAS,
and got involved in various online communities which helped expand that curiosity into a real job.&lt;/p&gt;
&lt;p&gt;In 2023, I got a job with an MSP as tech, and eventually moved into an escalations role. It was an amazingly stressful job, with so many opportunities to learn.
When people joke that MSPs are like an IT bootcamp, they&amp;rsquo;re not lying!&lt;/p&gt;
&lt;p&gt;Fast forward to 2025, and I started an independant Japanese import arcade with my friends in Toronto. The business has grown to a point where I was able to quit my IT gig. We do contracts all around
Canada for various gaming and anime conventions, all while running a downtown storefront.&lt;/p&gt;
&lt;h4 id=&#34;projects&#34;&gt;Projects&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;sweetgum: A stripped down v83 MapleStory server with a single map structure, designed explicitly to be a chatroom with a dress-up element.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;bm2dnix: Continuation of the nixac project, a combination of utilities and scripts to aid in the process of running Beatmania IIDX on linux systems. (deprecated)&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;lycoris: A fully automated &amp;amp; containerized self-managed media library hosted through Plex/Jellyfin.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;bitbouquet: Former personal blog that housed all my tech ramblings and personal stories about identity and transition.
It used to run a public AI upscaler (waifu2x) that utilized a fancy CUDA container.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;blossomworks: My multi-site, fully managed network stack. It hosts this website!&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
</content>
</item>
<item>
<title>Identity through branding - my personal logos, banners, and designs from 2016 to 2023</title>
<link>http://localhost:1313/posts/identity/</link>
<pubDate>Tue, 09 May 2023 00:00:00 +0000</pubDate>
<guid>http://localhost:1313/posts/identity/</guid>
<description>&lt;p&gt;
&lt;figure class=&#34;left&#34; &gt;
&lt;img src=&#34;http://localhost:1313/img/cathode.png&#34; alt=&#34;Cathode by Combo&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;figcaption class=&#34;center&#34; style=&#34;color: black;&#34; &gt;Cathode (2020) by Combo&lt;/figcaption&gt;
&lt;/figure&gt;
For as long as I can remember, I’ve always enjoyed playing with photo editing software. Where most of my hobbies come and go, making silly little things for myself in photoshop has been a semi-regular activity on the computer since I’ve had my YouTube channel.&lt;/p&gt;
&lt;p&gt;It’s always felt like sketching to me in the same way that people will doodle on their notebooks or play with coloring books to let their mind run. Most of my designs end up being sketches and only that. I was bored on the computer and had nothing better to do.&lt;/p&gt;</description>
<content>&lt;p&gt;
&lt;figure class=&#34;left&#34; &gt;
&lt;img src=&#34;http://localhost:1313/img/cathode.png&#34; alt=&#34;Cathode by Combo&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;figcaption class=&#34;center&#34; style=&#34;color: black;&#34; &gt;Cathode (2020) by Combo&lt;/figcaption&gt;
&lt;/figure&gt;
For as long as I can remember, I’ve always enjoyed playing with photo editing software. Where most of my hobbies come and go, making silly little things for myself in photoshop has been a semi-regular activity on the computer since I’ve had my YouTube channel.&lt;/p&gt;
&lt;p&gt;It’s always felt like sketching to me in the same way that people will doodle on their notebooks or play with coloring books to let their mind run. Most of my designs end up being sketches and only that. I was bored on the computer and had nothing better to do.&lt;/p&gt;
&lt;p&gt;I’ve been uploading/streaming to YouTube and Twitch for 10+ years at this point and I treat it like a venue to express my identity rather than a platform to gain a following on.&lt;/p&gt;
&lt;h1 id=&#34;youtubetwitch-2016--2017&#34;&gt;YouTube/Twitch: 2016 ~ 2017&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/haru-2016.jpg&#34; alt=&#34;Haru 2016 Stream Layout&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;These are the earliest stream layouts that I still have archived. There was definitely some previous stuff I’d made for myself at that point, but it’s all been lost to time. It’s mostly crude, unhinged usage of Gimp and poorly put together Maplestory and MLP edits. They were pretty bad, embarassing even, but I definitely thought they were super cool back then and that’s all that matters.&lt;/p&gt;
&lt;p&gt;There’s only one remaining video from that era and it’s a Maplestory tutorial for Windows 7. I keep it up because I think it’s really cute, and it’s shows how interested I was in teaching people about software. Now I maintain servers and teach businesses how to use software professionally!&lt;/p&gt;
&lt;h1 id=&#34;youtubetwitch-2018&#34;&gt;YouTube/Twitch: 2018&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/haru-2018.jpg&#34; alt=&#34;Haru 2018 Stream Layout&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;Idols! Idols! Idols! This was around the time when I fell in love with the 2D idol game franchise THE iDOLM@STER. This one was kind of an improvement? I started learning how to use opacity more effectively.
This one definitely had a little more life. The now playing broke ALL THE TIME because rhythm games all had different ways of doing it, big pain in the butt. There was a Kancolle version of this layout that I also had used for some time,
which is where the texture for the name portion of the design came from!&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/haru-logo-2018.png&#34; alt=&#34;Haru 2018 Logo&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;I think this was the first time I achieved an “effect,” and I was pretty hooked. I really started to enjoy putting things together. Playing with fonts, icons, colours, and filters started to become a semi-regular activity.&lt;/p&gt;
&lt;h1 id=&#34;business-cards-2018&#34;&gt;Business Cards: 2018&lt;/h1&gt;
&lt;figure class=&#34;left&#34; &gt;
&lt;img src=&#34;http://localhost:1313/img/haru-pcard.png&#34; alt=&#34;Haru P-Card&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;figcaption class=&#34;center&#34; style=&#34;color: black;&#34; &gt;These were one of the coolest forms of self-expresison I&#39;ve ever seen in a community.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;I had this phase where I was making business cards for people, thanks iM@S community. I still have the one on the right buried in a pile of other producer cards. Not much to say about this one. It’s a little boring, and is pretty cookie cutter in terms of pcards. But I put a fair amount of effort into it,
and seeing it come to life once I got them printed to hand out to other producers was really awesome.&lt;/p&gt;
&lt;h1 id=&#34;youtubetwitch-2019&#34;&gt;YouTube/Twitch: 2019&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/harus-room-2019.jpg&#34; alt=&#34;Haru 2018 Stream Layout&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;This was the point at which I had started using the name “Haru’s Room.” It was meant to be a way to make the stream feel more close to the viewers/friends/family watching at home. I wanted to make it feel like you were hanging out in my room, I would rotate the stream around my desk, Beatmania IIDX, and retro console setups. It ended up being poorly executed, but it was definitely a fun idea and I ended up rolling with it for close to a year.&lt;/p&gt;
&lt;p&gt;As for the design itself, it looked great but it was barely my own work. The background is a ripped scan from a Kors K album (its one of the xenna albums i cant remember the name), and our familiar friend Bebas Neue has made a return once again.&lt;/p&gt;
&lt;h1 id=&#34;youtubetwitch-2020&#34;&gt;YouTube/Twitch: 2020&lt;/h1&gt;
&lt;p&gt;Being a white person with a Japanese name online started to feel pretty embarrassing, so 2020 marked the birth of Scanline and it’s variations. It was far more representative of who I was as it’s a direct reference to the scanlines generated by retro TVs.&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/scanline-2020.png&#34; alt=&#34;Scanline 2020 Stream Layout&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;I really don’t want to talk about this one but for the sake of the timeline I’ll include it. This was honestly kinda lazy and I remember thinking it looked sick, probably because of the scanline effect on my name. Probably could’ve got way more imaginative with the layout but I was too focused on grinding stamina ITG. White backgrounds for streams make them unwatchable at night, something I clearly didnt take into consideration LMAO&lt;/p&gt;
&lt;h1 id=&#34;youtubetwitch-2021&#34;&gt;YouTube/Twitch: 2021&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/scanline-2021.gif&#34; alt=&#34;Scanline 2021 Stream Layout&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;Something about this felt like a step up. I started focusing more on cohesive designs that made use of a proper color palette. This was also my first time ever playing with After Effects, it didn’t really end up being for me as I’m not a huge video fx person but I ended up getting a pretty cool looping background! Respect to the people who use that software, I’m a little too dumb for it :’)&lt;/p&gt;
&lt;p&gt;I didn’t get to make use of this layout for too long, and that was kind of unfortunate because it was really cute! The colour palette felt super warm and inviting, and it felt like the first time I used monochrome colors effectively. The soft, almost pink reds went incredibly well with Mershark’s drawing of my MapleLegends character Anode. I still use her quite a bit in my own branding,
she’s become a representation of myself instead of an MMO character at this point.&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/scanline-2021-layout.png&#34; alt=&#34;Scanline 2021 Stream Layout&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;I apologize for the sudden shift, but this was a pretty turbulent time in my life. I think it was a tough time for everybody, but covid became a really easy way for me to bury the gender dysphoria and coast along without any critical thought towards my future. I regret not coming out in 2019, but I got pretty consumed by playing MapleLegends day in and day out, and my characters filled a void that I was quite aware of, but I kind of just let it happen.&lt;/p&gt;
&lt;h1 id=&#34;maplelegends--finding-myself&#34;&gt;MapleLegends &amp;amp; finding myself&lt;/h1&gt;
&lt;p&gt;Let’s take a moment to talk about this silly little private Maplestory server, because it played a pretty instrumental role in my life, for better or for worse. Bittersweet is probably the best way to describe it.&lt;/p&gt;
&lt;p&gt;There is a bit of a subculture within the Maplestory community of having a more distinct look through the use of paid cosmetics. In the private server scene it was even more heightened, since nx was free and the low population of players made it so everyone’s characters were distinguishable if you spent enough time hanging out in the market.&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/cathode_anode_stand.png&#34; alt=&#34;Cathode &amp; Anode&#34; class=&#34;right&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;I had a bit of a reputation for cute characters and I ended up being in charge of new cosmetics for 2 (maybe 3?) seasonal events when I served as staff. I also maintained a lot of the beauty parlor guides. I guess it was pretty eggy behaviour, now that I look back on it.&lt;/p&gt;
&lt;p&gt;To clarify, not every person using an OC that’s not their gender should treat it as a sign that they’re trans, plenty of people do that and are very comfortable with who they are. With that being said, don’t hesitate to question it! Maybe it’s not as deep for you, and you like your OC simply for the sake of liking them. In my case Anode was a bit of a projection, but I was a little too lost at the time to come to terms with that.&lt;/p&gt;
&lt;p&gt;
&lt;img src=&#34;http://localhost:1313/img/anode_dany.jpg&#34; alt=&#34;Scanline 2021 Stream Layout&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;figure class=&#34;center&#34; &gt;
&lt;img src=&#34;http://localhost:1313/img/blank.png&#34; alt=&#34;Anode (2021) by Dany&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;figcaption class=&#34;center&#34; style=&#34;color: black;&#34; &gt;Thank you Dany, I wish I could tell you how much this drawing meant to me in the right context.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p&gt;That aforementioned regret still exists, but I don’t feel as bitter about it anymore. I’m here now, and that’s all that matters.&lt;/p&gt;
&lt;h1 id=&#34;more-designs-2021&#34;&gt;More designs: 2021&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/scanline-ytbanner-2021.png&#34; alt=&#34;Scanline YouTube Banner 2021&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;The adorable drawing above was done by Haiirojob (灰色), but I never got to utilize it to the same extent as mersharks drawing. Haiirojob’s artwork was beautiful on its own but a little too busy to reliably use with branding. Super cute as a profile picture or wallpaper though!&lt;/p&gt;
&lt;p&gt;Also lets talk about that logo… this was my first and only attempt at working with Japanese kawaii pop fonts. I’ve tried my hand, and I just don’t think I’m very good at it. I think to get impactful “kawaii” branding that doesn’t look super cheap, you have to break out the sketchbook and pen tool. Hiiragi Ryo is a great example of this, and continues to be an inspiration for me.&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/scan-logo-2021.png&#34; alt=&#34;Scanline Bow Logo&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;I ended up doing some similar looking stuff, including an unfinished logo I was trying to make for a vtuber friend.&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/murasaki-logo.png&#34; alt=&#34;Murasaki Ch. Logo&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;I don’t think she would’ve liked it, this wasn’t really her aesthetic. I guess it was an alright attempt? Don’t know what I was thinking when I made that tail stroke LOL, didn’t look anything like the typeface I was working with.&lt;/p&gt;
&lt;h1 id=&#34;youtubetwitch-late-2021--2023&#34;&gt;Youtube/Twitch: Late 2021 ~ 2023&lt;/h1&gt;
&lt;p&gt;I really liked the hearts design at the time, but I remembered seeing the font I had used for the name, thinking I could do so much more with it.&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/scanline-2022.png&#34; alt=&#34;Scanline 2022 Logo&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;The end result ended up being this. This was and arguably still is my best personal logo, and I think it ended up being really difficult to top because I rocked it pretty much all through the COVID lockdown.&lt;/p&gt;
&lt;p&gt;The choice of pastel pink and blue made a return which is nice, and so did the bunny TV icons. I remember really focusing on symmetry, and the way the font made it really easy to connect strokes around, and imitate them with a basic brush tool. Also the only time I’ve gone to consult a colleague familiar with design on something I’ve made, because I must’ve felt that I had something a little more than a goofy logo with this one.&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/scan-heart-2022.jpg&#34; alt=&#34;Scanline 2022 Heart Logo&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;This one made it into the mix at some point too. It has a fairly edgy “midnight hotline” vibe to it thanks to the tight RGB shift. Making this definitely got me interested in modernized y2k stuff, and it has since become my primary style (original, I know). The line slice was a really fun way to play with the name again.&lt;/p&gt;
&lt;h1 id=&#34;systems-lab-2022--present&#34;&gt;Systems Lab: 2022 ~ Present&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/blossomnetwork.png&#34; alt=&#34;Blossomnetwork Captive Portal&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;The Blossom Network came about after I was looking for a fun hostname structure for virtual machines, servers, and other network devices, as my stack continued to grow.&lt;/p&gt;
&lt;p&gt;The servers in the “blossom network” are all named after flowers or plants. The network lets them blossom, you get it. It’s corny as fuck, but it’s been a cute way to give my logs and real time monitoring a little bit more life instead of “oh, there’s host-01 and VM690.”&lt;/p&gt;
&lt;p&gt;Mostly made out of public domain assets. It’s cute, I don’t mind it, and it only tends to get used internally.&lt;/p&gt;
&lt;h1 id=&#34;personal-blogweb-services-2023--2025&#34;&gt;Personal Blog/Web Services: 2023 ~ 2025&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/bitbouquet.png&#34; alt=&#34;BitBouquet Homepage&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;BitBouquet became a thing because I was teaching myself how to secure public, self-hosted webservers. Using a CMS like WordPress ended up being a really solid idea since I’m not a developer, and it gave me the level of customization I wanted. I ended up really enjoying playing with the website once I learned how to securely host it, so I kept it up for quite some time, only having moved on from it in place of hardclear. (the site youre on!)&lt;/p&gt;
&lt;p&gt;It’s really simple, but this is definitely one of my favourites. I may be biased to it because it was my first website, but the font choice for a name with the word “bit” was perfect due to its blocky look. It feels a little empty and is very hard to fit uniformly in branding because its super unbalanced.&lt;/p&gt;
&lt;h1 id=&#34;maplestory-server-2023--2025&#34;&gt;MapleStory Server: 2023 ~ 2025&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/sweetgum-registration.png&#34; alt=&#34;Sweetgum Registration Page&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;Sweetgum is the successor to my previous v83 private server project, Poinsettia. It’s still unfinished, and will be for a good while. It was going to be the eventual public release of the work that was done on Poinsettia but the colleagues I was working on this with are both busy with life, and I kind of am too.&lt;/p&gt;
&lt;p&gt;This login &amp;amp; registration page looks pretty nice though, ngl. I think I nailed the forest fairy vibe I was trying to go for, and being able to play around with Maplestory map artwork was a lot of fun. This one had a lot more planning behind it and wasn’t as sporadic as the others because I was working with others, and I think it shows??&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/sweetgum-leaf.jpg&#34; alt=&#34;Sweetgum Leaf&#34; class=&#34;right&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;The inspiration for the name “sweetgum,” and the forest-y green color scheme comes from the sweetgum leaf, which is considered to be the closest lookalike to a maple leaf in shape. They’re often confused for silver maple leaves, so I thought it was a funny nod to the fact that its a private server without having the use the words “Maple,” “Story,” or “MS.”&lt;/p&gt;
&lt;h1 id=&#34;youtube-2023--present&#34;&gt;Youtube: 2023 ~ Present&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/scan-youtube-2023.png&#34; alt=&#34;Scan Youtube Banner 2023&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;This is my most recent work. I don’t know why I really went down this direction, I’ve been obsessed with a house/trap/bass artist named Knock2, and I think his own logos and especially the logos of his label Night Mode gave me the itch to make something new.&lt;/p&gt;
&lt;p&gt;Using Solange felt incredibly daunting at first, but when I saw just how sick the lower case “S” instead of the uppercase one, I knew it was meant to be. Added some 3d transforming, waves, text paths, noise, y2k iconography and I was set. Kind of a banger??&lt;/p&gt;
&lt;h1 id=&#34;conclusion---most-of-it-sucks-and-thats-okay&#34;&gt;Conclusion - Most of it sucks, and that&amp;rsquo;s okay&lt;/h1&gt;
&lt;p&gt;I’m an amateur, and I always will be. I don’t plan on having that change, and I’m quite happy with that. This was not meant to be a showcase of my technical skill, because I don’t really know what it takes to have technical proficiency in design. Rather it’s been an exploration of things that I thought looked cool, and how I’ve represented my identity online. Something as stupid as a little twitch layout, or a banner has the ability to capture so much of who you were at the time.&lt;/p&gt;
&lt;p&gt;At the very least, I can confidently say that there was an improvement and that’s pretty cool! Looking back, there were some preferences I seemed to pick up very early. I really liked pinks, purples, and blues, and I had an obsession with drop shadows back then because they’re a cheap way to make anything look “decent.”&lt;/p&gt;
</content>
</item>
</channel>
</rss>

9
public/page/1/index.html Normal file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>http://localhost:1313/</title>
<link rel="canonical" href="http://localhost:1313/">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/">
</head>
</html>

0
public/posts/New Text Document.txt Normal file
View File

266
public/posts/about/index.html Normal file
View File

@@ -0,0 +1,266 @@
<!DOCTYPE html>
<html lang="en">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>About Me :: hardclear</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Once upon a time I ran a WordPress blog called BitBouquet. With the changing pace of my life, I made the decision to switch to a simple static site for my content.
Hello, I&#39;m Hazel. Nice to meet you! I love IT infrastructure! I believe that grasping the underlying technologies and systems that move peoples lives and businesses is an incredibly important asset in our modern age, and this blog serves as a testament to that mentality. I strongly believe in the power of FOSS, and the importance of self-hosting in this cloud-ridden, engagement obsessed, LLM-ified internet we all participate in.
" />
<meta name="keywords" content="" />
<meta name="robots" content="noodp" />
<link rel="canonical" href="http://localhost:1313/posts/about/" />
<link rel="stylesheet" href="http://localhost:1313/styles.css">
<link rel="shortcut icon" href="http://localhost:1313/img/theme-colors/red.png">
<link rel="apple-touch-icon" href="http://localhost:1313/img/theme-colors/red.png">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="" />
<meta name="twitter:creator" content="Scan" />
<meta property="og:locale" content="en" />
<meta property="og:type" content="article" />
<meta property="og:title" content="About Me">
<meta property="og:description" content="Once upon a time I ran a WordPress blog called BitBouquet. With the changing pace of my life, I made the decision to switch to a simple static site for my content.
Hello, I&#39;m Hazel. Nice to meet you! I love IT infrastructure! I believe that grasping the underlying technologies and systems that move peoples lives and businesses is an incredibly important asset in our modern age, and this blog serves as a testament to that mentality. I strongly believe in the power of FOSS, and the importance of self-hosting in this cloud-ridden, engagement obsessed, LLM-ified internet we all participate in.
" />
<meta property="og:url" content="http://localhost:1313/posts/about/" />
<meta property="og:site_name" content="hardclear" />
<meta property="og:image" content="http://localhost:1313/img/favicon/red.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="article:published_time" content="2026-04-09 00:00:00 &#43;0000 UTC" />
</head>
<body class="red">
<div class="container center headings--one-size">
<header class="header">
<div class="header__inner">
<div class="header__logo">
<a href="/">
<div class="logo">
hardclear
</div>
</a>
</div>
<ul class="menu menu--mobile">
<li class="menu__trigger">Menu&nbsp;▾</li>
<li>
<ul class="menu__dropdown">
<li><a href="/about">About</a></li>
<li><a href="/posts/identity">Identity</a></li>
</ul>
</li>
</ul>
</div>
<nav class="navigation-menu">
<ul class="navigation-menu__inner menu--desktop">
<li><a href="/about" >About</a></li>
<li><a href="/posts/identity" >Identity</a></li>
</ul>
</nav>
</header>
<div class="content">
<article class="post">
<h1 class="post-title">
<a href="http://localhost:1313/posts/about/">About Me</a>
</h1>
<div class="post-meta"><time class="post-date">2026-04-09</time><span class="post-author">Scan</span>
</div>
<div class="post-content"><div>
<p>Once upon a time I ran a WordPress blog called BitBouquet. With the changing pace of my life, I made the decision to switch to a simple static site for my content.</p>
<figure class="center" >
<img src="/img/scan.png" alt="Scan" style="border-radius: 8px;" />
<figcaption class="center" style="color: black;" >Hello, I'm Hazel. Nice to meet you!</figcaption>
</figure>
<p>I love IT infrastructure! I believe that grasping the underlying technologies and systems that move peoples lives and businesses is an incredibly important asset in our modern age,
and this blog serves as a testament to that mentality. I strongly believe in the power of FOSS, and the importance of self-hosting in this cloud-ridden, engagement obsessed,
LLM-ified internet we all participate in.</p>
<h4 id="a-brief-history">A brief history<a href="#a-brief-history" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h4>
<p>My journey with technology started after I graduated university with a bachelors degree in commerce, and a minor in economics.
Despite that, I somehow ended up working as a supervisor at a certain canadian computer store.</p>
<p>Through that job I re-discovered my love for computers and became interested in the deeper side of repair, and server technology. I started self-hosting a NAS,
and got involved in various online communities which helped expand that curiosity into a real job.</p>
<p>In 2023, I got a job with an MSP as tech, and eventually moved into an escalations role. It was an amazingly stressful job, with so many opportunities to learn.
When people joke that MSPs are like an IT bootcamp, they&rsquo;re not lying!</p>
<p>Fast forward to 2025, and I started an independant Japanese import arcade with my friends in Toronto. The business has grown to a point where I was able to quit my IT gig. We do contracts all around
Canada for various gaming and anime conventions, all while running a downtown storefront.</p>
<h4 id="projects">Projects<a href="#projects" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h4>
<ul>
<li>
<p>sweetgum: A stripped down v83 MapleStory server with a single map structure, designed explicitly to be a chatroom with a dress-up element.</p>
</li>
<li>
<p>bm2dnix: Continuation of the nixac project, a combination of utilities and scripts to aid in the process of running Beatmania IIDX on linux systems. (deprecated)</p>
</li>
<li>
<p>lycoris: A fully automated &amp; containerized self-managed media library hosted through Plex/Jellyfin.</p>
</li>
<li>
<p>bitbouquet: Former personal blog that housed all my tech ramblings and personal stories about identity and transition.
It used to run a public AI upscaler (waifu2x) that utilized a fancy CUDA container.</p>
</li>
<li>
<p>blossomworks: My multi-site, fully managed network stack. It hosts this website!</p>
</li>
</ul>
</div></div>
<div class="pagination">
<div class="pagination__title">
<span class="pagination__title-h">Read other posts</span>
<hr />
</div>
<div class="pagination__buttons">
<span class="button next">
<a href="http://localhost:1313/posts/identity/">
<span class="button__text">Identity through branding - my personal logos, banners, and designs from 2016 to 2023</span>
<span class="button__icon">→</span>
</a>
</span>
</div>
</div>
</article>
</div>
<footer class="footer">
<div class="footer__inner">
<div class="copyright copyright--user">
<span>© 2026 Blossom Network</span>
</div>
</div>
</footer>
<script type="text/javascript" src="/bundle.min.js"></script>
</div>
</body>
</html>

367
public/posts/identity/index.html Normal file
View File

@@ -0,0 +1,367 @@
<!DOCTYPE html>
<html lang="en">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>Identity through branding - my personal logos, banners, and designs from 2016 to 2023 :: hardclear</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=" Cathode (2020) by Combo For as long as I can remember, I’ve always enjoyed playing with photo editing software. Where most of my hobbies come and go, making silly little things for myself in photoshop has been a semi-regular activity on the computer since I’ve had my YouTube channel.
It’s always felt like sketching to me in the same way that people will doodle on their notebooks or play with coloring books to let their mind run. Most of my designs end up being sketches and only that. I was bored on the computer and had nothing better to do.
" />
<meta name="keywords" content="" />
<meta name="robots" content="noodp" />
<link rel="canonical" href="http://localhost:1313/posts/identity/" />
<link rel="stylesheet" href="http://localhost:1313/styles.css">
<link rel="shortcut icon" href="http://localhost:1313/img/favicon.ico">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="" />
<meta name="twitter:creator" content="Scan" />
<meta property="og:locale" content="en" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Identity through branding - my personal logos, banners, and designs from 2016 to 2023">
<meta property="og:description" content=" Cathode (2020) by Combo For as long as I can remember, I’ve always enjoyed playing with photo editing software. Where most of my hobbies come and go, making silly little things for myself in photoshop has been a semi-regular activity on the computer since I’ve had my YouTube channel.
It’s always felt like sketching to me in the same way that people will doodle on their notebooks or play with coloring books to let their mind run. Most of my designs end up being sketches and only that. I was bored on the computer and had nothing better to do.
" />
<meta property="og:url" content="http://localhost:1313/posts/identity/" />
<meta property="og:site_name" content="hardclear" />
<meta property="og:image" content="http://localhost:1313/img/favicon.ico">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="article:published_time" content="2023-05-09 00:00:00 &#43;0000 UTC" />
</head>
<body class="red">
<div class="container center headings--one-size">
<header class="header">
<div class="header__inner">
<div class="header__logo">
<a href="/">
<div class="logo">
hardclear
</div>
</a>
</div>
<ul class="menu menu--mobile">
<li class="menu__trigger">Menu&nbsp;▾</li>
<li>
<ul class="menu__dropdown">
<li><a href="/about">About</a></li>
<li><a href="https://git.bitbouquet.network/">Gitea</a></li>
</ul>
</li>
</ul>
</div>
<nav class="navigation-menu">
<ul class="navigation-menu__inner menu--desktop">
<li><a href="/about" >About</a></li>
<li><a href="https://git.bitbouquet.network/" >Gitea</a></li>
</ul>
</nav>
</header>
<div class="content">
<article class="post">
<h1 class="post-title">
<a href="http://localhost:1313/posts/identity/">Identity through branding - my personal logos, banners, and designs from 2016 to 2023</a>
</h1>
<div class="post-meta"><time class="post-date">2023-05-09</time><span class="post-author">Scan</span>
</div>
<div class="post-content"><div>
<p>
<figure class="left" >
<img src="/img/cathode.png" alt="Cathode by Combo" style="border-radius: 8px;" />
<figcaption class="center" style="color: black;" >Cathode (2020) by Combo</figcaption>
</figure>
For as long as I can remember, I’ve always enjoyed playing with photo editing software. Where most of my hobbies come and go, making silly little things for myself in photoshop has been a semi-regular activity on the computer since I’ve had my YouTube channel.</p>
<p>It’s always felt like sketching to me in the same way that people will doodle on their notebooks or play with coloring books to let their mind run. Most of my designs end up being sketches and only that. I was bored on the computer and had nothing better to do.</p>
<p>I’ve been uploading/streaming to YouTube and Twitch for 10+ years at this point and I treat it like a venue to express my identity rather than a platform to gain a following on.</p>
<h1 id="youtubetwitch-2016--2017">YouTube/Twitch: 2016 ~ 2017<a href="#youtubetwitch-2016--2017" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<img src="/img/haru-2016.jpg" alt="Haru 2016 Stream Layout" class="center" style="border-radius: 8px;" />
<p>These are the earliest stream layouts that I still have archived. There was definitely some previous stuff I’d made for myself at that point, but it’s all been lost to time. It’s mostly crude, unhinged usage of Gimp and poorly put together Maplestory and MLP edits. They were pretty bad, embarassing even, but I definitely thought they were super cool back then and that’s all that matters.</p>
<p>There’s only one remaining video from that era and it’s a Maplestory tutorial for Windows 7. I keep it up because I think it’s really cute, and it’s shows how interested I was in teaching people about software. Now I maintain servers and teach businesses how to use software professionally!</p>
<h1 id="youtubetwitch-2018">YouTube/Twitch: 2018<a href="#youtubetwitch-2018" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<img src="/img/haru-2018.jpg" alt="Haru 2018 Stream Layout" class="center" style="border-radius: 8px;" />
<p>Idols! Idols! Idols! This was around the time when I fell in love with the 2D idol game franchise THE iDOLM@STER. This one was kind of an improvement? I started learning how to use opacity more effectively.
This one definitely had a little more life. The now playing broke ALL THE TIME because rhythm games all had different ways of doing it, big pain in the butt. There was a Kancolle version of this layout that I also had used for some time,
which is where the texture for the name portion of the design came from!</p>
<img src="/img/haru-logo-2018.png" alt="Haru 2018 Logo" class="center" style="border-radius: 8px;" />
<p>I think this was the first time I achieved an “effect,” and I was pretty hooked. I really started to enjoy putting things together. Playing with fonts, icons, colours, and filters started to become a semi-regular activity.</p>
<h1 id="business-cards-2018">Business Cards: 2018<a href="#business-cards-2018" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<figure class="left" >
<img src="/img/haru-pcard.png" alt="Haru P-Card" style="border-radius: 8px;" />
<figcaption class="center" style="color: black;" >These were one of the coolest forms of self-expresison I've ever seen in a community.</figcaption>
</figure>
<p>I had this phase where I was making business cards for people, thanks iM@S community. I still have the one on the right buried in a pile of other producer cards. Not much to say about this one. It’s a little boring, and is pretty cookie cutter in terms of pcards. But I put a fair amount of effort into it,
and seeing it come to life once I got them printed to hand out to other producers was really awesome.</p>
<h1 id="youtubetwitch-2019">YouTube/Twitch: 2019<a href="#youtubetwitch-2019" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<img src="/img/harus-room-2019.jpg" alt="Haru 2018 Stream Layout" class="center" style="border-radius: 8px;" />
<p>This was the point at which I had started using the name “Haru’s Room.” It was meant to be a way to make the stream feel more close to the viewers/friends/family watching at home. I wanted to make it feel like you were hanging out in my room, I would rotate the stream around my desk, Beatmania IIDX, and retro console setups. It ended up being poorly executed, but it was definitely a fun idea and I ended up rolling with it for close to a year.</p>
<p>As for the design itself, it looked great but it was barely my own work. The background is a ripped scan from a Kors K album (its one of the xenna albums i cant remember the name), and our familiar friend Bebas Neue has made a return once again.</p>
<h1 id="youtubetwitch-2020">YouTube/Twitch: 2020<a href="#youtubetwitch-2020" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<p>Being a white person with a Japanese name online started to feel pretty embarrassing, so 2020 marked the birth of Scanline and it’s variations. It was far more representative of who I was as it’s a direct reference to the scanlines generated by retro TVs.</p>
<img src="/img/scanline-2020.png" alt="Scanline 2020 Stream Layout" class="center" style="border-radius: 8px;" />
<p>I really don’t want to talk about this one but for the sake of the timeline I’ll include it. This was honestly kinda lazy and I remember thinking it looked sick, probably because of the scanline effect on my name. Probably could’ve got way more imaginative with the layout but I was too focused on grinding stamina ITG. White backgrounds for streams make them unwatchable at night, something I clearly didnt take into consideration LMAO</p>
<h1 id="youtubetwitch-2021">YouTube/Twitch: 2021<a href="#youtubetwitch-2021" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<img src="/img/scanline-2021.gif" alt="Scanline 2021 Stream Layout" class="center" style="border-radius: 8px;" />
<p>Something about this felt like a step up. I started focusing more on cohesive designs that made use of a proper color palette. This was also my first time ever playing with After Effects, it didn’t really end up being for me as I’m not a huge video fx person but I ended up getting a pretty cool looping background! Respect to the people who use that software, I’m a little too dumb for it :’)</p>
<p>I didn’t get to make use of this layout for too long, and that was kind of unfortunate because it was really cute! The colour palette felt super warm and inviting, and it felt like the first time I used monochrome colors effectively. The soft, almost pink reds went incredibly well with Mershark’s drawing of my MapleLegends character Anode. I still use her quite a bit in my own branding,
she’s become a representation of myself instead of an MMO character at this point.</p>
<img src="/img/scanline-2021-layout.png" alt="Scanline 2021 Stream Layout" class="center" style="border-radius: 8px;" />
<p>I apologize for the sudden shift, but this was a pretty turbulent time in my life. I think it was a tough time for everybody, but covid became a really easy way for me to bury the gender dysphoria and coast along without any critical thought towards my future. I regret not coming out in 2019, but I got pretty consumed by playing MapleLegends day in and day out, and my characters filled a void that I was quite aware of, but I kind of just let it happen.</p>
<h1 id="maplelegends--finding-myself">MapleLegends &amp; finding myself<a href="#maplelegends--finding-myself" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<p>Let’s take a moment to talk about this silly little private Maplestory server, because it played a pretty instrumental role in my life, for better or for worse. Bittersweet is probably the best way to describe it.</p>
<p>There is a bit of a subculture within the Maplestory community of having a more distinct look through the use of paid cosmetics. In the private server scene it was even more heightened, since nx was free and the low population of players made it so everyone’s characters were distinguishable if you spent enough time hanging out in the market.</p>
<img src="/img/cathode_anode_stand.png" alt="Cathode & Anode" class="right" style="border-radius: 8px;" />
<p>I had a bit of a reputation for cute characters and I ended up being in charge of new cosmetics for 2 (maybe 3?) seasonal events when I served as staff. I also maintained a lot of the beauty parlor guides. I guess it was pretty eggy behaviour, now that I look back on it.</p>
<p>To clarify, not every person using an OC that’s not their gender should treat it as a sign that they’re trans, plenty of people do that and are very comfortable with who they are. With that being said, don’t hesitate to question it! Maybe it’s not as deep for you, and you like your OC simply for the sake of liking them. In my case Anode was a bit of a projection, but I was a little too lost at the time to come to terms with that.</p>
<p>
<img src="/img/anode_dany.jpg" alt="Scanline 2021 Stream Layout" class="center" style="border-radius: 8px;" />
<figure class="center" >
<img src="/img/blank.png" alt="Anode (2021) by Dany" style="border-radius: 8px;" />
<figcaption class="center" style="color: black;" >Thank you Dany, I wish I could tell you how much this drawing meant to me in the right context.</figcaption>
</figure>
</p>
<p>That aforementioned regret still exists, but I don’t feel as bitter about it anymore. I’m here now, and that’s all that matters.</p>
<h1 id="more-designs-2021">More designs: 2021<a href="#more-designs-2021" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<img src="/img/scanline-ytbanner-2021.png" alt="Scanline YouTube Banner 2021" class="center" style="border-radius: 8px;" />
<p>The adorable drawing above was done by Haiirojob (灰色), but I never got to utilize it to the same extent as mersharks drawing. Haiirojob’s artwork was beautiful on its own but a little too busy to reliably use with branding. Super cute as a profile picture or wallpaper though!</p>
<p>Also lets talk about that logo… this was my first and only attempt at working with Japanese kawaii pop fonts. I’ve tried my hand, and I just don’t think I’m very good at it. I think to get impactful “kawaii” branding that doesn’t look super cheap, you have to break out the sketchbook and pen tool. Hiiragi Ryo is a great example of this, and continues to be an inspiration for me.</p>
<img src="/img/scan-logo-2021.png" alt="Scanline Bow Logo" class="center" style="border-radius: 8px;" />
<p>I ended up doing some similar looking stuff, including an unfinished logo I was trying to make for a vtuber friend.</p>
<img src="/img/murasaki-logo.png" alt="Murasaki Ch. Logo" class="center" style="border-radius: 8px;" />
<p>I don’t think she would’ve liked it, this wasn’t really her aesthetic. I guess it was an alright attempt? Don’t know what I was thinking when I made that tail stroke LOL, didn’t look anything like the typeface I was working with.</p>
<h1 id="youtubetwitch-late-2021--2023">Youtube/Twitch: Late 2021 ~ 2023<a href="#youtubetwitch-late-2021--2023" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<p>I really liked the hearts design at the time, but I remembered seeing the font I had used for the name, thinking I could do so much more with it.</p>
<img src="/img/scanline-2022.png" alt="Scanline 2022 Logo" class="center" style="border-radius: 8px;" />
<p>The end result ended up being this. This was and arguably still is my best personal logo, and I think it ended up being really difficult to top because I rocked it pretty much all through the COVID lockdown.</p>
<p>The choice of pastel pink and blue made a return which is nice, and so did the bunny TV icons. I remember really focusing on symmetry, and the way the font made it really easy to connect strokes around, and imitate them with a basic brush tool. Also the only time I’ve gone to consult a colleague familiar with design on something I’ve made, because I must’ve felt that I had something a little more than a goofy logo with this one.</p>
<img src="/img/scan-heart-2022.jpg" alt="Scanline 2022 Heart Logo" class="center" style="border-radius: 8px;" />
<p>This one made it into the mix at some point too. It has a fairly edgy “midnight hotline” vibe to it thanks to the tight RGB shift. Making this definitely got me interested in modernized y2k stuff, and it has since become my primary style (original, I know). The line slice was a really fun way to play with the name again.</p>
<h1 id="systems-lab-2022--present">Systems Lab: 2022 ~ Present<a href="#systems-lab-2022--present" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<img src="/img/blossomnetwork.png" alt="Blossomnetwork Captive Portal" class="center" style="border-radius: 8px;" />
<p>The Blossom Network came about after I was looking for a fun hostname structure for virtual machines, servers, and other network devices, as my stack continued to grow.</p>
<p>The servers in the “blossom network” are all named after flowers or plants. The network lets them blossom, you get it. It’s corny as fuck, but it’s been a cute way to give my logs and real time monitoring a little bit more life instead of “oh, there’s host-01 and VM690.”</p>
<p>Mostly made out of public domain assets. It’s cute, I don’t mind it, and it only tends to get used internally.</p>
<h1 id="personal-blogweb-services-2023--2025">Personal Blog/Web Services: 2023 ~ 2025<a href="#personal-blogweb-services-2023--2025" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<img src="/img/bitbouquet.png" alt="BitBouquet Homepage" class="center" style="border-radius: 8px;" />
<p>BitBouquet became a thing because I was teaching myself how to secure public, self-hosted webservers. Using a CMS like WordPress ended up being a really solid idea since I’m not a developer, and it gave me the level of customization I wanted. I ended up really enjoying playing with the website once I learned how to securely host it, so I kept it up for quite some time, only having moved on from it in place of hardclear. (the site youre on!)</p>
<p>It’s really simple, but this is definitely one of my favourites. I may be biased to it because it was my first website, but the font choice for a name with the word “bit” was perfect due to its blocky look. It feels a little empty and is very hard to fit uniformly in branding because its super unbalanced.</p>
<h1 id="maplestory-server-2023--2025">MapleStory Server: 2023 ~ 2025<a href="#maplestory-server-2023--2025" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<img src="/img/sweetgum-registration.png" alt="Sweetgum Registration Page" class="center" style="border-radius: 8px;" />
<p>Sweetgum is the successor to my previous v83 private server project, Poinsettia. It’s still unfinished, and will be for a good while. It was going to be the eventual public release of the work that was done on Poinsettia but the colleagues I was working on this with are both busy with life, and I kind of am too.</p>
<p>This login &amp; registration page looks pretty nice though, ngl. I think I nailed the forest fairy vibe I was trying to go for, and being able to play around with Maplestory map artwork was a lot of fun. This one had a lot more planning behind it and wasn’t as sporadic as the others because I was working with others, and I think it shows??</p>
<img src="/img/sweetgum-leaf.jpg" alt="Sweetgum Leaf" class="right" style="border-radius: 8px;" />
<p>The inspiration for the name “sweetgum,” and the forest-y green color scheme comes from the sweetgum leaf, which is considered to be the closest lookalike to a maple leaf in shape. They’re often confused for silver maple leaves, so I thought it was a funny nod to the fact that its a private server without having the use the words “Maple,” “Story,” or “MS.”</p>
<h1 id="youtube-2023--present">Youtube: 2023 ~ Present<a href="#youtube-2023--present" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<img src="/img/scan-youtube-2023.png" alt="Scan Youtube Banner 2023" class="center" style="border-radius: 8px;" />
<p>This is my most recent work. I don’t know why I really went down this direction, I’ve been obsessed with a house/trap/bass artist named Knock2, and I think his own logos and especially the logos of his label Night Mode gave me the itch to make something new.</p>
<p>Using Solange felt incredibly daunting at first, but when I saw just how sick the lower case “S” instead of the uppercase one, I knew it was meant to be. Added some 3d transforming, waves, text paths, noise, y2k iconography and I was set. Kind of a banger??</p>
<h1 id="conclusion---most-of-it-sucks-and-thats-okay">Conclusion - Most of it sucks, and that&rsquo;s okay<a href="#conclusion---most-of-it-sucks-and-thats-okay" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<p>I’m an amateur, and I always will be. I don’t plan on having that change, and I’m quite happy with that. This was not meant to be a showcase of my technical skill, because I don’t really know what it takes to have technical proficiency in design. Rather it’s been an exploration of things that I thought looked cool, and how I’ve represented my identity online. Something as stupid as a little twitch layout, or a banner has the ability to capture so much of who you were at the time.</p>
<p>At the very least, I can confidently say that there was an improvement and that’s pretty cool! Looking back, there were some preferences I seemed to pick up very early. I really liked pinks, purples, and blues, and I had an obsession with drop shadows back then because they’re a cheap way to make anything look “decent.”</p>
</div></div>
</article>
</div>
<footer class="footer">
<div class="footer__inner">
<div class="copyright copyright--user">
<span>© 2026 Blossom Network</span>
</div>
</div>
</footer>
<script type="text/javascript" src="/bundle.min.js"></script>
</div>
</body>
</html>

227
public/posts/index.html Normal file
View File

@@ -0,0 +1,227 @@
<!DOCTYPE html>
<html lang="en">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>Posts :: hardclear</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="noodp" />
<link rel="canonical" href="http://localhost:1313/posts/" />
<link rel="stylesheet" href="http://localhost:1313/styles.css">
<link rel="shortcut icon" href="http://localhost:1313/img/favicon.ico">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="" />
<meta name="twitter:creator" content="" />
<meta property="og:locale" content="en" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Posts">
<meta property="og:description" content="" />
<meta property="og:url" content="http://localhost:1313/posts/" />
<meta property="og:site_name" content="hardclear" />
<meta property="og:image" content="http://localhost:1313/img/favicon.ico">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<link href="/posts/index.xml" rel="alternate" type="application/rss+xml" title="hardclear" />
</head>
<body class="red">
<div class="container center headings--one-size">
<header class="header">
<div class="header__inner">
<div class="header__logo">
<a href="/">
<div class="logo">
hardclear
</div>
</a>
</div>
<ul class="menu menu--mobile">
<li class="menu__trigger">Menu&nbsp;▾</li>
<li>
<ul class="menu__dropdown">
<li><a href="/about">About</a></li>
<li><a href="https://git.bitbouquet.network/">Gitea</a></li>
</ul>
</li>
</ul>
</div>
<nav class="navigation-menu">
<ul class="navigation-menu__inner menu--desktop">
<li><a href="/about" >About</a></li>
<li><a href="https://git.bitbouquet.network/" >Gitea</a></li>
</ul>
</nav>
</header>
<div class="content">
<div class="posts">
<article class="post on-list">
<h1 class="post-title">
<a href="http://localhost:1313/posts/identity/">Identity through branding - my personal logos, banners, and designs from 2016 to 2023</a>
</h1>
<div class="post-meta"><time class="post-date">2023-05-09</time><span class="post-author">Scan</span>
</div>
<div class="post-content">
<p>
<figure class="left" >
<img src="/img/cathode.png" alt="Cathode by Combo" style="border-radius: 8px;" />
<figcaption class="center" style="color: black;" >Cathode (2020) by Combo</figcaption>
</figure>
For as long as I can remember, I’ve always enjoyed playing with photo editing software. Where most of my hobbies come and go, making silly little things for myself in photoshop has been a semi-regular activity on the computer since I’ve had my YouTube channel.</p>
<p>It’s always felt like sketching to me in the same way that people will doodle on their notebooks or play with coloring books to let their mind run. Most of my designs end up being sketches and only that. I was bored on the computer and had nothing better to do.</p>
</div>
<div>
<a class="read-more button" href="/posts/identity/">Read more →</a>
</div>
</article>
<div class="pagination">
<div class="pagination__buttons">
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer__inner">
<div class="copyright copyright--user">
<span>© 2026 Blossom Network</span>
</div>
</div>
</footer>
<script type="text/javascript" src="/bundle.min.js"></script>
</div>
</body>
</html>

192
public/posts/index.xml Normal file
View File

@@ -0,0 +1,192 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Posts on hardclear</title>
<link>http://localhost:1313/posts/</link>
<description>Recent content in Posts on hardclear</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language>
<lastBuildDate>Tue, 09 May 2023 00:00:00 +0000</lastBuildDate><atom:link href="http://localhost:1313/posts/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>Identity through branding - my personal logos, banners, and designs from 2016 to 2023</title>
<link>http://localhost:1313/posts/identity/</link>
<pubDate>Tue, 09 May 2023 00:00:00 +0000</pubDate>
<guid>http://localhost:1313/posts/identity/</guid>
<description>&lt;p&gt;
&lt;figure class=&#34;left&#34; &gt;
&lt;img src=&#34;http://localhost:1313/img/cathode.png&#34; alt=&#34;Cathode by Combo&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;figcaption class=&#34;center&#34; style=&#34;color: black;&#34; &gt;Cathode (2020) by Combo&lt;/figcaption&gt;
&lt;/figure&gt;
For as long as I can remember, I’ve always enjoyed playing with photo editing software. Where most of my hobbies come and go, making silly little things for myself in photoshop has been a semi-regular activity on the computer since I’ve had my YouTube channel.&lt;/p&gt;
&lt;p&gt;It’s always felt like sketching to me in the same way that people will doodle on their notebooks or play with coloring books to let their mind run. Most of my designs end up being sketches and only that. I was bored on the computer and had nothing better to do.&lt;/p&gt;</description>
<content>&lt;p&gt;
&lt;figure class=&#34;left&#34; &gt;
&lt;img src=&#34;http://localhost:1313/img/cathode.png&#34; alt=&#34;Cathode by Combo&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;figcaption class=&#34;center&#34; style=&#34;color: black;&#34; &gt;Cathode (2020) by Combo&lt;/figcaption&gt;
&lt;/figure&gt;
For as long as I can remember, I’ve always enjoyed playing with photo editing software. Where most of my hobbies come and go, making silly little things for myself in photoshop has been a semi-regular activity on the computer since I’ve had my YouTube channel.&lt;/p&gt;
&lt;p&gt;It’s always felt like sketching to me in the same way that people will doodle on their notebooks or play with coloring books to let their mind run. Most of my designs end up being sketches and only that. I was bored on the computer and had nothing better to do.&lt;/p&gt;
&lt;p&gt;I’ve been uploading/streaming to YouTube and Twitch for 10+ years at this point and I treat it like a venue to express my identity rather than a platform to gain a following on.&lt;/p&gt;
&lt;h1 id=&#34;youtubetwitch-2016--2017&#34;&gt;YouTube/Twitch: 2016 ~ 2017&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/haru-2016.jpg&#34; alt=&#34;Haru 2016 Stream Layout&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;These are the earliest stream layouts that I still have archived. There was definitely some previous stuff I’d made for myself at that point, but it’s all been lost to time. It’s mostly crude, unhinged usage of Gimp and poorly put together Maplestory and MLP edits. They were pretty bad, embarassing even, but I definitely thought they were super cool back then and that’s all that matters.&lt;/p&gt;
&lt;p&gt;There’s only one remaining video from that era and it’s a Maplestory tutorial for Windows 7. I keep it up because I think it’s really cute, and it’s shows how interested I was in teaching people about software. Now I maintain servers and teach businesses how to use software professionally!&lt;/p&gt;
&lt;h1 id=&#34;youtubetwitch-2018&#34;&gt;YouTube/Twitch: 2018&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/haru-2018.jpg&#34; alt=&#34;Haru 2018 Stream Layout&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;Idols! Idols! Idols! This was around the time when I fell in love with the 2D idol game franchise THE iDOLM@STER. This one was kind of an improvement? I started learning how to use opacity more effectively.
This one definitely had a little more life. The now playing broke ALL THE TIME because rhythm games all had different ways of doing it, big pain in the butt. There was a Kancolle version of this layout that I also had used for some time,
which is where the texture for the name portion of the design came from!&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/haru-logo-2018.png&#34; alt=&#34;Haru 2018 Logo&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;I think this was the first time I achieved an “effect,” and I was pretty hooked. I really started to enjoy putting things together. Playing with fonts, icons, colours, and filters started to become a semi-regular activity.&lt;/p&gt;
&lt;h1 id=&#34;business-cards-2018&#34;&gt;Business Cards: 2018&lt;/h1&gt;
&lt;figure class=&#34;left&#34; &gt;
&lt;img src=&#34;http://localhost:1313/img/haru-pcard.png&#34; alt=&#34;Haru P-Card&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;figcaption class=&#34;center&#34; style=&#34;color: black;&#34; &gt;These were one of the coolest forms of self-expresison I&#39;ve ever seen in a community.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;I had this phase where I was making business cards for people, thanks iM@S community. I still have the one on the right buried in a pile of other producer cards. Not much to say about this one. It’s a little boring, and is pretty cookie cutter in terms of pcards. But I put a fair amount of effort into it,
and seeing it come to life once I got them printed to hand out to other producers was really awesome.&lt;/p&gt;
&lt;h1 id=&#34;youtubetwitch-2019&#34;&gt;YouTube/Twitch: 2019&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/harus-room-2019.jpg&#34; alt=&#34;Haru 2018 Stream Layout&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;This was the point at which I had started using the name “Haru’s Room.” It was meant to be a way to make the stream feel more close to the viewers/friends/family watching at home. I wanted to make it feel like you were hanging out in my room, I would rotate the stream around my desk, Beatmania IIDX, and retro console setups. It ended up being poorly executed, but it was definitely a fun idea and I ended up rolling with it for close to a year.&lt;/p&gt;
&lt;p&gt;As for the design itself, it looked great but it was barely my own work. The background is a ripped scan from a Kors K album (its one of the xenna albums i cant remember the name), and our familiar friend Bebas Neue has made a return once again.&lt;/p&gt;
&lt;h1 id=&#34;youtubetwitch-2020&#34;&gt;YouTube/Twitch: 2020&lt;/h1&gt;
&lt;p&gt;Being a white person with a Japanese name online started to feel pretty embarrassing, so 2020 marked the birth of Scanline and it’s variations. It was far more representative of who I was as it’s a direct reference to the scanlines generated by retro TVs.&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/scanline-2020.png&#34; alt=&#34;Scanline 2020 Stream Layout&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;I really don’t want to talk about this one but for the sake of the timeline I’ll include it. This was honestly kinda lazy and I remember thinking it looked sick, probably because of the scanline effect on my name. Probably could’ve got way more imaginative with the layout but I was too focused on grinding stamina ITG. White backgrounds for streams make them unwatchable at night, something I clearly didnt take into consideration LMAO&lt;/p&gt;
&lt;h1 id=&#34;youtubetwitch-2021&#34;&gt;YouTube/Twitch: 2021&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/scanline-2021.gif&#34; alt=&#34;Scanline 2021 Stream Layout&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;Something about this felt like a step up. I started focusing more on cohesive designs that made use of a proper color palette. This was also my first time ever playing with After Effects, it didn’t really end up being for me as I’m not a huge video fx person but I ended up getting a pretty cool looping background! Respect to the people who use that software, I’m a little too dumb for it :’)&lt;/p&gt;
&lt;p&gt;I didn’t get to make use of this layout for too long, and that was kind of unfortunate because it was really cute! The colour palette felt super warm and inviting, and it felt like the first time I used monochrome colors effectively. The soft, almost pink reds went incredibly well with Mershark’s drawing of my MapleLegends character Anode. I still use her quite a bit in my own branding,
she’s become a representation of myself instead of an MMO character at this point.&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/scanline-2021-layout.png&#34; alt=&#34;Scanline 2021 Stream Layout&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;I apologize for the sudden shift, but this was a pretty turbulent time in my life. I think it was a tough time for everybody, but covid became a really easy way for me to bury the gender dysphoria and coast along without any critical thought towards my future. I regret not coming out in 2019, but I got pretty consumed by playing MapleLegends day in and day out, and my characters filled a void that I was quite aware of, but I kind of just let it happen.&lt;/p&gt;
&lt;h1 id=&#34;maplelegends--finding-myself&#34;&gt;MapleLegends &amp;amp; finding myself&lt;/h1&gt;
&lt;p&gt;Let’s take a moment to talk about this silly little private Maplestory server, because it played a pretty instrumental role in my life, for better or for worse. Bittersweet is probably the best way to describe it.&lt;/p&gt;
&lt;p&gt;There is a bit of a subculture within the Maplestory community of having a more distinct look through the use of paid cosmetics. In the private server scene it was even more heightened, since nx was free and the low population of players made it so everyone’s characters were distinguishable if you spent enough time hanging out in the market.&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/cathode_anode_stand.png&#34; alt=&#34;Cathode &amp; Anode&#34; class=&#34;right&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;I had a bit of a reputation for cute characters and I ended up being in charge of new cosmetics for 2 (maybe 3?) seasonal events when I served as staff. I also maintained a lot of the beauty parlor guides. I guess it was pretty eggy behaviour, now that I look back on it.&lt;/p&gt;
&lt;p&gt;To clarify, not every person using an OC that’s not their gender should treat it as a sign that they’re trans, plenty of people do that and are very comfortable with who they are. With that being said, don’t hesitate to question it! Maybe it’s not as deep for you, and you like your OC simply for the sake of liking them. In my case Anode was a bit of a projection, but I was a little too lost at the time to come to terms with that.&lt;/p&gt;
&lt;p&gt;
&lt;img src=&#34;http://localhost:1313/img/anode_dany.jpg&#34; alt=&#34;Scanline 2021 Stream Layout&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;figure class=&#34;center&#34; &gt;
&lt;img src=&#34;http://localhost:1313/img/blank.png&#34; alt=&#34;Anode (2021) by Dany&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;figcaption class=&#34;center&#34; style=&#34;color: black;&#34; &gt;Thank you Dany, I wish I could tell you how much this drawing meant to me in the right context.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p&gt;That aforementioned regret still exists, but I don’t feel as bitter about it anymore. I’m here now, and that’s all that matters.&lt;/p&gt;
&lt;h1 id=&#34;more-designs-2021&#34;&gt;More designs: 2021&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/scanline-ytbanner-2021.png&#34; alt=&#34;Scanline YouTube Banner 2021&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;The adorable drawing above was done by Haiirojob (灰色), but I never got to utilize it to the same extent as mersharks drawing. Haiirojob’s artwork was beautiful on its own but a little too busy to reliably use with branding. Super cute as a profile picture or wallpaper though!&lt;/p&gt;
&lt;p&gt;Also lets talk about that logo… this was my first and only attempt at working with Japanese kawaii pop fonts. I’ve tried my hand, and I just don’t think I’m very good at it. I think to get impactful “kawaii” branding that doesn’t look super cheap, you have to break out the sketchbook and pen tool. Hiiragi Ryo is a great example of this, and continues to be an inspiration for me.&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/scan-logo-2021.png&#34; alt=&#34;Scanline Bow Logo&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;I ended up doing some similar looking stuff, including an unfinished logo I was trying to make for a vtuber friend.&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/murasaki-logo.png&#34; alt=&#34;Murasaki Ch. Logo&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;I don’t think she would’ve liked it, this wasn’t really her aesthetic. I guess it was an alright attempt? Don’t know what I was thinking when I made that tail stroke LOL, didn’t look anything like the typeface I was working with.&lt;/p&gt;
&lt;h1 id=&#34;youtubetwitch-late-2021--2023&#34;&gt;Youtube/Twitch: Late 2021 ~ 2023&lt;/h1&gt;
&lt;p&gt;I really liked the hearts design at the time, but I remembered seeing the font I had used for the name, thinking I could do so much more with it.&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/scanline-2022.png&#34; alt=&#34;Scanline 2022 Logo&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;The end result ended up being this. This was and arguably still is my best personal logo, and I think it ended up being really difficult to top because I rocked it pretty much all through the COVID lockdown.&lt;/p&gt;
&lt;p&gt;The choice of pastel pink and blue made a return which is nice, and so did the bunny TV icons. I remember really focusing on symmetry, and the way the font made it really easy to connect strokes around, and imitate them with a basic brush tool. Also the only time I’ve gone to consult a colleague familiar with design on something I’ve made, because I must’ve felt that I had something a little more than a goofy logo with this one.&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/scan-heart-2022.jpg&#34; alt=&#34;Scanline 2022 Heart Logo&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;This one made it into the mix at some point too. It has a fairly edgy “midnight hotline” vibe to it thanks to the tight RGB shift. Making this definitely got me interested in modernized y2k stuff, and it has since become my primary style (original, I know). The line slice was a really fun way to play with the name again.&lt;/p&gt;
&lt;h1 id=&#34;systems-lab-2022--present&#34;&gt;Systems Lab: 2022 ~ Present&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/blossomnetwork.png&#34; alt=&#34;Blossomnetwork Captive Portal&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;The Blossom Network came about after I was looking for a fun hostname structure for virtual machines, servers, and other network devices, as my stack continued to grow.&lt;/p&gt;
&lt;p&gt;The servers in the “blossom network” are all named after flowers or plants. The network lets them blossom, you get it. It’s corny as fuck, but it’s been a cute way to give my logs and real time monitoring a little bit more life instead of “oh, there’s host-01 and VM690.”&lt;/p&gt;
&lt;p&gt;Mostly made out of public domain assets. It’s cute, I don’t mind it, and it only tends to get used internally.&lt;/p&gt;
&lt;h1 id=&#34;personal-blogweb-services-2023--2025&#34;&gt;Personal Blog/Web Services: 2023 ~ 2025&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/bitbouquet.png&#34; alt=&#34;BitBouquet Homepage&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;BitBouquet became a thing because I was teaching myself how to secure public, self-hosted webservers. Using a CMS like WordPress ended up being a really solid idea since I’m not a developer, and it gave me the level of customization I wanted. I ended up really enjoying playing with the website once I learned how to securely host it, so I kept it up for quite some time, only having moved on from it in place of hardclear. (the site youre on!)&lt;/p&gt;
&lt;p&gt;It’s really simple, but this is definitely one of my favourites. I may be biased to it because it was my first website, but the font choice for a name with the word “bit” was perfect due to its blocky look. It feels a little empty and is very hard to fit uniformly in branding because its super unbalanced.&lt;/p&gt;
&lt;h1 id=&#34;maplestory-server-2023--2025&#34;&gt;MapleStory Server: 2023 ~ 2025&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/sweetgum-registration.png&#34; alt=&#34;Sweetgum Registration Page&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;Sweetgum is the successor to my previous v83 private server project, Poinsettia. It’s still unfinished, and will be for a good while. It was going to be the eventual public release of the work that was done on Poinsettia but the colleagues I was working on this with are both busy with life, and I kind of am too.&lt;/p&gt;
&lt;p&gt;This login &amp;amp; registration page looks pretty nice though, ngl. I think I nailed the forest fairy vibe I was trying to go for, and being able to play around with Maplestory map artwork was a lot of fun. This one had a lot more planning behind it and wasn’t as sporadic as the others because I was working with others, and I think it shows??&lt;/p&gt;
&lt;img src=&#34;http://localhost:1313/img/sweetgum-leaf.jpg&#34; alt=&#34;Sweetgum Leaf&#34; class=&#34;right&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;The inspiration for the name “sweetgum,” and the forest-y green color scheme comes from the sweetgum leaf, which is considered to be the closest lookalike to a maple leaf in shape. They’re often confused for silver maple leaves, so I thought it was a funny nod to the fact that its a private server without having the use the words “Maple,” “Story,” or “MS.”&lt;/p&gt;
&lt;h1 id=&#34;youtube-2023--present&#34;&gt;Youtube: 2023 ~ Present&lt;/h1&gt;
&lt;img src=&#34;http://localhost:1313/img/scan-youtube-2023.png&#34; alt=&#34;Scan Youtube Banner 2023&#34; class=&#34;center&#34; style=&#34;border-radius: 8px;&#34; /&gt;
&lt;p&gt;This is my most recent work. I don’t know why I really went down this direction, I’ve been obsessed with a house/trap/bass artist named Knock2, and I think his own logos and especially the logos of his label Night Mode gave me the itch to make something new.&lt;/p&gt;
&lt;p&gt;Using Solange felt incredibly daunting at first, but when I saw just how sick the lower case “S” instead of the uppercase one, I knew it was meant to be. Added some 3d transforming, waves, text paths, noise, y2k iconography and I was set. Kind of a banger??&lt;/p&gt;
&lt;h1 id=&#34;conclusion---most-of-it-sucks-and-thats-okay&#34;&gt;Conclusion - Most of it sucks, and that&amp;rsquo;s okay&lt;/h1&gt;
&lt;p&gt;I’m an amateur, and I always will be. I don’t plan on having that change, and I’m quite happy with that. This was not meant to be a showcase of my technical skill, because I don’t really know what it takes to have technical proficiency in design. Rather it’s been an exploration of things that I thought looked cool, and how I’ve represented my identity online. Something as stupid as a little twitch layout, or a banner has the ability to capture so much of who you were at the time.&lt;/p&gt;
&lt;p&gt;At the very least, I can confidently say that there was an improvement and that’s pretty cool! Looking back, there were some preferences I seemed to pick up very early. I really liked pinks, purples, and blues, and I had an obsession with drop shadows back then because they’re a cheap way to make anything look “decent.”&lt;/p&gt;
</content>
</item>
</channel>
</rss>

9
public/posts/page/1/index.html Normal file
View File

@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>http://localhost:1313/posts/</title>
<link rel="canonical" href="http://localhost:1313/posts/">
<meta charset="utf-8">
<meta http-equiv="refresh" content="0; url=http://localhost:1313/posts/">
</head>
</html>

275
public/showcase/index.html Normal file
View File

@@ -0,0 +1,275 @@
<!DOCTYPE html>
<html lang="en">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>Showcase :: hardclear</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Features in updates native CSS variables showcase Header 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur ipsum dui, aliquet nec commodo at, tristique eget ante. Donec quis dolor nec nunc mollis interdum vel in purus. Sed vitae leo scelerisque, sollicitudin elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.
" />
<meta name="keywords" content="" />
<meta name="robots" content="noodp" />
<link rel="canonical" href="http://localhost:1313/showcase/" />
<link rel="stylesheet" href="http://localhost:1313/styles.css">
<link rel="shortcut icon" href="http://localhost:1313/img/theme-colors/red.png">
<link rel="apple-touch-icon" href="http://localhost:1313/img/theme-colors/red.png">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="" />
<meta name="twitter:creator" content="Hello Robot" />
<meta property="og:locale" content="en" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Showcase">
<meta property="og:description" content="Features in updates native CSS variables showcase Header 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur ipsum dui, aliquet nec commodo at, tristique eget ante. Donec quis dolor nec nunc mollis interdum vel in purus. Sed vitae leo scelerisque, sollicitudin elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.
" />
<meta property="og:url" content="http://localhost:1313/showcase/" />
<meta property="og:site_name" content="hardclear" />
<meta property="og:image" content="http://localhost:1313/img/favicon/red.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="article:published_time" content="2018-07-18 00:00:00 &#43;0000 UTC" />
</head>
<body class="red">
<div class="container center headings--one-size">
<header class="header">
<div class="header__inner">
<div class="header__logo">
<a href="/">
<div class="logo">
hardclear
</div>
</a>
</div>
<ul class="menu menu--mobile">
<li class="menu__trigger">Menu&nbsp;▾</li>
<li>
<ul class="menu__dropdown">
<li><a href="/about">About</a></li>
<li><a href="/posts/identity">Identity</a></li>
</ul>
</li>
</ul>
</div>
<nav class="navigation-menu">
<ul class="navigation-menu__inner menu--desktop">
<li><a href="/about" >About</a></li>
<li><a href="/posts/identity" >Identity</a></li>
</ul>
</nav>
</header>
<div class="content">
<article class="post">
<h1 class="post-title">
<a href="http://localhost:1313/showcase/">Showcase</a>
</h1>
<div class="post-meta"><time class="post-date">2018-07-18</time><span class="post-author">Hello Robot</span>
</div>
<div class="post-content"><div>
<h1 id="features-in-updates">Features in updates<a href="#features-in-updates" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h1>
<ul>
<li><a href="/posts/css-vars/">native CSS variables showcase</a></li>
</ul>
<h2 id="header-2">Header 2<a href="#header-2" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur ipsum dui, aliquet nec commodo at, tristique eget ante. <strong>Donec quis dolor nec nunc mollis interdum vel in purus</strong>. Sed vitae leo scelerisque, sollicitudin elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.</p>
<blockquote>
<p>Fusce pharetra suscipit orci nec tempor. Quisque vitae sem sit amet sem mollis consequat. Sed at imperdiet lorem. Vestibulum pharetra faucibus odio, ac feugiat tellus sollicitudin at. Pellentesque varius tristique mi imperdiet dapibus. Duis orci odio, sodales lacinia venenatis sit amet, feugiat et diam.</p>
</blockquote>
<h3 id="header-3">Header 3<a href="#header-3" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h3>
<p>Nulla libero turpis, lacinia vitae cursus ut, auctor dictum nisl. Fusce varius felis nec sem ullamcorper, at convallis nisi vestibulum. Duis risus odio, porta sit amet placerat mollis, tincidunt non mauris. Suspendisse fringilla, <code>odio a dignissim pharetra</code>, est urna sollicitudin urna, eu scelerisque magna ex vitae tellus.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#75715e">/* PostCSS code */</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">pre</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">#1a1a1d</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding</span>: <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-size</span>: <span style="color:#ae81ff">1</span><span style="color:#66d9ef">rem</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">overflow</span>: <span style="color:#66d9ef">auto</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#960050;background-color:#1e0010">@media</span> <span style="color:#960050;background-color:#1e0010">($phone)</span> <span style="color:#960050;background-color:#1e0010">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">white-space</span>: <span style="color:#66d9ef">pre-wrap</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">word-wrap</span>: <span style="color:#66d9ef">break-word</span>;
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672">code</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#66d9ef">none</span> <span style="color:#75715e">!important</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#ae81ff">#ccc</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">padding</span>: <span style="color:#ae81ff">0</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-size</span>: <span style="color:#66d9ef">inherit</span>;
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">}</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#75715e">// JS code
</span></span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">menuTrigger</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#39;.menu-trigger&#39;</span>)
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">menu</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#39;.menu&#39;</span>)
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">mobileQuery</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">getComputedStyle</span>(document.<span style="color:#a6e22e">body</span>).<span style="color:#a6e22e">getPropertyValue</span>(<span style="color:#e6db74">&#39;--phoneWidth&#39;</span>)
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">isMobile</span> <span style="color:#f92672">=</span> () =&gt; window.<span style="color:#a6e22e">matchMedia</span>(<span style="color:#a6e22e">mobileQuery</span>).<span style="color:#a6e22e">matches</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">isMobileMenu</span> <span style="color:#f92672">=</span> () =&gt; {
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">menuTrigger</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">toggle</span>(<span style="color:#e6db74">&#39;hidden&#39;</span>, <span style="color:#f92672">!</span><span style="color:#a6e22e">isMobile</span>())
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">menu</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">toggle</span>(<span style="color:#e6db74">&#39;hidden&#39;</span>, <span style="color:#a6e22e">isMobile</span>())
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">isMobileMenu</span>()
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">menuTrigger</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;click&#39;</span>, () =&gt; <span style="color:#a6e22e">menu</span>.<span style="color:#a6e22e">classList</span>.<span style="color:#a6e22e">toggle</span>(<span style="color:#e6db74">&#39;hidden&#39;</span>))
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>window.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;resize&#39;</span>, <span style="color:#a6e22e">isMobileMenu</span>)
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#75715e">&lt;!-- HTML code --&gt;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">section</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;main&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">h1</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;title&#34;</span>&gt;{{ .Title }}&lt;/<span style="color:#f92672">h1</span>&gt;
</span></span><span style="display:flex;"><span> {{ range .Pages }}
</span></span><span style="display:flex;"><span> {{ .Render &#34;summary&#34;}}
</span></span><span style="display:flex;"><span> {{ end }}
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">section</span>&gt;
</span></span></code></pre></div><h4 id="header-4">Header 4<a href="#header-4" class="hanchor" ariaLabel="Anchor">&#8983;</a> </h4>
<p>Curabitur scelerisque felis viverra varius scelerisque. Ut enim libero, molestie gravida blandit at, mollis ornare tellus. Cras arcu mi, ultrices vel pulvinar vel, volutpat eu tortor. Nullam nec eros quis massa ultrices iaculis sed in metus. Praesent sollicitudin sem sit amet orci tempor gravida.</p>
<ul>
<li>Maecenas elementum vitae nibh vitae porttitor.</li>
<li>Aenean consequat, risus ut cursus placerat, arcu nulla sodales risus, ut molestie tellus tellus et dui.</li>
<li>Integer imperdiet turpis vitae lacus imperdiet, ut ornare ligula auctor. Integer in mi eu velit vehicula suscipit eget vulputate nulla.</li>
<li>Etiam vitae enim quis velit lobortis placerat a ut sem.
<ul>
<li>Curabitur lobortis ante sit amet orci pulvinar, sollicitudin viverra nunc accumsan.</li>
<li>Praesent fermentum orci quis leo facilisis posuere.</li>
</ul>
</li>
</ul>
<p>Aliquam erat volutpat. In hac habitasse platea dictumst. Nunc ut tincidunt mauris. Sed at gravida risus, id semper magna. Nullam vitae enim mattis, sodales neque non, pharetra elit. Cras sit amet sagittis augue, et finibus turpis. Ut tempus tincidunt diam vel pharetra. Nulla porttitor odio sit amet nulla scelerisque, quis aliquam mi imperdiet. Sed tincidunt dui vel tellus vestibulum rhoncus. Donec tempus ultrices velit.</p>
</div></div>
</article>
</div>
<footer class="footer">
<div class="footer__inner">
<div class="copyright copyright--user">
<span>© 2026 Blossom Network</span>
</div>
</div>
</footer>
<script type="text/javascript" src="/bundle.min.js"></script>
</div>
</body>
</html>

21
public/sitemap.xml Normal file
View File

@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://localhost:1313/about/</loc>
<lastmod>2026-04-09T00:00:00+00:00</lastmod>
</url><url>
<loc>http://localhost:1313/</loc>
<lastmod>2026-04-09T00:00:00+00:00</lastmod>
</url><url>
<loc>http://localhost:1313/posts/identity/</loc>
<lastmod>2023-05-09T00:00:00+00:00</lastmod>
</url><url>
<loc>http://localhost:1313/posts/</loc>
<lastmod>2023-05-09T00:00:00+00:00</lastmod>
</url><url>
<loc>http://localhost:1313/categories/</loc>
</url><url>
<loc>http://localhost:1313/tags/</loc>
</url>
</urlset>

4
public/styles.css Normal file
View File

File diff suppressed because one or more lines are too long

47
public/styles.css.map Normal file
View File

File diff suppressed because one or more lines are too long

185
public/tags/index.html Normal file
View File

@@ -0,0 +1,185 @@
<!DOCTYPE html>
<html lang="en">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<title>Tags :: hardclear</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="noodp" />
<link rel="canonical" href="http://localhost:1313/tags/" />
<link rel="stylesheet" href="http://localhost:1313/styles.css">
<link rel="shortcut icon" href="http://localhost:1313/img/favicon.ico">
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="" />
<meta name="twitter:creator" content="" />
<meta property="og:locale" content="en" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Tags">
<meta property="og:description" content="" />
<meta property="og:url" content="http://localhost:1313/tags/" />
<meta property="og:site_name" content="hardclear" />
<meta property="og:image" content="http://localhost:1313/img/favicon.ico">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<link href="/tags/index.xml" rel="alternate" type="application/rss+xml" title="hardclear" />
</head>
<body class="red">
<div class="container center headings--one-size">
<header class="header">
<div class="header__inner">
<div class="header__logo">
<a href="/">
<div class="logo">
hardclear
</div>
</a>
</div>
<ul class="menu menu--mobile">
<li class="menu__trigger">Menu&nbsp;▾</li>
<li>
<ul class="menu__dropdown">
<li><a href="/about">About</a></li>
<li><a href="https://git.bitbouquet.network/">Gitea</a></li>
</ul>
</li>
</ul>
</div>
<nav class="navigation-menu">
<ul class="navigation-menu__inner menu--desktop">
<li><a href="/about" >About</a></li>
<li><a href="https://git.bitbouquet.network/" >Gitea</a></li>
</ul>
</nav>
</header>
<div class="content">
<div class="terms">
<h1>Tags</h1>
<ul>
</ul>
</div>
</div>
<footer class="footer">
<div class="footer__inner">
<div class="copyright copyright--user">
<span>© 2026 Blossom Network</span>
</div>
</div>
</footer>
<script type="text/javascript" src="/bundle.min.js"></script>
</div>
</body>
</html>

10
public/tags/index.xml Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Tags on hardclear</title>
<link>http://localhost:1313/tags/</link>
<description>Recent content in Tags on hardclear</description>
<generator>Hugo -- gohugo.io</generator>
<language>en-us</language><atom:link href="http://localhost:1313/tags/index.xml" rel="self" type="application/rss+xml" />
</channel>
</rss>

4
resources/_gen/assets/css/base.scss_983d0fd8c6b35648423ca86087665cef.content Normal file
View File

File diff suppressed because one or more lines are too long

1
resources/_gen/assets/css/base.scss_983d0fd8c6b35648423ca86087665cef.json Normal file
View File

@@ -0,0 +1 @@
{"Target":"styles.css","MediaType":"text/css","Data":{}}

7
themes/re-terminal/.babelrc Normal file
View File

@@ -0,0 +1,7 @@
{
"presets": [
["@babel/preset-env", {
"targets": "last 2 versions, >1%, not dead"
}],
],
}

60
themes/re-terminal/.eslintrc.yml Normal file
View File

@@ -0,0 +1,60 @@
---
env:
es6: true
extends:
# https://github.com/airbnb/javascript
- airbnb
- eslint:recommended
- prettier
parser: babel-eslint
rules:
# best practices
arrow-parens:
- 2
- as-needed
semi:
- 2
- always
class-methods-use-this: 0
comma-dangle:
- 2
- always-multiline
no-console:
- 2
no-unused-expressions: 0
no-param-reassign:
- 2
- props: false
no-useless-escape: 0
func-names: 0
quotes:
- 2
- double
- allowTemplateLiterals: true
no-underscore-dangle: 0
object-curly-newline: 0
function-paren-newline: 0
operator-linebreak:
- 2
- after
no-unused-vars:
- 2
- argsIgnorePattern: "^_"
# jsx a11y
jsx-a11y/no-static-element-interactions: 0
jsx-a11y/anchor-is-valid:
- 2
- specialLink:
- to
globals:
document: true
requestAnimationFrame: true
window: true
self: true
fetch: true
Headers: true

99
themes/re-terminal/.gitignore vendored Normal file
View File

@@ -0,0 +1,99 @@
# Created by https://www.gitignore.io/api/node
# Edit at https://www.gitignore.io/?templates=node
# firebase
.firebase
# mac
**/.DS_Store
### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# End of https://www.gitignore.io/api/node
public
resources
.hugo_build.lock

1
themes/re-terminal/.husky/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
_

4
themes/re-terminal/.husky/pre-push Normal file
View File

@@ -0,0 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn build && git add . && git commit --amend --no-edit

Some files were not shown because too many files have changed in this diff Show More