Why I built my new website as a single html document

A few notes around my new portfolio page.

Photo by Sarah Dorweiler on Unsplash

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.

  • 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!

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.

Web standards

The last time I wrote I a website from scratch with just native web technologies I had to think about certain browsers not supporting display: inline-block, because I was using that to build the layout. Yeah, it was long ago.

Web standards have grown so much since then. Now, for most static websites I’d even argue that you do not need the extra layers of abstraction or tooling. If one is familiar with the basics of HTML, CSS and javascript then that is all that one needs.

  • CSS variables are awesome. Using them inspired me to build the small theme switcher feature. I discovered that you can even use them inside inline SVG elements so just by changing the value of a variable with a few lines of javascript, I changed my entire website’s appearance, even the highlight colours inside the illustrations.
  • With CSS Grid and the grid-area property, I could position most of my layout pieces with a single, semantic line of code. Not that you couldn’t do that using a framework, too — the point is that in today’s web you don’t need a framework to do it.
  • For a project like this, I think there is nothing wrong with being a little verbose with Javascript. It’s okay to use document.querySelector() more frequently and it’s okay to have 7 if() statements inside a single function. Nobody is going to get hurt by doing this and everything will be okay.

It’s pointless to compare extremes. For this simple page, the native web will probably always be faster. For more elaborate pages and web apps, more elaborate tools will yield better results. It is worth reminding ourselves, however, that while it is tempting and maybe even fun to go for the sledgehammer, more often than not it is not worth the lift.

New (Left) — Old (Right)

In conclusion

It’s easy to get caught up in all the great tools that exist today. I think however that we forget the greatest tool of all — the native web. Sometimes that is all we need. 🚀

Product designer from the East EU

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store