A webring for University of Waterloo Mechatronics Engineering students and alumni. Webrings link personal sites in a ring so visitors can discover more people in the community. Live site: https://tronring.com

This site supports prev/next navigation via URL hash routing (see the widget template below).

1. Add the webring widget to your site (template below). Put it in your footer or about page.
2. Fork this repo.
3. Add your info to website/data/members.json at the bottom of sites[].
4. Make a commit, and push the commit to your fork.
5. Open a Pull Request.

{
  "name": "Your Name",
  "website": "https://your-site.com",
  "url": "your-site.com",
  "class": "Class of 20XX",
  "description": "something cool about you",
  "icon": "/icons/your-name.png"
}

description and icon are optional — leave them as "" to skip. If icon is set, it replaces the default initials badge on your row. Upload your icon to website/public/icons/ (square, ideally 64x64 or larger).

Use https://tronring.com as the base URL.

<div style="display:flex;align-items:center;gap:10px;">
  <a href="https://tronring.com/#your-site.com?nav=prev" aria-label="Previous site">
    <img src="https://tronring.com/leftarrow.png" alt="Previous" style="width:18px;height:auto;" />
  </a>
  <a href="https://tronring.com/#your-site.com" target="_blank" rel="noreferrer">
    <img src="https://tronring.com/logoblack.png" alt="Tron Webring" style="width:36px;height:auto;" />
  </a>
  <a href="https://tronring.com/#your-site.com?nav=next" aria-label="Next site">
    <img src="https://tronring.com/rightarrow.png" alt="Next" style="width:18px;height:auto;" />
  </a>
</div>

<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
  <a href="https://tronring.com/#your-site.com?nav=prev" aria-label="Previous site">
    <img src="https://tronring.com/leftarrow.png" alt="Previous" style={{ width: 18, height: "auto" }} />
  </a>
  <a href="https://tronring.com/#your-site.com" target="_blank" rel="noreferrer">
    <img
      src="https://tronring.com/logoblack.png"
      alt="Tron Webring"
      style={{ width: 36, height: "auto" }}
    />
  </a>
  <a href="https://tronring.com/#your-site.com?nav=next" aria-label="Next site">
    <img src="https://tronring.com/rightarrow.png" alt="Next" style={{ width: 18, height: "auto" }} />
  </a>
</div>

Files are in website/public/ and can be used directly from the site root:

• example.png (widget demo)
• leftarrow.png
• rightarrow.png
• logoblack.png
• logogreywhite.png
• tronblack.png
• tronorange.png
• tronorangeonblack.png
• trontransparent.png
• waterloo.png

cd website
npm install
npm run dev

Build and run:

cd website
npm run build
npm run start

Inspired by other UWaterloo program webrings and the broader webring community.

if you're reading this and bored, feel free to check out https://github.com/sym7534/tron-webring/issues and try implementing something :)