This Website

This website was made from scratch to showcase my projects from both my work experience and my degree. Behind the scenes it uses Django and Vanilla JavaScript to create a minimalist Single Page Application. 

I started the project knowing that I needed something on the root of my domain that I already used for several projects. For about 3 years, this was the first page you saw when you visited fr3ddie.me:

This ominous page needed to go! I set out designing a simple prototype in Keynote. I liked the idea of having a 'project' grid that the user could navigate on the left and then dynamically loading in the content on the right. I also mocked up what the mobile view could look like and a simple two tone favicon.

After making these prototype pages in Keynote, I showed these designs to some of my friends to get their opinion. Generally feedback was positive apart from some confusion about the images on the left perhaps being confused as project images. 

After gathering feedback and fine tuning the design I set to work making the HTML template, at this point without any backend.

This was the final HTML design. I used bootstrap to do the grid layout and to apply any styling to elements. I also wrote some custom CSS to get the mobile layout to look cleaner.

I then begun the backend development. Behind the scenes it is really simple, just a django model for an article with basic metadata about that article. There are no other models other than the built in Django authentication models.

To edit the articles, I modified the same view on the end user side with some extra functions for adding and editing articles. It looks like this:

I tried to make it as simple as possible, as you can see tinyMCE self hosted is used to edit the articles providing raw HTML that is then saved into the model. I did also try editor.js but the JSON output wasn't ideal and wasn't as customizable as I needed for my use case. The editor view activates when logged in as me. I used Django Rest Framework as a helper library for providing articles via a REST API to the javascript that helps run the page. I also added viewer.js to help enlarge images when clicked.

The final stage was writing up and collating a list of all my projects! I already had some starting points from my university interview portfolio in PDF form but I searched all my project folders to see what I had done to give the website what it is today!

In the future, I will add projects as I complete them in a easy way without having to worry about paying subscription fees to any blog provider and having it in my own unique format.