Clicky

<henri>

Appearance

Gingaiki ​

This is merely a design experiment. My goal here is to explore the concept of negative space, also known as white space, by creating a blog dedicated to the world of traditional martial arts. It was one of my first school assignments at Noroff. The development of this project consisted of the following steps:

  • Creating a headless WordPress installation and populating it with content;
  • Developing a website with HTML, CSS and Javascript;
  • Making API calls to the WordPress REST API to fetch the data;
  • Installing Hotjar and using it to improve the website's user experience.

Product ​

Gingaiki 1Gingaiki 1

Design concept ​

The word "gingaiki" is a mix between the terms ginga (from Brazilian capoeira) and aiki (from traditional Japanese martial arts).

Wireframes ​

Gingaiki 1

Style guide ​

Gingaiki 1

Heat map ​

Here I apply what I learned from my first web design project. Usability tests and heat maps come in super handy when we need to make sure our design is evolving into the right direction.

Gingaiki 1

Tools ​

  • Adobe XD
  • HTML
  • CSS
  • Vanilla Javascript
  • Wordpress REST API
  • WP Plugin: Custom Post Type UI
  • WP Plugin: Advanced Custom Fields
  • Hotjar

Code snippet ​

There's always a first time: the code is far from perfect but developing an efficient, responsive and good looking navigation bar is a challenging task even for seasoned developers.

js
const toggleButton = document.querySelector(".toggle-button");
const navbarLinks = document.querySelector(".navbar-links");

toggleButton.addEventListener("click", () => {
    navbarLinks.classList.toggle("active");
})