How I finally built my own website

The most important part was to stop comparing to trends and focus on what mattered

June 15 2019


Update

I've since moved my site to the react framework Gatsby. Remember, I like to keep building things. The takeaways from the exercise of building version one of this site still apply though.


" Between the idea And the reality
Between the motion And the act
Falls the Shadow"
T.S Elliot

Honestly, skill wise I'd been ready to build my own website months before I actually built it. But I kept sabotaging myself by looking at the portfolio sites of other designers. The intention was to collect inspiration, motivation and ideas for this site, but the actual result was completely the opposite. Having decided early on to code the site myself, I realized that I would need more developer expertise to achieve that slick trendy personal site I thought I needed. Comparison is the death of joy Mark Twain said. It has a worse effect on creator motivation. At the time I felt it better to park the project completely.

The much needed epiphany struck not once but twice, a few months later. First when I visited Nishant Verma's site and second during a udemy course I was taking. In a particular module students had to build their own websites, based on the websites of computer science giants, Thomas Cormen and Donald Knuth. These sites had none of the slick gimmicks that I coveted. Yet, were engaging , easy to consume and most importantly, the personality of the individual shone through. No parallax scroll animation needed. I had my moment of clarity. In building my own site I had fallen into the conundrum of focussing on a visual artefact rather than an impactful design outcome to a problem. All the thought leaders, designers and products that I admire ardently followed this philosophy of simplicity, impact and outcome. By comparing myself to trends, I had strayed from the path. (I also went back to this gem for a little self repirmanding, Motherf*cking website.)

Building a solution and not a parallax scroll

Energy level restored, I was back to the drawing board. This time, I asked myself what was the problem I was trying to solve.

  • I needed a website.
  • It needed to be a representation of my worldview and design/life philosophy.
  • It needed to showcase my portfolio and my writing.
  • It needed to be simple enough that I could maintain and add to, without the need to harass my developer friends.
  • It needed to be light and viewable on any device.
  • I should learn something incremental and have fun building it.

Reviewing the checklist above I realised all the skills I needed to build this site, I had already. Also, I deserved a punch in the face for ignoring the obvious.

With the purpose of why I was building this site clear in my mind, it took me a mere two days to complete the build. Starting with loose designs in Sketch, I translated the design to HTML CSS and added a dash of Bootstrap for the responsive grids. The responsiveness though, is majorly hand coded, just because I was having fun writing media queries. And this time, because I was solely focussed on an outcome and a solution, completely ignoring what was trendy, and not comparing myself to anything else, I found my joy and enthusiasm sustained. In fact, they grew with each line of code I wrote and with each refresh of the browser to see the HTML CSS come alive. Following another simple tutorial I hosted everything onto gitpages, linked the repo to my custom domain... And it was done! By no means perfect. But…


itsalive

Moving forward

So now the site's up. And I believe it accomplishes what I set out to do. But there is work to be done. On the roadmap are

  • Optimising the design for accessibility.
  • Setting up a blogging platform. (Hugo or Jekyll, need to take a call)
  • Moving important portfolio pieces to the site itself, rather than behance.

References

  • The Tutorial I used to set up static pages and configure my domain name.
  • Github pages

Update

I've since moved my site to react framework Gatsby. (Remember I like to keep building things) The takeaways from the exercise of building the first version of this site still very much apply though

© 2020 Shreyas Deshpande. Thrilled to hear from you at shreydeshpande@gmail.com.