a3k.me

I wanted to make a personal website, but since I'm a web developer, I wanted to make it from scratch!

It started as a blog, where I can publish posts about IT field, in markdown syntax. So there is not database!

Goals: • Markdown support • Simple and accessible UI • Dynamic OG images generation • Contact form with sendgrid integration

It took a long time as a side project, but I learned a lot while building it.

I started with Sveltekit even while it was in beta, but it was stable enough for me.

I used a UI library named spaper which gave the blog a pen and paper kind of looking, this was nice while building to focus more on the structure.

I also wrote some scripts to crawl my markdown files while building the website for production, and each one of those scripts had different job:

Generate next-gen optimized image variations from the images attached to each post, so the website can operate faster on slower networks, the generated image formats are AVIF, WebP and PNG. I include all of them where web browsers can pick the best available option.

Generate post thumbnails: This basically takes the main image of the post and uses Web canvas API to write the post title on a white background with its 95% transparent image, and draws some nice lines. This image is then moved to their posts directory located in assets and are used when a post is shared to a social media platform or any website that support open graph.

Generate RSS: This generates rss.xml file to make it easy for people to read my blogs.

Generate sitemap: This is to direct web crawlers like Google bot to my posts

Generate humans.txt: To support humanstxt.org

Update search: This is an upcoming feature.

Those scripts run once at build time when I publish new changes to Github, and Vercel's (the hosting platform I'm using) gets notified of those changes and applies them to my website.

This way my website feels almost as static, and the only thing that runs on the server is the contact form where I validate user input and send their message via sendgrid API to my inbox.

Next, I'll add a search bar that'll also work in back end to contact to my meilisearch instance.

After I published my posts, and glued everything together, I re-designed my blog using tailwind css, and added dark theme support.

Then a friend advised me to revamp the main page and add some info about me, my skills and a contact form, So I followed his advice, and added some nice looking effects, animated background, and a simple contact form at the bottom.

I finished my website , and I'm proud of it, I tested it against a wide variety of web browsers, mobile devices, and different operating systems.

I also made lots of optimizations to get a good score in Google page speed, at least for the blog part.

It's a continuous journey where I always try different technologies, and for my website, I learned a lot about Sveltekit which is a web framework built on top of Svelte, I learned a lot about Node APIs, Canvas, and a lot more.