Javascript must be enabled!
Broswer window is too small!
ABOUT
a li'l bit about yours-truly

Hello World, I'm Alex!

I'm a final year Computer Science student at the University of Warwick and I love making things.

Digital things, to be specific.

I've always had a keen interest in design, but only more recently have I discovered my burning passion for software engineering and web development through my studies at university. The challenge of devising and implementing innovative solutions to problems is hugely rewarding, and I find great fulfilment in the creative process throughout a project.

I have a sharp mind and a great propensity to engage in new ways of thinking, allowing me to quickly pick-up and master foreign skills. I'm a pretty social guy - thank the time spent grafting behind the bar! - and enjoy working in teams, both big and small, to achieve more difficult goals.

Check out some of my previous work on Github or down below!

Technology has always been at the forefront of my interests, having used and tinkered with computers since I was a wee whipper-snapper. Studying Computer Science has really allowed me to broaden my enthusiasm for the field - it's a curious thing to realise just how much you don't know!

I consider YouTube to be the spark of my fascination with design, teaching myself a range of skills across Adobe's Creative Suite from a young age. I even made a few cool things back in the day...

Life's a little more than a slogan on a bumper sticker...

When I'm not working, I get my kicks from trying - read 'failing' - to get in shape at the gym, pillaging the dungeons of Azeroth (among other games) with my friends, going to the pub, dining on Indian cuisine and spending time with my cat. Please note: I am currently accepting offers for a permanent 'crazy cat lady' position, if that's available...

I also have a keen appreciation for the art of animation, in film and in digital media, as well as a deep love for music - here, give your ears a treat.

And that's me in a nutshell!

There are also a few honourable gents I need to mention and thank profusely - they're all bang-up blokes and are definitely worth checking out.

PROJECTS
some things I've built
THESIS PROJECT
^
See More

Development of a Feature-Rich Social VLE to Promote Student Performance

Problem Statement

At the University of Warwick, a significant portion of the final year comprises of a self-lead undergraduate thesis. Each student is encouraged to pick an area of study with which they engage - personally, I have been intrigued by the field of Education Technology since I was much younger. Growing up around the rise of technology in schools, it is fascinating to see the range of solutions that have been developed to suit varying needs.

That being said, few education-based tools attempt to wholly capture the requirements a school body poses, and none are without conceptual limitation. Though robust in design, each is lacking in one way or another.

Solution Outline

The system I have proposed intends to bridge the gaps in functionality afforded by other solutions whilst retaining a simple and intuitive UI/UX.

It will primarily serve as a student performance tracking tool, promoting achievement and parental involvement in schools using thorough but intuitive data representation techniques to aid targeted learning across a multitude of subjects. This will be extended further to provide detailed insight into the performance of a school on a class-, year- or school-wide basis, allowing staff and governors to view this important information at a glance and in real time.

The software will incorporate a number of other features, including direct messaging between teachers, students and parents, timetables and event calendars, and homework tracking and submission, ultimately aiming to provide an unparalleled academic companion tool of significant educational benefit.

A far more detailed system specification is available, should it pique your interest.

System Development

I opted to develop the system as a web-based application, but felt it necessary to deviate from my comfort zone - most of my prior web development comprised of raw HTML, CSS, Javascript, jQuery and PHP - and broaden my existing skillset. For this reason, the system is being developed in Ruby on Rails, employing a PostgreSQL database and using Heroku as the deployment platform. With its emphasis on the Don't Repeat Yourself and Convention over Configuration principles, Rails also encourages language extensions, such as CoffeeScript and SASS, furthering the suite of new skills I'm developing. On top of this, JetBrains' RubyMine IDE is being utilised to ease development.

Git version control (via Github) and Test-Driven Development help to ensure build stability under an agile methodology as new functionality is added, testing each version against the predefined unit test-cases to minimise erroneous code being deployed to the production environment.

Development is currently on-going, with the Minimum Viable Product almost ready for testing. A detailed progress report is also available, mapping and detailing the technical progress to date.

