Skip to content

tianjialiu/tianjialiu.github.io

Repository files navigation

tianjialiu.github.io

I used Jonathan McGlone's blog post on 'Creating and Hosting a Personal Site on GitHub' for the bare bones of my Github-hosted website. Previously, I've used Wordpress and Squarespace, but the cost of website hosting is high (e.g. $12/month for Squarespace) and honestly not worth the steep price. With Github Pages, it's free, and you just need to pay for a custom domain name. Google Domains is relatively cheap ($12/year) and easy-to-use (streamlined interface, links to gmail account).

I started with the minimal HTML/CSS code required and didn't choose a fancy template like Bootstrap or HTML5. I liked the process of designing my own website (e.g. choosing fonts) and learning web development basics. Over the years, I've sporadically added various features that I thought looked cool on other people's research websites:

  • Favicon: simple custom shortcut/tab icon [link]
  • Google Analytics: track website traffic [link]
  • Mobile Friendly: increase readability and accessibility of website by adjusting elements based on screen size
  • Social Media Icons: SVG vector-based format icons in footer that link to social media
  • Twitter Feed: widget to show the latest tweets from my Twitter account [link]
  • Sticky Sidebar (js/sticky_sidebar.js): quickly navigate between sections using the sidebar on select pages [code example]
  • Scroll to Top Button (js/scroll_to_top.js): click on a button to automatically scroll back to the top of the page [code example]
  • Dark Mode (js/dark_mode.js): toggle between 🌖 light and 🌒 dark mode versions of the website [code example]
  • Modal Images (js/modal.js): on click, create a pop-up of a zoomed-in version of an image [code example]