Spark Commodities Landing Site

Fast, responsive and performant SEO site built with NuxtJS using SSR and TailwindCSS

Spark Commodities is B2B company I work for that offers transparent pricing in a very opaque energy industry. I was tasked to work on the public facing landing site and I made use of my experience in creating static sites that are search engine optimised (SEO), responsive and performant. I designed the entire site on Figma before developing it with NuxtJS (static mode) and TailwindCSS.

Landing slide with generated delayed prices

Landing slide with generated delayed prices

Landing slide mobile view

Landing slide mobile view

Developer integrations slide with app-icon-like design

Developer integrations slide with app-icon-like design

Cookie banner to comply with GDPR

Cookie banner to comply with GDPR

Google Lighthouse score. Accessibility score was omitted since our colour scheme does not have a good contrast ratio.

Google Lighthouse score. Accessibility score was omitted since our colour scheme does not have a good contrast ratio.

Try it live below or open in a new tab

frontend

Other posts

Setting up a Multi-Themed Application Hero

Setting up a Multi-Themed Application • 2022

Uses TailwindCSS and Javascript (React) in this example

Nuxt with Animated on Scroll Hero

Nuxt with Animated on Scroll • 2020

Animated on Scroll (AOS) is a CSS library to animate elements on websites.

Nuxt with Tailwind CSS and UI Kit Hero

Nuxt with Tailwind CSS and UI Kit • 2020

Set up Vue Tailwind UI Kit in Nuxt along with Tailwind CSS, PostCSS and PurgeCSS.

Reassemble Hero

Reassemble • 2020

Reassemble is a UX Design Consultancy based in Singapore. I made for them a consumer facing website based on NuxtJS with Tailwind CSS, Animated on Scroll and Contentful integration.

Temple Cellars Hero

Temple Cellars • 2020

Redesigning an alcohol e-commerce with custom Vue Shopify theme

Shopify with VueJS - Sass - Theme Kit Hero

Shopify with VueJS - Sass - Theme Kit • 2020

Setup a Shopify custom theme using Vue.js and Sass with more control than Slater.

Slater and Custom Shopify Theme Hero

Slater and Custom Shopify Theme • 2020

How I setup Slater, and other tools I considered when researching on the tools to develop a custom Shopify storefront.