Menu

Web

TJY Films link

http://tjyfilms.co.uk

Client: TJ Yiacoupis

Brief:

TJ's freelance portfolio as a video producer, editor, camera operator.

Technologies used:

  • Simple content management through FTP and Youtube playlist
  • Checkbox hack navigation
  • Mobile first
  • Responsive
  • Sass
TJY Films

Cell Industries link

http://cell-industries.co.uk/

Client: University Project

Brief:

Cell Industries is my Final Year Project with Jacob Hammond and Joseph Williams.

Our goals: Our initial goals were to integrate and unite new web technologies, to use 3D and modern design techniques to enhance the visuals of the website and to experiment with new ways of interacting with the web. We used the facade of Cell Industries to allow us to use all these technologies and techniques for a single purpose.

The concept: Cell Industries presents Project Titan: Preserving The Planet. We allow everyday users to choose which parts of the planet they want to preserve; we will clone and preserve the chosen environments, ready to be restored in the event of undesirable occurrences. Similar to the concept of Crowd Funding, the more people who participate, the more of the planet will be preserved.

The cloning process: The key feature, and the most technically challenging, was the cloning process. By combining Google Elevation API, Google Static Maps API and ThreeJS, we automatically generate and display 3D topographical representations of real-world areas using only code. Read more about the step-by-step process here.

3D models in-browser: By using ThreeJS, we can display a 3D representation of the data we collected about a particular environment during the cloning process. We also use WolframAlpha's API to pull in relevant data about the environment and its surrounding areas.

Webcam gestures: As a fun extra, we also added in the ability to take control of and rotate the environment using only gestures in front of the webcam. Waving your hand (or any part of your body) in front of the webcam will allow you to rotate the environment left, right, up and down. Although this is only a very primitive use of the webcam, it is an example of how webcam gestures can be used in the web. It opens up many possibilities of non-peripheral interaction with the browser, especially in the accessibility and games industries.

Technologies used:

  • WebGL
  • ThreeJS
  • WebRTC webcam gestures
  • Google Elevation API
  • Google Static Maps API
  • PHP MVC
  • Login system
  • Checkbox hack
  • Feature detection
  • Font icons
  • Mobile first
  • Responsive
  • Sass
Cell Industries

Precise Pixels v2link

http://www.precisepixels.co.uk/

Client: Precise Pixels

Brief:

Precise Pixels project

Redesign of the Precise Pixels site.

Technologies used:

  • Mobile first
  • Responsive
  • Sass
  • Font icons with retina enabled fallbacks
Precise Pixels

JaL Productions v4link

http://jalproductions.co.uk/

Client: Myself

Brief:

Build a mobile first, responsive, high performance site that supports devices ranging from feature phones all the way up to desktop.

Technologies used:

JaL Productions

Young Grafters pendinglink

http://www.young-grafters.com/

Client: Melvin Appleford

Brief:

A branded clothing site built within the BigCartel framework.

Technologies used:

Young Grafters

BBC WS Responsive link

BBC Afrique | BBC Arabic | BBC Hausa | BBC Hindi | BBC Indonesia | BBC Mundo | BBC Russian

Client: BBC

Brief:

BBC Indonesia

The new BBC Indonesia site is claimed to be the first responsive Asian major news site.

Working off the BBC News codebase, we have produced a localised version of the site.

This blog post written by Tom Maslen encompasses many of the features I worked on.

Also got a small mention on the BBC Internet Blog.

BBC Hausa

This is the second site we have released.

The one thing that is different (excluding the obvious translations, sub-indexes, etc) is the link to "Bidiyo" (Video) on the index page, which links back to a restyled old stack page. This is an interim solution while we get our video pages working.

Technologies used:

  • HTML5, CSS3
  • Sass
  • MVC PHP
  • Responsive mobile-first
  • Lightweight/high performance
  • PAL
  • Forge platform
  • Automated testing (Cucumber, QUnit, PHP unit tests)
BBC WS Responsive

jOS alphalink

http://jalproductions.co.uk/projects/jOS/

Client: Myself

Brief:

An experimentative project using the latest technologies to build a web-based "desktop".

Features:

  • Apps:
    • Google Document
    • Google Presentation
    • Google Spreadsheet
    • Google Drawing
    • Grooveshark
    • Pixlr
  • Draggable desktop icons and windows
  • Window depth-ish
  • Change background image
  • Checks if user is logged in to Google

