Best CSS Web Gallery
Michael Gannon
is a

UI Developer

Ux Designer

Design Thinker

Wordpress fan

SEO advocate

Crypto comrade

Blogger

Skateboarder

Kickboxer

Projects

PAINT THE WEATHER / angular & services

Description

Leveraging the OpenWeather API to use the users local weather to see paintings containing that weather e.g. if it's rainy in your location it returns a painting containing rain, if it's sunny the app returns a sunny painting etc.



The users latitude and longitude are worked out using vanilla Javascript. This then gets used to build an API endpoint which gets called with a HTTP get request on the OpenWeather API and returns the users location name and weather. The weather phrase ('Cloudy') is then used to build a second API endpoint which gets called on the M.E.T museum API and this returns all paintings associated with this phrase in JSON array.



Each JSON object has a number of attributes associated with it e.g. 'Painting Name', 'Painting Artist', 'Painting Image' etc. One of these JSON objects gets selected at random and it's image is then set to be the image on the right of the screen, keeping the left of the screen free for further details about the painting.



Technologies

  1. Angular 7
  2. Typescript
  3. SCSS
  4. HTTP Client

UFC FIGHTER SEARCH / angular app

Description

A web application built on Google's Angular.js web application framework. The UFC Fighter directory allows users search through the UFC fighters and filter the results alphabetically, by weight, by gender or in descending order. There is also a brief bio for each fighter.



The benefit of using Angular was being able to avail of Angular's built in filter funcionality without having to write the javascript from scratch. The other benefit was working with the modular structure of Angular.



There is a data.json file which contains name value pairs of the fighter's name, weight, gender and bio. This is looped through using Angular's ng-repeat tag. To read the data from the JSON the HTTP Service was used. In the details page there is a fighter bio and a next and previous button. These buttons make use of Angular's partials so different data is loaded into the same template view without the page having to be reloaded.



Technologies

  1. Angular.js
  2. Javascript
  3. JSON

VUE-TIFUL CV / vue cv

Description

I wanted to learn Vue.js so I decided to rewrite my CV/Portfolio using the popular Javascript. It's a bit of a 'template-ey' design but the focus was more to familiarize myself with Vue and Vuetify.



It was straightforeward enough getting set up and Vuetify provides a lot if nice UI components. Having worked with Angular, Material Design and vanilla JS for years it was easy to get up and running.



I didn't want to hardcode anything so I extracted virtually all the content in the UI to JSON files and imported them and looped through.



Technologies

  1. Vue
  2. Vuetify
  3. JSON
  4. Flex-box

SIMPLE CSS / css generator

Description

CSS media queries & vendor prefixes can be a challenge to work with at the best of times! And since there is a 'generator' out there for almost everything else I would remedy the problem using the most graphical approach possible.



Isotope.js was used to filter all the screen sizes and vendor prefix details. Each panel has the a width and height value or a vendor prefix value which gets passed to javascript function which adds the media query and vendor prefix details and launches the modal. If it's a vendor prefix a similar function is called depending on which browser engines need to be supported.



Clipboard.js was a handy library which allows the user to copy their media query to their clipboard with the click of a button. Another feature is the option to generate a media query based on the screen which the user is operating from. If you resize the browser the CSS media query will automatically respond with the appropriate media query.



DODDLECO / website design

Description

An information site to promote a new product from Visual ID called Doddle. Doddle is a marketing material builder that allows users to create point of sale content for print, web, digital screens and social media. It is a redesign of the Visual ID marketing material production system.



The website was built using the Wordpress CMS and a theme which was heavily customised to ensure mobile responsiveness and create a unique identity for the new product. The website also includes a Live Chat function, which I manage. Doddle involved extensive research into all target markets to devise an accurate marketing strategy.



The site is essentially a single page but the theme was a multi-page template so I had to restructure the landing page and customize a lot of the page functionality. Blogging was carried out regularly and shared across all platforms as well as using Yeost SEO and Google Analytics to monitor website activity.

Technologies

  1. Wordpress CMS
  2. CSS3
  3. PHP
  4. Google Analytics
  5. Tawk API

DODDLE / marketing material builder

Description