User Acceptance Testing

In order to ensure the functionality of the system is intuitive and successfully meets the requirements of proposed users, acceptance testing is imperative. Upon completion of the MVP, a number of students from local schools will participate in Observational Evaluation and Usability Tests, generating practicable feedback to further develop, improve and evolve the system.

User testing and system evolution is proposed to begin in January 2017, and will continue to the end of February. By this time, the development and evolution of the project should be largely complete, with only the dissertation report outstanding.

The thesis project will be wholly complete by the end of April 2017.

BIG DATA ANALYSIS TOOL
^
See More

Front-End for Big Data Visualisation System

Problem Statement

In my second year at university, I had the chance to develop a piece of software for Deutsche Bank as part of a group project module. The groups (each comprising of 5 students) were randomly assigned across the year group in order to simulate a real-life development team with varied skills and abilities - one which we could not choose.

The task we were assigned pertained to the Enron Scandal: given access to the company's entire email corpus - comprising of over 50,000 emails - we had to cleanse and parse the raw data, identifing communities and groups within the company based on communication patterns. Using this information, we should then be able to highlight "suspicious communication" within the network - for example, users with strong communication links outside of their identified grouping. This information was then to be displayed in a suitable manner.

The project was to be treated like a real-world development contract, identifying and analysing requirements before confirming them with the client (Deutsche Bank), clearly outlining system design, and following a development methodology - in our case, the waterfall methodology. The system was finally to be demoed in a Dragon's Den-esque presentation to the client before being submitted alongside a technical report to the university.

Solution Outline

Our system was implemented in Python and Django, employing complex Python libraries to handle the back-end cleansing, parsing and handling of data with a web-app built atop the Django framework for data visualisation. The development team comprised of two members, Tim Armstrong, who handled the back-end development, and myself, responsible for the front-end. Django was a new tool for me, but with Tim's help it became clear how simple interfacing between the front- and back-end could be.

It was clear from the outset that the data would be best visualised graphically, so the decision was made to utilise D3.js, primarily for its wide range of supported graph types, but more importantly for the inclusion of force directed graphs.

D3.js made representing the entire network in a force directed graph incredibly simple.

The visualisation our system proposed was to be divided into 3 areas:

  1. Communities: a force directed graph easily displaying the identified groupings and communications across the network.
  2. Message Rates: a line chart depicting the rates of communication over time for a single or multiple users simultaneously.
  3. Betweenness: a table ranking users in the network in order of their centrality - mathematically, the most connected users.

All graphs were to intuitively include zooming, panning and a number of other data manipulation and sorting options.

When viewing incredibly varied communication patterns simultaneously, zooming and panning functionality was a must-have.

Generally speaking, the HTML and CSS required for each page of the site was trivial - this project, at least with regard to my role, was primarily JavaScript development, heavily relying on D3.js. Using this plugin to visualise data did not prove too difficult; the challenge arose with data manipulation - changing what was drawn in the graphs depending on a number of given options.

For the communities tab, it was important to be able to view the communications for only a subset of the graph, one or more groups, perhaps, or a single user. Equally, it was necessary to be able to view multiple users communications simultaneously on the message rates tab, allowing comparisons to be drawn. This required dynamic redrawing and resizing of the graph to sensibly fit newly-drawn data within reasonable bounds.

In order to adequately visualise the data, a number of display options were required.

Version Control

This project was my first experience using a version control system. At the time, I hadn't quite clocked onto how simple Git CLI is and was using Github directly to update version branches. In spite of my oversights, it served as an important introduction to the necessity of strict version control in large-scale development.

The developed system met Deutsche Bank's requirements very well, and was voted among the Top 3 submissions in the year.

SJB CARPENTRY AND JOINERY
^
See More

Business Portfolio for Carpentry and Joinery Company

Selling a Trade in the Modern Day

In the current age of social media, many small businesses reach their customers through platforms like Facebook or Twitter, but it can be difficult to sell your trade through just a single social page. For this reason, many complement their social media with a business portfolio, serving as a single repository for company information, work examples, testimonies and contact details.

