My personal website
Form follows function • Art imitates life
I've had a personal website since about 2009. But not only has it gone through several redesigns; its entire purpose changed several times.
Back then, every popular web designer had a personal website: Dave Shea, Eric Meyer, Lea Verou, Doug Bowman. They would post about anything from web design trends to random tech findings to their kids and dogs and trips to Spain (why is it always Spain? what is it about Spain? oh who am I kidding, I loved Spain as well).
So I quickly whipped up a website of my own and I called it "a thousand minutes", because that's about how long it had taken me to write it. I don't have screenshots of it anymore, but here are the highlights:
- Monthly blog posts (mostly 20-year-old-me's "deep" thoughts about life, and some short stories)
- Personality tests
- An earlier version of my ASCII art tutorial
- Some drawings and ASCII art
I bought the domain
juliosepia.com a few years prior to making Julio Sepia my legal name. I'd developed an intuitive understanding of everything that was wrong with my previous website:
- Unprofessional content ("current mood", "current videogame"). I was a development lead by then, and my website needed to reflect that.
- Tiny nondescript thumbnails.
- Editing the site took too long because it was all in HTML.
- It was in Spanish.
My understanding of design had changed as well. I'd learned that design was not about pretty pictures, but about human psychology. But I didn't fully understand things like information hierarchy or usability yet. This new website was going to be my education.
I started, for once in my life, by figuring out the content first instead of the layout. Form follows function, I reminded myself, form follows function... With this in mind, I came up with a WordPress website where everything had its place:
This was also around the time I started calling it a portfolio instead of a... ew... personal website. Because how dare you put me in the same category as all those Neopets and Myspace sites. I am a professional, thank you very much.
(Says the guy who still plays "the floor is lava" in his thirties.)
Anyway, note the prominent site map. This site map drove the entire design and development of the site. Bless you, little site map.
In 2014, I moved to the US to pursue a full time engineering position at Amazon. I had to take down my portfolio website since it was hosted on my previous company's server. But it had fulfilled its purpose.
When the itch to build myself a website came knocking again, things were different. Since I no longer needed to upsell my web development skills, I was free to use my website as an extension of my art hobby. And so, after the initial concepting phase, I decided this new website would be, first and foremost, an image gallery.
The first version of this site took me about a week to write. It was a radical departure from my previous CMS-powered site. Gone was the blog; gone were the intrusive social media buttons, widgets and doodads. I was happy to drop the comments section since it meant not having to clean up spam comments every other week. This new site didn't even have a navigation menu.
This reflected my latest epiphany: agile development. I'd learned that the less code you write, the less you have to maintain. And so I ditched WordPress for a static site generator named Docpad. This also meant I didn't have to keep a PHP server running, and I could easily host this site on S3 + CloudFront.
The new design worked well for a few years. But then I started thinking about selling art prints and figured I'd add a "shop" link to my website; and that's when I realized this design wasn't built to scale. In most placements I tried, the "shop" link stole the show, being the only navigation link in an otherwise flat site. In the end, the only thing that worked was to make it an inline link in the website's opening statement. But this wasn't ideal.
Also, even though this website was supposed to be exclusively about art, some videogame and web development content had started creeping in. But my analytics showed that most of my visitors were artists or art enthusiasts, and I didn't like cluttering their experience with tech projects they wouldn't be interested in.
And finally, I wasn't happy with Docpad. The configuration had to be written in CoffeeScript, which was on its way out. These issues prompted me to tackle another redesign.
Is this it? The highest evolution of my website? The ultimate lifeform? The Mewtwo of personal websites?
Yes. For now. It took quite a few Dittos to get there, but it was worth it.
I'd been playing around with this ink design.
My new favorite static site generator, Gatsby, allowed me to put my React skills to use.