scroll

norma komma website.

ROLE:
  • designer|
  • coder

This single page website has a minimalistic responsive design with emphasis in the content. It is built with HTML5, SCSS, and TypeScript. Gulp was used as a task runner automating the minification, transpilation, and bundling of the code (Babel, Typescript, Rollup etc). Metadata (og, twitter) and microdata (JSON-LD) were included for SEO optimization (it gets a 100% Lighthouse Performance Score on all categories). Lastly, the website was deployed to Netlify.

  • TypeScript|
  • SCSS|
  • Gulp|
  • Figma

1

laptop mockup scene

The band's logo is presented with an animation as soon as it is loaded. The hero image, that consists of the photos of the band members, is animated on scroll.

2

laptop mockup scene

In the next section there is the biography of the band along with a group photo. This image is omitted in smaller viewports.

3

laptop mockup scene

The next section is about the discography of the band. Of course there are links to all the platforms where someone can listen to or buy their last album. Below that, there is an embedded video of their single. This section is rearranged for mobiles using a different CSS Grid template.

4

laptop mockup scene

In the last section there is a contact form (formspree.io), and a footer, which consists of their social media links, and a form for joining the newsletter (mailChimp).