I'm a final year Computer Science student at the University of Warwick and I love making things.
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.
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...
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.