Refactoring my personal website, Part 1: The design
After initially creating a personal website as a small side project over a year ago, I had decided expand the project and add some more functionality to it, in particular the capability for blogging.
In the first part of this blog series, I will explain how I approached completely overhauling the website's design.
Sketching and initial setup
The initial design I had in mind for the new look of the website was a split view look. A big advantage of structuring the website in this way is that it makes the sections of the website easily exchangeable or expandable, because the content side of the website is a largely unconstrained, blank slate for every section that is added or updated.
To realize this, I heavily relied on the use of flexbox, both for the split screen view and the actual structure of the content itsself.
First, to ensure that the body size always matches the window size the following setup is used:
This sets the
flex-shrink properties to
because of this and
flex-basis being set to
auto the container will grow
and shrink to fill the entire window.
Vertical split view: navigation and content
Next, to set up the split view, the container for the two views has to be set to
display: flex; and the
flex attribute has to be correctly set up
in the two child views.
Fixing content overflow issues
Right now, content that does not fit into the content view will break the design,
as the nav and the content are both coupled to each other. Thus, if the content overflows,
#navContainer will grow with the
to a distorted navigation.
To amend this the actual
#contentContainer is wrapped by an
with the following configuration.
#contentContainer is now anchored at a fixed position and will capture any overflowing content
scrolling on the page. This means that the
#overflowContainer can no longer overflow, as content
already being handled by its child node.
successfully been decoupled and the navigation no longer breaks when content overflows.
Styling the scrollbar
For some finishing touches, the scrollbar is being styled to fit in seamlessy with the rest of the website. Note that at the time of writing, the setup for Firefox and Chrome, Edge, Safari and Opera differs, as the latter do not yet support the standard CSS attributes for customizing scrollbars.
The result of this setup is the website on which you are currently reading this blogpost.
Utilizing flexbox is an extremely versatile way of rapidly designing and building appealing websites. However, it requires a through understanding of what is going on under the hood, as there are quite a few tricky to solve bugs that can occur when dealing with flexbox, some of which you now know how to solve.
If you found this post interesting or helpful, check out the next post in this series "Refactoring my personal website Part 2: Code syntax highlighting"