Access Project: Here

Prologue

This post was definitely long overdue, if it was up to me then I would have remade the blog and release this post all in the first week of January. With that being said, this is pretty much the first “proper” post of 2025 so I do want to put more effort into it, a lot has happened but thats a story for another time. In this post, I’m going to cover basically my entire blog’s motivation, design, functionality, and more. This is going to be a more technical post about my blog and some deeper personal stuff won’t be covered here. Hope you enjoy it, happy reading.

Table of Content

1. How Yuk’s blog started

Everything began with My first post on May 15th 2024. Looking back at it with hindsight, yeah I was definitely clueless, but nonetheless what came out of it was functional and good enough for me at the time. Without going into details, I created the blog to share my ideas, to have a space to work in my way and to inspire others. I’d like to express that inspire here doesn’t mean I want to feel superior or be seen as “knowing”. I simply feel joy when others strive for better, and in turn perhaps that initiative would cascade, and maybe it would make life less cold for even more people as well.

On why I decided to create a personal blog instead of something perhaps simpler like a to do app or a calculator app for my first website, I guess if you know me then its pretty obvious. Nevertheless, it was a combination of alignment, capability, and circumstances, to see what it has become now and what it could be in the future, it is surreal indeed.

2. Old Yuk’s blog (2024)

2.1. Techstack

• Core Structure: HTML, CSS, JavaScript
  • HTML for structuring the layout, embedding it with Liquid templates and Ruby plugins helped to generate content seamlessly when paired with Jekyll
  • CSS can be painful at times especially if you haven’t learned all its quirk, still have quite the boundless capability and enable nice visual for both PC and mobile view.
  • JavaScript for the old blog was pretty basic and not much utilized but was still straight forward enough for me to leave it all to AI and figure things out when AI can’t.
• Site Generator: Jekyll
  • Jekyll is what they call a Static Site Generator (SSG). If you have ever seen HTML you probably can’t imagine what writing a blog post like this in raw HTML would be like, but thanks to SSGs, you can simply write your content in Markdown, which is pretty much like writing in notepad or word, docs, etc… and SSGs will convert it into HTML seamlessly. There are many SSGs like Jekyll but it caught my attention because GitHub recommended it.
• Hosting: GitHub Pages
  • If you haven’t know already, GitHub provide you with free hosting and domain for a website that you can use for your hobby and small scale projects. Note that for GitHub pages it only allows for Static Site, which simply mean that no database, no server side code stuff like accounts or comments, transaction (or just a really bad idea to treat a static site like a full stack site). While there is some soft limits, the free hosting is nice and helps for starting out just like me and this blog.

2.2. Old Blog Showcase

2.2.1. Design Language

Now I’m going to take you through a brief tour back to my old blog, this should be interesting especially if you have never seen it before, just know that from that, it evolved to this, the site that you are on right now. I’m going to be showing images of the latest version of the old blog, but its not that different from the first version so don’t worry.

Back then I had no experience in any of the stuff I mentioned above in 2.1. Techstack, so the overall design of the blog was quite primitive, It primarily follow this one column pattern for every page and post, which works fine for posts but was pretty lazy for the other pages, though it being able to adapt to all the different platforms was pretty nice. Overall stuff you see below was pretty much the same as the first version with very little difference:

As you can see it was very easy to adapt it for mobile, all these images were taken on PC and it still looks like mobile. This one column design is pretty much consistent throughout every page and post of this version. By the way originally the header, footer and background did not have any patterns to them, they were just blocks of color.

2.2.2. Home Page

The Home Page is the blog’s landing page, with featured posts, socials and navigation to other pages. The 3 nav buttons Archive About and Contact remain unchanged since the original version, mainly because it fits on mobile nicely too. There is also a button that directed to an update log for the blog. Note how I do use a lot of emojis as button labels and so on as these were simple and easy way to include some concise infographic though it does mess with the aesthetic and can sometime be inconsistent with multiple platforms in mind.

Note: The Web Project button was just a little test for some of my ideas, it work relatively straight forward as back then projects are just like posts but with some custom elements and JavaScript to them like a TicTacToe game or a Game of Life implementation. This was not in the original version.

2.2.3. Archive Page