A redesign of the Visual ID artwork creation toolkit. The objective was to make the toolkit easier to navigate, easier to access and easier to understand for both client side and administration side. The old system contains a lot of functionality, which requires one to one training. Doddle comes with integrated walk through tours of major operation flows, video tutorials and a more intuitive user experience.



Doddle is integrated with the Stripe API for secure online payments, the Tawk API which enables live chat and the Facebook API which allows marketing materials to be shared on Facebook. One of the challenges with creating Doddle was writing HTML which was nested in Lasso Script and styling elements which were generated by Lasso on the fly.



The primary goal of Doddle, is to be an entirely on-demand product involving no client interfacing. It is a refined version of the Visual ID toolkit which includes functionality to create your marketing materials, share them on Facebook and push promotions to Digital Screens. I am Project Manager of Doddle.



Technologies

  1. HTML5
  2. CSS3
  3. Javascript & jQuery
  4. Bootstrap 2/3
  5. Vagrant
  6. Bitbucket
  7. Source Tree
  8. Facebook API
  9. Tawk API

INSPIRE DAILY / twitter quote generator

Description

This is a concept I worked on for fun inspired by the Free Code Camp challenges. It was a good excuse to play around with the Twitter API and a nice visual way of sharing some of my favourite quotes.



I wanted to create a more streamlined way to share various quotes to Twitter. Each quote is paired with a corresponding image. Quotes are broken down into categories and added to an array of objects which gets looped through and reset accordingly.



The hard part of this project was prepoulating the twitter quote container that appears when you press 'Tweet'. The twitter button needed to be rebuilt every time a new index was arrived at when looping.



Technologies

  1. Twitter API
  2. HTML 5
  3. CSS
  4. Bootstrap 3
  5. Javascript & jQuery

THE GANNON TIMES / bootstrap news site

Description

This is a college project undertaken in order to learn the most popular responsive web design framework, Twitter Bootstrap. It was also essential for gaining an undertanding of web typography and web design principles. The objective was to use no colour until the very end and create a visually appealing page using just black and white, an appropriate font combination and making correct use of the space available.



Inspirations came from the French newspaper 'Le Monde', 'The Financial Times' and 'The Boston Globe' news site. Extensive research was carried out on newspaper design trends dating back as far as 1630. Then two concept designs were drawn up in Photoshop and iterated again and again until they met the task objectives.



JavaScript was used to start a timer every 30 minutes to emulate a feed of updates to the site. The clock at the top of the screen displays the current time of the device the site is being viewed on.

Technologies

  1. HTML5
  2. CSS3
  3. Bootstrap 3
  4. Javascript
  5. Photoshop

COUNSELLING BUSINESS / bootstrap brochure site

Description

Responsive Web Design is going nowhere so I decided to make a RWD brochure site for my mother's new business venture. As a branding excercise I also designed custom business cards from scratch.



The site uses CSS animations, has a contact form which relies on PHP for the back end handling and is built on Twitter Bootstrap. The purpose of the site is to be an information point for people suffering from depression, alcoholism etc.



This website was a good exercise in gathering user requirements and showing the client the possibilities available to them aswell as being a good excercise in copywriting and communicating visually with the end user.

Technologies

  1. HTML5
  2. CSS3
  3. Bootstrap 3
  4. Photoshop

VISUAL ID / website redesign

Description

This was a redesign of the Visual ID website using the Wordpress CMS. The site is optimised for mobile, tablet and desktop. The site has also been integrated with the existing Visual ID blog and linked to all related social media platforms. The site is built from a theme and has been customized for a unique identity.



This project presented a great opportunity to learn how to use everybody's favourite content management system. Extensive security measures were taken to keep the data secure, for example changing the wp-admin address, tracking the site's traffic and blocking all hack attemps.



The objective was to bring a new look and feel to existing Visual ID website. Visual ID have a lot of products, partners, pricing plans and clients so the website has a lot of content which needed to be managed so the site visitor is not overwhelmed with information.

Technologies

  1. Wordpress CMS
  2. CSS3
  3. PHP
  4. Google Analytics

LET'S GO / elearning web application

Description

