Our final deliverable for our Booklab class was to have a polished portfolio that had a selection of work that we did during the fall and spring semester.
This turned into a much larger project than I intended.
Template site or start from scratch?
I looked at template sites such as WordPress, Squarespace, and Semplice yet inevitably decided to code my entire website from scratch. The reason why I decided to code it was two fold—first, I am poor and second, I knew it would be a learning experience and I am a gluten for punishment. Coding the site myself would allow me the flexibility to host the site where I pleased, and there were a few inexpensive or free options I knew about.
Iterations on Iterations
I started with Bootstrap. Bootstrap was ok but I soon discovered several aspects that I didn’t like. First, Bootstrap had a ton of classes that I had to essentially memorize in order to take full advantage of the framework. At this point, I wasn’t that comfortable with CSS and frustrations began to mount. Second, I stumbled upon this video:
After watching that video, I thought “Fuck it, I am determined to create this website without a ‘crutch’”. The final reason I decided not to use Bootstrap was it was essentially just another templating framework. I really wanted to develop a solid foundation when it comes to HTML5, CSS and JS and I knew the only way to do this was not to use any handicaps.
About this time is where I began to hate myself. While I looked around the classroom and at other students portfolios, I started to see these really well polished portfolios, with slick animations and beautiful layouts and realized that perhaps I had taken the long road for no reason at all. I started really questioning my decision: “Will anyone really care if I coded my own website?” “Does it even matter?”
Fast Forward
In between the above ‘portfolio’ and now, I’ve had about 5 iterations of my website. Finally, I’ve arrived at something that I would call acceptable. But(there’s always a but), I couldn’t get my URLs to look nice. Everything ended in .html. Which bothered me to no end.
After searching Google, I realized what I needed was express JS.
More Learning
Alright, so I’ve got a good handle on HTML5, responsive design, CSS and CSS animations as well as some familiarity with Jquery but I really wanted ‘pretty urls’, you know the kind that look like yourwebsite.com/project vs yourwebsite.com/project.html.
Because of this, I had no choice but to use express JS, which meant I needed to learn how to deploy a node JS app on a server, which meant learning server side JS.
This presented a bunch of new challenges like how to use node, express, create a package.json file, using pug as a templating tool for all my pages and learning how to dynamically deploy my website.
Long Story, Short
After purchasing a new domain, I was finally able to use Git to push my new site to a Heroku server. Check it out! It felt awesome to finally see my site live. This was a multi-month process from learning HTML5 and CSS to deploying my first node app onto a server that I created.
My initial goal was to save the $14 a month by coding my own site and avoiding using a service like Squarespace.
Ultimately, my portfolio ended up costing $3.78 (purchasing my domain name on Namecheap and using a free server on Heroku), however, I definitely paid for it in number of work hours. That being said, I have a solid understanding of CSS grids and flexbox, I can design a responsive site from the ground up and I am now somewhat familiar with server-side JS.
