Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
leilukin-site/blog/posts/2024-08-18-from-hobbyist-to.../index.html

599 lines
27 KiB
HTML
Raw Normal View History

Build: (b4531a8) Add info about me being a professional web dev
2024-08-18 12:41:52 +00:00
<!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&#39;s Hub" href="/feed.xml">
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/lexend/lexend-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-display: swap;
font-family: 'Lexend';
font-style: normal;
font-weight: 400;
src: url('/assets/fonts/lexend/lexend-v19-latin-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Lexend';
font-style: normal;
font-weight: 600;
src: url('/assets/fonts/lexend/lexend-v19-latin-600.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Lexend';
font-style: normal;
font-weight: 700;
src: url('/assets/fonts/lexend/lexend-v19-latin-700.woff2') format('woff2');
}
</style>
<link rel="stylesheet" href="/assets/fonts/intel-one-mono/intel-one-mono.css">
<link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/plugins.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/a11y-syntax-highlighting-dark.css"><link rel="stylesheet" href="/assets/css/pridesymbols.css"><link rel="stylesheet" href="/assets/css/utility.css">
<style>.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&#39;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>