Conrad's Avatar

Conrad Li

Software Engineer

SOCIAL MEDIA

Making This Website

Welcome to my first post! If you’re reading this, you are most likely a friend, possibly someone who received my resume, or definitely a bot (one has already managed to contact me so at least I know the site is working). If you’re none of the above, welcome! I started building this website back in May—got sidetracked for some time—and finally grinded it out over the last few weeks. It has been quite the journey!


Getting Started

I knew I wanted something I could host cheaply, update easily, and load quickly. Without a lot of prior website experience, I didn’t know how to do much of the backend; it also seemed like overkill if I just wanted a space to post host my experience and my photography. Fortunately, someone mentioned static website generators and I settled on Jekyll because it seemed simple enough and could do everything I wanted.


Unfortunately, it took me multiple forks, attempts, and do-overs before I could get the site running. I had no idea what I was doing… at all. From yaml files to the Gemfile to the directory structure, the whole thing made no sense. When I did figure those things out, I wanted to pick my perfect theme. After spending hours scouring the web for free Jekyll templates, no one singular design spoke to me. I liked snippets of different works: the layout designed by Steve Smith; the navigation menu designed by Christian Ezeani; and the resume template by Joel Glovier. I loved the resume theme, but it just didn’t have everything I was looking for. As such, I did what many over-eager computer science majors would do and set out to create my own version.


Lay of the Land

I have a home page where I include a short about section so visitors, like you, could get to know me a little bit. I also wanted short previews to other sections of my website hoping that something would catch your eye.


I also knew I wanted a photography section. During fall 2019, I went abroad to Budapest, Hungary to study software engineering. At the same time, I got really into photography that I’d spend hours sitting in one location and shooting. This section is a nice little space where I can showcase some of my favorite works. Plus, every tile is designed like a polaroid, named and dated accordingly.


As I mentioned earlier, I really liked the resume theme I found, but it wasn’t the only thing I wanted my website to be about. Integrating this layout was a hassle because it was the first task I tackled (for better or worse). There was a lot of learning done through reading someone else’s stylesheet, seeing what was compatible and what would look just plain ugly on my website and then making sure it didn’t overwrite another style.


Finally, I wanted a contact section–something simple but functional. This was actually what inspired me to rebuild the website from scratch so the content would not take the full viewport on desktops. A simple contact page spanning from one edge of the screen to the other would have been a visual crime.


Building, Breaking, Building

While I imagined most visitors would be on desktop, I wanted to make sure mobile and tablet were just as usable. I really wanted a navigation bar that stayed in place while the reader scrolled the main body; but I didn’t want that content to be so wide that people would lose their spot on the page as they read. At the same time, I recognized that it would be difficult to have a sidebar on tablets. Mobile was out of the question.


Making this website look how I envisioned it in my head took considerable amount of time. I have developed a newfound respect for website designers. I didn’t realize how many different screen sizes and orientations designers had to consider for responsive design. I settled on three. Position and display attributes gave me enormous headache, but don’t even get me started on layout shifts when the vertical scroll bar appeared. Horizontal scrollbars should not be allowed to exist.


Every time I made it look “right” on one view, it would break or have unintended consequences on another. I probably spent two full days pushing updates and checking on mobile to make sure the dropdown navigation bar looked right. While Chrome Dev Tools is fantastic, I quickly learned it didn’t always look the same on mobile which was a bummer. I’m sorry for the 50 extra commits on my repository.


Dark Mode, Lazy Load, & Accessibility

After I finished every section and the website wasn’t broken, I was ready to deploy and make some real posts——-shout out to my friends who laughed at my posts about kiwis and apples. But I still wasn’t satisfied. I thought, what about dark mode? It’s a little excessive, but it could be visually appealing. I always developed with the idea in the back of my mind that I wanted a dark mode. Making sure I could easily change the theme whenever I wanted was important in how I created my stylesheets. It took almost a full day to make sure the toggle button and theme was styled the way I wanted. I was getting better (I mean, faster) at it all. Given that dark mode is probably my favorite feature and my default theme for now, it was definitely worth it for me.


I deployed. I was proud. I toggled dark mode back and forth. When I tried to load my website on a slow network, everything was fine… except my photography page which was unbelievably slow on mobile. I didn’t want to sacrifice quality nor quantity. Sure, there were 12 images but it shouldn’t take that long. Why did it take 30 seconds to load a single page? I learned about lazy loading and while it isn’t the biggest deal with today’s internet speeds faster than ever, I wanted it. I spent a day and half incorporating an existing JS/jQuery, converting it to only JS so I wouldn’t have to load another script, but it wasn’t great. After agonizing for hours on why mine was not working that well (a theme at times), I run across a lazy loader by Alexander Farkas’s. Now, images will load in ~2 seconds on mobile on a slow network, but they will still look great. Bless his work.


Throughout these testing, I discovered Lighthouse in the Chrome Dev Tools. At the time, I was bombing performance (especially on photography pages), accessibility, and SEO. Painstakingly, I went through every page and reworked my code to improve accessibility and SEO and I solved performance issues with the lazy loader. Overall, the code is looking better.


Conclusion

This entire process felt like an endless stack. Fix something. Break something else. Fix. Improve. Break. Fix. Break. Change my mind. Fix… and pray it didn’t break something else (usually, it did). Then, test, test, test. Nonetheless, this was an incredibly fun experience. There is something super satisfying about getting the browser to display things as I had intended after hours of work. I learned so much, have gotten more comfortable with web development and designed something I am visually pleased with. There are still things I want to work on: better accessibility, change my polaroids look on tablets, get rid of browser bars on iOS mobile, create a better UI for some features etc. But those are for a later time. Thank you to all the friends who made suggestions, tested my site, and encouraged me along the way. I’m really happy with the results.