Website Design &
Front-End Development


I was tasked to design and build a responsive website for a music artist, with a focus on the implementation. I chose Avicii because I have been a fan of him for years. Sadly, he passed away in 2018, so I wanted to create something in memory of him.

My process involved creating wireframes and mockups in Figma, programming the website in Visual Studio Code, and deploying it on Github.

Individual academic project
September - November 2020
Web design, front-end development
(HTML, CSS, JavaScript, Bootstrap, jQuery)






#1: Body copy

#2: Titles & subheads


#1: Global navigation

#2: Page navigation


From wireframes to mockups

There are two stand-alone official websites that already existed for Avicii: the official site mainly hosts the Avicii Memory Board and his Instagram photos; the official store sells Avicii-related products. They combined still don’t offer comprehensive resources to everything related to Avicii.

Therefore, I researched what resources were available on the internet and decided to host them in one place, which include facts about him, music, photos and videos, merch, and concert history. With a list of information that my site needs to cover, I began wireframing and making mockup screens.

Considering the style of the official websites, his character, and the loss and grief associated with his death, I decided on a dark theme. I also added a pop of color, yellow, for his vibrant music style.

Implementing the “show more” feature

Let’s take the Concert History page as an example. By default, the page shows a table with 11 rows. When a user clicks the “SHOW MORE” button, the table expands to show more concerts and the button becomes inactive.

This was implemented with JavaScript in the following steps.

  • Store concerts data in a JSON file as an array.
  • Make a new array in the JS file to store the first 11 items of the JSON array and show them in the concert history table.
  • When the button is clicked, read the rest of the JSON array and show those items.
  • Change the button property to inactive.

Building Merch categories

On the Merch page, users can filter items shown on the page by clicking the tab labels. The category that is active should have an underline below the label to indicate that. These two features made it necessary to assign IDs to merch items and classes to categories in HTML.

Using JavaScript, I made certain items visible by matching their IDs with the class of the chosen category and hid the rest. Then, I added a bottom border to the chosen category while removing the other ones to indicate the active state.


This project allowed me to make a concrete connection between design and implementation and develop a deeper understanding of the importance of consistency in colors, grids, spacing, and UI components. I also practiced my skills on color accessibility by following the WCAG AAA standard.

It was extremely rewarding to see my design deployed as a live website which I coded line by line.

Future improvements

On the coding side, there are certainly opportunities to make my code cleaner and to perfect the details of the site. In addition, although I used the Bootstrap framework to enhance responsiveness, I did not focus on building an ideal experience for mobile devices, and thus this could be further optimized.

In terms of design, I would like to explore ways to incorporate motion, which will both support usability and create a more delightful experience.

What’s next?

I'm open to
UX, product, interaction design opportunities
in 2023.

Let’s get in touch