The Archive Page is where I stored or of my post, the navigation look pretty weird because I was reusing the nav bar of the home page. Some functionality came later than others but in short you can filter post by their categories which is the 5 options other than home in that nav bar (these categories changed a few times) and the search bar allow you to index post as you type. Something interesting about this page is that there is no pagination of posts at all, even though at first I didn’t really need it, eventually I had like 42 posts, really say something about scalability.

Later there were 2 new buttons, 1 that randomized emojis for absolutely no reason and 1 that hide the thumbnails of post in archive.

2.2.4. Posts

Of course the focus of any blog should be its content, that is why I worked on the user experience on posts the most, here are recap of the UI / UX of posts in its final version of the old blog:

Post card display

Originally each of the post had a thumbnail tied to it, this was mostly for trying to make the content more engaging especially in the early days when there was not a lot of post. Tags and reading time was added much later.

Navigation and Header info

You can navigate to the Home Page or the Archive Page. Here display the title of the post, release date and reading time, if its a thread (basically still a post), the text underneath the title would show “Last updated: (date)” instead.

Blockquotes (Math blocks)

I primarily used blockquotes for displaying MathJax math blocks (though they can contain normal content too), this helped a lot with writing technical content and was my first time writing Latex, nowadays I can say that I’m quite familiar with writing math Latex, which is a huge plus because it also helped with my academic stuff too. At first they were just static blocks that display math and can be scrolled horizontally if overflow occurs, later I made them collapsible just to be consistent.

Codeblocks

This was what led to the design of the blockquotes in the first place, I built this blog with code in mind first so I had a lot more time tinkering with this stuff. The highlighter used is called Rouge Highlighter (to make code colorful). Originally they were also just static block, later I made the collapsible, added a copy button and line numbers.

Accessibility

Overtime I added a few new features to enhance user experience, first is a button to collapse / expand all codeblocks and blockquotes, later is a light mode which is quite janky given the static nature of the website.

I later added full UI translation for Vietnamese content (Not a language option / full translation for the entire site) but the most complex functionality in posts is probably the table of content and linkage feature, you can learn more about it in the new blog.

2.3. Conclusion

As told, the old blog was quite primitive and I admit in hindsight it really did feel like there was not a lot going on, but I was learning, and 42 posts accumulated over time, so definitely functional. It was especially handy for me to do my homework as it make it somewhat less unbearable though there is definitely a slow down in terms of homework progress (compared to writing on paper or not doing it the blog at all).

Nevertheless, I built it from the ground up, indeed Jekyll have pre-made templates that you can even choose from but this design, is mine, these words are mine, this blog is mine. That has always stuck with me, even if it seems insignificant, I still feel as if I’m in my own little abode whenever I work on it.

3. New Yuk’s blog (2025)

3.1. Motivation

At the time of writing this it is currently Lunar New Year of 2025 and I’ve just wrapped up the first semester of my second year. Honestly the timing works out pretty nicely, I will probably go into more details in newer posts but basically I’m planning a bunch of stuff for the next semester and I expect this space would be immensely useful for it especially to work out ideas and note down stuff. I think this time last year I was working on Gomoku Bot, which I’ll admit was a bit random lol. This time around, rebuilding the blog sounds both aligned and just the right amount of work to put in during the holidays. Moreover the old blog was looking less and less appealing to me so its a matter of growth too I guess.

At first I was only considering it, but then some of my friends shared with me a few blog of people they knew and they inspired a lot in the remaking of this blog, here are some of those sites:

• tungtt.dev
• quanhoang-pm.github.io
• leohuynh.dev

With those in mind, I did a lot of research and planning, and eventually settled on a roadmap to rework the blog. On January 12th 2025 (which is about 12 days to the time of this post) I made my last commit to the old version, created a new branch and started working. Technically not until January 17th did I actually finished all the finals and went home to work, so to be fair this new blog took around a week to remake, but whatever I guess its just some personal pride, flexing on development time is not all that hot (looking at you I made a blog in 2 days).

3.2. Techstack and Workflow

