The idea of a personal website is an exciting one. Your thoughts and ideas in digital form can escape the confines of your mind and be entertained by another inquisitive mind anywhere in the world, or beyond. As such, I like to think of it like my own Voyager 1 probe, far out of my sphere of everyday reality, in a place of new worlds where someone may learn from it, and maybe even correspond.

Anyway, with the second iteration to my website, I thought to make a better impression on its visitors. So in this post, I will go over some thoughtful changes with respect to web design.

Responsive elements

With the advent and extreme proliferation of mobile devices connected to the internet, our regular old html/css just won’t cut it. Changing window sizes and screens requires the webpage to adapt in order to just as efficiently present information on a dual monitor desktop as on a smartwatch.

To pick away at this challenge, I incorporated some code that adapts to smaller/larger windows. This means a ‘@media’ tag is used to change the styling for certain screen widths.

In my update, I incorporate this responsiveness in the navbar at the top, the cards on the project page, and a half-baked effort on the text on the main page.

Animations

Movement naturally captures attention. Subtle moving style elements can help guide the viewer’s attention at the desired places. When it is done right, it is also pleasing to the eye, and sometimes can attach itself to an emotional response. Imagine the Playstation startup animations.

In the update, I added a JS file to hide the navbar when scrolling down. With the help of some online tutorials, I added some sliding color animations to the cards on the projects page and spinning social media icons. I also added an animation to cycle through some of my favorite quotes on the front page.

Color scheme

Another subtle but impactful change was implementing a consistent color scheme. I drew inspiration from text editors like Vim and used colors from Ethan Schoonover’s popular solarized theme. He puts a lot of thought into the colors in order to be comfortable to the eyes and easy to read. Also from text-editors, I used the Fira Code monospace font with similar intentions.

Full Functionality

The first version was a great start, but it had some inactive elements. And obviously, a good website should work to its intended capacity. So with this update, here’s a list of new functionality:

• embed the resume instead of linking to it
• add coursework information
• added a blog (this thing!) using jekyll and github pages
• designed a simple logo using vector graphics editing software
• more accessible social links section

Conclusion

Web Design is a surprisingly deep subject, with many things to learn and an evolving platform. Taking a small step into the field has been fun and humbling. Making a website from scratch is not a trivial thing, but it’s something every programmer should learn.

As for the actual content, it is worthwhile to make your own website if you have anything to share. If the Voyager 1 metaphor is too sci-fi for you, think of it as a handwritten letter, except you don’t know who you’re sending it to.

check out my main website!