During the November of 2018, I became aware of a website competition. I had the opportunity to submit a website that showcased my robotics club by mid-January. Website creation tools (like ones from Wix or Weebly) were not prohibited. After learning this, I thought this competition would be perfect to apply the frontend skills that I recently learned! I knew I probably wasn’t going to win, but I wanted to give it my best shot.
I made sure to abide by some lessons I’ve learned firsthand from my previous website
- Create components from repeated page elements
- Do not make HTML templates large (split up into as many components as possible)
- Avoid creating large
.sassstylesheets (so large that they don’t fit in their corresponding
Keeping that in mind, I build a basic page showing what the layout would roughly look like.
As you can see, I did not opt for any UI framework. I don’t recall the exact reason, but I think I wanted to learn how to create good-looking components on my own. Even if this slowed down development, I enjoyed creating the components. Besides, it made the website look more unique. From my last website I learned that colors and icons can really make or break the look of a website. Luckily I already knew about the great Open Color color pallette and the amazing Feather Icons icons set.
Simple Architecture Changes
After a few weeks, I realized the top-level architecture I had previously had to be modified. It looked like the following.
<template> <div id="app"> <navbar /> <router-view /> <foot /> </div> </template>
If you’re not familiar, the
<router-view/> component changes based on the current URL, such as
There was a Page Heading component inside of
router-view, which I later moved out to the parent component. This component consisted of the page title and sub-pages of a route. Previously, I was duplicating the page heading across several components (each of which corresponded to a specific route). This seemed wasteful at best, so I refactored to improve the structure. Looking back, there were other ways to create an abstraction, but that sufficed for the time.
<template> <div id="app"> <navbar /> <page-heading /> <router-view /> <foot /> </div> </template>
After I refactored, navigation behaved similarly, with simpler code
Since the previous screenshot, I also added a footer, better animations on the navigation tabs, and placeholder images and text.
Unfortunately, our team’s previous website had little content. So I couldn’t really reuse any text or photos. On the plus side, I helped our team organize and upload our photographs to a GitHub repository a few months prior. I was able to browse for photos there.
After adding the images, I styled some elements with light blue and yellow, which are our team colors.
Although the desktop version of the site looked fine, the mobile version still needed a lot of work. The pictures were too small and the navigation bar overflowed passed the width of the screen.
I fixed this by adding a hamburger menu. Also, I adjusted the width of competition cards to fit small devices.
My Favorite Parts
I had the most fun making the carousel that displayed the club’s sponsors. After imagining this effect, I found a repository that implemented this feature. For some reason, the scroll effect didn’t work unless I put a set width on the element. Unfortunately, that’s a limitation that probably won’t be fixed.
Enlarged photograph views
I enjoyed animating the photograph card on hover. You can see it in the gif below: On moues hover, the card floats up, the shadow increases, and the “enlarge” icon fades in and slides to the left.
The page that shows the enlarged image was pretty cool. At the time, I didn’t know any best practices that allowed the image to stay on refresh. For a temporary-permanent solution, I base64 encoded the data that described the image in the URI. Because
/ is the 63rd character in the base64 format (starting from 0), it created extra routes that were not intended. As a result, I replaced forward slashes with exclamation marks. I had to convert the exclamation marks to forward slashes before decoding the string.
The photo album is probably the most used feature on this site. Earlier I said that I had to browse for team photos directly through the GitHub interface. By creating this photo gallery, team members can search for photos easily.
Since all of our team’s photographs are in a GitHub repository, I just referenced those.
When I started this project, it wasn’t clear to me exactly how the final project will look. But, I had a whole lot of fun and learning experience by making incremental changes to the codebase. Although I had to drop some features (like a blogging system and a video album), I absolutely love the final product! From time to time, I revisit the codebase and make incremental changes.