Why I built my new website as a single html document
A few notes around my new portfolio page.
A little backstory
I built my old portfolio website with Vue.js, so I can learn more about the framework. After a while I got tired of maintaining dependencies, CLIs, builds and decided I would try out something new for my new website — I would throw out every bit of tech I didn’t need and use only the essentials.
Note: Vue.js is fantastic. There are just different tools for different jobs. The above is merely a reflection on the rather questionable choice I’ve made for my use case.
One document
What is the minimum? For my needs, it’s a page that hosts info about me and my work. Project pages could either link directly to the projects themselves or to articles here on Medium.
The happy strangeness of this decision
- One page means that I could inline all of the CSS and javascript, even the SVG images into a single HTML document. Why would I make them as separate files and make network requests to them if only one page is going to use the code?
- For me, coding all of the site inside one document was very cathartic. No external complexity or boilerplate to worry about. Just the basic web tech we all know and love. When was the last time you created a new document and started by writing <html> inside it?
- A single document is something very portable. Not that you would, but you could actually send this website to someone over email or IM and they could open it — no local server required, not even an internet connection — it natively works offline!
- Inline SVG images allowed me to directly select the geometry inside them with CSS and manipulate them.
- With whitespaces removed, the document is just over 48 kilobytes. Think of all the bits saved from going across the network!
The happiest of all
With all of the external complexity gone (data binding, components talking to each other, builds and deploys) I now had more mental bandwidth to focus on the details and be more playful and experimental with the page.
