Menu
Full Stack
Portfolio Website
Browser Automation
Horizontal Scaling
Full Stack
Biased Post
Full Stack
Apex Designs
Full Stack
Acapollo
Description
This is the 2018 redesign of my portfolio. In the past i've made very heavy portfolio pages. Lots of animations that all added up and slowed down the page. This time around I focused on creating something lightweight that prioritizes the accessibility of the content.
The goal of this project was to create a horizontally scaling service network. As the websites that I create continue to grow in size, scaling has become a mandatory part of my day to day development.

The horizontal scaling was tested by running browser automation through Google's Puppeteer API. The test ran for 2 months, and made use of a master server, and 10 child servers.
It had been a very long time since I had built a custom CMS, and I was excited to revisit the challenge.

The website features 3 main page templates, and is heavily focused on the backend. The goal was to optimize conversion rates through heat maps and custom tracking scripts.
My goal was never to be a freelancer. However after completing a bunch of random small contracts, I decided I needed to legitimize the process and pursue bigger clients.

The website features a dynamic page with a custom booking system, as well as a full login and registration system built from scratch. The website has the ability to create and send contracts to clients.
The idea behind this website was to use people as a filter. If you think about it, if someone links a song on social media it's either really good, or really bad.

The website made use of python scraping to compile a database of soundcloud links. A frontend was then built, deploying these songs into a custom music player that integrated with the soundcloud API.
Project Status
Finished
Frontend
Javascript
HTML
CSS
Web Server
NodeJS
EJS Templating
Express
Server Specs
NGINX Reverse Proxy
AWS EC2 hosting
Web Server
NodeJS
net (Sockets)
Server Specs
NGINX Reverse Proxy
AWS EC2 hosting
Database
MongoDB
Mongoose Framework
Frontend
Javascript
HTML
CSS
Web Server
NodeJS
EJS Templating
Express
Server Specs
NGINX Reverse Proxy
AWS EC2 hosting
Database
MongoDB
Mongoose Framework
Frontend
Javascript
HTML
CSS
Web Server
NodeJS
EJS Templating
Express
Server Specs
NGINX Reverse Proxy
AWS EC2 hosting
Database
MongoDB
Mongoose Framework
Frontend
Javascript
HTML
CSS
Web Server
NodeJS
EJS Templating
Express
Server Specs
NGINX Reverse Proxy
AWS EC2 hosting
Database
MongoDB
Color Palette
Lato
AaBbCc123
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!"#$%&'()=/a
Minimalism
I've always preferred minimalist code when it comes to front end development. Using plain javascript over libraries, and custom css instead of bootstrap. However for most of my career i've been continually learning.
For my portfolio I wanted to put to use what i've learnt, and use only what I needed to make the page operate. The end result is a website that performs efficiently on any platform and is extremely browser compatible.
Accessibility
The biggest challenge with this project came with the need for a content management system (CMS).
When working on projects for myself, accessibility is never a concern. If I need to go in and change something, I can easily and quickly do so. However because this project would be managed by someone else, I needed to create pages that were easy to use for someone with no programming experience.
New Heights
This website was a lot of fun for me. Besides giving me a more legitimate platform for my contracting, it was the first time I really tried to push my design knowledge to the next level.
Dev Priorities
The biggest thing that I learnt from this project is that rapid development is key. Verifying page analytics can be heartbreaking, as an element that you put a lot of effort into may only get a fraction of the total page views.
Ultimately this project taught me where to invest my time, and improved my dev cycle in the long run.