Personal Website

On January 1st 2023, I decided it was time to learn how to code. The goal was to get a foundation on programming and possibly find something I love within that. I always thought of this as the revival of my coding passion. When I was around 15, I was certain that I wanted to be a software engineer. I thought nothing could change my mind, until of course something did. I went into product design and engineering but I guess some part of me still wanted to be able to code - at least at the basic level.

David Malan, the teacher of CS50, immediately drew me in to the world of computer science - I absolutely loved the course, the teaching, and the problem tasks! It was the best teaching I had experienced, and it was all online! I took the course alongside my internship at a product design consultancy, where I coincidently had a few coding projects. I suddenly realised how valuable coding was within engineering - I found myself trying to automate everything!

CS50 had a main focus on the fundamentals of computer science, from hardware, to software, and to the logical flows of thinking when writing a script. This was all great, but the subject that really interested me was Web Programming which was touched on briefly at the end of the course. I was immediately fascinated. It was a tool to making anything you wanted on the web. The scope was so infinite - you could make anything! My mind went crazy thinking of all the things I could do. I think I loved it because the web development process had one similar to product design - one of my true passions. It was at this point that I realised that I had grown up using the internet and the web, but I knew nothing of how it worked. I wanted to learn a bit more about this topic, so I chose a web application as my final project for the CS50 course.

Now that I had decided to do my web application for my final project, I needed to come up with an idea. I wanted something simple, yet effective - A theme I go for in most of my design works. I had been keen to develop a Gym training tracking app on iOS, so I thought it may be a good idea to start off by making a simpler version of it on the web. I researched how exactly to make a website, and found myself stressing about which framework was best to use. After speaking to my friend @Jakub Sekula about it, he assured me Next JS was a great choice, especially since Next 13 had just launched. I was still very new to JavaScript, and since Next JS was a React framework, it would be another challenge to learn React and JavaScript. Luckily, Jakub was able to teach me most of the basics to get me started.

As I began making my training web application, I was constantly running into web developer's personal portfolio websites. I was amazed at some of their work, and all it did was make me want to make a personal website. It would be a much bigger task than my simple training app, but the bigger the challenge, the better reward right? I didn't need any convincing. I immediately paused my work on the training app and moved over my personal website. This was going to be a huge project, and so I reached out to a friend who had already coded his own portfolio website, and asked him for some tips. Right away I was instructed to draw a flow diagram of how exactly my website would flow - how many pages? how do they each link together? What components are to be reused on each page, if any...? Whilst I was planning the setup and layout of the website, I was also imagining what it may look like - how would it represent me? Do I need special fonts? Oh, and what colours do I need to use?

Through my research and learning in the best practices in good web-design , it seemed as though font-design was an extremely important factor in the final product. The font-face dictates the feel and the aesthetic of the website. With all this new found pressure on ensuring my font face was perfect, I spent hours and hours diving through every Google font, researching quirky unique fonts, and looking at fonts on billboards and adverts everyday. To be honest, there were just too many options and I couldn't whittle them down, so I thought I would just start by copying the best in class - Apple. I was looking for a simple and clean font, and that is Apples design philosophy after all, so I was sure that the San Francisco font would work perfectly . Nope. I was wrong. Something just didn't sit right. It did not look the same way it looked on the Apple website and this really bugged me. As a designer it is frustrating when you know the design isn't quite right, but you don't know how to fix it.

I ignored the font for a few weeks and carried on designing the other basic parts of the website such as the flow of pages, the landing page, and the differences in the mobile and desktop sites. Using my first draft of the landing page, I came back to typography and experimented with some standard Google Fonts. I chose Montserrat - I had seen it in one of the 'Best Fonts 2023' websites. I instantly knew this font felt right for the aesthetic I was going for. It worked for my personality and the intent I was looking for - something clean, not too basic, with a hint of personality. I now use Montserrat across the entire website, playing with the letter spacing, font-weight, and text size to alter the look and feel of my text.

In similar vain to the font face, I was determined to ensure that I picked the right colour palette from the get go - it's the perfectionist in me. The colours were easier than the font faces - I wanted to simply choose my favourite colours as they would best reflect my personality. Black, orange, and blue - done! I used Adobe’s colour palette generator to pick the specifics within each of these colours. I was lucky that orange and blue were opposites as it produced a great contrasts between the accent colours.

The rest of this project is still being written up... Come back soon!