about work skills contact

Hi, I’m Phillip du Plessis.

I’m a fullstack web developer. I craft functional websites.

About me View my work
Phillip du Plessis

I have been a Full Stack Web Developer since 2005 combining HTML, CSS, Javascript, PHP and MySQL to produce some really kick-ass work. Having a programming grounding in C and C++ and along with a passion and knowledge for producing great functional front-end work allows me to work in a space where the slightest thing; a server setting, cookie setting, class name, the format of a response string; can change the way a site behaves functionally.

I specialise in building bespoke solutions for clients, whether it’s a simple email signature or a complex CMS system and front-ends – the kind of stuff that cheap solutions or generic templates can’t give you.

I’m able to work as part of a team although I prefer to code by myself – it helps me maintain control over the flow and the pattern of the site and, as a result, I’ve become a bit of a ‘jack of all trades’. I know a bit about everything, and what I don’t know I’ll research and give you an honest answer whether I can do it or not.

Oh, and I still RTFM all the time 😋.

Download my CV or my resumé for the formal versions, and maybe have a look at my work below while you're here.

🤘 🤙

My Work

I've had the privilege of working on a wide range of local and international clients with many awarded and celebrated agencies and creatives in the industry. These include Expedia, Whiskas (Mars), Nissan, Mercedes-Benz, Cell C, Standard Bank, TBWA\, Joe Public, SAB AB InBev, Reckitt Benckiser, Novartis, Novo Nordisk, McCain, South African National Blood Service, Apartheid Museum, Reach For A Dream to name a few.

Here are some of my favourite sites I'm able to demo or have media for.

McCain – Make-a-PlatePHP + CodeIgniter, MySQL, HTML, CSS, JavaScript

Learn More Gallery

This was a custom campaign site that was built for Mother's Day that allowed people to create their own plates for their Mom's expressing their love and gratitude. Those plates could be bought, printed and delivered.

The build included a responsive front end, additional libraries for the various effect/sliders, SVG imagery for clean crisp images across devices.

The Building plate section required a lot of AJAX interaction, getting/setting value and hiding/showing elements based on the user choices and journey. Once the plate was built – there was a PHP process that ran to build the plate images – one for display, a thumbnail for the gallery and a sharing image for various platforms that would be available on a custom URL for that specific plate. The plates were built with the custom borders, custom fonts/custom image messages. Plates that got bought were flagged in the CMS to be able to approve them to go into the gallery and their thumbnail was made available on the front-end. When the thumbnail was generated on the front-end, there was a random placemat put behind the image on each page load – I needed to keep track of that placemat variant and if the image was chosen to be displayed, I needed to display the same placemat behind the enlarged image for continuity.

There was an ordering process that tied into PayFast, orders were only considered complete once a successful payment was made. Vouchers were also able to be used, these vouchers were generated by a script I wrote according to requirements. Users who received vouchers could enter it on the checkout page to discount the price by one plate/shipping/insurance.

Once a week an export of the previous weeks orders was done – this included generating an order CSV, a design CSV listing the specific plate details (borders, fonts, message) if we needed a designer to tweak something, an SVG image of the message including the font according to specific dimensions for checking/editing per plate per order and a PDF of each SVG image with print crop marks per plate per order. This was all zipped together and made available for download.

A plate was also able to be generated using a tweet and hashtag – this phase did not go live, although it was ready to go.

There was also a admin dashboard that allowed users to see the plates bought per region, favourite products on checkout (a respective voucher for that product range received upon a successful order), custom/predefined messages, borders etc. Reports could be generated using a defined filter list for dates/regions etc. for all orders.

SPAR – Build a SandmanPHP, HTML, CSS, JavaScript

Learn More Demo

This was a quick-turnaround game we were asked to developed for SPAR when they had been let down by another supplier.

It was aimed at their Facebook audience so it had to be built into a page tab, an of course be accessible for mobile devices through a web interface, and it needed to be drag-and-drop capable on all devices. The drag-and-drop was done through a library we managed to find as a quick solution which gave us a solid base to get started from.

A random snowman configuration was created for the user on each load, that needed to travel through the process for validation at the end.

If the user rebuilt the snowman correctly they were presented with the option to be able to enter a draw to win a prize. They were also able to create their own custom post card by dragging their snowman round the scene to where they wanted and that image would be saved for the user to download or share on social media.

James Yeats Smith – PortfolioHTML, CSS, JavaScript

Learn More Gallery

This was a freelance site I developed for an Award-winning Creative Director.

This was before the days of proper responsive, transforms, flexbox, grid etc. so it took quite a lot of styling to get correct. If I had to do it again today I think only the CSS would change majorly with the advances that have been made recently.

What I found really enjoyable about this was the break-away from the standard website layout and getting everything to align and flow. I had to write a ton of styles, but I was really proud of the layout we managed to get done. I was really sad when I saw the site was taken down quite a few years later.

Expedia – Moments in MoroccoPHP + CodeIgniter, MySQL, HTML, CSS, JavaScript

Learn More Demo

An award-winning Tourism site for Expedia promoting Morocco as a destination for a UK, French and German market with the site available in each respective countries language.