With a huge portion of web-browsing now occurring on mobile devices, responsive web design is also a key focus to driving customer engagement - an unoptimised website can easily deter a customer, should they struggle to ascertain simple information!

Responsive Redesign

View Website

I approached SJB Carpentry & Joinery to redevelop their business website, with a focus on improving its responsiveness and making the user experience much cleaner and more aesthetic. This was not only an opportunity for a business to improve their online image, it was my first chance to develop a product for a client - working to a timescale and a much higher level of professional standards.

Graceful degradation of content is necessary to accommodate for screens of varying sizes. Though frameworks like Bootstrap can be used to easily implement a responsive site, I wanted to use self-defined CSS media queries to familiarise myself with the intricacies of designing a site specifically to suit a responsive layout. By using a Mobile First style definition methodology, I was able to design the site with minimal CSS and more subtle steps between screen sizes without losing graphical fidelity.

Responsive content enables a near-identical user experience across varying screen sizes.

For the actual design, it was decided a clean and contemporary one-page layout would look best, with content in well-defined sections on a single, long page. Subtle gradients, a complementing colour scheme and a simple JavaScript function, fading page content in gradually, all culminate in a simple but visually appealing user experience.

Browser Compliance

Being a professional website, it was important to ensure compliance to modern browsers and vendor standards - specifically those defined by W3C for HTML5 and CSS3. When definining CSS rules, vendor prefixing plays a sizeable part in browser compliance for new or unsupported properties, ensuring the site looks as close to identical across all platforms as is possible.

Dynamic Content

As a site intended to promote the services SJB Carpentry & Joinery provide, it is important for testimonies and services to be posted and updated. Rather than updating the raw code, PHP forms have been defined to intuitively allow the company to change the content and add new testimonies with ease.

Though the site is largely complete, it is not yet live due to hosting issues at the business' end.

PORTFOLIO SITE
^
See More

Custom-Built Full-Page Design in a Responsive Environment

Project Overview

In all aspects of web development, I strive for clean and contemporary design, but when broaching the subject of vanity or portfolio sites, I've always wanted to build something a little different. When I came to build my own last summer, I wanted to develop a website which was not only unique in layout but also challenged the bounds of my ability.

View Website

At the time, I'd fallen in love with the full-page layout, with content structured into fixed, scrollable panels. Though a fairly straightforward task to implement, the real challenge lies in graceful degradation of content, ensuring responsiveness across widely varying screen sizes.

Personal Branding and Design

"Good design is obvious. Great design is transparent."
Joe Sparano

Strong branding is a notably difficult task. I felt it important to create a striking yet sophisticated logo to represent my personal image, drawing from my initials and using sharp, isometric lines to create this. Warm, vibrant colours, particularly during animation, and - more recently - subtle gradients help to draw focus but retain a clean overall aesthetic.

Light-on-dark colour scheme draws the eye to the centre of the screen.

Isometric shapes also translated to the background of the site, with a light-on-dark colour scheme featuring subtle dashes of colour. This helps to draw the eye to important areas of the screen more so than an inverted colour scheme may - the central logo is notably striking. A simple but elegant typeface emphasises this further, leading the eye comfortably through the albeit sparse text.

Working With JavaScript

I felt it best to challenge myself in personally developing the full-page layout and scrolling functionality, rather than relying on plugins like Fullpage.js to achieve the goal without furthering my knowledge. This resulted in a far more tailored feature set, with custom animation timings and a unique, draggable scrollbar for the site.

jQuery

JQuery helped to make much of the JavaScript coding simpler and more optimised, allowing easy implementation of subtle design aspects, like the faux-3D effect of elements moving according to mouse position.

Among the more difficult features to code was the custom scrolling. Though the functionality was straightforward for mouse and keyboard input, enabling the same features for touch-devices proved far more challenging, having to disable all natural scrolling and redefine upwards and downwards scroll functions according to touch input distances. A challenge, but a worthwhile experience nonetheless.

