Albet Novendo

Hello World

11m

Published at Jan 23, 2025 | Last updated on Jan 25, 2025

Hello and welcome to my first blog post! I’m so excited to share my thoughts with you all. Well, let’s get started!

Before we start, let me introduce myself. My name is Albet Novendo and I’m a software engineer. As you can see from the home page I am currently working as a Backend Developer.

Personally, I also like doing some frontend stuff and Mobile App Development too. Okay, enough about me. Let’s talk about the blog and this website.

Why am I creating this?

You probably didn’t know that this website is actually my third iteration on building my personal webpage.

The First Iteration

The first one was a simple HTML and CSS I use a template by the Colorlib, I forget which one was it. That being said, take a look:

V1 Portfolio

This first version was a simple static website. I didn’t have a blog section back then. I just put my resume and some of my projects. However, this version came with multi-language support. Both English and Bahasa Indonesia. I made the localization by using just vanilla JavaScript changing the DOM content upon the user’s selection.

However, there’s a problem with this approach:

  • The HTML itself is empty. I just put the structure and the content is loaded by JavaScript. This resulting in a bad SEO.
  • Too much dependencies, because I was using a template I had a lot of Dependencies going on resulting in bad load time.
  • Lack of originality. I was using a template and I didn’t have the freedom to customize it as I want.

A version 1.5 existed—a simple “under construction” page for the portfolio—but it’s now lost. I have neither the code nor any images of it. Built with React and Parcel (before I knew about Vite), it contained links to my social media, a brief introduction, and a teaser about a future React version (which never came to be). This version was deployed for a significant period, around one to two years.

The Second Iteration

Overview

This portfolio wasn’t originally planned. It began as a learning exercise for NuxtJS, a Vue.js-based framework. To simplify the design process, I utilized Nuxt UI. The project’s quality surprised me, prompting me to transform it into my personal portfolio.

V2 Portfolio

This iteration marks an overhaul improvement over the prior static site. NuxtJS now powers a full-stack website, running on both the server and client. Let’s delve into its features:

  • Home Page: The home page features content similar to the current portfolio you are viewing, minus the blog section. The project section, however, includes images of the projects.
  • Blog: The blog section highlights the newest blog entry, with the rest of the entries listed below it. It is powered by Nuxt Content. Blog entries require a banner image. The blog also includes a full search feature. The source content is written in MDC Format and stored in a separate remote repository, as Nuxt Content supports it. During build time, the content is fetched and bundled into the website.
  • Collections & Categories: Each blog entry can be categorized and collected.
  • Admin Panel: The admin panel is a separate page that allows me to create, edit, and delete blog entries. It is password-protected with passkey support. The admin panel is used to create commits for the content remote repository and trigger a full redeployment of the website.
  • API Support: The website also includes Github-like Personal Access Token. So we can doing the admin operations anywhere not limited from the admin panel.

Considerations and Issues

Developed in 2023 and deployed in early 2024, this portfolio served me well for a time. However, it eventually felt overly complex and resource-intensive for a personal website. The client-side Lighthouse scores were underwhelming, and the server-side, while functional, utilized serverless functions primarily for the admin panel, which ultimately triggered redeployments due to Nuxt Content’s static generation.

Given the limited blog content, I concluded that the collections, categories, and admin panel were unnecessary. Additionally, the lack of time for mobile app development rendered the API support redundant. Furthermore, the blog pages exhibited occasional caching-related bugs where content wouldn’t update during route changes, requiring a full page refresh.

These factors motivated me to create a new version specifically designed as a lightweight personal website with a focus on SEO, minimal features, and excellent Lighthouse scores (optional).

The Third Iteration (Current)

Finally come the current version of my personal website. The one you are currently viewing. This version is built with Astro, Tailwind, and just JavaScript. No more frameworks, Just plain HTML, CSS, and JavaScript. With Astro.

Overview

If you ever visited the previous version (at above) then you will notice that this version are actually quite similar. It’s just the same website with reskin. But no, in this version, I’m focusing on the SEO and the performance. I’m using Astro to generate the static site and Tailwind for the styling.

No more admin panel, collections / categories, and API support. Just a homepage with mostly same content as the previous added blog section. On the other hand, the blog section also simplified to just a list of blog posts and the blog post itself. No more search feature (use native search), no more categories, and no more collections. Banner also not longer required.

Why Astro?

I have tried Astro before when I create landing page for one of my assignment. I was amazed by the performance and the simplicity of it. I can just use any frontend frameworks I want and it will just work. I can use React, Vue, Svelte, or even just plain HTML. It’s just so good. In the previous project, I used React and it was so fast. So I decided to use Astro for this version.

If you want to see the project, you can visit it here: Rent N Go v2 Landing Page.

Now that thing aside, let’s move to some challanges that I faced during the development of this version:

Neu Brutalism Design

This version also comes with a new look. Based on the Neu Brutalism design. I tried to make this website as close as possible to the Neu Brutalism design. The color scheme, the font, and the layout.

After drawing inspiration from various sources like Dribbble, Behance, and Pinterest, I arrived at this final design. While there might some flaws here and there, such as the color palette potentially being a bit overwhelming, I’m overall pleased with the outcome.

