leilukin-site/blog/posts/index.html

694 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" dir="ltr" id="top">
<head>
<meta property="og:title" content="Blog Archive">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Leilukin">
<meta name="description" content="Archive of blog posts on Leilukin's Hub">
<meta name="generator" content="Eleventy v3.0.0">
<meta property="og:type" content="website">
<meta property="og:url" content="https://leilukin.com/blog/posts/">
<meta property="og:site_name" content="Leilukin's Hub">
<meta property="og:locale" content="en_MY">
<meta property="og:description" content="Archive of blog posts on Leilukin's Hub">
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://leilukin.com/blog/posts/">
<meta name="twitter:description" content="Archive of blog posts on Leilukin's Hub">
<link rel="canonical" href="https://leilukin.com/blog/posts/">
<link rel="alternate" type="application/rss+xml" title="Leilukin&#39;s Hub" href="/feed.xml">
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-display: swap;
font-family: 'Lexend';
font-style: normal;
font-weight: 400;
src: url('/assets/fonts/lexend/lexend-v19-latin-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Lexend';
font-style: normal;
font-weight: 600;
src: url('/assets/fonts/lexend/lexend-v19-latin-600.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Lexend';
font-style: normal;
font-weight: 700;
src: url('/assets/fonts/lexend/lexend-v19-latin-700.woff2') format('woff2');
}
</style>
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/a11y-syntax-highlighting-dark.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
<style>.blog__postlist {
display: grid;
gap: 1em;
padding-left: 1em;
}
.blog__postlist--title {
font-size: clamp(1.55rem, 1rem + 3vw, 1.3rem);
line-height: 1.3;
margin-bottom: 0.2em;
}
.content__nav {
padding: 1.2em clamp(1em, 5%, 1.5em);
background-color: var(--clr-content-bg);
}
.content__nav--title {
font-size: 1.7rem;
}
.breadcrumbs {
list-style-type: "";
padding: 0;
margin: 0 0 0.7em 0;
display: flex;
gap: 0.5em;
flex-wrap: wrap;
justify-content: center;
}
.breadcrumbs li::after {
content: '➔';
padding-left: 0.3em;
}
.article__info--desc { margin-bottom: 1em; }
.blog__post--pagination {
padding-top: 1em;
margin-top: 2.5em;
border-top: 0.1em solid var(--clr-title-border);
}
.blog__post--nextprev {
list-style-type: "";
padding: 0;
margin: 0;
display: grid;
gap: 0.7em;
grid-template-columns: repeat(2, 1fr);
grid-template-areas: 'prev next';
}
.blog__post--prev { grid-area: prev; }
.blog__post--next { grid-area: next; }
.hero img { filter:
drop-shadow(0.1rem 0.1rem 0.2rem black)
drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
; }
.hero {
width: 100%;
background-color: var(--clr-hero-bg);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.hero__top-bar {
background-color: var(--clr-navbar-bg);
width: 100%;
padding: 0.5em 0.7em;
}
.hero__img {
display: grid;
place-content: center;
}
.hero img {
object-fit: contain;
overflow: hidden;
max-height: 16rem;
}
.navbar {
background: var(--clr-navbar-bg);
width: 100%;
z-index: 998;
position: sticky;
top: 0;
padding: 0.6em;
}
.navbar__menu {
list-style-type: "";
margin: 0;
padding: 0;
display: flex;
gap: 1em;
flex-wrap: wrap;
text-align: center;
}
.navbar__menu a {
color: var(--clr-navbar-link);
text-decoration: none;
cursor: pointer;
display: inline-block;
}
.navbar__menu a:hover { color: var(--clr-link-hover); }
.navbar__menu a:focus { outline-offset: 0.2em; }
.navbar__links {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
gap: 0.5em;
}
.navbar__toggle {
background-color: inherit;
color: var(--clr-navbar-link);
border: none;
padding: 0;
font-size: 1.25rem;
font-weight: 700;
display: none;
align-items: center;
gap: 0.3em;
}
.navbar__toggle svg { fill: currentColor; }
.navbar__toggle:focus,
.navbar__menu a:focus { outline-offset: 0.1em; }
.navbar__toggle:focus,
.navbar__menu a:focus { outline: 0.15em solid var(--clr-navbar-link); }
.navbar__popover {
background-color: var(--clr-navbar-bg);
border: 0.15em solid var(--clr-navbar-link);
padding: 1.5em;
max-width: 85%;
}
.navbar__popover::backdrop {
background-color: black;
opacity: 0.5;
}
@supports selector([popover]) {
.navbar__toggle { display: flex; }
.navbar__links { display: none; }
}
/* Tablet screen size */
@media only screen and (min-width: 43.75rem) {
.navbar { padding: 1em 0.6em; }
.navbar__toggle, .navbar__popover { display: none; }
.navbar__links { display: flex; }
}
.top-btn,
.top-btn:hover {
color: var(--clr-top-btn-txt);
text-decoration: none;
}
.top-btn {
position: fixed;
bottom: 0.5rem;
right: 0.5rem;
z-index: 999;
background-color: var(--clr-top-btn-bg);
display: flex;
align-items: center;
border-radius: 50em;
padding: 0.3em 0.5em;
gap: 0.2em;
}
.top-btn:focus {
outline: 0.25em solid var(--clr-top-btn-bg);
outline-offset: 0.15em;
}
.top-btn__arrow {
display: inline-block;
width: 1em;
aspect-ratio: 1 / 1;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
:root { --footer-gap: 0.5em; }
.footer {
margin-top: auto;
width: 100%;
background: var(--clr-main-footer-bg);
padding: 1.5rem 1rem clamp(1.5rem, calc(100% - 1.5rem), 3.5rem);
text-align: center;
display: grid;
gap: var(--footer-gap);
}
.footer__links,
.footer__shrines {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: var(--footer-gap);
}
.footer__links { justify-self: center; }
.footer__shrines { align-self: center; }</style>
<link rel="icon" sizes="32x32" href="/assets/favicon/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/assets/favicon/leilukin-bee-favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<link rel="me" href="mailto:contact@leilukin.com">
<link rel="me" href="https://dragonscave.space/@Leilukin">
<link rel="me" href="https://github.com/Leilukin">
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
<script src="/assets/js/MnPoD-suxd.js" defer></script>
<title>
Blog Archive | Leilukin's Hub
</title>
</head>
<body>
<div class="skip-btn"><a href="#content">Skip to content</a></div>
<header class="hero">
<div class="hero__top-bar hidden"></div>
<div class="hero__img">
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub" width="900" height="300">
</div>
</header>
<nav class="navbar" aria-labelledby="top-level-nav-title">
<h2 class="visually-hidden" id="top-level-nav-title">Top Level</h2>
<ul class="navbar__menu navbar__links">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about/">About</a>
</li>
<li>
<a href="/now/">Now</a>
</li>
<li>
<a href="/blog/">Blog</a>
</li>
<li>
<a href="/articles/">Articles</a>
</li>
<li>
<a href="/projects/">Projects</a>
</li>
<li>
<a href="/shrines/">Shrines</a>
</li>
<li>
<a href="/adoptables/">Adoptables</a>
</li>
<li>
<a href="/links/">Links</a>
</li>
<li>
<a href="/guestbook/">Guestbook</a>
</li>
</ul>
<button class="navbar__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
Navigation
</button>
</nav>
<div popover id="nav-menu" class="navbar__popover">
<ul class="navbar__menu">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about/">About</a>
</li>
<li>
<a href="/now/">Now</a>
</li>
<li>
<a href="/blog/">Blog</a>
</li>
<li>
<a href="/articles/">Articles</a>
</li>
<li>
<a href="/projects/">Projects</a>
</li>
<li>
<a href="/shrines/">Shrines</a>
</li>
<li>
<a href="/adoptables/">Adoptables</a>
</li>
<li>
<a href="/links/">Links</a>
</li>
<li>
<a href="/guestbook/">Guestbook</a>
</li>
</ul>
</div>
<main id="content">
<header class="main__header">
<h1>Blog Archive</h1>
<p>Archive of blog posts on Leilukin&#39;s Hub</p>
</header>
<content-wrapper>
<div class="content">
<ul class="blog__postlist">
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/">
From Hobbyist to Professional Web Developer
</a>
</h2>
<time datetime="Sun Aug 18 2024 12:28:21 GMT+0000 (Coordinated Universal Time)">18 August 2024</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/">
Leilukin&#39;s Hub Has Migrated to Hostinger
</a>
</h2>
<time datetime="Fri Jul 26 2024 16:44:00 GMT+0000 (Coordinated Universal Time)">26 July 2024</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2024-07-02-fanlisting-collective-launch/">
Cassette Beasts Fanlisting and My Fanlisting Collective Launched
</a>
</h2>
<time datetime="Mon Jul 01 2024 16:37:00 GMT+0000 (Coordinated Universal Time)">1 July 2024</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/">
My Cassette Beasts Fanlisting Application has been Approved
</a>
</h2>
<time datetime="Mon Jun 24 2024 05:23:00 GMT+0000 (Coordinated Universal Time)">24 June 2024</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2024-06-21-leilukins-hub-tumbleblog-launched/">
Leilukin&#39;s Hub Tumbleblog Launched
</a>
</h2>
<time datetime="Thu Jun 20 2024 17:53:00 GMT+0000 (Coordinated Universal Time)">20 June 2024</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2024-06-12-performance-improvement-leilukins-hub/">
Improving Site Performance of Leilukin&#39;s Hub
</a>
</h2>
<time datetime="Wed Jun 12 2024 11:06:00 GMT+0000 (Coordinated Universal Time)">12 June 2024</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/">
Custom Domain Name and Hosting Change for Leilukin&#39;s Hub
</a>
</h2>
<time datetime="Fri May 31 2024 13:33:00 GMT+0000 (Coordinated Universal Time)">31 May 2024</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2024-05-29-new-guestbook-leilukins-hub/">
The Search for a Guestbook Solution for Leilukin&#39;s Hub
</a>
</h2>
<time datetime="Wed May 29 2024 09:11:00 GMT+0000 (Coordinated Universal Time)">29 May 2024</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2024-05-14-james-somerton-my-video-game-footage/">
James Somerton Used My Video Game Footage Without Credit or Permission
</a>
</h2>
<time datetime="Tue May 14 2024 03:02:00 GMT+0000 (Coordinated Universal Time)">14 May 2024</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2024-04-27-lesbian-visibility-day1-year-anniversary-of-cassette-beasts/">
Happy Lesbian Visibility Day and 1-Year Anniversary of Cassette Beasts
</a>
</h2>
<time datetime="Sat Apr 27 2024 06:06:00 GMT+0000 (Coordinated Universal Time)">27 April 2024</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">
April 2024 Leilukin&#39;s Hub Overhaul with Eleventy
</a>
</h2>
<time datetime="Sun Apr 21 2024 11:53:00 GMT+0000 (Coordinated Universal Time)">21 April 2024</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/">
I Received a Lifetime Premium Membership on Nexus Mods for Free
</a>
</h2>
<time datetime="Wed Mar 06 2024 00:00:00 GMT+0000 (Coordinated Universal Time)">6 March 2024</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/">
Finally Beat A Bug&#39;s Life The Video Game — 24 Years Later
</a>
</h2>
<time datetime="Mon Nov 20 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">20 November 2023</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/">
I Can Finally Game on a Solid-State Drive
</a>
</h2>
<time datetime="Sun Nov 19 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">19 November 2023</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2023-10-30-support-for-my-steam-review-of-a-summers-end/">
Support for My Steam Review of A Summers End — Hong Kong 1986
</a>
</h2>
<time datetime="Mon Oct 30 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">30 October 2023</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/">
My Cassette Beasts Pombomb Plushie Arrived!
</a>
</h2>
<time datetime="Fri Oct 13 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">13 October 2023</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/">
Happy 1st Anniversary to Leilukin&#39;s Hub
</a>
</h2>
<time datetime="Mon Sep 11 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">11 September 2023</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2023-07-28-my-first-birthday-after-the-launch-of-leilukins-hub/">
My First Birthday After the Launch of Leilukin&#39;s Hub
</a>
</h2>
<time datetime="Fri Jul 28 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">28 July 2023</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/">
June 2023 Leilukin&#39;s Hub Layout Rewrite
</a>
</h2>
<time datetime="Fri Jun 23 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">23 June 2023</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/">
Onboard the Dracula Daily Hype Train
</a>
</h2>
<time datetime="Tue May 09 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">9 May 2023</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">
Leilukin&#39;s Hub Now has a Blog!
</a>
</h2>
<time datetime="Sat Jan 28 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">28 January 2023</time>
</li>
<li class="blog__postlist--item">
<h2 class="blog__postlist--title">
<a href="/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/">
2023 New Year Redesign of Leilukin&#39;s Hub
</a>
</h2>
<time datetime="Thu Jan 26 2023 00:00:00 GMT+0000 (Coordinated Universal Time)">26 January 2023</time>
</li>
</ul>
</div>
<aside class="right-sidebar" aria-label="Right sidebar">
<nav class="content__nav sidebar--sticky" aria-labelledby="my-contents-title">
<h2 class="content__nav--title" id="my-contents-title">My Contents</h2>
<ul class="content__nav--links">
<li><a href="/archive/">Content Archive</a></li>
<li><a href="/categories/">Content Categories</a></li>
<li><a href="/articles/">Articles</a></li>
<li><a href="/blog/posts/">Blog Archive</a></li>
<li><a href="/blog/">Blog Home</a></li>
</ul>
</nav>
</aside>
</content-wrapper>
</main>
<footer class="footer">
<p>Made with ♥ by Leilukin since 11 September 2022</p>
<ul class="inline-nav footer__links">
<li><a href="/feed.xml">RSS Feed</a></li>
<li><a
href="/sitemap/
">Site Map</a></li>
<li><a
href="/changelogs/"
>Changelogs</a></li><li><a
href="/accessibility/"
>Accessibility</a></li><li><a
href="/colophon/"
>Colophon</a></li></ul>
<ul class="inline-nav footer__links">
<li><a href="mailto:contact@leilukin.com">Contact me by email</a></li>
<li><a href="https://ko-fi.com/leilukin">Support me on Ko-Fi</a></li>
</ul><div class="h-card hidden">
<span class="p-name p-nickname">Leilukin</span>
<a href="/" class="u-url">Home page</a>
<img src="https://i.postimg.cc/RZJgS6tY/leilukin-bee.avif" alt="Leilukin" class="u-photo" loading="lazy">
<span class="p-country-name">Malaysia</span>
<span class="p-note">They/she. A proudly queer and autistic <span class="p-gender-identity">non-binary</span> lesbian from Malaysia.</span>
</div><a href="#top" class="top-btn">
<svg class="top-btn__arrow" focusable="false" aria-hidden="true" viewBox="0 0 26 28">
<path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path>
</svg>
Back to Top
</a>
</footer>
</body>
</html>