The first version allowed the user to create a postcard from their favourite Moroccan destination and send to a friend via email or share to their Facebook or Twitter profiles.

The second version has a switch between a winter and summer theme and content, promoting different destinations for different times of the year - sadly a lot less functionality and fun (for me).

Expedia – Explore MacaoPHP + CodeIgniter, MySQL, HTML, CSS, JavaScript

Learn More Gallery

An award-winning Tourism site for Expedia promoting Macao as a destination for an Australian and US market.

The user was able to create an itinerary from a series of three sliders containing 9 themed images each. Based on the combination of the images, an itinerary is chosen for the user. If the user selected a specific combination of images, a “golden itinerary” is triggered which gives the user an extra entry if they choose to enter the competition and stand a chance to win a trip to Macao.

The user was also able download the PDF created from their itinerary. Once a specific combination has been generated, I saved the PDF so that the next time the combination is triggered I wouldn't have had to generate a new PDF but just serve the existing one.

Expedia – PugliaPHP + CodeIgniter, MySQL, HTML, CSS, JavaScript

Learn More Demo

A Tourism site for Expedia promoting Puglia in Italy as a destination for an US market.

The user could create an itinerary from a series of three course “menus” containing various dishes – a video of each dish was displayed as you select the dish. Based on the combination of the selections, an itinerary is generated for the user and the locations plotted onto a map. The user can also download the PDF created for their itinerary.

Jet – Clear the Stigma, Breast Cancer AwarenessPHP + Wordpress, HTML, CSS, JavaScript

Learn More Gallery

This was a small support piece for a larger award-winning proactive campaign for Breast Cancer Awareness Month. Our client, Jet, and Breast Health Foundation teamed up to create ‘controversial’ but real content teaching women about breast cancer and how to perform breast checks themselves. The videos contained nudity resulting in content being removed from social platforms, creating a conversation the censorship of nudity regardless if it may be life-saving educational content.

We needed to create a page on their WordPress site to house the content and videos, as well as window-dress the homepage and some of the targetted content pages to adopt the take-over look and feel for the duration of the campaign...but without adding any plugins, changing any existing content or changing the theme files in anyway. When the campaign was over, the site needed to return to it's original state.

Hold my coffee... ☕

This was achieved using a custom javascript content item on the page that ‘highjacked’ the scroll with class control on the body element and creating a content consent pop-over that required the user to consent to graphic content before being allowed to view and scroll through the content. YouTube videos were embedded using the standard iFrame embed. I also created custom CSS for the theme that targetted the headers of targetted content pages and content boxes on the homepage to change their look and feel to fit within the campaign CI for the duration of the campaign.

At the end of the campaign we simply disabled the page, removed the homepage slider, commented out the custom CSS and the site was back to the way it was before.

3D FacePHP + CodeIgniter, MySQL, HTML, CSS, JavaScript, WebGL, Google Cloud API, AWS 3D graphics rendering

Learn More Demo

This was an R&D result of an idea our team had, unfortunately the final execution was different because of limitations of the 3D rendering library and what we were able to do on the front-end, but what we managed to get done was still a pretty good achievement for us.

The idea was to allow users to upload photos and details of their heroes to commemorate the efforts and/or memory during COVID. The user was then asked to define the crop area of the face of their hero from their uploaded image.

Once this was done, the image was sent to the Google Cloud API to get data points about the face in the photo - left and right eye coordinates, nose tip coordinates etc. - and this data was stored along with the crop result from the image processing.

We commissioned a rendering server on AWS Cloud to run an open-source library that was able to generate a 3D model of someones face from a 2D photo. An external supplier helped us set up the box and library and once that was done I started testing the images and data to generate the 3D models, with incredible accuracy. I modified the Python code slightly to save the thumbnail that was created during the modeling process so that I had a 1:1 match of the 3D model to its reference image.

The resulting model and image files were downloaded to the front-end and loaded into a canvas using WebGL to create their unique 3D "monument" to their hero.

Novo NordiskPHP, HTML, CSS, JavaScript

Learn More Gallery

This was two small custom sites for conferences held in Europe for this client that journalists could reference for more information surrounding the company and their products.

Functionality included a login which wasn't tied to a database but required acknowledgement that the user was a journalist from outside the United States - that was converted into a non-personally-identifiable session cookie (for GDPR compliance) to control site navigation etc., and an interview booking request form for journalists to request time to interview the doctors. Content included videos that needed to be played inline, downloadable content and a few pages needed to be available in Spanish.

This was a simple custom HTML/CSS/Javascript/PHP build, a nice break from the sites I've been working on. As far as I understand, the site was up for a couple days and then taken down...felt a bit like an art piece 😋.

Skills


* currently learning

HTML
CSS3/SASS
JavaScript
Bootstrap
PHP
MySQL
MSSQL
CodeIginiter
WordPress
Laravel
Adobe Suite
Apache HTTPD
Linux
Vue*
Angular
Drupal
Arduino
Python
Raspberry Pi
React
AWS

Contact

Want to ask something or work together?