If you haven’t notice, both the new and old version uses the same techstack. With only one additional addon called Giscus which allowed for comments on a static site, more on that later. The choice to not move to newer and more sophisticated stuff like frameworks is mostly because for now this is all I need, and I don’t really intend to go deeper in to web development so this is quite alright for me at the moment.

Because the techstack remains the same, I want to go deeper into the workflow of this new blog with a diagram:

Like I said, at first I was still hesitating because even though I enjoy working on this blog and conversely web dev stuff, it still doesn’t align with my goals and stuff I have planned for the next semester, to me spending time on this was more like playing a video game and what not. But after researching more about the capability of static site and what the trio HTML, CSS, JS can do, I must say that I am quite satisfied with the end result that you are experiencing right now.

With this system in place, I can (still) simply write all of my content entirely in markdown without messing around in the code and release it by redeploying the site everytime I have something new to put on. This not only allowed me to still keep it being a static site but was also to avoid making it too overkill for example converting it to a fullstack web or having to learn a modern web framework.

3.3. New Blog Showcase

Note that you can access most of the new stuff pretty easily and see it for yourself so i won’t cover them as much as the old blog. Now, I’m going to briefly go over the new changes and design of my blog, for more details you should check out the blog’s update log which can be accessed most easily in About. For staters I’m going to list some obvious and universal changes:

• UI / UX -first development: The site is designed with horizontal PC screen, vertical PC screen, and mobile in mind.
• The color scheme remains relatively the same with less unique colors and shades, I still quite enjoy this neon aqua aesthetic.
• Site’s font changed from 'Aller', sans-serif to 'Nunito', sans-serif which is more rounded and I really like its vibe, pretty great Vietnamese compatibility too.
• New logo for Yuk, this logo does have functionality and usually behave like this: If you are not at the header of the page then it will bring you to the Home Page if you are not already there, otherwise it would scroll to the top of the page.
• Added a scroll to top button for pages that seems to need it.

3.3.1. Home Page

The Home Page has been completely reworked with new content, design, and functionality that dynamically adapts to different platforms. Key features include:

• A highlight panel for note-worthy posts and projects.
• A few extra panels for more information and will go away on smaller viewport.
• Featured posts remained the same, though the display of post cards have been redesigned with less emphasis on thumbnail images.
• A small section for project previews.
• Coming soon - Explore Page: A secret for now.

3.3.2. Archive Page

The Archive Page has been improved significantly and is the one with the most work put in:

• Filter by post Category, or Tag(s).
• Sort by Reading Time or Release Date.
• Search with text matching for the Title, Description, and Tag(s).
• Most importantly the layout will adapt to various viewport for efficient indexing.
• Pagination: Each page have 6 posts to avoid excessive scrolling especially to avoid the quirk of the old blog’s Archive Page.

3.3.3. Projects Page

A new page to showcase my mid-large scale projects (eg. Website, Program, Technical Paper, Reports, etc…). Each project cards will include an Access Link that gives direct access to the project (if available, eg. GitHub, Google Drive, etc…) and a See More link that will provide a complementary post for the project (if available).

3.3.4. Posts

Posts have been decluttered and formatted more cleanly, you can experience it with any posts. Also added an Accessibility Panel that you can access with the three bars in the header for more functionality.

Most significant addition to posts this time around are Comments - Powered by Giscus, a free, open-sourced application that you can install to your GitHub account to allow for a comments implementation even on static sites like this. It utilizes GitHub Discussion to manage and render comments right inside your site using an iframe, an absolute gem for this project.

4. Yuk’s blog going forward

Well for the time being, I do think that this is plenty enough for me. It would be a solace to be able to work and share my progress here, a place that I feel represent me. Since I don’t really intent to pursuit web development any deeper than this for the time being, I probably would focus more on content rather than peripherals. Because of that, it would probably be a long time before the Explore Page sees the light of day.

So in the next few months, I suppose you can expect more frequent posts as I do try to cover everything on here when I have the time, the last hiatus was just because things was a bit too chaotic and I was not that committed either. Nevertheless, I simply hope that this blog, will help and inspire those in need.

Epilogue

Welp, now that the blog is pretty much finished, I can finally relax for a brief while, and spend time with my family. Once the new semester starts, I will always have a fresh environment that represent me to work and share my progress, sounds nice.