Jason Salekin's Portfolio - Canada's Sports Hall of Fame

As a school project for Canada’s Sports Hall of Fame I worked with a group to create a digital version of one of the galleries. We chose the Motion gallery as it had a number of athletes and artifacts that interested us.

We wanted to show a number of athletes as well as the artifacts that went with them. Originally we wanted to showcass ten athletes and ten artifacts but we quickly decided that it would be more interesting to tell the stories of the athletes instead.

I was incharge of coding the backend of the site, which needed to be run offline and on a touchscreen.

I started by using a flexbox to show all of the athletes on the screen at the same time but we decided that having all ten athletes shown made it too crowded, so we went with only showing six and scrolling through the rest. At this time our client wanted to showcase 12 athletes instead of the ten my group and I had originally pitched. We wanted to have the portraits of the athletes start as grayscale and after selecting one it will become coloured and stay coloured as an indicator of which athletes you have already viewed. Below is a video showing an early test build of the site. I was able to make it so you could scroll though the athletes but it does not loop back to the first athlete.

I was able to get the cells to loop around but it wasn’t smooth, the six athletes shown would jump to the next in line.

To solve this issue I looked for a solution and found one in the Flickity API. The Flickity API is for draggable, smooth carousels, which is exactly what we needed. With the carousel working the way we wanted I went to work on figuring out how to show off the artifacts. One of my group members had gone to the Canada’s Sports Hall of Fame to take high quality photos of the artifacts in the gallery. We wanted to show these photos with a zoom feature. Taking a tutorial from w3 schools I applied it to our site and expanded it to work with multiple images.

The following is a link to a copy of the site. It was made for a 48inch touch screen at 1920 by 1080 resolution. For the final deliverable the banner image is hidden after scrolling past it but I removed that for this example. Unfortunately I did not work on the layout and it is not responsive. The images are also large so it may take a while to fully load.

Go to the website Attributions