558 lines
19 KiB
HTML
558 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr" id="page-top">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
|
|
<meta property="og:title" content="Happy 1st Anniversary to Leilukin's Hub | 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="description" content="Celebrating the first anniversary of Leilukin's Hub and reflecting on the evolution of my website throughout past year.">
|
|
<meta name="generator" content="Eleventy v2.0.1">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://leilukin.neocities.org/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/">
|
|
<meta property="og:site_name" content="Leilukin's Hub">
|
|
<meta property="og:locale" content="en_MY">
|
|
<meta property="og:description" content="Celebrating the first anniversary of Leilukin's Hub and reflecting on the evolution of my website throughout past year.">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:url" content="https://leilukin.neocities.org/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/">
|
|
<meta name="twitter:description" content="Celebrating the first anniversary of Leilukin's Hub and reflecting on the evolution of my website throughout past year.">
|
|
<link rel="canonical" href="https://leilukin.neocities.org/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/assets/css/main.css">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/assets/fonts/noto-sans/noto-sans.css">
|
|
|
|
|
|
<link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
|
|
<link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
|
|
<link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
|
|
|
|
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
|
|
|
|
|
<title>
|
|
Happy 1st Anniversary to Leilukin's Hub | Blog | Leilukin's Hub
|
|
</title>
|
|
</head>
|
|
<body>
|
|
<header class="hero">
|
|
<div class="hero__top-bar hidden"></div>
|
|
<div class="hero__img">
|
|
|
|
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<style>
|
|
.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;
|
|
|
|
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
|
|
|
|
}
|
|
</style>
|
|
|
|
<script defer>
|
|
const hero = document.querySelector(".hero");
|
|
const todayEvent = getTodayEvent();
|
|
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
|
const headerImgEl = document.querySelector(".hero__img");
|
|
|
|
|
|
if (todayEvent != "No event") {
|
|
heroTopBarEl.classList.remove('hidden');
|
|
|
|
if (todayEvent == "Leilukin's Birthday" || todayEvent == "Leilukin's Hub Anniversary") {
|
|
heroTopBarEl.innerHTML = getBlurbHtml(todayEvent);
|
|
} else {
|
|
headerImgEl.classList.add(getBanner(todayEvent));
|
|
heroTopBarEl.innerHTML = getBlurbHtml(todayEvent);
|
|
}
|
|
}
|
|
|
|
function getTodayEvent() {
|
|
const date = new Date();
|
|
const month = date.getMonth() + 1;
|
|
const day = date.getDate();
|
|
|
|
if (month == 3 && day == 1)
|
|
return "Zero Discrimination Day";
|
|
else if (month == 3 && day == 31)
|
|
return "Trans Day of Visibility";
|
|
else if (month == 4 && day == 6)
|
|
return "International Asexuality Day";
|
|
else if (month == 4 && day == 26)
|
|
return "Lesbian Visibility Day";
|
|
else if (month == 5 && day == 17)
|
|
return "IDAHOBIT";
|
|
else if (month == 5 && day == 19)
|
|
return "Agender Pride Day";
|
|
else if (month == 5 && day == 25)
|
|
return "Pansexual and Panromantic Awareness & Visibility Day";
|
|
else if (month == 6)
|
|
return "Pride Month";
|
|
else if (month == 7 && day == 14)
|
|
return "Non-Binary People's Day";
|
|
else if (month == 7 && day == 28)
|
|
return "Leilukin's Birthday";
|
|
else if (month == 9 && day == 11)
|
|
return "Leilukin's Hub Anniversary";
|
|
else if (month == 9 && day == 23)
|
|
return "Bi Visibility Day";
|
|
else if (month == 10 && day == 8)
|
|
return "International Lesbian Day";
|
|
else if (month == 10 && day == 11)
|
|
return "National Coming Out Day";
|
|
else if (month == 10 && day == 26)
|
|
return "Intersex Awareness Day";
|
|
else
|
|
return "No event";
|
|
}
|
|
|
|
function getBanner(day) {
|
|
switch (day) {
|
|
case "Zero Discrimination Day":
|
|
return "flag-progress-intersex";
|
|
break;
|
|
case "Trans Day of Visibility":
|
|
return "flag-trans";
|
|
break;
|
|
case "International Asexuality Day":
|
|
return "flag-ace";
|
|
break;
|
|
case "Lesbian Visibility Day":
|
|
return "flag-lesbian";
|
|
break;
|
|
case "IDAHOBIT":
|
|
return "flag-progress";
|
|
break;
|
|
case "Agender Pride Day":
|
|
return "flag-agender";
|
|
break;
|
|
case "Pansexual and Panromantic Awareness & Visibility Day":
|
|
return "flag-pan";
|
|
break;
|
|
case "Pride Month":
|
|
return "flag-progress-intersex";
|
|
break;
|
|
case "Non-Binary People's Day":
|
|
return "flag-non-binary";
|
|
break;
|
|
case "Bi Visibility Day":
|
|
return "flag-bi";
|
|
break;
|
|
case "International Lesbian Day":
|
|
return "flag-lesbian";
|
|
break;
|
|
case "National Coming Out Day":
|
|
return "flag-rainbow";
|
|
break;
|
|
case "Intersex Awareness Day":
|
|
return "flag-intersex";
|
|
break;
|
|
default:
|
|
return "";
|
|
}
|
|
}
|
|
|
|
function getBlurbHtml(day) {
|
|
switch (day) {
|
|
case "Zero Discrimination Day":
|
|
return `
|
|
Today is <a href="https://www.unaids.org/en/zero-discrimination-day" target="_blank">Zero Discrimination Day</a>
|
|
`;
|
|
break;
|
|
case "Trans Day of Visibility":
|
|
return `
|
|
Today is <a href="https://www.manygendersonevoice.org/tdov.html" target="_blank">Trans Day of Visibility</a>
|
|
`;
|
|
break;
|
|
case "International Asexuality Day":
|
|
return `
|
|
Today is <a href="https://internationalasexualityday.org/en" target="_blank">International Asexuality Day</a>
|
|
`;
|
|
break;
|
|
case "Lesbian Visibility Day":
|
|
return `
|
|
Today is <a href="https://www.lesbianvisibilityweek.com" target="_blank">Lesbian Visibility Day</a>
|
|
`;
|
|
break;
|
|
case "IDAHOBIT":
|
|
return `
|
|
Today is <a href="https://may17.org" target="_blank">International Day Against Homophobia, Biphobia and Transphobia</a></span>
|
|
`;
|
|
break;
|
|
case "Agender Pride Day":
|
|
return `
|
|
Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/" target="_blank">Agender Pride Day</a></span>
|
|
`;
|
|
break;
|
|
case "Pansexual and Panromantic Awareness & Visibility Day":
|
|
return `
|
|
Today is <a href="https://genderedintelligence.co.uk/panvisibilityday" target="_blank">Pansexual and Panromantic Visibility Day</a>
|
|
`;
|
|
break;
|
|
case "Pride Month":
|
|
return `
|
|
Happy <a href="https://www.loc.gov/lgbt-pride-month/about/" target="_blank">Pride Month</a>!
|
|
`;
|
|
break;
|
|
case "Non-Binary People's Day":
|
|
return `
|
|
Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html" target="_blank">Non-Binary People's Day</a>
|
|
`;
|
|
break;
|
|
case "Leilukin's Birthday":
|
|
return `
|
|
Today is Leilukin's birthday
|
|
`;
|
|
break;
|
|
case "Leilukin's Hub Anniversary":
|
|
return `
|
|
Today is the anniversary of the launch of Leilukin's Hub
|
|
`;
|
|
break;
|
|
case "Bi Visibility Day":
|
|
return `
|
|
Today is <a href="https://bivisibilityday.com/about" target="_blank">Bi Visibility Day</a>
|
|
`;
|
|
break;
|
|
case "International Lesbian Day":
|
|
return `
|
|
Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2" target="_blank">International Lesbian Day</a>
|
|
`;
|
|
break;
|
|
case "National Coming Out Day":
|
|
return `
|
|
Today is <a href="https://www.hrc.org/resources/national-coming-out-day" target="_blank">National Coming Out Day</a>
|
|
`;
|
|
break;
|
|
case "Intersex Awareness Day":
|
|
return `
|
|
Today is <a href="https://interactadvocates.org/intersex-awareness-day" target="_blank">Intersex Awareness Day</a>
|
|
`;
|
|
break;
|
|
default:
|
|
return ``;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<nav class="navbar">
|
|
<ul class="nav__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="/links/">Links</a>
|
|
</li>
|
|
<li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
<style>
|
|
.navbar {
|
|
background: var(--clr-navbar-bg);
|
|
padding: 0 0.6rem;
|
|
width: 100%;
|
|
z-index: 999;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.navbar a {
|
|
color: var(--clr-navbar-link);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.navbar a:hover {
|
|
color: var(--clr-link-hover);
|
|
}
|
|
|
|
.navbar a:focus {
|
|
outline-offset: 0.3em;
|
|
outline: 0.15em solid var(--clr-navbar-link);
|
|
}
|
|
|
|
.nav__menu {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
</style>
|
|
|
|
<main>
|
|
<header class="main__header">
|
|
|
|
<ul class="breadcrumbs">
|
|
|
|
<li>
|
|
<a href="/blog/">Blog</a>
|
|
</li>
|
|
<li>
|
|
<a href="/blog/posts/">Blog Archive</a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
|
|
<h1>Happy 1st Anniversary to Leilukin's Hub</h1>
|
|
<div class="article__info">
|
|
<p>Posted on 11 September 2023 by Leilukin
|
|
|
|
|
|
<p>Categories:
|
|
|
|
<a href="/categories/site-updates">site updates</a>,
|
|
|
|
<a href="/categories/site-anniversary">site anniversary</a>
|
|
|
|
</p>
|
|
|
|
<p>🍿 2 min. read</p>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<div class="content__wrapper">
|
|
|
|
|
|
|
|
<article class="article">
|
|
|
|
<p>11 September 2023 marks the first anniversary of Leilukin's Hub, my personal website, hosted on Neocities. I am proud to be able to succeed in not only building my own website, but also updating, improving and maintaining my website to achieve my vision for my own personal hub on the internet outside social media platforms.</p>
|
|
<p>I registered a Neocities account on 28 May 2022, while my own website, Leilukin's Hub, was officially launched on 11 September 2022. I set up this website because I wanted to have a personal web page outside social media platforms to gather various stuff and resources I had created or compiled on online spaces throughout the years. Furthermore, I settled for Neocities because I like the flexibility of customisation by coding my website with HTML, CSS and JavaScript. Initially, I considered and tried <a href="https://carrd.co/">Carrd</a> to create my web pages, but free accounts on Carrd can only add up to 100 elements on a web page, which is not enough for my purpose.</p>
|
|
<p>This site's <a href="/changelogs/">changelog</a> and <a href="/changelogs/layouts">layout archive</a> document the evolution of Leilukin's Hub throughout the past year: from the humble beginning of a simple black background with white text and light brown titles, to the responsive, mobile-friendly, full-fledged personal website with its own site button, <a href="/feed.xml">RSS feed</a>, a <a href="https://htmltomd.com/blog/">blog</a> and multiple <a href="/shrines/">shrines</a>.</p>
|
|
<p>Coding my own website was also an excellent way to put my HTML and CSS knowledge and skills into good use. I already had basic knowledge of HTML and CSS from what I learned from my teenage years of customising my blog on Blogger.</p>
|
|
<p>Working on Leilukin's Hub had ignited my interest in coding, so I took courses to learn more about HTML, CSS, JavaScript and more about coding, and in turn, I put my new coding knowledge into good use by improving and adding more features to Leilukin's Hub, which was totally worth it. Therefore, I have also <a href="/resources/web-building-resources">compiled resources for building websites</a> here for those who need it.</p>
|
|
<p>You may feel intimidated by the idea of building your website because you do not know how to code, but good news! There are plenty of resources for you to learn HTML, CSS and JavaScript, including free courses. Neocities also has <a href="/tutorial/html/">its own HTML course</a> for you to get started. Happy coding!</p>
|
|
|
|
<ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-07-28-my-first-birthday-after-the-launch-of-leilukins-hub/">My First Birthday After the Launch of Leilukin's Hub</a></li><li>Next Post: <a href="/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/">My Cassette Beasts Pombomb Plushie Arrived!</a></li>
|
|
</ul>
|
|
|
|
<style>
|
|
.blog__post--nextprev {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
padding-top: 0.8em;
|
|
margin-top: 2.5em;
|
|
border-top: 0.1em solid var(--clr-title-border);
|
|
}
|
|
</style>
|
|
</article>
|
|
|
|
|
|
|
|
<aside class="right-sidebar">
|
|
<nav class="content__nav sidebar--sticky">
|
|
<h2 class="content__nav--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>
|
|
|
|
<style>
|
|
.content__nav {
|
|
padding: 1.2em clamp(1em, 5%, 1.5em);
|
|
background-color: var(--clr-content-bg);
|
|
}
|
|
|
|
.content__nav--title {
|
|
font-size: 1.7rem;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.breadcrumbs {
|
|
list-style: none;
|
|
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;
|
|
}
|
|
</style>
|
|
</main>
|
|
<footer class="footer">
|
|
<p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>
|
|
|
|
|
|
<ul class="footer__links">
|
|
<li><a
|
|
|
|
href="/sitemap/
|
|
">Site Map</a></li>
|
|
<li><a
|
|
|
|
href="/changelogs/"
|
|
>Changelogs</a></li>
|
|
<li><a href="/feed.xml">RSS</a></li>
|
|
</ul>
|
|
|
|
</footer>
|
|
|
|
<style>
|
|
.footer {
|
|
margin-top: auto;
|
|
background: var(--clr-main-footer-bg);
|
|
padding: 0.8rem;
|
|
text-align: center;
|
|
display: grid;
|
|
}
|
|
|
|
.footer p {
|
|
padding: 0;
|
|
}
|
|
|
|
.footer__links {
|
|
justify-self: center;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
gap: 0.7em;
|
|
}
|
|
|
|
.footer__links li:not(:last-child)::after {
|
|
content: '|';
|
|
padding-left: 0.6em;
|
|
}
|
|
|
|
@media only screen and (min-width: 600px) {
|
|
.footer {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
<button class="top-btn hidden" aria-label="Scroll to top">
|
|
<i class="fa-solid fa-chevron-up"></i>
|
|
</button>
|
|
|
|
<style>
|
|
.top-btn {
|
|
position: fixed;
|
|
margin: 0;
|
|
padding: 0;
|
|
bottom: 0.5rem;
|
|
right: 0.5rem;
|
|
z-index: 999;
|
|
border: none;
|
|
background-color: var(--clr-top-btn-bg);
|
|
color: var(--clr-top-btn-txt);
|
|
border-radius: 50em;
|
|
width: 2rem;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
.top-btn:focus {
|
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
|
outline-offset: 0.15em;
|
|
}
|
|
</style>
|
|
|
|
<script defer>
|
|
const topButton = document.querySelector(".top-btn");
|
|
|
|
window.onscroll = () => {
|
|
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
|
topButton.classList.remove("hidden");
|
|
} else {
|
|
topButton.classList.add("hidden");
|
|
}
|
|
}
|
|
|
|
topButton.addEventListener('click', () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
left: 0,
|
|
behavior: "smooth",
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |