It’s hard to do things well, and that’s doubly true when you are an engineer that doesn’t have any design experience.
I’ve taken a few attempts in the past to make something that I would be proud of. However each time I would try to remake this personal website, I’d bounce right off. My work normally is quite far from the front-end world, and so I kept trying to teach myself how to use CSS and HTML. Somehow I just found it extremely difficult to understand and visualize what is happening as I changed my code.
I recently was reflecting why I felt so unsatisfied or frustrated whenever I would attempt to write anything related to my page. Each time I would try to recreate the landing page, I would use the same techniques I would when writing some of my other projects - Jump in, define the skeleton, stub things as needed and move around the code. I’d shift things around, comment if I felt something is missing or if it needed to change, and keep looping and finishing todos until things finally clicked.
I realized that this method of working doesn’t mesh with the way I expected to see progress for the webpage. When I stubbed elements, they didn’t reflect the real size of the final element, so when I did finally get around to filling them out, suddenly things looked out of place. Then when I moved things around to see if I could improve anything, all the fiddling I did with the CSS I did the day before was disturbed.
So I started to think about how to help my process, and I realized structuring a frontend project like a high level vision document was probably a good start. Before writing any code, I wrote some bullet points for requirements and drew up a small template of what I might want the site to look like. I then tried to dig into things I wanted to showcase, my interest, links to contact me or my Linkedin, and my writing section.
However, I found myself at an odd standstill. What did a good site look like? I tried to make the HTML of the thing I drew, and I always found it unsatisfactory. Looking back at my requirements, there was a common theme across all of my notes: I had no description of how I wanted things to look or feel. It feels obvious now that I’m writing about it, but I never had to think about colours, animations, or spacing between elements. I didn’t even know how to vocalize what I wanted something to look like.
This led to me browsing a handful of different theme sites looking at dozens of different theme demos created by other awesome people. I noted down what aspects I liked and which colour combinations stood out to me. Noting these details down really helped me understand how I should structure core parts of the webpage, and consider things I never did before.
This is my attempt of trying to make a simple, yet stylized page. One that is extendable and repeatable, taking and collecting inspiration on how I like to build and use my tools to code. This is an ongoing effort, one that I hope to keep iterating on without losing interest. Things that I might want to improve are text legibility, maybe a small layout shift (particularly the header), and maybe making the work experience section interactable.