Technologies used:

  • HTML5 localStorage
  • CSS3 transitions & animations
  • jQuery UI draggable
  • Decoupling of app data into JSON files
jOS

BBC WS Olympics Live Action Feeds link

Client: BBC

Brief:

Achieving 1.6 million page impressions on story pages alone, the Olympics Live Action Feeds module was the most popular of all the Olympics related projects built by the BBC World Service team during this year's games.

The module comprised of five main components:

  • Coming up — Displays the time until the next five events, highlighting any which are under 15 minutes.
  • Latest gold medalists — A progress bar shows the total number of gold medals won; and on hovering over the white circle, a popup box displays the name, country and event of the latest gold medalist.
  • Medal table — Displays the medals won by the top five countries.
  • In detail — A personalised medal table showing a select list of countries selected by that language service.
  • Full medal table — A medal table containing all the countries whom have won medals

This was my first project working for the BBC.

Technologies used:

  • Supports 27 languages
  • Left-to-right and right-to-left
  • jQuery/AJAX data manipulation
  • JavaScript accordion
  • XML feeds
BBC WS Olympics Live Action Feeds

innuen;)do.me alphalink

http://jalproductions.co.uk/projects/innuendome/

Client: Myself

Brief:

innuen;)do.me is a small, silly side project I have been working on. I came up with the concept several months ago, but didn't have the skills to program it.

The minimalistic site allows users to submit and rate innuendos. Innuendos can be sorted by genre to allow users to find exactly what they're looking for. Users can also share their favourite innuendos with their friends on Facebook.

Technologies used:

  • Cookies
  • User submission and rating system
  • Customised Facebook social like plugin
  • Endless scrolling
  • jQuery auto-complete
  • jQuery animation
  • MySQL/PHP database driven content
  • Ajax calls
  • Home-made anti-spam
innuen;)do.me

JaL Productions v3 deprecatedlink

http://jalproductions.co.uk/projects/jalpro3/

Client: Myself

Brief:

My updated site was built for several purposes. Database loaded content which is easily updated, a clean design that focuses on content and the use of new HTML5 and CSS3 standards.

Technologies used:

  • HTML5 tags
  • CSS3 transitions
  • jQuery CSS size calculations on thumbnail boxes
  • jQuery image galleries
  • MySQL/PHP driven content
  • Fluid layout
  • Responsive design
JaL Productions

Delhi Kitchen expiredlink

http://precisepixels.co.uk/DelhiKitchen/

Client: Mohammed Rahmen, Proprietor

Brief:

Precise Pixels project

A basic information website, with menus and contact information.

Technologies used:

  • HTML5 tags
  • CSS text-shadow trick to imitate a stroke
  • td+td CSS hack to select every field in a table column
  • Google Maps embed
  • My photography (excluding the gallery page)
Delhi Kitchen

People United Redesign deprecatedlink

http://peopleunited.org.uk/

Client: Tom Andrews, Chief Executive

Brief:

Precise Pixels project

This re-design included a cleaner layout and the ability for the client to easily update content. I am currently implementing a login system to allow the client to track who downloads what to follow up for feedback.

Technologies used:

  • MySQL/PHP database driven content
  • Wordpress blog (with embeds)
  • RSS news feed
  • Home-made anti-spam
  • jQuery image galleries
  • Login system
    • Sign up
    • Reset password
    • PHP sessions
People United Redesign

Holland Transfer Solutions link

http://taxiholland.com/

Client: Francisco Marti

Brief:

Precise Pixels project

"Holland Transfer Solutions is an executive taxi service based in the Rotterdam, Amsterdam and The Hague areas of Holland.

The client was not happy with their old website and we had some ideas of ways to improve it.

We are giving it a new, slick feel ensuring that the professional, executive integrity of Holland Transfer Solutions is reflected in their website."

The old site

Technologies used:

  • Randomised background photo
  • Home-made jQuery content sliders
  • jQuery form validation
  • Ajax same-page form submission
Holland Transfer Solutions

Northfleet Press pendinglink

http://jalproductions.co.uk/projects/NorthfleetPress/

Client: Northfleet Press

Brief:

Site re-design for this Northfleet-based printing business.

Technologies used:

  • HTML5 tags
  • CSS3
  • Smooth scroll
  • jQuery animations
  • jQuery height hacks
  • Google Maps embed
