I’d been meaning to make my own personal website for a while now but hadn’t gotten around to it for a couple reasons: for one, I didn’t know how exactly I wanted to use it—what purpose would it serve besides that of any other ordinary personal website/blog (and I wasn’t even sure if I wanted to use it as a blog)? And of course, those choices would inform my design decisions when I would finally get around to making my website. It eventually came down to if I wanted a static site that I made from scratch in pure HTML/CSS/JS or that was based on a Jekyll template and built with GitHub pages. And at some point, I decided to go with the Jekyll template because web “design” (as opposed to development) isn’t my strongest area; it’s easy enough to cobble together a basic Bootstrap website that isn’t some aesthetic abomination, but a lot of people who are (frankly) better at making things look good have put a lot of time into, well, making things look good, so it just made sense to use an existing template and modify it to my unique (ish) needs/preferences. I think I stumbled across the Halve theme while browsing one of GitHub’s collection of Jekyll themes, and decided to use that as my foundation. Since then, I’ve made some moderately heavy modifications to the internal structure of the project, so I’m just gonna go through some of those changes, commit-by-commit, and try to explain my thought process for anyone interested (but mostly for the sake of proper documentation and posterity). Note: most of these sections are actually not in chronological order—I just arranged them to fit more cleanly into some sort of narrative.
| 06a69ab |
| 7870932 |
| e105a6b |
| 9a3aac6 |
This is Halve:
Some more screenshots:
And on mobile:
You can find Halve on GitHub with some solid documentation on how to get up and running.
| 8051816 |
| 1885084 |
I basically just followed this guide to setting up a GitHub Pages site locally with Jekyll and wrote env-setup.sh for future reference since I ran into some dependency issues.
| 8cf30ee |
| d30773f |
The way Halve is originally set up has the projects page as an overlay on the other pages, which I personally really disliked, so I went ahead and made the projects overlay into a fully-fledged page. This involved updating the projects icon href on the rest of the layouts, making a separate projects.html (which was basically identical to the original overlay.html) layout and projects.md page, and then updating a bunch of CSS. It worked pretty well the first time around—the second commit’s just fixing a CSS inheritance I forgot in the first commit and found while testing the new projects page on different browsers (probably something to do with Firefox’s default CSS versus Chrome’s and Edge’s).
| f82432f |
| 436a468 |
| 59c8c02 |
| 62e349c |
| 3774bdc |
| 45b45da |
I wasn’t really a fan of the projects page to begin with so I decided to replace it altogether. At this point I still had yet to add my resume to the site as well, so I decided to just replace the projects page with a resume. I didn’t want to just link to a PDF so I started looking into web-based resumes. So, I did some research and settled on the Jekyll theme online-cv. I wasn’t a huge fan of how the project was structured, so I rewrote a fair bit of the theme, while still keeping parts of the structure and styling intact. After that I just merged the web resume into my main site, added my own embellishments (e.g. GitHub icon/links for projects, a “Download as PDF” button in the sidebar, a section for relevant coursework at UCSD), and replaced /projects with /resume in a giant commit where I ended up restructuring the entire site (more on that later).
| 028af1b |
| 7e064b4 |
| b286671 |
| 262c03b |
| 45b45da |
Pretty self-explanatory. The pages had different “navbars”: the home page indicated what the icons stood for (i.e. had the “POSTS” and “PROJECTS” text under the icons) but the posts-list and post layouts didn’t so I went ahead and changed that in the layouts’ HTML. And since the projects page was originally an overlay, all it had was the projects icon, which closed the overlay, but that seemed a little restrictive and not very user-centered, so I added this standard navbar to the projects page as well, albeit color-inverted since that looked much cleaner. And then, when I restructured the entire project (in a giant commit that feels like a non sequitur now), I moved that standardized navbar to a template (/_includes/navbar.html).
| 4b1b238 |
| 1e2d82f |
| 0138b40 |
| 79f4a01 |
| ba61c3c |
| 45b45da |
One thing I noticed with the original theme was that when going from the home page to the posts page or an individual post, the icons on the top right would shift slightly left. I realized that was because of the scrollbar throwing off the icons’ offsets, so I decided to hide the scrollbars (while still maintaining the ability to scroll, of course). This was pretty easy via ::-webkit-scrollbar, but the problem is that that only works on browsers that support webkit (e.g. Chrome and Safari) and browsers that didn’t (e.g. Firefox and Edge) still had the scrollbars and the shifting icon issue. I found this Stack Overflow post pretty helpful; basically, it was just adding this snippet of JavaScript to each affected HTML file:
var block = document.getElementById('affected-block');
block.style.marginRight = (block.clientWidth - block.offsetWidth) + "px";
What that does is add a margin-right style rule to the affected block, where margin-right equals the number of pixels the scrollbar takes up, essentially moving the entire block some n pixels right and hiding the scrollbar off-screen. Of course, this creates a horizontal scrollbar since the vertical scrollbar is now off-screen, but the horizontal scrollbar can be easily hidden with no issues via the overflow-x: hidden rule. This code snippet would get its own script (assets/js/scrollbars.js) in that last commit.
| 6f12da3 |
So I can see just how few people visit.
| 47c09a4 |
| a8587d6 |
| 1c184b9 |
| c78187c |
| 0c65264 |
| 3b9626c |
| 91a656 |
| ba61c3c |
| ... |
| 45b45da |
More housekeeping and just making the site mine. The commit messages seem pretty self-explanatory.
| 45b45da |
I just found it really amusing and almost anticlimactic how I was updating this post while actually implementing all these changes, then ended up rewriting a significant portion of basically everything in the end. Each section basically became “I did this, then I did that, then I rewrote everything.” It’s very anticlimactic.
For reference, here’s what that commit includes (from the commit message):
/projects with /resume/projects and associated filespage layout/_includes/ to /assets/js/| 29b52b8 |
| 95bced9 |
| 24f40a5 |
| 9bc021b |
Came up with a better placeholder than “Hi MTV!”, wrote an actual introduction/blurb, added a favicon (my bitmoji), validated most of the site code, and ran through most of the front-end checklist.
For anyone who bothered reading this far, I’m still not entirely sure what this website is for, but I’m sure I’ll figure it out at some point. At the very least, I can put “portfolio” type stuff like my personal projects, and I applied for a slot at KSDT (UCSD’s college radio), so it might be cool to post my weekly playlists as blog posts—assuming I do get a slot. We’ll see, I guess?