Skip to main content
Picture of AUF EWIG WINTER website

AUF EWIG WINTER

πŸ”—

Together with three friends I founded the record company AUF EWIG WINTER at the end of 2019, which serves as a place to collect all information about our artists from the fields of metal, lo-fi and hip hop / rap. Since we needed our own website and email address in addition to the usual social media presences for a professional outward appearance, I took care of the implementation. At that time I was working a lot with Vue.js, which is why I chose this technology, also because it offered routing possibilities, as well as integrated CSS animations.

Purpose & Goal

πŸ”—

That website serves as an official source of information about our work as a record company AUF EWIG WINTER. Besides the digital and physical distribution of music, we also offer merchandise (t-shirts & hoodies). We also have a podcast which is released at regular intervals. All this information should be as easy to find as possible and presented in the appropriate black/red aesthetic. Especially the already published music and videos should be accessible with a few clicks.

Tech Stack

πŸ”—
  • Figma
  • Font Awesome
  • Netlify
  • Vue.js

Before I started programming, I first created a design in Figma, which I later used as a guide. I wasn't very familiar with it yet, so I only created a rough draft for the desktop version. For subsequent projects, I first wrote down the structure and then started designing for the mobile version. This approach is called mobile first and has the advantage that you quickly find out which elements are essential and how best to arrange them.

For the implementation I used Vue.js, which is a JavaScript framework. It has a relatively flat learning curve, especially since I already had experience with React. Thanks to Vue Router, creating separate pages for the artists was very easy, for which I created several reusable components to follow the DRY principle. For instance a component that displays the respective Spotify player and availability on other streaming platforms per release.

Picture of AUF EWIG WINTER website

Challenges & Problems

πŸ”—

One of the biggest challenges for me in this project was to reduce the file size of the final website as much as possible. Again, Vue.js has an internal solution, namely lazy loading of components. In practice, this means that, for example, the artist pages are only loaded when you select them. Another challenge was deploying the website through Netlify. It is generally very easy with this service, but a bit more complicated once the domain does not come directly from Netlify, but in this case from Strato.

After this worked, however, another problem arose: If you wanted to navigate directly to one of the subpages (for example aufewigwinter.de/kora-winter), you saw a 404 page because the redirect failed. I was able to fix this by creating a corresponding netlify.toml. This file is prioritised by Netlify during the deployment process and tells them that a redirect will go to the relevant index.html and sends a status code 200.

The last big challenge was to create some reusable components, as I wanted to add new content quickly and easily in the future without having to edit several places in the application. These components are, so to speak, templates with ready-made structure, logic and styling, which I only have to provide with the corresponding information in a few places. In the end, there are five of them, some of which are nested within each other:

Conclusion

πŸ”—

Thanks to this project, I was able to learn a lot about Vue.js and Netlify and how to optimize the two technologies for production. Unfortunately, I am not 100% satisfied with this version of the website, which is mainly related to the structure. My biggest criticisms are that:

  • it is not clear at a glance what AUF EWIG WINTER is at all
  • there is too little information about the record company itself and the artists
  • users have to click through first to get to the content

For this reason, I will create a revised version with Next.js, as it is very user-friendly for developers, has many useful functions and it generates statically generated HTML files. This means in practice that the perceived speed for users is higher and the file sizes are smaller. I will make the following structural changes:

  • short description of AUF EWIG WINTER on the start page, as well as the latest release to listen to and watch
  • automatic language detection and manual language selection possible (English and German)
  • artist pages will contain more info about the artist, as well as about the releases