Intro

Edit chxtio/mrg_website/main

MUI Theme Update

Original

picture 0

Updated

  • Update Material UI theme to reflect brand colors and logo design

picture 1

Original

Wave Animation

SVG

7/3/25

  • See Waves
  • Use SVG animation to morph the d attribute between different wave shapes (start, middle, and end)

Traveling Wave

7/7/25

Animate Paper in sync with wave

7/9/25

  • Use CSS @keyframes animation to match wave motion

Homepage Update

Homepage Update: Todo

  • Update Wam-V pic with better pic/vid
  • Student-led Exploration section: horizontal layout and change bg-color
  • Ongoing projects: improve transition
  • Modal button visibility
  • Update footer year

Replace Wam-V pic with auto-play video

7/9/25

  • Create video clip using Adobe Premiere (via James)

7/11/25

picture 14

Hydration Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.

hydration-error from video rendering only on client and DOM mismatch on server

Exploration Page

7/12/25

  • Adjust Typography variant and weight for exploration section and set background to white

Grid restructuring

  • Make exploration (Learning, Building, Testing) sections stack horizontally on desktop

    • Place each section in a Grid item (like columns in a row)
  • Notes

    • xs={12} ensures full width on mobile; md={4} puts 3 items side-by-side on medium+ screens.
    • Each section has its own image, heading, and text inside a centered Box.
    • textAlign=β€œcenter” makes it visually consistent in horizontal layout.
    • This is responsive: stacks vertically on mobile, horizontal on desktop.

Multilayer wave

Make BlueButton

7/14/25

Todo

  • Update Wam-V pic with better pic/vid
  • Student-led Exploration section: horizontal layout and change bg-color
  • Ongoing projects: improve transition
  • Modal button visibility
  • Update footer year

home_blue_theme

8/6/25

Logo animation

MRG Icon

mrg_icon.svg is a vector graphic created with Inkscape

<sodipodi:namedview id=β€œnamedview522” pagecolor=β€œ#ffffff” bordercolor=β€œ#000000” borderopacity=β€œ0.25” inkscape:showpageshadow=β€œ2” inkscape:pageopacity=β€œ0.0” inkscape:pagecheckerboard=β€œ0” inkscape:deskcolor=β€œ#d1d1d1” inkscape:document-units=β€œmm” showgrid=β€œfalse” inkscape:zoom=β€œ0.37205502” inkscape:cx=β€œ67.194363” inkscape:cy=β€œ263.4019” inkscape:window-width=β€œ1503” inkscape:window-height=β€œ933” inkscape:window-x=β€œ0” inkscape:window-y=β€œ0” inkscape:window-maximized=β€œ1” inkscape:current-layer=β€œlayer1” />

Blue circle

Partial compass

<sodipodi:namedview id=β€œnamedview522” pagecolor=β€œ#ffffff” bordercolor=β€œ#000000” borderopacity=β€œ0.25” inkscape:showpageshadow=β€œ2” inkscape:pageopacity=β€œ0.0” inkscape:pagecheckerboard=β€œ0” inkscape:deskcolor=β€œ#d1d1d1” inkscape:document-units=β€œmm” showgrid=β€œfalse” inkscape:zoom=β€œ0.37205502” inkscape:cx=β€œ67.194363” inkscape:cy=β€œ263.4019” inkscape:window-width=β€œ1503” inkscape:window-height=β€œ933” inkscape:window-x=β€œ0” inkscape:window-y=β€œ0” inkscape:window-maximized=β€œ1” inkscape:current-layer=β€œlayer1” />

Create full compass

picture 30