Putu

I worked with the Mahlathini Development Foundation, a non-government organisation specialising in agricultural innovation in rural environments, in creating their website. The site features a fully-responsive design and is optimised for SEO (Search Engine Optimisation). It is built upon WordPress, using a custom theme which I built from scratch. The following languages were employed in this process:

• PHP for the theme’s base.
• SASS, a CSS pre-processor, for easy, scalable object-oriented BEM (Block Element Modifier) CSS design.
• HTML5
• JavaScript: primarily jQuery

The following tools were used in my workflow:

• Gulp for automating processes such as pre-processing and minification of scripts.
• Blender 3D & GIMP for logo design and the design & web-optimisation of some images.
• Atom, an open-source code editor from GitHub.
• WordPress as a CMS (Content Management System) back-end for managing the site.
• FileZilla FTP for uploading and publishing the site and its updates.

I am quite pleased with the way that the site turned out and have received a number of compliments regarding its design and quality.

For the University of Pretoria JCP Community Project, I was part of a group of three individuals who worked on the Hatfield City Improvement District (Hatfield Precinct) website. Their previous site was not done up to standard and they wanted a new look reflective of their vision.

I was in charge of front-end design and development, where I used Laravel’s Blade templating language. I also worked on some of the back-end, creating a Facebook event fetcher provider which interacts with the Facebook API to collect events from the surrounding Hatfield area. Additionally, I did the JavaScript for front-end effects like parallax, slideshows and helped out with various areas, like troubleshooting and getting the site onto the server.

The project took a few months, but I am quite happy with our results.

Technologies Used

We used Laravel as our framework, because we needed to create a relatively advanced system that we thought something like WordPress would just be a hassle.

I used jQuery for most of the front-end JavaScript, because it was easy for the rest of the team to understand.

I used SASS and BEM (Block Element Modifier) to keep our styling organised. All of our components were designed from scratch and we didn’t use any external css libraries.

The Project

The aim of the project was to create a site that better reflects Hatfield CID and is a useful resource. It’s essentially a directory that shows all of the business and upcoming events in the Hatfield area.

We worked closely with Hatfield CID to make sure that everything we did was up to standard and easy for them to use.

We implemented the following features:

Modern, beautiful design

We wanted to make a site that is attractive inviting to its users (many of which are university students). The purpose is to find out what’s happening in Hatfield, and nobody is going to actively visit a site that doesn’t look the part.

Content management system with Markdown support and image upload

We wanted to make a system that is simple and easy to use for their administration, so we custom designed a back-panel that was intuitive and very quick to learn.

Advertisement system

An important part of the website was to not be a cost, and rather an asset. They wanted businesses to advertise on the site and provide some revenue for Hatfield CID. So we created an advertisement system where businesses can pay to advertise for a set period of time on the site along with a transaction approval system for enabling the advertisement once funds were transferred.

Business registration

To reduce administration, we made it possible for individuals to add and manage their own business. This means that any new business can add their site to the directory, giving everyone an equal opportunity to visit the site.

An administrative approval system

To prevent spam and unwanted content on the site, the administrative dashboard features approval notifications which appear when new content is added to or edited on the site. The content has to be approved before it can be displayed.

Additionally, the administrator can edit and remove all content on the site when necessary.

Automated Facebook event integration

To make life a bit easier for the administrators, and to provide a lot more reason for users to return to the site, I developed a Facebook event fetcher.

Unfortunately, Facebook doesn’t provide a nice API for getting events, so we had to get all of the businesses in the surrounding area, then get the events of those businesses. It also provides events that have already passed for some reason, so we had to work around that, too.

Every twelve hours a CRON job runs the PHP script to fetch the information from Facebook, compare it to the data on the site and add it to the database.

This feature turned out really well and brings a lot more value to the site.

Instant search

Instant search is available on each of the directory pages to let users find what they are looking for easily. I made it instant, because I personally find nothing worse than taking the effort to search, wait for the page to load – because of an incredibly slow server – and then I don’t find anything useful.

The server also isn’t particularly powerful, so we shifted the effort onto the client side.

Google Maps integration

We used Google Maps a lot throughout the site for locating businesses and events, and for the general overview map page where we show pins where all of the businesses and events are.

For a competition a user hosted on MyBroadBand.co.za, I was tasked to create the front-end design of a landing page for SockGate: the free websocket to socket gateway.

The University of Pretoria’s Department of Computer Science website looks like it was designed pre-2000:  Tired of its disappointing appeal, I created a Google Chrome extension to alter the interface of the website to make it more attractive, as well as more accessible by rearranging some elements. The way it works is simple: the extension injects some JavaScript and CSS into the the DOM (Document Object Model) and changes some of the elements around, restructuring the underlying HTML using jQuery and then applying custom styles with the aforementioned CSS. You can see the homepage below: And the “Automarks” page: You can download the extension here: COSUP

Download the App from the Google Play Store. Tuks Timetable is an app I created to aid University of Pretoria students create timetables without clashes, then use that timetable in their academic life. The app features:

• A timetable generator that lets you tell the app which modules you need to take and it will generate as many possible timetables as it can, giving you a choice of the layout of your week.
• A daily timetable viewer: Normally, students seem to keep a screenshot of their timetable on their phones – the app provides a simple, colour-coded timetable as soon as you open it.
• Integrated key dates: Key dates (such as timetable changes, public holidays, university events, etc.) are automatically used to make adjustments to your timetable, and are presented where necessary.
• Automatic test dates: The app automatically finds tests based on the modules you provided and inserts them into your timetable.
• Low battery usage: The app uses about as much battery as a web page, and uses an unnoticeable amount in the background.
• Low data usage: Automatic timetable updates are not compulsory, and the app works offline (except for updating).

