Code Monkey home page Code Monkey logo

gizz-next-remake's Introduction

Get Into Gizz

What is this project?

This is a website aimed at introducing people to Australian rock band King Gizzard and the Lizard Wizard. Users can navigate through different albums based on their tastes, similar to a flowchart.

Here's the /r/KGATLW announcement thread.

✨ Now band-approved!

King Gizzard tweet

Aim

My main goal for this website was to port the entire thing over to Next.js. While the pure HTML/CSS of the original worked fine, it was unnecessarily difficult to update things - and with King Gizzard releasing as many albums as they do, it needs a lot of updating! Next 13 makes the process much more streamlined.

I also wanted to use this website as an opportunity to learn about the new technologies I'm using. Aside from Next 13, there's also:

  • ⌨️ Typescript throughout,
  • 🖼️ WebGL on the front page,
  • 🤖 some Frontmatter to handle album data, and
  • 🎨 the amazing CSS Components dealing with the CSS.

The site runs on Vercel, which I used for the first time on this project.⌨️

Finally, I wanted to update the look of the website a bit. This one feels a bit more modern, and reflects King Gizzard's official website more closely.

How it works

This website uses Next 13 with Typescript and the /app router, hosted on Vercel. A markdown file holds the content for each album, as well as all the data necessary to complete the page; specifically:

  • 📛 Title
  • 0️⃣ Index (ordered by release date)
  • 🎵 BandcampCode - link to the album on Bandcamp
  • 👉 NextAlbums - whichever albums the user should be directed to next

This is all accessed through Frontmatter, and makes it extremely easy to change the various paths of the flowchart.

Pages are built from traditional React components as well as with CSS Components.

Future Plans

Besides the issues below, there's a few things I want to do:

  • Rework the flowchart a little - the new albums especially could be better placed
  • Add the concisely-named new album, "PetroDragonic Apocalypse; or Dawn of Eternal Night: an Annihilation of Planet Earth and the Beginning of Merciless Damnation"
  • Add all the extras that I never got around to doing on the HTML version of the site - live albums, demos etc

Known Issues

  • Random button doesn't work properly withserver components; removed for now.
  • CSS is still pretty messy, and could use some refactoring

gizz-next-remake's People

Contributors

gloyens avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.