439 lines
17 KiB
HTML
439 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" id="top">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
|
|
|
<meta property="og:title" content="Now">
|
|
|
|
<link rel="canonical" href="https://leilukin.com/now/">
|
|
<meta name="generator" content="Eleventy v3.0.0">
|
|
<meta name="author" content="Leilukin">
|
|
<meta name="description" content="What Leilukin is doing now.">
|
|
<meta name="fediverse:creator" content="@Leilukin@dragonscave.space">
|
|
<meta property="og:site_name" content="Leilukin's Hub">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:description" content="What Leilukin is doing now.">
|
|
<meta property="og:url" content="https://leilukin.com/now/">
|
|
<meta property="og:locale" content="en_MY">
|
|
|
|
|
|
<link rel="alternate" type="application/rss+xml" title="Leilukin'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: 700;
|
|
src: url('/assets/fonts/lexend/lexend-v19-latin-700.woff2') format('woff2');
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/assets/fonts/fonts.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>.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-block-start: 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="/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/8B1OopViR9.js" defer=""></script>
|
|
|
|
|
|
<title>
|
|
Now | 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 aria-current="page" 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"></path></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 aria-current="page" 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>Now</h1>
|
|
|
|
|
|
|
|
<p>What Leilukin is doing now.</p>
|
|
|
|
|
|
</header>
|
|
|
|
<content-wrapper>
|
|
|
|
|
|
|
|
|
|
<div class="content">
|
|
<p><em>This page was last updated on <time datetime="2024-10-21T21:48:57+0800">21 October 2024</time>.</em></p>
|
|
<p>This is my <a href="https://nownownow.com/about">/now page</a>. You can find more pages like this at <a href="https://nownownow.com/">nownownow.com</a>.</p>
|
|
<p>You can also check out my <a href="https://status.cafe/users/leilukin">status.cafe profile</a> for my latest short status updates.</p>
|
|
<div class="heading-wrapper h2">
|
|
<h2 id="currently-playing">Currently Playing</h2>
|
|
<a class="heading-anchor" href="#currently-playing" aria-labelledby="currently-playing"><span hidden="">#</span></a></div>
|
|
<ul>
|
|
<li><cite>Neko Atsume</cite></li>
|
|
<li><cite>Neko Atsume 2</cite></li>
|
|
</ul>
|
|
<div class="heading-wrapper h2">
|
|
<h2 id="officially-becomes-a-professional-web-developer">Officially Becomes a Professional Web Developer</h2>
|
|
<a class="heading-anchor" href="#officially-becomes-a-professional-web-developer" aria-labelledby="officially-becomes-a-professional-web-developer"><span hidden="">#</span></a></div>
|
|
<p>Starting from 16 August 2024, I am officially a professional web developer now! I owe much to this very website for inspiring me to pursue web development as a profession.</p>
|
|
<p>You can read more about my journey from a hobbyist to professional web developer in my blog post, <a href="/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer">"From Hobbyist to Professional Web Developer"</a>.</p>
|
|
<p>Therefore, my new job has been a major focus of mine currently, so I could hopefully pass my probation period.</p>
|
|
<div class="heading-wrapper h2">
|
|
<h2 id="participating-in-personal-web-spaces">Participating in Personal Web Spaces</h2>
|
|
<a class="heading-anchor" href="#participating-in-personal-web-spaces" aria-labelledby="participating-in-personal-web-spaces"><span hidden="">#</span></a></div>
|
|
<p>I have been making a more active effort in participating in personal web spaces and connecting with other webmasters, through various methods including leaving messages on others' guestbooks, sending other webmasters emails, linking to each other's websites, following each other's Neocities profiles, etc.</p>
|
|
<p>Furthermore, I joined <a href="https://32bit.cafe/">32-Bit Cafe</a> on both its Discourse forum and Discord on 15 June 2024, and earned the <a href="https://tumbleblog.leilukin.com/2024/07/02/earned-32-bit-cafe-new-member-of-the-month-award-for-june-2024/">New Member of the Month for June 2024</a> on the Discourse forum. On 8 June 2024, I wrote and submitted my article, <a href="/articles/accessible-footnotes">"How I (Tried to) Implement Accessible Footnotes"</a>, to 32-Bit Cafe's Community Code Jam #5: <a href="https://32bit.cafe/~xandra/events/codejam5/">Back to School</a>.</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</content-wrapper>
|
|
</main>
|
|
<footer class="footer">
|
|
<p>
|
|
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"></path></svg>
|
|
<a href="mailto:contact@leilukin.com">Contact me by email</a> (<a href="https://useplaintext.email/">plain text email</a> encouraged)
|
|
</p>
|
|
<h2 class="visually-hidden">Footer Navigation:</h2>
|
|
|
|
<ul class="inline-nav footer__links">
|
|
<li>
|
|
<a href="/feed.xml"><svg class="inline-icon" aria-hidden="true" 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 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM0 416a64 64 0 1 1 128 0A64 64 0 1 1 0 416zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"></path></svg>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>
|
|
<p>Made with ♥ by Leilukin since 11 September 2022</p>
|
|
<p>
|
|
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M96 64c0-17.7 14.3-32 32-32l320 0 64 0c70.7 0 128 57.3 128 128s-57.3 128-128 128l-32 0c0 53-43 96-96 96l-192 0c-53 0-96-43-96-96L96 64zM480 224l32 0c35.3 0 64-28.7 64-64s-28.7-64-64-64l-32 0 0 128zM32 416l512 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32s14.3-32 32-32z"></path></svg>
|
|
<a href="https://ko-fi.com/leilukin">Support me on Ko-Fi</a>
|
|
</p><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> |