The objecive was to develop an assistive technology that educates people with special needs on the importance of safety when it comes to public transport. Having worked with Saint John of Gods (SJOG) and the families of people with special needs, I was aware of how challenging it can be. This sparked the idea for Let's Go.



The initial stages involved low fidelity prototypes to illustrate the concept to both my college supervisor and the SJOG staff. Let's Go followed a user led design approach and for that reason, every design iteration was submitted to the SJOG staff and critiqued, from the font choice, to the accessibility, to the colours.



The refined concept was an educational drag and drop game for the SJOG clients which was built in Javascript and a score tracking system for the SJOG staff to monitor the clients progress in the game, the functionality of which was built in PHP and SQL. My hosting provider Github pages does not support PHP, so I have included a system demonstration.

Technologies

  1. HTML5
  2. CSS3
  3. Javascript & jQuery
  4. PHP
  5. SQL

QUICK TRIP / android app

Description

Quick Trip is a native Android application that was designed and developed when I was in the Institute of Art, Design & Technology. The objective was to indicate how much a journey would cost a person based on their specific car, the price they pay for petrol and how far the journey is.



Quick Trip utilises the Google Maps API, geolocation tracking and asynchronous threads. The app estimates the cost of the journey based on the MPG of the car, how far the journey is in km and how much the user is paying for petrol.



A MySQL database stores all the car details and user login information. The user selects their car e.g. Toyota Corolla 2010, both destination points on the map and the distance is calculated asynchronously. This data is inserted into the cost formula along with the car MPG, the price of fuel and the cost is calculated.

Technologies

  1. Java
  2. XML
  3. PHP
  4. SQL
  5. Eclipse IDE
  6. Android SDK
  7. Genymotion
  8. Google Maps API
  9. Axure

LETS PAINT / drawing application

Description

This college project was an opportunity to familiarise myself with the HTML5 canvas. The objective was to create a drawing application that rapidly drew filled circles along each path the mouse was clicked and dragged. The radius of the circles could be changed in the toolbar on the left along with the colour.



Lets Paint has the option to undo your work by clicking and holding the undo button which redraws the path but in reverse. The user is also given the option to change the canvas background colour and interact with it using the up, down, left and right arrow keys which draws random shapes at various sizes in random colours around the canvas.



This assignment illustrated to me the practicality of using jQuery over Javascript where possible, for web animations in particular. I also discovered the possibilities available when working with the HTML canvas.

Technologies

  1. HTML5 Canvas
  2. CSS3
  3. Javascript & jQuery

MUSEUM GAME / elearning game

Description

This was a joint project carried out in college for the Dun Laoghaire Maritime Museum. Despite being a language that is considered 'dead', Action Script is a very practical way of learning how to code and has similarities to Javascript.



The objective of the game was to document the life of Robert Halpin, a famous sailor by way of an educational Flash game and also videos created using Adobe After Effects. The project was selected from the class to be put on display in the Dun Laoghaire Maritime Museum. I have not yet been to see it yet because I did the voice overs for the videos and am simply too embarrassed!



To demo the game click the Launch Game button on the right. This will not work if you're using a browser that does not support Flash.



Technologies

  1. Photoshop
  2. After Effects
  3. Action Script 3

NO BOOTSTRAP CHALLENGE / responsive dashboard

Description

Inspired by this post I wanted to challenge myself and try to implement a resonsive dashboard using just HTML, CSS and vanilla Javascript. I have worked all versions of Bootstrap and it has always been there as a reliable framework for making the websites responsive but I wanted to discard it for this project and build from scratch.



I used the design spec from an old project. The dashboard is broken into two sections and vw and vh units were used to keep the correct proportions across all screen sizes.



One of the challenges of this project was simulating the Bootstrap modal popup using vanilla Javascript. The modal was designed and added and then a CSS toggle was added through Javascript to show or hide it.



Technologies

  1. HTML 5
  2. CSS 3
  3. Javascript

Education

Web Engineering
2012 - 2015
INSTITUTE OF ART, DESIGN & TECHNOLOGY

I studied Multimedia Programming and Web Engineering in the Institute of Art, Design & Technology in Dun Laoghaire.

Some of the components covered were languages and frameworks such as HTML5, CSS3, Javascript & jQuery, Java, PHP, XML, JSON, SQL as well as the Android SDK, Twitter Bootstrap, Backbone.js, ASP.NET, Google Maps API, MongoDB, Node & the Node Package Manager.
Course curriculum

Web Design
2011
DUBLIN BUSINESS SCHOOL

I completed a night course in DBS in Web Design and SEO during my gap year. I studied the fundamentals of HTML, CSS, SEO and Photoshop. The objective of this course was to get a taste of programming and web development.
Course curriculum

Civil Engineering
2008 - 2011
DUBLIN INSTITUTE OF TECHNOLOGY

I studied Civil Engineering for three years in DIT. Despite not influencing my career choice, it did teach me the thought process behind problem solving and the importance of importance of attention to detail.
Course curriculum

Experience

Accenture
2017 - Present
SENIOR UI DEVELOPER / MANAGER

UI Developer in CIO Dublin, based in The Dock. Primarily concerned with Front-end technologies such as HTML, CSS/SASS, Bootstrap 4, AngularJS and Angular.

Very interested in delivering compelling user experiences through iterative UI design, incorporating design thinking and following a user centered design approach. I also coordinate the UI/UX Guild in the Dock.
Accenture Work

Visual ID
2015 - 2016
FRONT END DEVELOPER / PROJECT MANAGER

As Front End Developer I am responsible for the design, functionality and maintenance of all client side access points. This consists of the Visual ID and Doddle brochure site aswell as the Doddle web application.

As Project Manager of Doddle my responsibilities include: scheduling and chairing Scrum meetings, preparing meeting minutes, ensuring all Doddle deadlines are met and interfacing with Doddle clients and partners.
Visual ID Work

Tech-Space
2012 & 2013 (SUMMER)
TEACHER

During college, I volunteered at Tech Space as a web design and animation teacher. We carried out 2 week crash courses on topics such as the fundamentals of HTML, CSS, Photoshop, After Effects and Action Script.
View Details


Timeline

Education

Web Engineering
2012 - 2015
INSTITUTE OF ART, DESIGN & TECHNOLOGY

I studied Multimedia Programming and Web Engineering in IADT. Some of the things covered were languages and frameworks such as HTML5, CSS3, Javascript & jQuery, Java, XML, JSON, SQL as well as the Android SDK, Twitter Bootstrap, Backbone.js, ASP.NET, MongoDB, Node & npm. Course curriculum



Web Design
2011
DUBLIN BUSINESS SCHOOL

I undertook a night course in DBS in 2011 in Web Design and SEO during my gap year. I studied the fundamentals of HTML, CSS, SEO and Photoshop. The objective of this course was to get a taste of programming and web development. Course curriculum



CIVIL ENGINEERING
2008 - 2011
DUBLIN INSTITURE OF TECHNOLOGY

I studied Civil Engineering for three years in DIT. Despite not influencing my choice of career path it did teach me the thought process behind problem solving, the importance of attention to detail and also tools such as Auto CAD. Course curriculum



Experience

Visual ID
2015 - 2016
FRONT END DEVELOPER / PROJECT MANAGER

As Front End Developer I am responsible for the design, functionality & maintenance of all client side access points. This consists of the Visual ID and Doddle brochure site aswell as the Doddle web application.

As Project Manager of Doddle my responsibilities include scheduling and chairing Scrum meetings, preparing meeting minutes, ensuring all Doddle deadlines are met and interfacing with Doddle clients and partners. Visual ID Work.



Upstream Digital
2013
SYSTEM TESTER

As System Tester, my responsibilities included testing out client sites on various hardware and software platforms and logging the results using Jira and Confluence. This work provided a good insight into the importance of system testing before release.



Tech Space
2012 & 2013
TEACHER

During college I volunteered at Tech Space as a Web Design and animation teacher. We carried out 2 week crash courses on topics such as the fundamentals of HTML, CSS, Photoshop, After Effects and Action Script.



Contact
Do you have an idea for a project?
Just get in touch and I'd be happy to discuss it with you.

Wanna Creep?

Wanna chat?
+353 879240500