Making a personal website myself
A journey into my struggle with web development
A little bit of background first. So I’ve been trying to get into this web development thing for awhile now. It all started back in 2012, when I signed up for a few Codecademy online courses. I was rather clueless at the time, so I did a random selection of courses, not knowing what to begin with. I still think this is a major issue for people who want to start coding.
After finishing those online courses I didn’t really do any projects, so I quickly forgot most of what I’d learned. A few years later, I signed up for freeCodeCamp, deciding to start anew. I completed their front-end web dev track and used my newly gained powers to do a simple first version of a personal website. I didn’t spend a lot of time on it, but it was fun to make. It was just pure HTML and CSS — no JavaScript, no frameworks.
Somewhere around the time I finished my Master’s, I had some spare time, so I signed up for Treehouse, again focusing on front-end development. Shortly after that, I stared working for a software development company — not as a developer, but as part of the business team. Although my job didn’t involve any code interaction, it did help that I was close to the latest trends in web technologies.
In my free time (mostly evenings), I played around with a couple of personal projects — first using Django and then Ruby on Rails. If some of you have tried picking up coding (or any other skill for that matter), while working full-time, you know how slow it can be to progress, especially if you also want to maintain some form of social life. Add sports to the equation and your skill progression is reduced to a frustratingly slow pace.
I abandoned the project I had in mind at the time, but I got my bearings in the infinite web tech spectre and learned some good practices. It was time to start working on a personal website again. The current one I had at the time looked like this:
It had a vertical scroll and some short information. Also, some social media links. Actually, another thing that prompted me to design a new webpage, was another personal portfolio website I found online. I liked the UI/UX that the guy (some developer from South America) had created so I decided to use it as inspiration (copy it) and make my own similar website. The end result looked like this:
It had a static sidebar on the left, with a navigation menu, but the site itself was a one-pager. I used Middleman, a framework for creating static websites, based on Ruby on Rails. Main problem areas were the JavaScript that the guy used. I had to adjust it to my use case, which was a bit of a hassle. Another thing that caused quite a few sweats was the contact form, before I finally discovered a cool service called Formspree. I hosted it on Heroku, which was also a cool web technology I got to practice.
I completed the website and stuck with it for awhile, but my hands were itchy and something bothered me about the design. It didn’t really correspond to who I was. So I started changing it again. Around this time, a lot of people asked me why I would bother creating a website for myself from scratch, when I can use a ready made template, Wordpress or any other type of service that offers off-the-shelf sites. Sure, it’s a lot more time consuming, but it’s also much more fun and you learn more along the way. It’s like a detective game, where you try to figure out the correct answer.
The next version of my homepage was pretty minimal, again, taking inspiration from a website I liked. I found that it’s quite difficult to create something that is both minimalist and complex. People need to see that it’s simple, but also know that it took a lot of effort to do. At first, I thought I had achieved that goal, but then I sent it to a friend of mine for feedback and she destroyed me.
When you stare at your design long enough your perception becomes distorted. If you’re not fortunate enough to know someone, who wouldn’t hesitate to tell you the brutal truth, you might end up with something nobody likes.
Shortly after I finished the latest iteration of my website, I started designing it from scratch again. This time, I used a prototyping tool and focused only on the design first, not thinking about how it can be done. I found this to be quite a useful approach — separating design from development.
Sure, it looks simple, but it took quite a few late-night hours to make it work the way I wanted. A professional developer would probably need half a day to achieve the same effect. I’m not sure how much time I spent on it, but I sure was struggling at times. Several issues caused the most problems.
You see those buttons:
That took awhile. To be fair, I didn’t do it from scratch. I started with a hover effect some guy had already made, but had to adjust and integrate it into the site the way I wanted. Basically, that’s the level of web development I think I’ve achieved so far — I can find something similar to what I want and adjust it to fit my needs. If there are several steps on the ladder of programming, that should probably be somewhere around the second one.
Don’t even get me started on my efforts to make it responsive. Fonts, positioning, sizes — everything was different depending on what device you were looking the website on. I still feel that it doesn’t look as it should on some devices, but at least I normalised it to some extent. There’s probably a smarter way to do this with a framework, which I might try in the future.
Another challenge I had in front of me was the data visualisation part of the site I wanted to make. Last winter I got really curious about data science, particularly data analysis and visualisation. I started playing around with R and various data sets. It sort of coincided with my efforts to make a personal website so I decided to combine the two. Since I’m also into running and I frequently take part in running events, it seemed logical to do a section of the site, where I visualise results from runs I’ve participated in.
The ideal goal was to use D3. Take a look at what this guy has done with it. I was totally mind-blown when I saw this. Unfortunately, it’s way more advanced than what my current skills allow me to do, so I used Highcharts instead. It’s a relatively easy, ready to use solution, if you’re not planning on customising it too much. I’m still very much keen on learning D3, though, and I believe that’s the main point of my post. The way to do whatever you set out to accomplish is to keep being curious about how things work and to dig long enough until you’re satisfied with the results.
That being said, I appreciate any feedback on the current state of my personal website — www.rmanev.com. Something about the Projects page still bugs me…
