Personal Website

August 2014

Back before I started university in the summer of 2014, I really wanted to learn how to make websites. I decided to make a personal website for myself from the groundup, using HTML, CSS, Javascript, and PHP. After many, many, many style and code overhauls, spanning a period of about 3 years, I finally decided on the design you're looking at currently.

The Problem

I almost never updated the site.

Why?

I absolutely hate editing raw html to update sites! I hate the steps I have to take to for deployments, and its really hard for me to visuallize what my content will look like unless I see it on the actual page itself. Because of this I literally almost never updated my site after the initial deploy, which is really really bad because I want to use the website as a way to track the projects I've done! Projects such as...this website!

The Solution

Rather than just creating a static site using bootstrap and calling it a day, I decided to make a custom content management system to manage the site content. Similar to wordpress, with the difference being that I could customize it to meet my exact needs.

To simplify things, I used Laravel as my PHP framework for the backend scaffolding of the site, and MySQL as the database. I made my own custom RESTful API for interacting with the database, adding blogs, projects, and uploading files. Then I made a custom admin-panel using Angular.JS secured via SimpleHTTP to actually use the API. The API is also itself secured via SimpleHTTP for simplicity sake.

Now lets talk about the really sick admin panel!

A tour of the admin panel

Heading off to the admin panel of my website, I am greeted with a nice, welcoming message, along with a randomly generated GIF or either a cat, pug, or sloth, that updates once every 10 seconds:

Admin Panel Tour Pt.1

Here I have the ability to click on one of the links on the left, and either manage my files, projects, blogs, or blog series. Clicking on the 'Add a project' I'm able to easily add a project dynamically to the site, as well as set a hidden attribute to toggle whether it displays in production, as well as add images to display in the project carousel. In addition, the content of the project is written in markdown, and gets parsed live on the right panel. Since it uses the same styling as my actual website, it lets me visualize what the post/project will look like when I hit the submit button.

Admin panel pt.2

Then of course I need to actually be able to edit each individual project. Here we have the display all projects view, where I can click on a project to edit an individual one:

Admin panel pt.3

And editing projects has almost the same interface as adding a project:

Admin panel pt.4

However, what about stuff like pictures? How do those get added? It'd be kinda wasteful to do all of this and to have to upload the photos somewhere like imgur in order to reference them. Hence we've also got the ability to upload and delete files!

Admin panel file management

And then of course, blog series and blogs have essentially the same components attached to them, just different fields. Overall I'm pretty proud of the website. It was a long road in actually finishing it, but in the end I learned a lot and was totally worth it.

View on Github