VPCI Robotics Website (FRC 4914)

Our Website Hero

Inspiration

We wanted to improve our existing robotics team website (made with google sites). The content was outdated and our club hadn't been active since 2019 due to COVID and our staff supervisor retiring, however after hearing news that it will start up again in September, we wanted to create a new website to go along with it!

What it does

It is a static website aimed at people wondering what our First Robotics Competition Team is and new members looking to get an overview of the competition resources.

How we built it

We decided to go with Astro JS as it looked like an excellent framework on paper, mainly because we could use components from other frameworks (like React). On Friday, we met in a library and worked for 4 hours, and on Saturday we worked on it endlessly on a call.

Challenges we ran into

Many bugs, some with collaboration but one notable one being setting the background image in a component through Astro Props. We had to use a separate script tag in order to set a CSS root variable of the background image link and then set the background image through CSS, it took a while to figure out! see how we did it!

Accomplishments that we're proud of

This is our first time building a full NodeJS website from scratch. We have built one with a template before, but never originally. This experience really opened our eyes to how important UI and UI design is and how difficult it is to create a nice UI.