Now, why Neu Brutalism? I can’t really say that because it was unique, I mean look at Whatsapp, they also moving to this direction. But one thing for sure is because I like it. Compared to other design, this one feels more creative and expressive.

This approach, characterized by an abundance of colors, shapes, and sizes, creates a visually stimulating and playful experience. It’s a stark contrast to my previous, more serious designs that often relied on monochrome palettes, minimal shapes, and a ubiquitous presence of rounded rectangles.

But there’s a problem with this current design:

  • Lack of Inspirations: Sure, there might be a lot of design on dribble and stuff. But some of them are just a snap of one page and not the whole website. Making it very hard to produce a consistent design. I have to make it up as I go.
  • IT’S TOO BRIGHT: Again same reason as above. I have no idea how to make a dark mode for this design. I’ll just need to figure it out eventually.
  • Responsiveness: Considering this design often came with large fonts, weird rotation, and stuff, Responsiveness quickly become a challenge. In the end, I have to cuts some of the design on mobile to make it responsive.

In the end, I manage to tackle the first and last point, but the second point will be roadmap for sure.

Mouse Trailing Feature

One of the unique features of this website is the mouse trailing effect. This effect is achieved by using JavaScript to track the mouse position and update the position of the trailing element. The trailing element is a series of circles that follow the mouse cursor. The circles are created using the div element and styled using CSS. The position of the circles is updated using JavaScript by listening to the mousemove event on the document object.

The mouse trailing effect adds an interactive and dynamic element to the website. It creates a sense of movement and liveliness that enhances the user experience. The effect is subtle and does not interfere with the usability of the website. It is a fun and engaging feature that adds visual interest and personality to the website.

The interaction can be seen from data-interactable attribute. This attribute can be placed on any element to make it interactable. Once the mouse hover on top of it the mouse trailing content will change according to the value of data-interactable attribute.

For some reason, the mouse trailing will keep showing even though your mouse is hovering on top of data-interactable=none. It will only stop showing, once you stopped moving your mouse. Fortunely, this was fixed by changing order to handle interaction first then animating it.

Animated Topbar

The reveal of this topbar also animated in a class top to bottom vertical fade animation. This is achieved by using clip-path CSS property and animation property.

Initially, I was planning to animate only the borders, but when I tested the current animation, I think it’s better to animate the whole topbar. Also because I don’t know how to animate only the borders.

Dialog Box

The website also have dialog binding primarly used on the Projects Section. It uses native <dialog /> element and is controlled via attributes with help of JavaScript. The dialog box also cannot be closed by clicking outside of it since I made it that way. When you click outside of the dialog box it will trigger an animation hoping to make the user realize that the dialog box is still open using Web Animation API.

There’s one problem with this dialog box. It’s appear to be on top of the mouse trailing content. Not even Z-Index can solve this. I’m still figuring out how to solve this.

Blog Page

Creating a Blog Page is quite challenging. In fact I had spent many hours figuring out the best integrations for the blog page. Previously, I tried Astro Built-in. It was good but I can’t make the blog page to be dynamic.

Then I tried MDX. MDX was also good because I can replace the HTML Output with other component including Astro’s. But the problem is, they often didn’t provide Props? Like for example the <code /> and <pre /> tag. I had to read the class and parse the language-${lang}.

But, there are another problem. The code block is parsed by default, so I can’t make Copy functionality. I either had to create a custom component and call it on mdx passing the code as props which is not ideal.

Then I tried, Markdoc. Markdoc was really good, and really what I need. However, the integrations did not support rehype… So I can’t use the plugin I want. I had to make one myself. In the end, I revert back to MDX.

Because I encountered Expressive Code! and oh boy it was so good that I only configure some default props and override the style, then voila.

At last, the TOC. I had to make it myself. I had to parse the HTML and get the heading and create a list of it. Then I had to make the scroll to the heading when the user click on the TOC. It was quite challenging but I manage to do it. With data-toc on each li element I can use observer to observe the heading and once the heading is intersecting with the viewport I can highlight the TOC by querying li with data-toc value equal to heading id.

Differences from the Previous Version

So what are the differences between this version and the previous version?

  • Performance: This version is also focusing on the performance. I’m using Tailwind for the styling and Astro for the static site generation with no Front End Frameworks, resulting in build time just taking seconds compared to the previous version which can takes minutes.
  • Simplicity: This version is also focusing on the simplicity. I’m removing the admin panel, collections / categories, and API support.
  • Maintainability: This version is also focusing on the maintainability. No more SSR, ISR, Serverless Fuctions and stuff. Just plain HTML, CSS, and JavaScript.

Moving Forward

Now that I have completed the third iteration of my personal website, I’m excited to see how it will evolve in the future. I have some ideas for future:

  • Localization: Like the first version, I want to add multi-language support. Both English and Bahasa Indonesia. The Blog Post may exist for both or exclusive for one. I am looking into Astro i18n for this.
  • Dark Mode: Everyone loves dark mode. I want to add a dark mode to this website. I’m still figuring out how to make it work with the current design.

I’m also open to suggestions and feedback from you. If you have any ideas or features you would like to see on my website, feel free to reach out to me. Thank you for reading this blog post. I hope you enjoyed it and learned something new. Stay tuned for more blog posts in the future!