Carma Impact Hub
My current work, built in Next.js with a Keystone.js backend
Login/signup screen with dynamic slider populated from the Keystone backend. Forgotten password journey utilises magic links to log users in. I have pushed to switch to strictly magic links for login but our CEO prefers email/password entry.
The initial view of the Hub, with a dynamic Impact Map displaying locations a users trees have been planted at varying levels of detail as users zoom in - first by country, then region and lastly individual Planting Sites.
Clicking on a map marker will display a tooltip showcasing all Planting Sites in that country/region or singular sites. A link in the Planting Sites tooltip will navigate to a more detailed breakdopwn page for that Planting Site.
The Planting Site detail showcases a brief description of the site along with a viewable gallery, personalised statistics for that Site, a map of the local area, which of the UN's Sustainable Development Goals are covered by that Site along with a details of each species planted on behalf of the user.
The Impact Map can be extensively customised: a user can choose from a wide variety of personal statistics to display above and below the map or remove some if preferred, the map colors can also be changed as well as the font or the map can be disable altogether to display only statistics.
Once a user has customised it to their liking they are able to embed the map in a website with a one-click operation to copy embed-code to their clipboard, the map will then display the saved configuration on a site of the users choosing.
Users can track all purchases and subscriptions made, with breakdowns for one-off purchases, active subscriptions, gifted purchases and soon referral bonuses.
Clicking on each order will display further details about the status of a users order and a breakdown of where their purchased trees have been planted with links through to the Planting Site pages.
Custom Profile Page builder - users can stack multiple customisable page sections together to create a personalised page. Each section has dynamic page anchor options, alignment, customisable text and image content as well as section specific customisations such as display statistics or Impact Map details.
Users can share their newly-customised, publicly-visible profile page with anyone to showcase the steps they have taken towards managing their carbon footprint.
Affinity Workforce
One of my more interesting projects from Electric Circus. A customer needed a full Wordpress site but on a very limited budget, working with our designers we came up with 6 highly configurable components that I then built. The was pleased receieve a very flexible website that they have built up using just these 6 components.
A banner element with options for text positioningm, text animations, CTA buttons and carousels.
A carousel with completely customisable slides with provisions for links, text images and theme.
A flexible section to display unlimited blocks of information with options for theme, block sizing text, imagery and CTA buttons.
A carousel similar to the custom slider that instead popoulates from Wordpress posts with specified tags..
A flexible full-width display for image and video content with an option for a modal video player.
A highly configurable general purpose component that allows for a single or two column layout with text and image content.
carma_1.bmp
Portfolio - Help