Bodymovin.js

With the desire for motion-graphics as part of my personal branding, I ventured into the unknown with the Bodymovin.js plugin. This essentially compiles files in After Effects to JSON, which is then parsed into animated SVG images by the JavaScript plugin. The resulting graphics are smooth and graceful, inspiring a whole 'landing animation' sequence, which plays when first loading the page.

Animation of this type is something uncommon to most websites, allowing for a more immediate user engagement. It also allows me to demonstrate my capabilities with After Effects (and the rest of the Creative Cloud Suite) - something I don't often get to exercise.

Shortcomings of Design

Though a learning experience across a number of disciplines, this project quickly became one of the more abitious and difficult tasks I have undertaken, eventually resulting in its indefinite shelving and ultimate replacement with this site.

Ensuring Responsiveness

The most significant issue I faced was ensuring responsiveness. With a full-page layout, it was incredibly difficult to guarantee the contents of a page would not only fit within the bounds of the page, but also look natural. This resulted in a great length of complex and quite-probably illogical position and size definitions in an attempt to guarantee a similar user experience regardless of viewport size or type.

Ensuring responsiveness on all display sizes proved impossible.

Though I achieved this for the most part, it carried a number of subsequent limitations - most notably the short limits on text length for pages without overflowing the bounds of the container on some devices. As you can probably already tell, brevity is not my strong suit... Moreover and in spite of my best efforts, there are still fringe cases which do not display correctly. As a perfectionist, this was infuriating but something I was forced to begrudgingly accept.

Optimising Performance

Animations, excluding those handled by Bodymovin.js, also proved challenging - specifically in terms of their smoothness. This was often most notable when scrolling between pages, with the animation - handled by CSS transitions - appearing incredibly choppy, particularly on mobile devices.

After much research into optimisation of JavaScript and GPU-acceleration in browsers, I had a set of animations which were far smoother than their prior iterations, largely relying on Transform3D and other hardware-accelerated properties to accomplish this. Since shelving this project, I have since found that using jQuery to animate proves even smoother, incorporating much better use of available resources and hardware.

Though I never finished this site, it served as an excellent learning experience and creative inspiration for a number of further projects - this site included!

eSPORT TEAM BRANDING
^
See More

Designing a Clean Competitive Brand

Design Brief

I was approached by a friend at university to design and create a logo and accompanying motion graphic for their amateur eSports team, the Warwick Whiffers. The brief I was given was for it to be simple, usable and in some way relevant to Rocket League, their game of choice at the time.

The resulting logo was created to vaguely resemble a rocket, boldly representing a 'W' insignia to identify the team. A smooth but vivid gradient makes the logo visually striking while retaining the aesthetic simplicity afforded by flat colours.

Translating Static Designs to Motion Graphics

When designing a logo or graphic, I use Illustrator to define the required paths and colours, generating a set of vector shapes. Adobe's Creative Cloud Suite makes the process of enabling vector graphics for animation incredibly simple, encouraging strong interoperability between programs within the suite - Illustrator and After Effects, for example.

Once in After Effects, I tend to build the animation backwards, using the defined shape as a final state and finding a flow within the graphic which looks and feels natural in its formation order - it wouldn't make sense to grow the W before the badge behind it has animated to its full height, for example. With the animation milestones keyframed, it becomes a task of making the animation flow by using keyframe smoothing, bezier curves and frame-perfect adjustments to timing.

Without smooth keyframing, the animation can look incredibly jerky and abnormal - even subtle changes to the timing can result in a hugely different perception of the graphic. Where the first logo above uses only static keyframes, the second uses After Effects' built-in keyframe smoothing. It is visibly better but, when compared to the final logo, still looks a little off.

After Effects is a skill I greatly enjoy but seldom exercise, so I like to try and use it wherever I can!

CONTACT
feel free to drop me a line
email:
mobile:
address:
Amberley Cottage
Merrywood Lane
Thakeham
Pulborough
West Sussex
RH20 3HD
linkedin:
github:
I can't wait to hear from you!