Design / Web/Dartmouth Robotics Club Website
23 / 67

08/2023Design / Web

Dartmouth Robotics Club Website

A redesigned website for the Dartmouth Robotics Club, built with Next.js and SCSS and deployed on Vercel.

╌╌╌╌

A redesign of the Dartmouth Robotics Club website, built with Next 13 (App Router, React) and SCSS and deployed on Vercel.

The site is a single page composed of sections. app/page.tsx stacks five section components (Header, Hero, Projects, Members, Footer) under a single root layout that sets the Inter font and the "Making Things Move." metadata. Most of it is static club content: who the team is, what the projects are, how to join. The Hero runs a typewriter effect over that tagline, and everything else is plain markup and per-section SCSS (hero.scss, members.scss, projects.scss, and a shared colors.scss holding the palette).

The one moving part is the roster. Members fetches public/data/members.yml at runtime, parses it with js-yaml, and renders a MemberCard per entry, each member carrying a name, roles, categories, link, and image. Filter buttons (All, Leadership, Competitive, Product Design) narrow the grid by matching against a member's categories, so adding or recategorizing someone is an edit to the YAML file rather than a code change.

References

  1. Project repository
  2. Live site

╌╌ END ╌╌