Northfleet Press

The Peking Restaurant link

http://pekingchinesegravesend.co.uk/

Client: Loong, Proprietor

Brief:

Precise Pixels project

"The Peking Restaurant is a traditional chinese restaurant in Gravesend.

Their old website is a virtually purposeless template website that does not do the restaurant any justice.

We are creating them a basic but professional website to showcase the restaurant with menus, prices and photos taken by us."

Technologies used:

  • td+td CSS hack to select every field in a table column
  • Google Maps embed
  • My photography
The Peking Restaurant

Precise Pixels v1 deprecatedlink

http://www.precisepixels.co.uk/old/

Client: Precise Pixels

Brief:

Precise Pixels project

Precise Pixels is my web design company I co-founded with my university coursemate. He designs, I code.

Technologies used:

  • Multi-directional jQuery site
  • jQuery UI colour animations
  • jQuery accordian data table
  • Home-made jQuery image sliders
  • Ajax same-page form submission
  • CSS 3D transform
Precise Pixels

People United deprecatedlink

Client: Tom Andrews, Chief Executive

Brief:

People United is an arts charity based in Canterbury

I work here as a Web Consultant maintaining their website and doing any design or computer-related work that they require.

The work I did on the website involved altering and adding things to their existent website. The majority of the current code was written by the previous developer.

Technologies used:

  • jQuery animations & lightbox
  • Font-size accessibility
People United

JaL Productions v2 deprecatedlink

http://jalproductions.co.uk/projects/jalpro2/

Client: Myself

Brief:

I felt like it was time for a change. The old site was extremely outdated layout-wise, still utilising a table-based layout, the design was old and boring, content was cumbersome to update and visitors/devices without a Flash Player were doomed to stay on the home page for as long as they could last without hitting Alt+F4! Another reason for the update is the fact that my uni course has helped my understanding of CSS greatly - thus I feel I should put it to good use!

Technologies used:

  • MySQL/PHP driven news and comments
  • jQuery image slideshow
  • jQuery sub-navigation
  • jQuery lightbox
JaL Productions

Action on Gilbert's Syndrome — Interaction Design University Project link

http://ags.net76.net/

Client: University Project

Brief:

We were given a real charity website (http://www.gilbertssyndrome.org.uk/) to redesign after learning the theory from our Interaction Design lectures at the University of Kent.

In groups of four, our task was to redesign an existing charity website.

I worked as the programmer, and there were two designers and one writer.

Technologies used:

  • jQuery rollovers
  • Content database
  • Java chat client
  • Contrast & font-size accessibility
Action on Gilbert's Syndrome — Interaction Design University Project

Web Design University Project link

http://jalproductions.co.uk/projects/jal33/

Client: University Project

Brief:

This website was made as a project for the Website Design section of my course.

Project Brief: The project includes creating a website using HTML, which is styled purely with CSS.

Your site must contain at least six pages: a home page, pages about your favourite music, films and websites, and two other pages of your choice.

Your site should include a mixture of text and images, and all links must be fully functional. It is also important to include links to external sites that relate to your content. Your site must work in both Firefox and Internet Explorer and must have validated markup.

Technologies used:

  • HTML5 tags
  • CSS3 rounded corners & font-face
  • Javascript accordion menu
  • Embedded Youtube and Flash content
Web Design University Project

'Learn Maths' Javascript University Project link

http://jalproductions.co.uk/projects/LearnMaths/

Client: University Project

Brief:

Project Brief: Develop a javascript webpage that will help an elementary school student to learn multiplication.

In order to 'go further', I made separate pages for the other arithmetic signs.

Each page randomly generates two numbers between 1 and 12 for the student to calculate.

The division page had be constructed slightly differently, as 2 / 11 isn't a feasible calculation for a student without a calculator! Thus the numbers are randomly selected from an array of preset, easy set of numbers (e.g. 44 / 11).

Technologies used:

  • HTML5 tags
  • Javascript random numbers
  • Javascript random responses from an array
'Learn Maths' Javascript University Project

JaL Productions v1 deprecatedlink

http://jalproductions.co.uk/projects/jalpro1/

Client: Myself

Brief:

My very first website.

Technologies used:

  • Flash menu with rollovers
  • Facebook embed
  • Flash image viewers
JaL Productions