Designing and Coding my Personal Website from scratch

I have wanted to build a website for my own for a very long time. In fact I used to have website hosted on 000webhosting with the url johnsamarasinghe.co.cc that I built for completely free. But about a year after the entire .co.cc domain was shutdown because some people were using it for their shady business.

Recently I watched a video on YouTube by NetworkChuck and I got thinking about this again. Since I wasn't really working on anything at the time I thought I'll give a crack of building my own website. But I didn't want to use any website building tools online. I wanted to build it from scratch with a simple code editor and some YouTube tutorials.

To get started I needed a domain. So I headed over and grabbed myself the domain, "iamjohnnysam.com" to match with my username on every other social media site. At this point I was determined that this domain would not sit without any content on it until the subscription expires like all my previous websites. So I got cracking with some YouTube tutorials which helped me pick up some important concepts in creating modern website designs, and experimented with a few desins to get the best look that I was looking for. The result is the website you see here.

Dark Mode

On the 16th of May, 2021, dark mode was added throughout the website. This was connected to locat storage so that the settings are kept constant throughout the site and during each instance. The toggle for the dark mode was added in the main page menu area.

Google Analytics

On the 16th of May, 2021, the website was connected to Google analytics to monitor the traffic on the website

PHP Overhaul

On the 23rd of May, 2021, I overhauled the entire website and made it with php. I started by creating a proper folder structure to house my main projects, sub projects and other pages. Next I created php or html files for the main and common constructs that appear in every or most pages. Variables were used where customization was required. This means that if there is an error in one of these locations or if there is something that needs to change, I can make the edit in one location to change all the constructs throughout the website. I also made use of the .htaccess to redirect 404 errors to a seperate webpage and hide any .php or .html extensions anywhere in the website.

PHP upgrade

I found this useful video on Web app development after I did my wesite overhaul in May 2021.

A few important chapters from the video