Build: (b4531a8) Add info about me being a professional web dev
This commit is contained in:
helenclx
parent
31eef5e7c7
commit
3861c4d9a2
|
|
@ -402,7 +402,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<h2 id="the-website">The Website</h2>
|
<h2 id="the-website">The Website</h2>
|
||||||
<a class="heading-anchor" href="#the-website" aria-labelledby="the-website"><span hidden>#</span></a></div>
|
<a class="heading-anchor" href="#the-website" aria-labelledby="the-website"><span hidden>#</span></a></div>
|
||||||
<p>Leilukin's Hub is a literal queer-coded website (as in, this website is coded by a queer person) that serves as a personal hub for my interests and self-expression, as well as my own corner on the internet outside social media platforms.</p>
|
<p>Leilukin's Hub is a literal queer-coded website (as in, this website is coded by a queer person) that serves as a personal hub for my interests and self-expression, as well as my own corner on the internet outside social media platforms.</p>
|
||||||
<p>On this site, you can find various stuff I have created or curated.</p>
|
<p>On this site, you can find various stuff I have created or curated. Furthermore, as I am working as a professional web developer, this website serves as a hobby project for me to practice and experiment web development.</p>
|
||||||
<p>This website is mostly safe for work, but since I am an adult, I made my website with an adult audience in mind. I add content warnings for not safe for work and adult content.</p>
|
<p>This website is mostly safe for work, but since I am an adult, I made my website with an adult audience in mind. I add content warnings for not safe for work and adult content.</p>
|
||||||
<p>Feel free to drop a message and say hi on <a href="/guestbook">my guestbook</a>!</p>
|
<p>Feel free to drop a message and say hi on <a href="/guestbook">my guestbook</a>!</p>
|
||||||
<p>leilukin.com is hosted on <a href="https://www.hostinger.my/">Hostinger</a>.</p>
|
<p>leilukin.com is hosted on <a href="https://www.hostinger.my/">Hostinger</a>.</p>
|
||||||
|
|
@ -428,7 +428,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
[Image description: Digital illustration of a bee wearing red glasses with oval-shaped body and wings on a light green background. Leilukin's signature is at the bottom right of the bee. Description ends]
|
[Image description: Digital illustration of a bee wearing red glasses with oval-shaped body and wings on a light green background. Leilukin's signature is at the bottom right of the bee. Description ends]
|
||||||
</figcaption>
|
</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
<p>You can call me Leilukin. I am a Malaysian Chinese, queer, non-binary lesbian born in the early 90s. My pronouns are they/them and she/her in English, <span lang="zh">他</span> and <span lang="zh">她</span> in Chinese.</p>
|
<p>You can call me Leilukin. I am a Malaysian Chinese, queer, non-binary lesbian born in the early 90s. My pronouns are they/them and she/her in English, <span lang="zh">他</span> and <span lang="zh">她</span> in Chinese. I am a professional web deevloper with 8 years of experience in the graphic design field.</p>
|
||||||
<p>I speak Mandarin, English, Cantonese and Malay, though I am most fluent in Mandarin and English.</p>
|
<p>I speak Mandarin, English, Cantonese and Malay, though I am most fluent in Mandarin and English.</p>
|
||||||
<p>I am also autistic, so I use this website as a platform to catalogue my interests.</p>
|
<p>I am also autistic, so I use this website as a platform to catalogue my interests.</p>
|
||||||
<p>Leilukin is not my real name, but it is an internet pseudonym that I have used since I was a teenager, so the name has become my online identity, and I prefer to go by Leilukin in informal online spaces.</p>
|
<p>Leilukin is not my real name, but it is an internet pseudonym that I have used since I was a teenager, so the name has become my online identity, and I prefer to go by Leilukin in informal online spaces.</p>
|
||||||
|
|
|
||||||
|
|
@ -431,6 +431,16 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<p>18 August 2024</p>
|
<p>18 August 2024</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/">
|
||||||
|
From Hobbyist to Professional Web Developer | Blog
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>18 August 2024</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<p class="item-list__title">
|
<p class="item-list__title">
|
||||||
<a href="/articles/accessible-footnotes/">
|
<a href="/articles/accessible-footnotes/">
|
||||||
|
|
|
||||||
|
|
@ -474,6 +474,17 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<h2>Blog Posts</h2>
|
<h2>Blog Posts</h2>
|
||||||
<ul class="blog__posts">
|
<ul class="blog__posts">
|
||||||
|
|
||||||
|
<li class="blog__post">
|
||||||
|
<h3 class="blog__post--title">
|
||||||
|
<a href="/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/">
|
||||||
|
From Hobbyist to Professional Web Developer
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
<p class="blog__post--time">18 August 2024</p>
|
||||||
|
<p>How building my personal website led to me getting a web developer job.</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li class="blog__post">
|
<li class="blog__post">
|
||||||
<h3 class="blog__post--title">
|
<h3 class="blog__post--title">
|
||||||
<a href="/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/">
|
<a href="/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/">
|
||||||
|
|
@ -518,17 +529,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<p>Leilukin's Hub now has a tumbleblog built with Chyrp Lite and hosted on InfinityFree.</p>
|
<p>Leilukin's Hub now has a tumbleblog built with Chyrp Lite and hosted on InfinityFree.</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="blog__post">
|
|
||||||
<h3 class="blog__post--title">
|
|
||||||
<a href="/blog/posts/2024-06-12-performance-improvement-leilukins-hub/">
|
|
||||||
Improving Site Performance of Leilukin's Hub
|
|
||||||
|
|
||||||
</a>
|
|
||||||
</h3>
|
|
||||||
<p class="blog__post--time">12 June 2024</p>
|
|
||||||
<p>Steps I hae taken to improve my website's performance.</p>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -474,6 +474,17 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<h2>Blog Posts</h2>
|
<h2>Blog Posts</h2>
|
||||||
<ul class="blog__posts">
|
<ul class="blog__posts">
|
||||||
|
|
||||||
|
<li class="blog__post">
|
||||||
|
<h3 class="blog__post--title">
|
||||||
|
<a href="/blog/posts/2024-06-12-performance-improvement-leilukins-hub/">
|
||||||
|
Improving Site Performance of Leilukin's Hub
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
<p class="blog__post--time">12 June 2024</p>
|
||||||
|
<p>Steps I hae taken to improve my website's performance.</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li class="blog__post">
|
<li class="blog__post">
|
||||||
<h3 class="blog__post--title">
|
<h3 class="blog__post--title">
|
||||||
<a href="/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/">
|
<a href="/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/">
|
||||||
|
|
@ -518,17 +529,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<p>Celebrating both Lesbian Visibility Day and the 1st year anniversary of Cassette Beasts' release on 26 April 2024.</p>
|
<p>Celebrating both Lesbian Visibility Day and the 1st year anniversary of Cassette Beasts' release on 26 April 2024.</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="blog__post">
|
|
||||||
<h3 class="blog__post--title">
|
|
||||||
<a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">
|
|
||||||
April 2024 Leilukin's Hub Overhaul with Eleventy
|
|
||||||
|
|
||||||
</a>
|
|
||||||
</h3>
|
|
||||||
<p class="blog__post--time">21 April 2024</p>
|
|
||||||
<p>I rebuilt my website with the static site generator Eleventy in April 2024.</p>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -474,6 +474,17 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<h2>Blog Posts</h2>
|
<h2>Blog Posts</h2>
|
||||||
<ul class="blog__posts">
|
<ul class="blog__posts">
|
||||||
|
|
||||||
|
<li class="blog__post">
|
||||||
|
<h3 class="blog__post--title">
|
||||||
|
<a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">
|
||||||
|
April 2024 Leilukin's Hub Overhaul with Eleventy
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
<p class="blog__post--time">21 April 2024</p>
|
||||||
|
<p>I rebuilt my website with the static site generator Eleventy in April 2024.</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li class="blog__post">
|
<li class="blog__post">
|
||||||
<h3 class="blog__post--title">
|
<h3 class="blog__post--title">
|
||||||
<a href="/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/">
|
<a href="/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/">
|
||||||
|
|
@ -518,17 +529,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<p>A thank-you post for the people who have supported my Steam review of A Summer’s End — Hong Kong 1986.</p>
|
<p>A thank-you post for the people who have supported my Steam review of A Summer’s End — Hong Kong 1986.</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="blog__post">
|
|
||||||
<h3 class="blog__post--title">
|
|
||||||
<a href="/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/">
|
|
||||||
My Cassette Beasts Pombomb Plushie Arrived!
|
|
||||||
|
|
||||||
</a>
|
|
||||||
</h3>
|
|
||||||
<p class="blog__post--time">13 October 2023</p>
|
|
||||||
<p>The official Cassette Beasts Pombomb plushie I purchased finally arrived.</p>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -474,6 +474,17 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<h2>Blog Posts</h2>
|
<h2>Blog Posts</h2>
|
||||||
<ul class="blog__posts">
|
<ul class="blog__posts">
|
||||||
|
|
||||||
|
<li class="blog__post">
|
||||||
|
<h3 class="blog__post--title">
|
||||||
|
<a href="/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/">
|
||||||
|
My Cassette Beasts Pombomb Plushie Arrived!
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
<p class="blog__post--time">13 October 2023</p>
|
||||||
|
<p>The official Cassette Beasts Pombomb plushie I purchased finally arrived.</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li class="blog__post">
|
<li class="blog__post">
|
||||||
<h3 class="blog__post--title">
|
<h3 class="blog__post--title">
|
||||||
<a href="/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/">
|
<a href="/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/">
|
||||||
|
|
@ -518,17 +529,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<p>I have signed up to join the Dracula Daily hype.</p>
|
<p>I have signed up to join the Dracula Daily hype.</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="blog__post">
|
|
||||||
<h3 class="blog__post--title">
|
|
||||||
<a href="/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">
|
|
||||||
Leilukin's Hub Now has a Blog!
|
|
||||||
|
|
||||||
</a>
|
|
||||||
</h3>
|
|
||||||
<p class="blog__post--time">28 January 2023</p>
|
|
||||||
<p>I have finally set up a blog on my own website.</p>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -474,6 +474,17 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<h2>Blog Posts</h2>
|
<h2>Blog Posts</h2>
|
||||||
<ul class="blog__posts">
|
<ul class="blog__posts">
|
||||||
|
|
||||||
|
<li class="blog__post">
|
||||||
|
<h3 class="blog__post--title">
|
||||||
|
<a href="/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">
|
||||||
|
Leilukin's Hub Now has a Blog!
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
<p class="blog__post--time">28 January 2023</p>
|
||||||
|
<p>I have finally set up a blog on my own website.</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li class="blog__post">
|
<li class="blog__post">
|
||||||
<h3 class="blog__post--title">
|
<h3 class="blog__post--title">
|
||||||
<a href="/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/">
|
<a href="/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/">
|
||||||
|
|
|
||||||
|
|
@ -549,6 +549,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<a href="/blog/posts/2024-07-02-fanlisting-collective-launch/">Cassette Beasts Fanlisting and My Fanlisting Collective Launched</a>
|
<a href="/blog/posts/2024-07-02-fanlisting-collective-launch/">Cassette Beasts Fanlisting and My Fanlisting Collective Launched</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
<li class="blog__post--next">
|
||||||
|
<p>Next Post:</p>
|
||||||
|
<a href="/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/">From Hobbyist to Professional Web Developer</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,599 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr" id="top">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
|
||||||
|
<meta property="og:title" content="From Hobbyist to Professional Web Developer | Blog">
|
||||||
|
|
||||||
|
<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="How building my personal website led to me getting a web developer job.">
|
||||||
|
<meta name="generator" content="Eleventy v3.0.0">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://leilukin.com/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/">
|
||||||
|
<meta property="og:site_name" content="Leilukin's Hub">
|
||||||
|
<meta property="og:locale" content="en_MY">
|
||||||
|
<meta property="og:description" content="How building my personal website led to me getting a web developer job.">
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:url" content="https://leilukin.com/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/">
|
||||||
|
<meta name="twitter:description" content="How building my personal website led to me getting a web developer job.">
|
||||||
|
<link rel="canonical" href="https://leilukin.com/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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: 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>.toc__wrapper {
|
||||||
|
max-height: 89vh;
|
||||||
|
overflow-x: auto;
|
||||||
|
background-color: var(--clr-content-bg);
|
||||||
|
padding: 1rem 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc__heading {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--clr-sub-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc ol,
|
||||||
|
.toc ol ol {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc ol {
|
||||||
|
border-top: 0.1em solid var(--clr-title-border);
|
||||||
|
padding-left: 1.3em;
|
||||||
|
padding-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc ol ol {
|
||||||
|
border-top: none;
|
||||||
|
list-style-type: disc;
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-top: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc ol a {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
padding-left: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc ol ol a {
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.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://twitter.com/Leilukin">
|
||||||
|
<link rel="me" href="https://github.com/Leilukin">
|
||||||
|
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="webmention" href="https://webmention.io/leilukin.com/webmention">
|
||||||
|
|
||||||
|
|
||||||
|
<script src="/assets/js/MnPoD-suxd.js" defer></script>
|
||||||
|
|
||||||
|
<script src="/assets/js/details-utils.js" defer></script>
|
||||||
|
|
||||||
|
|
||||||
|
<title>
|
||||||
|
From Hobbyist to Professional Web Developer | Blog | 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">
|
||||||
|
|
||||||
|
<nav aria-labelledby="breadcrumbs-title">
|
||||||
|
<h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
|
||||||
|
<ol class="breadcrumbs">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="/blog/">Blog</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/blog/posts/">Blog Archive</a>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<h1>From Hobbyist to Professional Web Developer</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="article__info">
|
||||||
|
<p class="article__info--desc">How building my personal website led to me getting a web developer job.</p>
|
||||||
|
<p>Posted on 18 August 2024 by Leilukin
|
||||||
|
|
||||||
|
|
||||||
|
<p>Categories:
|
||||||
|
|
||||||
|
<a href="/categories/life-updates">life updates</a>,
|
||||||
|
|
||||||
|
<a href="/categories/web-development">web development</a>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>🍿 5 min. read</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<content-wrapper>
|
||||||
|
|
||||||
|
<aside class="left-sidebar" aria-label="Left sidebar">
|
||||||
|
<details-utils force-open="(min-width: 60rem)" force-restore>
|
||||||
|
<details class="toc__wrapper sidebar--sticky">
|
||||||
|
<summary class="toc__heading" id="toc-heading">
|
||||||
|
Table of Contents
|
||||||
|
</summary>
|
||||||
|
<nav class="toc" aria-labelledby="toc-heading"><ol><li><a href="#my-web-design-origin-story">My Web Design Origin Story</a></li>
|
||||||
|
<li><a href="#rekindled-interest-in-web-design">Rekindled Interest in Web Design</a></li>
|
||||||
|
<li><a href="#web-development-more-than-a-hobby">Web Development: More than a Hobby</a></li>
|
||||||
|
<li><a href="#new-job-interview-a-surprise-belated-birthday-present">New Job Interview: A Surprise Belated Birthday Present</a></li>
|
||||||
|
<li><a href="#wordpress-developer-by-day-eleventy-developer-by-night">WordPress Developer by Day, Eleventy Developer by Night</a></li>
|
||||||
|
<li><a href="#wrapping-up">Wrapping Up</a></li></ol></nav>
|
||||||
|
</details>
|
||||||
|
</details-utils>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<article class="content">
|
||||||
|
<p>I am pleased to announce that I am officially a professional web developer now — starting from 16 August 2024, I am working for a local traditional Chinese medicine (TCM) healthcare company, with my job involving web development, UX design and graphic design. I owe much to this very website for inspiring me to pursue web development as a profession.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="my-web-design-origin-story">My Web Design Origin Story</h2>
|
||||||
|
<a class="heading-anchor" href="#my-web-design-origin-story" aria-labelledby="my-web-design-origin-story"><span hidden>#</span></a></div>
|
||||||
|
<p>My interest in web design and development go back as far as my teenage years in the 2000s. I had a GeoCities account, but by the time I started to participate on the web when I was around 14, blogs were on the rise, so blogging was my first foray into creating on the internet, so I did not experience creating and coding a personal website like other GeoCities users did. That said, I got my start on HTML and CSS through blogging, by editing the codes of widgets and blog themes, while being inspired by many other blogs.</p>
|
||||||
|
<p>In particular, there was a Taiwanese blogger who was a professional graphic designer with a gorgeous header made with Flash, who ended up being an inspiration for me to aspire to become a graphic designer when I grew up. I did study graphic design, earn a diploma and began working as a graphic designer. However, years in the field, I got burned out; there were multiple factors contributing to my burnout from the graphic design field, but the short version is that the reality of graphic design work, at least in my experience, did not turn out as great as what my younger self had expected and hoped for.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="rekindled-interest-in-web-design">Rekindled Interest in Web Design</h2>
|
||||||
|
<a class="heading-anchor" href="#rekindled-interest-in-web-design" aria-labelledby="rekindled-interest-in-web-design"><span hidden>#</span></a></div>
|
||||||
|
<p>In 2022, my interest in web design was rekindled when I discovered Neocities through Tumblr, and the resurgence of creating personal websites, so decided to build and code my own website to gather various stuff I have created and curated across various online spaces. For this, I re-learned HTML and CSS, and began to truly experience the joy of carving one's own space on the web, and the more I worked on my website, the more I learned about not only web design, but also web development, by dabbling in JavaScript, which became the first programming language I actually learned.</p>
|
||||||
|
<details class="content-disclosure">
|
||||||
|
<summary class="content-disclosure__summary">Side Note: First programming language I used</summary>
|
||||||
|
<div class="content-disclosure__content"><p>Technically, the first programming language I had ever used is NWScript, a scripting language based on the C programming language and used for the video games <cite>Neverwinter Nights</cite> and <cite>Star Wars: Knights of the Old Republic</cite> series, since I got into modding, including creating mods for the <cite>Knights of the Old Republic</cite> games before building my website, but I did not actually learn or understand programming concepts (such as variables, data types, etc.) until I started to learn JavaScript, so I do not count NWScript as my first programming language.</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
<p>Furthermore, despite being burned out from graphic design as a profession, my graphic design background does come in handy in building Leilukin's Hub, by designing and creating graphics for my website, including header image, site button, favicon, etc., as well as applying my design knowledge and skill to design my own website, from colour schemes to layout.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="web-development-more-than-a-hobby">Web Development: More than a Hobby</h2>
|
||||||
|
<a class="heading-anchor" href="#web-development-more-than-a-hobby" aria-labelledby="web-development-more-than-a-hobby"><span hidden>#</span></a></div>
|
||||||
|
<p>Over time, my interest in web development evolved enough to take online coding courses, starting with <a href="https://www.freecodecamp.org/">freeCodeCamp</a>, then <a href="https://scrimba.com/">Scrimba</a> shortly after. Taking these courses made me realise that these languages have evolved a lot since more than a decade ago. I applied the HTML, CSS and JavaScript skills and knowledge I learned from these courses to make improvements to my website.</p>
|
||||||
|
<p>Meanwhile, learning that there were people who became developers without a computer science degree inspired me to consider switching my career path to web development. In other words, web design and development have become more than a hobby to me. I did not expect it to be easy, so I did put as much as I could in learning and practising web development. That said, Leilukin's Hub remains a hobby project, and it serves as a good platform for me to practice and experiment my front end web development.</p>
|
||||||
|
<p>After teaching myself to code for almost two years, and received multiple code and tech-related certifications, I updated my résumé with information about my interest in switching career from graphic design to web development, and hope for transferring my creativity and design expertise into building the web. I started to try hunting for front end web developer jobs, but my attempts to apply for the job for many companies did not succeed, then I received a surprised belated birthday present in the form of a job interview invitation.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="new-job-interview-a-surprise-belated-birthday-present">New Job Interview: A Surprise Belated Birthday Present</h2>
|
||||||
|
<a class="heading-anchor" href="#new-job-interview-a-surprise-belated-birthday-present" aria-labelledby="new-job-interview-a-surprise-belated-birthday-present"><span hidden>#</span></a></div>
|
||||||
|
<p>On 29 July 2024, a day after my birthday, I received an invitation by the managing director of a local traditional Chinese medicine company to attend an interview with him. The company was looking for someone with web development expertise to work on and improve their website, which is built with WordPress, and the managing director discovered my résumé on a Malaysian job hunting website I had registered an account on.</p>
|
||||||
|
<p>During my interview, I explained to the managing director that I have been looking to switch career from graphic design to web development. Turned out, the company was also interested in hiring a web developer with design expertise to improve the front end of their website, so my 8 years worth of graphic design experience was a bonus. A week after the interview, the managing director sent me a job offer, and I accepted and got hired, with my responsibilities include web development, UX design and graphic design.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="wordpress-developer-by-day-eleventy-developer-by-night">WordPress Developer by Day, Eleventy Developer by Night</h2>
|
||||||
|
<a class="heading-anchor" href="#wordpress-developer-by-day-eleventy-developer-by-night" aria-labelledby="wordpress-developer-by-day-eleventy-developer-by-night"><span hidden>#</span></a></div>
|
||||||
|
<p>Starting my professional web development journey with WordPress is going to be a new experience for me. I had brief experience with working on WordPress websites as a website administrator in one of my previous jobs, but never as a developer. Furthermore, prior to receiving this job offer, I never studied WordPress development, nor built my own website with WordPress.</p>
|
||||||
|
<p>That said, I hope to apply the programming knowledge and skills I learned from the coding courses I had taken to adapt to learning WordPress development. My confidence in my ability to learn new tech skills was bolstered by the time I created a <a href="/projects/code/bellabuffs-phpmailer/">fork for the fanlisting script BellaBuffs with SMTP support</a> despite my inexperience with PHP. I am looking forward to learning more about PHP with my new job as well.</p>
|
||||||
|
<p>Although now I work on WordPress in my day job, my personal website will continue to be built with Eleventy. One of the reasons I wanted to pursue web development as a profession is the freedom to learn and use different tools outside day job while continuing to grow as a developer.</p>
|
||||||
|
<p>None of the coding courses I took taught about Eleventy or any static site generator, but <a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">rebuilding Leilukin's Hub with Eleventy in April 2024</a> allowed me to learn more about web development, not to mention I do have a lot of fun with using Eleventy. Therefore, I am content to be a WordPress developer by day, Eleventy developer by night.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="wrapping-up">Wrapping Up</h2>
|
||||||
|
<a class="heading-anchor" href="#wrapping-up" aria-labelledby="wrapping-up"><span hidden>#</span></a></div>
|
||||||
|
<p>Looking back, even I am amazed by the fact that building this very website kickstarted my path to become a professional web developer, especially since I did not come from a tech educational or industrial background, but I am glad that it happened.</p>
|
||||||
|
<p>I am happy to be able to switch my career path to web development despite not having a computer science degree, and that my prior working experience as a graphic designer helped with getting this new opportunity.</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<nav class="blog__post--pagination" aria-labelledby="nextprev-title">
|
||||||
|
<h2 class="visually-hidden" id="nextprev-title">Next and Previous Blog Posts</h2>
|
||||||
|
<ul class="blog__post--nextprev">
|
||||||
|
<li class="blog__post--prev">
|
||||||
|
<p>Previous Post:</p>
|
||||||
|
<a href="/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/">Leilukin's Hub Has Migrated to Hostinger</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
@ -408,6 +408,16 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
|
||||||
<ul class="blog__postlist">
|
<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>
|
||||||
|
<p>18 August 2024</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li class="blog__postlist--item">
|
<li class="blog__postlist--item">
|
||||||
<h2 class="blog__postlist--title">
|
<h2 class="blog__postlist--title">
|
||||||
<a href="/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/">
|
<a href="/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/">
|
||||||
|
|
|
||||||
|
|
@ -455,7 +455,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<li><a href="/categories/life-updates/">life updates</a> (1)</li>
|
<li><a href="/categories/life-updates/">life updates</a> (2)</li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -503,7 +503,7 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<li><a href="/categories/web-development/">web development</a> (1)</li>
|
<li><a href="/categories/web-development/">web development</a> (2)</li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -399,11 +399,21 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
|
||||||
|
|
||||||
<h2>1 Contents Filed Under "life updates"</h2>
|
<h2>2 Contents Filed Under "life updates"</h2>
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/">
|
||||||
|
From Hobbyist to Professional Web Developer | Blog
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>18 August 2024</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<p class="item-list__title">
|
<p class="item-list__title">
|
||||||
<a href="/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/">
|
<a href="/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/">
|
||||||
|
|
|
||||||
|
|
@ -399,11 +399,21 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
|
||||||
|
|
||||||
<h2>1 Contents Filed Under "web development"</h2>
|
<h2>2 Contents Filed Under "web development"</h2>
|
||||||
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<p class="item-list__title">
|
||||||
|
<a href="/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/">
|
||||||
|
From Hobbyist to Professional Web Developer | Blog
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p>18 August 2024</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<p class="item-list__title">
|
<p class="item-list__title">
|
||||||
<a href="/blog/posts/2024-06-12-performance-improvement-leilukins-hub/">
|
<a href="/blog/posts/2024-06-12-performance-improvement-leilukins-hub/">
|
||||||
|
|
|
||||||
|
|
@ -453,6 +453,17 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="2024-08-18">
|
||||||
|
18 August 2024
|
||||||
|
</h2>
|
||||||
|
<a class="heading-anchor" href="#2024-08-18" aria-labelledby="2024-08-18"><span hidden="">#</span></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>New blog post about me officially becoming a professional web developer, <a href="/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer">"From Hobbyist to Professional Web Developer"</a>.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<div class="heading-wrapper h2">
|
<div class="heading-wrapper h2">
|
||||||
<h2 id="2024-08-11">
|
<h2 id="2024-08-11">
|
||||||
11 August 2024
|
11 August 2024
|
||||||
|
|
|
||||||
|
|
@ -497,6 +497,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
|
||||||
<h2>Latest Changelogs</h2>
|
<h2>Latest Changelogs</h2>
|
||||||
|
|
||||||
|
<h3 class="date-style">18 August 2024</h3>
|
||||||
|
<ul>
|
||||||
|
<li>New blog post about me officially becoming a professional web developer, <a href="/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer">"From Hobbyist to Professional Web Developer"</a>.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<h3 class="date-style">11 August 2024</h3>
|
<h3 class="date-style">11 August 2024</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Improve the site's <a href="/feed.xml">RSS feed</a>:
|
<li>Improve the site's <a href="/feed.xml">RSS feed</a>:
|
||||||
|
|
@ -624,12 +629,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<li>Remove JavaScript from the "Back to top" button.</li>
|
<li>Remove JavaScript from the "Back to top" button.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h3 class="date-style">11 June 2024</h3>
|
|
||||||
<ul>
|
|
||||||
<li>Remake the navigation hamburger menu for mobile, so JavaScript is no longer needed to open and close the navigation menu, although JavaScript is still used to enable closing the menu with the Escape key. (Special thanks to Kale for the <a href="https://kalechips.net/projects/snippets/burger">accessible hamburger menu code snippet</a>).</li>
|
|
||||||
<li>New blog post: <a href="/blog/posts/2024-06-12-performance-improvement-leilukins-hub/">Improving Site Performance of Leilukin's Hub</a>.</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -497,6 +497,12 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
|
||||||
<h2>Latest Changelogs</h2>
|
<h2>Latest Changelogs</h2>
|
||||||
|
|
||||||
|
<h3 class="date-style">11 June 2024</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Remake the navigation hamburger menu for mobile, so JavaScript is no longer needed to open and close the navigation menu, although JavaScript is still used to enable closing the menu with the Escape key. (Special thanks to Kale for the <a href="https://kalechips.net/projects/snippets/burger">accessible hamburger menu code snippet</a>).</li>
|
||||||
|
<li>New blog post: <a href="/blog/posts/2024-06-12-performance-improvement-leilukins-hub/">Improving Site Performance of Leilukin's Hub</a>.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<h3 class="date-style">11 June 2024</h3>
|
<h3 class="date-style">11 June 2024</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Improve "Back to top" button and footer link:
|
<li>Improve "Back to top" button and footer link:
|
||||||
|
|
@ -624,11 +630,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<li>New blog post: <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>.</li>
|
<li>New blog post: <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>.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h3 class="date-style">21 April 2024</h3>
|
|
||||||
<ul>
|
|
||||||
<li>New blog post: <a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">April 2024 Leilukin's Hub Overhaul with Eleventy</a>.</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -497,6 +497,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
|
||||||
<h2>Latest Changelogs</h2>
|
<h2>Latest Changelogs</h2>
|
||||||
|
|
||||||
|
<h3 class="date-style">21 April 2024</h3>
|
||||||
|
<ul>
|
||||||
|
<li>New blog post: <a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">April 2024 Leilukin's Hub Overhaul with Eleventy</a>.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<h3 class="date-style">20 April 2024</h3>
|
<h3 class="date-style">20 April 2024</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Finished overhauling this entire website with the static site generator <a href="https://www.11ty.dev/">Eleventy</a>.</li>
|
<li>Finished overhauling this entire website with the static site generator <a href="https://www.11ty.dev/">Eleventy</a>.</li>
|
||||||
|
|
@ -598,11 +603,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<li><a href="/shrines/cassettebeasts/">Cassette Beasts shrine</a>: Change the content of the right sidebar.</li>
|
<li><a href="/shrines/cassettebeasts/">Cassette Beasts shrine</a>: Change the content of the right sidebar.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h3 class="date-style">7 September 2023</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/shrines/cassettebeasts/">Cassette Beasts shrine</a>: The <a href="/shrines/cassettebeasts/articles/">Articles</a> page now includes other people's Cassette Beasts articles that I recommend.</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -497,6 +497,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
|
||||||
<h2>Latest Changelogs</h2>
|
<h2>Latest Changelogs</h2>
|
||||||
|
|
||||||
|
<h3 class="date-style">7 September 2023</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/shrines/cassettebeasts/">Cassette Beasts shrine</a>: The <a href="/shrines/cassettebeasts/articles/">Articles</a> page now includes other people's Cassette Beasts articles that I recommend.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<h3 class="date-style">6 September 2023</h3>
|
<h3 class="date-style">6 September 2023</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Moved pages of my video game mods and playlists to <a href="/projects/">Projects</a> page.</li>
|
<li>Moved pages of my video game mods and playlists to <a href="/projects/">Projects</a> page.</li>
|
||||||
|
|
@ -625,11 +630,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<li>Added PartySwap to my <a href="/projects/videogamemods/kotor2">Star Wars: Knights of the Old Republic II: The Sith Lords mod page</a>, since I have taken over the management and development of the mod.</li>
|
<li>Added PartySwap to my <a href="/projects/videogamemods/kotor2">Star Wars: Knights of the Old Republic II: The Sith Lords mod page</a>, since I have taken over the management and development of the mod.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h3 class="date-style">28 June 2023</h3>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/shrines/starwarskotor/">Star Wars: Knights of the Old Republic shrine</a>: Added new article: <a href="/shrines/starwarskotor/articles/keep-juhani-a-lesbian">Keep Juhani a Lesbian and Keep Juhani's Romance Exclusive to Female Characters</a>.</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -497,6 +497,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
|
||||||
<h2>Latest Changelogs</h2>
|
<h2>Latest Changelogs</h2>
|
||||||
|
|
||||||
|
<h3 class="date-style">28 June 2023</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/shrines/starwarskotor/">Star Wars: Knights of the Old Republic shrine</a>: Added new article: <a href="/shrines/starwarskotor/articles/keep-juhani-a-lesbian">Keep Juhani a Lesbian and Keep Juhani's Romance Exclusive to Female Characters</a>.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<h3 class="date-style">27 June 2023</h3>
|
<h3 class="date-style">27 June 2023</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/shrines/starwarskotor/">Star Wars: Knights of the Old Republic shrine</a>:
|
<li><a href="/shrines/starwarskotor/">Star Wars: Knights of the Old Republic shrine</a>:
|
||||||
|
|
@ -619,11 +624,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<li>Updated the <a href="/links">Links</a> page as I have officially joined the <a href="https://isaacfish.neocities.org/webring/">Queer Coded webring</a>.</li>
|
<li>Updated the <a href="/links">Links</a> page as I have officially joined the <a href="https://isaacfish.neocities.org/webring/">Queer Coded webring</a>.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h3 class="date-style">30 January 2023</h3>
|
|
||||||
<ul>
|
|
||||||
<li>Added my latest mod, Juhani Item Pack for TSL, to <a href="/projects/videogamemods/kotor2">my mods for Star Wars: Knights of the Old Republic II: The Sith Lords</a> page.</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -497,6 +497,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
|
||||||
<h2>Latest Changelogs</h2>
|
<h2>Latest Changelogs</h2>
|
||||||
|
|
||||||
|
<h3 class="date-style">30 January 2023</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Added my latest mod, Juhani Item Pack for TSL, to <a href="/projects/videogamemods/kotor2">my mods for Star Wars: Knights of the Old Republic II: The Sith Lords</a> page.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<h3 class="date-style">28 January 2023</h3>
|
<h3 class="date-style">28 January 2023</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Added a <a href="/links">Links</a> page.</li>
|
<li>Added a <a href="/links">Links</a> page.</li>
|
||||||
|
|
@ -602,11 +607,6 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<li>Added new article about Star Wars: Knights of the Old Republic: <a href="/shrines/starwarskotor/articles/juhani-hostility-towards-canderous">How to Access Juhani's Conversaion about Canderous without Restoration Mods</a></li>
|
<li>Added new article about Star Wars: Knights of the Old Republic: <a href="/shrines/starwarskotor/articles/juhani-hostility-towards-canderous">How to Access Juhani's Conversaion about Canderous without Restoration Mods</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h3 class="date-style">6 October 2022</h3>
|
|
||||||
<ul>
|
|
||||||
<li>Added the <a href="https://ogp.me/">Open Graph protocol</a> on each page.</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -497,6 +497,11 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
|
||||||
<h2>Latest Changelogs</h2>
|
<h2>Latest Changelogs</h2>
|
||||||
|
|
||||||
|
<h3 class="date-style">6 October 2022</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Added the <a href="https://ogp.me/">Open Graph protocol</a> on each page.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<h3 class="date-style">5 October 2022</h3>
|
<h3 class="date-style">5 October 2022</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Added navigation links bar under the websit banner on each page.</li>
|
<li>Added navigation links bar under the websit banner on each page.</li>
|
||||||
|
|
|
||||||
92
feed.xml
92
feed.xml
|
|
@ -4,13 +4,71 @@
|
||||||
<subtitle>Leilukin's personal website.</subtitle>
|
<subtitle>Leilukin's personal website.</subtitle>
|
||||||
<link href="https://leilukin.com/feed.xml" rel="self"/>
|
<link href="https://leilukin.com/feed.xml" rel="self"/>
|
||||||
<link href="https://leilukin.com"/>
|
<link href="https://leilukin.com"/>
|
||||||
<updated>2024-08-18T01:40:57Z</updated>
|
<updated>2024-08-18T12:41:48Z</updated>
|
||||||
<id>https://leilukin.com/</id>
|
<id>https://leilukin.com/</id>
|
||||||
<author>
|
<author>
|
||||||
<name>Leilukin</name>
|
<name>Leilukin</name>
|
||||||
<email>contact@leilukin.com</email>
|
<email>contact@leilukin.com</email>
|
||||||
</author>
|
</author>
|
||||||
|
|
||||||
|
<entry>
|
||||||
|
<title>Changelog: 18 August 2024</title>
|
||||||
|
<link href="https://leilukin.com/"/>
|
||||||
|
<updated>2024-08-18T12:33:42Z</updated>
|
||||||
|
<id>https://leilukin.com/</id>
|
||||||
|
<content type="html"><ul>
|
||||||
|
<li>New blog post about me officially becoming a professional web developer, <a href="https://leilukin.com/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer">&quot;From Hobbyist to Professional Web Developer&quot;</a>.</li>
|
||||||
|
</ul>
|
||||||
|
</content>
|
||||||
|
</entry>
|
||||||
|
|
||||||
|
<entry>
|
||||||
|
<title>From Hobbyist to Professional Web Developer | Blog</title>
|
||||||
|
<link href="https://leilukin.com/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/"/>
|
||||||
|
<updated>2024-08-18T12:28:21Z</updated>
|
||||||
|
<id>https://leilukin.com/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/</id>
|
||||||
|
<content type="html"><p>I am pleased to announce that I am officially a professional web developer now — starting from 16 August 2024, I am working for a local traditional Chinese medicine (TCM) healthcare company, with my job involving web development, UX design and graphic design. I owe much to this very website for inspiring me to pursue web development as a profession.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="my-web-design-origin-story">My Web Design Origin Story</h2>
|
||||||
|
<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/#my-web-design-origin-story" aria-labelledby="my-web-design-origin-story"><span hidden="">#</span></a></div>
|
||||||
|
<p>My interest in web design and development go back as far as my teenage years in the 2000s. I had a GeoCities account, but by the time I started to participate on the web when I was around 14, blogs were on the rise, so blogging was my first foray into creating on the internet, so I did not experience creating and coding a personal website like other GeoCities users did. That said, I got my start on HTML and CSS through blogging, by editing the codes of widgets and blog themes, while being inspired by many other blogs.</p>
|
||||||
|
<p>In particular, there was a Taiwanese blogger who was a professional graphic designer with a gorgeous header made with Flash, who ended up being an inspiration for me to aspire to become a graphic designer when I grew up. I did study graphic design, earn a diploma and began working as a graphic designer. However, years in the field, I got burned out; there were multiple factors contributing to my burnout from the graphic design field, but the short version is that the reality of graphic design work, at least in my experience, did not turn out as great as what my younger self had expected and hoped for.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="rekindled-interest-in-web-design">Rekindled Interest in Web Design</h2>
|
||||||
|
<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/#rekindled-interest-in-web-design" aria-labelledby="rekindled-interest-in-web-design"><span hidden="">#</span></a></div>
|
||||||
|
<p>In 2022, my interest in web design was rekindled when I discovered Neocities through Tumblr, and the resurgence of creating personal websites, so decided to build and code my own website to gather various stuff I have created and curated across various online spaces. For this, I re-learned HTML and CSS, and began to truly experience the joy of carving one's own space on the web, and the more I worked on my website, the more I learned about not only web design, but also web development, by dabbling in JavaScript, which became the first programming language I actually learned.</p>
|
||||||
|
<details class="content-disclosure">
|
||||||
|
<summary class="content-disclosure__summary">Side Note: First programming language I used</summary>
|
||||||
|
<div class="content-disclosure__content"><p>Technically, the first programming language I had ever used is NWScript, a scripting language based on the C programming language and used for the video games <cite>Neverwinter Nights</cite> and <cite>Star Wars: Knights of the Old Republic</cite> series, since I got into modding, including creating mods for the <cite>Knights of the Old Republic</cite> games before building my website, but I did not actually learn or understand programming concepts (such as variables, data types, etc.) until I started to learn JavaScript, so I do not count NWScript as my first programming language.</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
<p>Furthermore, despite being burned out from graphic design as a profession, my graphic design background does come in handy in building Leilukin's Hub, by designing and creating graphics for my website, including header image, site button, favicon, etc., as well as applying my design knowledge and skill to design my own website, from colour schemes to layout.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="web-development-more-than-a-hobby">Web Development: More than a Hobby</h2>
|
||||||
|
<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/#web-development-more-than-a-hobby" aria-labelledby="web-development-more-than-a-hobby"><span hidden="">#</span></a></div>
|
||||||
|
<p>Over time, my interest in web development evolved enough to take online coding courses, starting with <a href="https://www.freecodecamp.org/">freeCodeCamp</a>, then <a href="https://scrimba.com/">Scrimba</a> shortly after. Taking these courses made me realise that these languages have evolved a lot since more than a decade ago. I applied the HTML, CSS and JavaScript skills and knowledge I learned from these courses to make improvements to my website.</p>
|
||||||
|
<p>Meanwhile, learning that there were people who became developers without a computer science degree inspired me to consider switching my career path to web development. In other words, web design and development have become more than a hobby to me. I did not expect it to be easy, so I did put as much as I could in learning and practising web development. That said, Leilukin's Hub remains a hobby project, and it serves as a good platform for me to practice and experiment my front end web development.</p>
|
||||||
|
<p>After teaching myself to code for almost two years, and received multiple code and tech-related certifications, I updated my résumé with information about my interest in switching career from graphic design to web development, and hope for transferring my creativity and design expertise into building the web. I started to try hunting for front end web developer jobs, but my attempts to apply for the job for many companies did not succeed, then I received a surprised belated birthday present in the form of a job interview invitation.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="new-job-interview-a-surprise-belated-birthday-present">New Job Interview: A Surprise Belated Birthday Present</h2>
|
||||||
|
<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/#new-job-interview-a-surprise-belated-birthday-present" aria-labelledby="new-job-interview-a-surprise-belated-birthday-present"><span hidden="">#</span></a></div>
|
||||||
|
<p>On 29 July 2024, a day after my birthday, I received an invitation by the managing director of a local traditional Chinese medicine company to attend an interview with him. The company was looking for someone with web development expertise to work on and improve their website, which is built with WordPress, and the managing director discovered my résumé on a Malaysian job hunting website I had registered an account on.</p>
|
||||||
|
<p>During my interview, I explained to the managing director that I have been looking to switch career from graphic design to web development. Turned out, the company was also interested in hiring a web developer with design expertise to improve the front end of their website, so my 8 years worth of graphic design experience was a bonus. A week after the interview, the managing director sent me a job offer, and I accepted and got hired, with my responsibilities include web development, UX design and graphic design.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="wordpress-developer-by-day-eleventy-developer-by-night">WordPress Developer by Day, Eleventy Developer by Night</h2>
|
||||||
|
<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/#wordpress-developer-by-day-eleventy-developer-by-night" aria-labelledby="wordpress-developer-by-day-eleventy-developer-by-night"><span hidden="">#</span></a></div>
|
||||||
|
<p>Starting my professional web development journey with WordPress is going to be a new experience for me. I had brief experience with working on WordPress websites as a website administrator in one of my previous jobs, but never as a developer. Furthermore, prior to receiving this job offer, I never studied WordPress development, nor built my own website with WordPress.</p>
|
||||||
|
<p>That said, I hope to apply the programming knowledge and skills I learned from the coding courses I had taken to adapt to learning WordPress development. My confidence in my ability to learn new tech skills was bolstered by the time I created a <a href="https://leilukin.com/projects/code/bellabuffs-phpmailer/">fork for the fanlisting script BellaBuffs with SMTP support</a> despite my inexperience with PHP. I am looking forward to learning more about PHP with my new job as well.</p>
|
||||||
|
<p>Although now I work on WordPress in my day job, my personal website will continue to be built with Eleventy. One of the reasons I wanted to pursue web development as a profession is the freedom to learn and use different tools outside day job while continuing to grow as a developer.</p>
|
||||||
|
<p>None of the coding courses I took taught about Eleventy or any static site generator, but <a href="https://leilukin.com/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">rebuilding Leilukin's Hub with Eleventy in April 2024</a> allowed me to learn more about web development, not to mention I do have a lot of fun with using Eleventy. Therefore, I am content to be a WordPress developer by day, Eleventy developer by night.</p>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
|
<h2 id="wrapping-up">Wrapping Up</h2>
|
||||||
|
<a class="heading-anchor" href="https://leilukin.com/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/#wrapping-up" aria-labelledby="wrapping-up"><span hidden="">#</span></a></div>
|
||||||
|
<p>Looking back, even I am amazed by the fact that building this very website kickstarted my path to become a professional web developer, especially since I did not come from a tech educational or industrial background, but I am glad that it happened.</p>
|
||||||
|
<p>I am happy to be able to switch my career path to web development despite not having a computer science degree, and that my prior working experience as a graphic designer helped with getting this new opportunity.</p>
|
||||||
|
</content>
|
||||||
|
</entry>
|
||||||
|
|
||||||
<entry>
|
<entry>
|
||||||
<title>Changelog: 11 August 2024</title>
|
<title>Changelog: 11 August 2024</title>
|
||||||
<link href="https://leilukin.com/"/>
|
<link href="https://leilukin.com/"/>
|
||||||
|
|
@ -504,38 +562,6 @@ module<span class="token punctuation">.</span><span cla
|
||||||
<content type="html"><ul>
|
<content type="html"><ul>
|
||||||
<li>New blog post: <a href="https://leilukin.com/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved">My Cassette Beasts Fanlisting Application has been Approved</a></li>
|
<li>New blog post: <a href="https://leilukin.com/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved">My Cassette Beasts Fanlisting Application has been Approved</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</content>
|
|
||||||
</entry>
|
|
||||||
|
|
||||||
<entry>
|
|
||||||
<title>My Cassette Beasts Fanlisting Application has been Approved | Blog</title>
|
|
||||||
<link href="https://leilukin.com/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/"/>
|
|
||||||
<updated>2024-06-24T05:23:00Z</updated>
|
|
||||||
<id>https://leilukin.com/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/</id>
|
|
||||||
<content type="html"><p>On 22 June 2024, I submitted an <a href="https://thefanlistings.org/start/apply.php">application form</a> to <a href="https://thefanlistings.org/">The Fanlistings Network</a>, also known as TFL.org, to build and run a <cite>Cassette Beasts</cite> fanlisting, and now TFL.org has approved my application! <cite>Cassette Beasts</cite> is now on TFL.org's approved list under the Games category and the <a href="https://www.thefanlistings.org/browse.php?show=games&amp;start=8">Computer, Console, &amp; Video Games subcategory</a> (<a href="https://web.archive.org/web/20240624045621/https%3A%2F%2Fwww.thefanlistings.org%2Fbrowse.php%3Fshow%3Dgames%26start%3D8">view the web archive version</a>).</p>
|
|
||||||
<details class="content-disclosure">
|
|
||||||
<summary class="content-disclosure__summary">What is a fanlisting?</summary>
|
|
||||||
<div class="content-disclosure__content"><p>For those who do not know what a fanlisting is, TFL.org has defined fanslitings as below:</p>
|
|
||||||
<blockquote>
|
|
||||||
<p>A fanlisting is simply an online listing of fans of a subject, such as a TV show, actor, or musician, that is created by an individual and open for fans from around the world to join. There are no costs, and the only requirements to join a fanlisting are your name and country. Fanlistings do not have to be large sites (although some are) - they are just a place where you can have your name listed along with other fans of the same subject. TheFanlistings.org is the original (but not only) web directory for fanlistings, dedicated to uniting fans across the globe.</p>
|
|
||||||
</blockquote>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
<p>This is a major moment for me as both a webmaster and a <cite>Cassette Beasts</cite> fan. As a webmaster, I have been applying and joining fanlistings since I built my own website, as I have always found fanlistings a neat idea to gather and discover other people who share your interests across the world, as listing your country is a requirement when you apply to join a fanlisting. Recently, I have been considering building and running a fanlisting myself, with <cite>Cassette Beasts</cite> being my first choice since there is no fanlisting for <cite>Cassette Beasts</cite> yet. I began to dabble in PHP, so I can use a script like <a href="https://www.jemjabella.co.uk/scripts/bellabuffs/">BellaBuffs</a> to build a fanlisting. With my application approved by The Fanlistings Network, the <cite>Cassette Beasts</cite> fanlisting will be the first fanlisting I build and run.</p>
|
|
||||||
<p><cite>Cassette Beasts</cite> has become my favourite video game ever since I started playing it in July 2023, to the extent that not only I have a <a href="https://leilukin.com/shrines/cassettebeasts"><cite>Cassette Beasts</cite> shrine</a> on my website, I had already begun to consider creating the shrine even before beating the main campaign. I have also been tirelessly recommending the game throughout various online spaces. Therefore, I am honoured to be given this opportunity to build and run a fanlisting for <cite>Cassette Beasts</cite> that is approved by The Fanlistings Network, to add to my ongoing effort to boost the game's visibility.</p>
|
|
||||||
<p>The <cite>Cassette Beasts</cite> fanlisting is not ready yet at this moment, especially since I was not certain if The Fanlistings Network would approve my application, but now with their approval, I am going to work on building the <cite>Cassette Beasts</cite> fanlisting. TFL.org has a <a href="https://thefanlistings.org/start/rules.php">rule</a> that fanlisting owners need to complete their fanlisting within four weeks, so stay tuned for upcoming updates for my <cite>Cassette Beasts</cite> fanlisting!</p>
|
|
||||||
<p>Now that I will be running my own fanlisting, I will be also creating a fanlisting collective to gather all fanlistings I own, join and have applied to in one place. Since <a href="https://www.netlify.com/">Netlify</a>, which currently hosts the main site of Leilukin's Hub, does not support PHP, I will be hosting my fanlisting collective, including my <cite>Cassette Beasts</cite> fanlisting, on <a href="https://www.infinityfree.com/">InfinityFree</a>.</p>
|
|
||||||
</content>
|
|
||||||
</entry>
|
|
||||||
|
|
||||||
<entry>
|
|
||||||
<title>Changelog: 23 June 2024</title>
|
|
||||||
<link href="https://leilukin.com/"/>
|
|
||||||
<updated>2024-06-23T15:36:00Z</updated>
|
|
||||||
<id>https://leilukin.com/</id>
|
|
||||||
<content type="html"><ul>
|
|
||||||
<li>Add <a href="https://leilukin.com/adoptables">Adoptables page</a>.</li>
|
|
||||||
</ul>
|
|
||||||
</content>
|
</content>
|
||||||
</entry>
|
</entry>
|
||||||
</feed>
|
</feed>
|
||||||
|
|
@ -437,14 +437,9 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<h2>What is New?</h2>
|
<h2>What is New?</h2>
|
||||||
<div class="text-box">
|
<div class="text-box">
|
||||||
|
|
||||||
<h3>Changelog: 11 August 2024</h3>
|
<h3>Changelog: 18 August 2024</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Improve the site's <a href="/feed.xml">RSS feed</a>:
|
<li>New blog post about me officially becoming a professional web developer, <a href="/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer">"From Hobbyist to Professional Web Developer"</a>.</li>
|
||||||
<ul>
|
|
||||||
<li>Make RSS feeds <a href="https://blog.jim-nielsen.com/2021/automatically-discoverable-rss-feeds/">automatically discoverable</a> by feed readers</li>
|
|
||||||
<li>Use time and time zone to make feed items' timestamps accurate</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p><a href="/changelogs">View all site changelogs</a></p>
|
<p><a href="/changelogs">View all site changelogs</a></p>
|
||||||
|
|
|
||||||
|
|
@ -386,10 +386,15 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
|
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p><em>This page was last updated on 6 August 2024.</em></p>
|
<p><em>This page was last updated on 18 August 2024.</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>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>
|
<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">
|
<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>
|
||||||
|
<div class="heading-wrapper h2">
|
||||||
<h2 id="migrating-leilukins-hub-and-its-subsites-to-hostinger">Migrating Leilukin's Hub and Its Subsites to Hostinger</h2>
|
<h2 id="migrating-leilukins-hub-and-its-subsites-to-hostinger">Migrating Leilukin's Hub and Its Subsites to Hostinger</h2>
|
||||||
<a class="heading-anchor" href="#migrating-leilukins-hub-and-its-subsites-to-hostinger" aria-labelledby="migrating-leilukins-hub-and-its-subsites-to-hostinger"><span hidden>#</span></a></div>
|
<a class="heading-anchor" href="#migrating-leilukins-hub-and-its-subsites-to-hostinger" aria-labelledby="migrating-leilukins-hub-and-its-subsites-to-hostinger"><span hidden>#</span></a></div>
|
||||||
<p>Starting with 25 July 2024, Leilukin's Hub and all its subsites, including its <a href="https://tumbleblog.leilukin.com/">tumbleblog</a> and <a href="https://fan.leilukin.com/">fanlisting collective</a>, have been migrated to <a href="https://www.hostinger.my/">Hostinger</a>.</p>
|
<p>Starting with 25 July 2024, Leilukin's Hub and all its subsites, including its <a href="https://tumbleblog.leilukin.com/">tumbleblog</a> and <a href="https://fan.leilukin.com/">fanlisting collective</a>, have been migrated to <a href="https://www.hostinger.my/">Hostinger</a>.</p>
|
||||||
|
|
|
||||||
|
|
@ -443,7 +443,8 @@ drop-shadow(0.1rem 0.1rem 0.2rem rgba(30, 30, 30, 0.8))
|
||||||
<li><a href="/blog/posts/2024-06-21-leilukins-hub-tumbleblog-launched/">Leilukin's Hub Tumbleblog Launched</a></li>
|
<li><a href="/blog/posts/2024-06-21-leilukins-hub-tumbleblog-launched/">Leilukin's Hub Tumbleblog Launched</a></li>
|
||||||
<li><a href="/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/">My Cassette Beasts Fanlisting Application has been Approved</a></li>
|
<li><a href="/blog/posts/2024-06-24-cassette-beasts-fanlisting-approved/">My Cassette Beasts Fanlisting Application has been Approved</a></li>
|
||||||
<li><a href="/blog/posts/2024-07-02-fanlisting-collective-launch/">Cassette Beasts Fanlisting and My Fanlisting Collective Launched</a></li>
|
<li><a href="/blog/posts/2024-07-02-fanlisting-collective-launch/">Cassette Beasts Fanlisting and My Fanlisting Collective Launched</a></li>
|
||||||
<li><a href="/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/">Leilukin's Hub Has Migrated to Hostinger</a></li></ul></li></ul></li>
|
<li><a href="/blog/posts/2024-07-27-hostinger-migration-leilukins-hub/">Leilukin's Hub Has Migrated to Hostinger</a></li>
|
||||||
|
<li><a href="/blog/posts/2024-08-18-from-hobbyist-to-professional-web-developer/">From Hobbyist to Professional Web Developer</a></li></ul></li></ul></li>
|
||||||
<li><a href="/articles/">Articles</a><ul><li><a href="/articles/kotor2-modder-interview-ars-technica/">The modders who spent 15 years fixing Knights of the Old Republic 2 @ Ars Technica</a></li>
|
<li><a href="/articles/">Articles</a><ul><li><a href="/articles/kotor2-modder-interview-ars-technica/">The modders who spent 15 years fixing Knights of the Old Republic 2 @ Ars Technica</a></li>
|
||||||
<li><a href="/articles/lgbtq-booklet-interview-misi-bawang/">Floating in a Sky Full of Pride: LGBTQ+ Booklet Artist Interview from MISI:Bawang</a></li>
|
<li><a href="/articles/lgbtq-booklet-interview-misi-bawang/">Floating in a Sky Full of Pride: LGBTQ+ Booklet Artist Interview from MISI:Bawang</a></li>
|
||||||
<li><a href="/articles/anti-harry-potter-jk-rowling-masterlist/">Anti-Harry Potter and Anti-J. K. Rowling Masterlist</a></li>
|
<li><a href="/articles/anti-harry-potter-jk-rowling-masterlist/">Anti-Harry Potter and Anti-J. K. Rowling Masterlist</a></li>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue