Here is a selection of personal projects which I have worked on in recent times.
This is a browser based tool which allows the users to create and edit UML class diagrams. The menu allows the user to pick UML elements to be inserted into the diagram. These elements can be dragged around the workspace and connected together. A small set of keyboard shortcuts assist in allowing the user to carry out these tasks. The user can also edit the text within the boxes. The diagrams are a mixture of HTML and SVG. I used the Raphael library for working with SVG.Carracci demo site
Angular 1 SPA
This is a demo ecommerce site written as a single page app. It presents a list of products and controls for filtering. The user is able to register on the site, sign in, upload an avatar, and add products to a cart. It is written in Angular 1 with a Mongo/express backend.demo site
This is a demo single page app for filtering a list of Roman Emperors. It is written in React using Webpack for bundling and transpilation.demo site
I challenged myself to recreate graphical items using just SVG and CSS. This is a "trompe-l'oeil" image of an old ticket stub. All dimensions are in ems allowing for the object to be scaled by simply setting the font size on the root element. The outline of the card was created with an SVG path. I used a library I created for transforming absolute coordinates into relative ones which allows the path to be scalable.ticket stub demo
Custom select box