The basis of the app was that I was utterly incapable of creating my own timetable without losing my mind at the idea of how much better a program could do it. I had previously created a desktop version of a timetable assistant for University of Pretoria students (you can read a bit about that here). The program did not generate timetables, nor was it available on mobile devices, nor was it designed for day-to-day use.

My end goal was to make a mobile application which could be used on a day-to-day basis and provide useful information. Due to my previous experience with web development, the app was created primarily using web technologies. This allows for the application to easily be made cross-platform.

I created a JSON REST API on my website to serve timetable, key dates and test information. The API’s back-end automatically scrapes the University of Pretoria’s public timetable/calendar/test dates information on a day to day basis, then alters the data for it to be more usable and stores that information into a database. The API was constructed using PHP and MySQL.

The mobile client was created using the Ionic 2 framework, a Typescript (JavaScript) framework built on top of Angular 2, which uses Apache Cordova to deliver apps driven by web technologies to multiple platforms.

The app took around two months to build over the December holidays. I am very chuffed with the outcome, and have been using it for my own personal timetable.  Unfortunately, due to the cost of publishing applications on certain platforms being so high, the app has not yet been released on any platforms other than Android. Hopefully, in future, I will release to other platforms, such as iOS and Windows.

ReApp is a project I worked on aimed at improving the interaction between physiotherapists and their patients by making progress easier to track and implementing instant communication.

Client management

The app features a client management system that allows the physio to group patients and manage them individually.

Instant chat

Instant chat lets patients ask their physio any pending questions in a fast, informal manner.

Client feedback

One of the major points of the app is to get feedback from clients. We created a user-friendly feedback form creator that lets physios create small surveys for clients to answer. The physio can schedule feedback on an interval (like a wake-up questionnaire every day at 6:00 AM), or request an immediate once-off response.

Programs

Programs are groups of exercise and feedback questionnaires that can be assigned to many clients. Programs have exercises assigned to certain days which are automatically shown to clients on the correct day. When a client has finished his/her program for the day, they are presented with a questionnaire regarding the program.

Blind Maze was an idea I had when doing a maze one day. I thought to myself “How on earth would a blind person do this?” So I thought that it would have to work with some form of physical walls so that you could feel each wall and detect the edge you can’t go through. One would have to have incredible spatial concepts in order to have some skill doing it. So I wanted to make it into a game… First up was maze generation. This was very difficult, but I managed to create a system which procedurally generates arrays representing a map in which each element either represents a wall or a path. Making the game from the perspective of blindness was easy enough; just a blank screen, but you cannot feel impact on a computer. So I decided to add vibration — a thud when you hit a wall, and a light tap when you walk down a path. This was perfect, but there is no way somebody is going to have annoying vibrations playing in a quiet public place, so I added a square and a circle as indicators to show that the player has hit a wall or moved into an empty cell, respectively.

deMOLEtion is a game I made for the Blender Game Making Challenge #21. My entry came a tied 5th in the competition. You can find the BlenderArtists.org thread here. The game is a mini arcade game centred around a ninja mole (you, the player) who attempts to stay alive, avoiding construction of buildings and the gassing of his home. Development process included design, programming and music from scratch. I created custom GLSL shaders for any full-screen visual effects. Design was done using GIMP 2.0. Programming using Python 3. Music was performed by me using FL Studio 12.

Art pieces I did for Matric 2015

Mahlathini Development Foundation (official) Hatfield CID (unofficial) TuksNovation contest entry Mahlathini Organics (un-official)

I am able to create small, useful programs using NodeJS and GitHub’s Electron framework, which allows me to build web-based applications made purely with Javascript, CSS and HTML5. My process for making these programs is simple:

1. I see a need.
2. I built a prototype to test whether the idea will be a waste of time or not.
3. I built on that prototype until I am satisfied.
4. I look for another need to fulfill.

As an example: TuksTimeTable is a simple program I designed to help University of Pretoria students plan and adjust their timetables with ease. I noticed that many students were already using spreadsheet software to create timetables, reading the times out of their booklets and trying to find times which didn’t clash. My attempt at solving the issue employs the following features:

• Update lecture times to meet the latest timetable information.
• Detects if a clash will occur with a lecture group before adding it to the timetable.
• Adds all of a group’s lecture times throughout the week in the correct time slots on the correct days with one click.
• Custom time slots.
• Easily remove either one or all lectures of a specific group with one click.
• The ability to save to the cloud.
• Conversion to image format to keep on cellphone.
• And a few more.

I am very capable of assembling, disassembling and upgrading computer hardware. I have built multiple computers for myself, friends and family, and upgraded and/or repaired them over time. Given the right parts, I can correctly assemble a computer and have it set up with Windows 7, 8.x or 10 and some basic programs installed (Thanks, Ninite!) in just a few hours. I am also able to determine the best computer build for the price, given a budget to work with.

I have been using Microsoft Windows PCs since I was a child, and have dealt with and resolved many issues from networking issues to power & performance enhancements to virus eradication in all systems from Windows XP to Windows 10.

I am able to set up a basic working networks, and have experience with router interfaces and Wi-Fi hotspot setup. I also have some minimal experience using pfSense. I am able to set up a Linux machine and create an intranet site using an Apache2 server and PHP.

I am able to use Microsoft Office’s Word, Excel and PowerPoint 2013 and 2016 with ease. Born English-speaking, I am fluent in the language and am capable of detecting and fixing errors in speech and text.