Designing and Coding my Personal Website from scratch

This website was designed from scratch to satisfy my needs for a personal website, to showcase my professional competencies and to improve my knowledge in HTML and CSS

Project Image
Project Owner:

John N. G. Samarasinghe

Project Outcome:

Design a simple and professional website on a custom domain to showcase my projects and my skills while improving my skills in HTML, php, CSS and SQL

Project End Date:

2021-03-03

Project tags:

Web design, DIY, Projects, Portfolio

Dive in to details

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

Similar Posts

See other projects and posts in the same category as this post

blog item Website Overhaul with SQL & PHP
sql, php 2023-05-07 | Read More....
blog item Designing and Coding my Personal Website from scratch
This website was designed from scratch to satisfy my needs for a personal website, to showcase my professional competencies and to improve my knowledge in HTML and CSS
Web design, DIY, Projects, Portfolio 2021-03-03 | Read More....
blog item History of iamJohnnySam Logos
iamJohnnySam, Logo, blogspot 2021-01-01 | Read More....
Comment Box is loading comments...