trve-peak-studio

Website for Trve Peak Studio (built with Vue.js)

1. Task 📌

Build a website as SPA (Single Page Application), which is simple but stylish and contains all necessary information such as services, short description, clients, equipment and contact details.

The goal is not to provide all information in detail, but only the highlights to arouse the interest of the user.

2. Execution 🛠

This “50/50 design” is comparatively unconventional for a recording studio website, as many sound engineers often don’t even have a website and if they do, it usually looks stale and outdated.

It is divided into two components, PictureContainer and TextContainer, which are displayed next to each other with a screen width of 768 pixels or more. If the value is smaller, they are displayed in one column, starting with the PictureContainer component.

This SPA is styling pure, because I did not use any logic, except the button to display the LegalNotice component. As color accents I have highlighted the links and the button in dark orange to break somewhat with the overall monochrome image.

It was deployed through Netlify, which made the whole process of adding a custom domain and SSL encryption a breeze (hence the neat status badge on top of the document).

3. Challenges 🙇

To keep the MainContent component clear, the links for the HTML are provided by the Vue.js specific data() function:

data() {
  return {
    no: `noopener`,
    spotifyHaxan: `https://open.spotify.com/artist/5VARgwnLSbKfnZZvYFWTUu?si=B0ZSxVwPQtW5R03d_LUyqQ`,
    spotifyHiding: `https://open.spotify.com/artist/2hYuwdYFbGAb6xGsBpDIRk?si=5G1SKcaZTHa69GWMMG4M7g`,
    spotifyJaw: `https://open.spotify.com/artist/3skHroVodZvLppvJAt30rJ?si=ofbn1IuQQWSbFmmf6Rdn7g`,
    spotifyKnifeEyes: `https://open.spotify.com/artist/54aTKOMIAYtx5oRwDr9qXY?si=NdJJxTjjR6q7tnuhz4axsg`,
    spotifyKoraWinter: `https://open.spotify.com/artist/3yrMI0nTunPO2waZSzP1wj?si=BPhB20qESTadszaPWQlv0Q`,
    spotifyOhBrother: `https://open.spotify.com/artist/0fEjafSlsVwqTwz5LLIxxg?si=dkVA_UrkRkOevwPb9xugjA`,
    spotifyPgLost: `https://open.spotify.com/artist/6YK58h9BCYpFNv10fsMwoS?si=N5GRnnuKT76fx4RWXy9i4w`,
    spotifyWwc: `https://open.spotify.com/artist/5UZL0ES58uNL2wvdDAd12o?si=evVx1uzEQeG6CGVZNl3uHA`,
    urlPelagic: `https://pelagic-records.com/`,
    urlKemper: `https://www.kemper-amps.com/`,
    urlNeumann: `https://de-de.neumann.com/`,
    urlRme: `https://www.rme-audio.de/`,
    urlSennheiser: `https://sennheiser.com`,
    urlShure: `https://www.shure.com/`,
    urlSonarworks: `https://www.sonarworks.com/`,
    urlHofa: `https://hofa.de/`,
    urlNugen: `https://nugenaudio.com/`,
    urlSoftube: `https://www.softube.com/`,
    urlWaves: `https://www.waves.com/`,
  };
},

Even though this site looks simple, I have invested a lot of time in design research to find out how to find a good balance between information and design.