Developing my Robotics Teams' Website

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.

So I created a new repository that November and started working. I made sure to use similar tooling / technologies that I had experience with, because I was still sort of new to web development. I used the Vue JavaScript framework. I remember feeling ecstatic because Vue Cli 3 just released. Meaning, I didn’t have to create my own Webpack config for Vue + Babel + Sass compiling / transpiling & HMR etc. Gosh, that was a nightmare with my first website.

Initial Structure

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 .css/.sass stylesheets (so large that they don’t fit in their corresponding .vue component)

Keeping that in mind, I build a basic page showing what the layout would roughly look like.

robotics-website-1 See commit on GitHub

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 /home or /about.

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

robotics-website-2 See Commit on GitHub

Since the previous screenshot, I also added a footer, better animations on the navigation tabs, and placeholder images and text.

Colors

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.

robotics-website-3 See Commit on GitHub

Mobile Support

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.

robotics-website-4

I fixed this by adding a hamburger menu. Also, I adjusted the width of competition cards to fit small devices.

robotics-website-mobile-view

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.

robotics-website-5

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.

robotics-website-enlarge-image-feature

Photo album

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.