How to make a ktiwari.dev
A summar of the process of building this website, from one end to the other.
I’ve been looking into building my own website for the last year now, nad between testing out designs on codepen, and trying to learn enough about networking to make a locally hosted server I could run the web server on, I always found one reason or another to delay starting it. But This month, I decided, to just go for it, and even if it didn’t turn out perfectly, I would keep on iterating on it until it was a product I could be satisfied with!
The Stack
On a physical side, I’m hosting this server on an old gaming laptop that I turned into a homelab setup. But to ensure both physical and cyber security for myself and my computer, I’m also running this through Cloadflared, to ensure that I have the industry standard for keeping my devices safe, while also locking everything in my home netwrok down to a personal
For the technical stack, this website was built using Astro, which for the unacquianted, is a framework that allows for websites that would normally need to ship, render and then complete a website on a client side, has the server create a compiled static image that can be served more efficiently to endpoint devices. I’ll be honest I didn’t stumble across this myself, but after doing more research into it’s viability as an option, I can say with confidence that it’s the best tool for a job like a portfolio website, which is best done as a statically served webpage.
The Process
If you’ve gotten this far into my blogs, I’m guessing you’ve at least glanced at my github, my codepen or any of my previous ‘attemnpts’ at starting a website before. Needless to say those were very, very, early attempts at trying to implement random lessons I’d learn from watching a random youtube video or trying to replicate something cool I’d seen online. But I’d never truly sat down to figure out how I want to make my website.
After all, I feel like one of the hardest things about software engineering is not debugging, test making, or even the process of building out features for products. The hardest part can and will always be staring at a blank screen and trying to figure out how to get started. Now, this isn’t due to me simply not knowing what should I do or what could I do, it’s moreso I am one who figures out 10 seperate paths, and then nails what each one would look like. What are the possible ways to implement this? What would make sense? What is just another useless feature and what is a good addition to what I am making? But even before that, for something that’s primary focus is something as vain as announcing to the world, please look at me, where better to start than
The Look
The look is based off of this fun aesthetic I’ve been a fan of for years. It’s known as the Riso aesthetic, which is a style of creating art based around this vibrant, printed feel that allows for the art to pop-out in a way that’s super visually distinct. I’ve tried to emulate that, but I’ll be the first to admit that it falls alot more under the categorization of ‘programmer art’ than it does amazing front-end design. But overall, I feel like I’ve at least created an aesthetic that still feels light and distinct, which I feel like is an accurate enough display of myself to slap my name all over.
The Pages
After I figured out the look I had to figure out what I actually wanted the website to show. What was important enough to me that I felt was worth showing? You can see the end result at the top of this page, but deciding what was worth including was not simply me generating a list of random stuff. Okay well, that’s kind of a lie, I did in fact generate a list of 20 possible options, but I trimmed it down to the ones I found most important.
Projects - This one is pretty self-explantory, giving a more in depth space to talk about random stuff I do is always a good way to show what I’ve done.
Games - My favourite portfolio websites are the ones that have a layer of interactbility, and what better way to do that than to throw in the games I make for me?
About - Again, same thing giving a quick way to get an overview of me and giving a more in-depth look than a resume is something that I thought was worth exploring.
Resume - Again, and I cannot stress this enough, probably an important piece of a portfolio website to have. If I have recruiters reading through these pages, why not make an easy way for them to look at my resume?
That’s most of the website, but I just also wanted to go over
My Favourite Features
This one is a bit more subtle but the scroll bar replacement was something that I was really proud of visually, as I thought that I wanted to come up with something slightly more elegant than a replacement for the basic scrollbar, and I feel like it’s just unintrusive enough without being overtly “too much”.
The Day-Night mode shifter was an absolute must (as a personal dark-mode perma-dweller), but I also wanted to make it more than just a simple toggle to look dark or to look light. My original idea was to have it as a “clock”-type dial, but that quickly got tossed out when I was trying to implement it and realized it felt super weird to try and get it to feel good. So I tried to change it to a simple bar, but then I ran into another issue. This riso palette is cool and still my favourite aesthetic and something that I am proud of, but it does not play well with color changes. Most of the colors looked super ugly, made the text hard to read, and worst of all, made the system feel unsatisfying to use. So I ended up wiuth this final iteration, which although still containing some things I would like to improve, still feels like a feature that isn’t completely halfbaked!