teamV2.ejs

<%- contentFor('head') %>
<link rel="stylesheet" href="css/about.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<%- contentFor('main') %>
<div class="flex flex-col items-center max-w-6xl">
  <img class="w-12 mb-2" src="https://cdn.mutorials.org/images/icons/Icon_Main.svg">
  <h2 class="mb-2">About Mutorials</h2>
  <p id="center">The Mu Foundation is focused on enriching the learning experience of all students of science. Founded by a group of nine dedicated high-schoolers who know how to score extremely well in AP and IB classes/exams, the team understands the hardships of the students at an intimate level and is dedicated to help solve these problems.
    Through our main project, Mutorials, a free, open-source, web-based adaptive science trainer, our team hopes to augment the learning experience of the users and students, while also promoting enthusiasm in science for all people.</p>
  
  <div class="w-full max-w-4xl flex flex-col gap-6 px-6 mt-5">
    <h3 class="inline cursor-pointer mb-2">Board of Directors</h3>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="personElement">
        <div class="imageElement">
          <img src="https://media.discordapp.net/attachments/1033910327496163378/1401358170265485493/497840738_17849083401463934_5307634962708609358_n.png?ex=688ffbff&is=688eaa7f&hm=0a3b435f5221f96c14b263ea2741e1816c308d0e047b4acac02ecfba3a81235e&=&format=webp&quality=lossless&width=1057&height=1057" alt="person" class="personImage">
          <div class="socialLinks">
            <a href="mailto:president@mutorials.org" target="_blank">
              <span class="material-symbols-outlined icon">mail</span>
            </a>
          </div>
        </div>
        <div class="text">
          <p class="personName">Nihal Josyula</p>
          <p class="personTitle">President</p>
          <p class="personDesc">Nihal manages the organization, providing overall direction while effectively leading the strategy and long-term vision of the Mu Foundation.</p>
        </div>
      </div>
      <div class="personElement">
        <div class="imageElement">
          <img src="https://media.discordapp.net/attachments/1287488622911684659/1362220298383921182/1687056806322.png?ex=688f5343&is=688e01c3&hm=1d035b79e0dbad6609a06c6e68a21f987683ce64cb4a89ce9cd18918dfaa6835&=&format=webp&quality=lossless&width=540&height=540" alt="person" class="personImage">
          <div class="socialLinks">
            <a href="mailto:admin@mutorials.org" target="_blank">
              <span class="material-symbols-outlined icon">mail</span>
            </a>
          </div>
        </div>
        <div class="text">
          <p class="personName">Patrick Feng</p>
          <p class="personTitle">Director of Software Development</p>
          <p class="personDesc">As Director of Software Development, Patrick maintains the codebase, implements new features, and facilitates code contribution at Mutorials.</p>
        </div>
      </div>
      <div class="personElement">
        <div class="imageElement">
          <img src="https://media.discordapp.net/attachments/1033910327496163378/1401358959822110830/image.png?ex=688ffcbc&is=688eab3c&hm=ab9888f4fc8a1708d9ef33e32adadc889a5527d63cb21ac6428b3acd42c6f863&=&format=webp&quality=lossless&width=161&height=149" alt="person" class="personImage">
          <div class="socialLinks">
            <a href="mailto:secretary@mutorials.org" target="_blank">
              <span class="material-symbols-outlined icon">mail</span>
            </a>
          </div>
        </div>
        <div class="text">
          <p class="personName">Daniel Lu</p>
          <p class="personTitle">Secretary</p>
          <p class="personDesc">Daniel oversees all processes at Mutorials, organizes meetings, and is responsible for assigning tasks while keeping the organization in order.</p>
        </div>
      </div>
      <div class="personElement">
        <div class="imageElement">
          <img src="https://media.discordapp.net/attachments/1281407131647479809/1358433672650428456/577C7BEB-FC88-4333-955F-EF6666BE5143_1_105_c.jpeg?ex=688f6472&is=688e12f2&hm=bc0bf5c567b77b947ec8500e34012319b3681ea693c3404215064b9e99ecc9d6&=&format=webp&width=1037&height=1382" alt="person" class="personImage">
          <div class="socialLinks">
            <a href="mailto:content@mutorials.org" target="_blank">
              <span class="material-symbols-outlined icon">mail</span>
            </a>
          </div>
        </div>
        <div class="text">
          <p class="personName">Devesh Aggarwal</p>
          <p class="personTitle">Director of Content Development</p>
          <p class="personDesc">Devesh manages content development and review, overseeing all contributors. He aims to enhance the content experience for users and expand the inventory of high-quality questions.
          </p>
        </div>
      </div>
      <div class="personElement">
        <div class="imageElement">
          <img src="https://media.discordapp.net/attachments/1033910327496163378/1401357521934880788/image.jpg?ex=688ffb65&is=688ea9e5&hm=0598f9cd10d69d84b00f8c7630fa1732d2eb00b07c84b5bd04797d46e5475445&=&format=webp&width=1357&height=1809" alt="person" class="personImage">
          <div class="socialLinks">
            <a href="mailto:marketing@mutorials.org" target="_blank">
              <span class="material-symbols-outlined icon">mail</span>
            </a>
          </div>
        </div>
        <div class="text">
          <p class="personName">Brian He</p>
          <p class="personTitle">Director of Marketing</p>
          <p class="personDesc" style="margin-bottom: 10px;">Brian oversees the outreach work at Mutorials and forms partnerships with other organizations and schools.</p>
        </div>
      </div>
    </div>

    <div class="mt-8">
      <details>
        <summary class="mb-2">
          <h3 class="inline cursor-pointer">Former Board of Directors (2023-2024)</h3>
        </summary>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/William.png" alt="person" class="personImage">
            <div class="socialLinks">
              <a href="mailto:president@mutorials.org" target="_blank">
                <span class="material-symbols-outlined icon">mail</span>
              </a>
            </div>
          </div>
          <div class="text">
            <p class="personName">William Y. Feng</p>
            <p class="personTitle">Former President</p>
            <p class="personDesc">William manages the organization and is responsible for the overall direction of the Mu Foundation.</p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/Patrick.png" alt="person" class="personImage">
            <div class="socialLinks">
              <a href="mailto:admin@mutorials.org" target="_blank">
                <span class="material-symbols-outlined icon">mail</span>
              </a>
            </div>
          </div>
          <div class="text">
            <p class="personName">Patrick Feng</p>
            <p class="personTitle">Director of Software Development</p>
            <p class="personDesc">As Director of Software Development, Patrick maintains the codebase and facilitates code contribution.</p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/Daniel.png" alt="person" class="personImage">
            <div class="socialLinks">
              <a href="mailto:secretary@mutorials.org" target="_blank">
                <span class="material-symbols-outlined icon">mail</span>
              </a>
            </div>
          </div>
          <div class="text">
            <p class="personName">Daniel Lu</p>
            <p class="personTitle">Secretary</p>
            <p class="personDesc">Daniel oversees all the processes at Mutorials and organizes most events and meetings. He is also responsible for assigning tasks and keeping the organization in check.</p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/Nihal.jpg" alt="person" class="personImage">
            <div class="socialLinks">
              <a href="mailto:content@mutorials.org" target="_blank">
                <span class="material-symbols-outlined icon">mail</span>
              </a>
            </div>
          </div>
          <p>&nbsp;</p>
          <div class="text">
            <p class="personName">Nihal Josyula</p>
            <p class="personTitle">Former Director of Content Development</p>
            <p class="personDesc">Nihal strategically manages key content priorities, leveraging analytics to innovate and guide content direction. He also oversees all contributors. 
            </p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/Grace.png" alt="person" class="personImage">
            <div class="socialLinks">
              <a href="mailto:marketing@mutorials.org" target="_blank">
                <span class="material-symbols-outlined icon">mail</span>
              </a>
            </div>
          </div>
          <div class="text">
            <p class="personName">Grace Chen</p>
            <p class="personTitle">Former Director of Marketing</p>
            <p class="personDesc">Grace oversees the outreach work at mutorials and forms partnerships with other organizations and schools.</p>
          </div>
        </div>
      </div>
    </details>
    
    <details>
      <summary class="mb-2">
        <h3 class="inline cursor-pointer">Former Board of Directors (2022-2023)</h3>
      </summary>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/Arya.jpg" alt="person" class="personImage">
            <div class="socialLinks">
              <a href="mailto:president@mutorials.org" target="_blank">
                <span class="material-symbols-outlined icon">mail</span>
              </a>
            </div>
          </div>
          <div class="text">
            <p class="personName">Arya Gummadi</p>
            <p class="personTitle">Former President</p>
            <p class="personDesc">Arya manages the organization and is responsible for the overall direction of the Mu Foundation.</p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/William.png" alt="person" class="personImage">
            <div class="socialLinks">
              <a href="mailto:admin@mutorials.org" target="_blank">
                <span class="material-symbols-outlined icon">mail</span>
              </a>
            </div>
          </div>
          <div class="text">
            <p class="personName">William Y. Feng</p>
            <p class="personTitle">Former Director of Software Development</p>
            <p class="personDesc">William is a junior at Lakeside School. As Director of Software Development, he maintains the codebase and facilitates code contribution.</p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/Daniel.png" alt="person" class="personImage">
            <div class="socialLinks">
              <a href="mailto:secretary@mutorials.org" target="_blank">
                <span class="material-symbols-outlined icon">mail</span>
              </a>
            </div>
          </div>
          <div class="text">
            <p class="personName">Daniel Lu</p>
            <p class="personTitle">Secretary</p>
            <p class="personDesc">Daniel oversees all the processes at Mutorials and organizes most events and meetings. He is also responsible for assigning tasks and keeping the organization in check.</p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/Ishaan.png" alt="person" class="personImage">
            <div class="socialLinks">
              <a href="mailto:design@mutorials.org" target="_blank">
                <span class="material-symbols-outlined icon">mail</span>
              </a>
            </div>
          </div>
          <div class="text">
            <p class="personName">Ishaan Venkat</p>
            <p class="personTitle">Former Director of design</p>
            <p class="personDesc"></p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/icons/Icon_Main.svg" alt="person" class="personImage">
            <div class="socialLinks">
              <a href="mailto:content@mutorials.org" target="_blank">
                <span class="material-symbols-outlined icon">mail</span>
              </a>
            </div>
          </div>
          <div class="text">
            <p class="personName">Nihal Josyula</p>
            <p class="personTitle">Former Director of Content Development</p>
            <p class="personDesc"></p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/icons/Icon_Main.svg" alt="person" class="personImage">
            <div class="socialLinks">
              <a href="mailto:content@mutorials.org" target="_blank">
                <span class="material-symbols-outlined icon">mail</span>
              </a>
            </div>
          </div>
          <div class="text">
            <p class="personName">Jaewon Chung</p>
            <p class="personTitle">Former Director of Content Development</p>
            <p class="personDesc"></p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/Grace.png" alt="person" class="personImage">
            <div class="socialLinks">
              <a href="mailto:marketing@mutorials.org" target="_blank">
                <span class="material-symbols-outlined icon">mail</span>
              </a>
            </div>
          </div>
          <div class="text">
            <p class="personName">Grace Chen</p>
            <p class="personTitle">Former Director of Marketing</p>
            <p class="personDesc">Grace oversees the outreach work at mutorials and forms partnerships with other organizations and schools.</p>
          </div>
        </div>
      </div>
    </details>

    <details>
      <summary class="cursor-pointer mb-2">
        <h3 class="inline">Former Board of Directors (2020-2022)</h3>
      </summary>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-2">
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/pro erik.png" alt="person" class="personImage">
          </div>
          <div class="text">
            <p class="personName">Erik Ma</p>
            <p class="personTitle">Former President</p>
            <p class="personDesc"></p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/Ved.jpg" alt="person" class="personImage">
          </div>
          <div class="text">
            <p class="personName">Ved Thiru</p>
            <p class="personTitle">Former VP Software Development</p>
            <p class="personDesc">Ved is the team leader for software development, wrote much of the backend, and guides coding contributors for new features.</p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/mischievous_michael.png" alt="person" class="personImage">
          </div>
          <div class="text">
            <p class="personName">Michael Li</p>
            <p class="personTitle">Former VP of Project Development & Secretary</p>
            <p class="personDesc">Michael is the team leader in frontend development, and also writes backend code for features such as user profile systems. Michael also plans agendas for weekly board meetings.</p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/pro ethan.png" alt="person" class="personImage">
          </div>
          <div class="text">
            <p class="personName">Ethan Shen</p>
            <p class="personTitle">Former VP of Design</p>
            <p class="personDesc">Ethan manages site design, several backend features (e.g. authentication), and databases (Mongo/AWS). Ethan also heads outreach campaigns, mainly through Google Ads.</p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/pro_rohan.png" alt="person" class="personImage">
          </div>
          <div class="text">
            <p class="personName">Rohan Pandey</p>
            <p class="personTitle">Former VP of Marketing</p>
            <p class="personDesc">Rohan manages content transfer into the Mutorials database. He also leads the marketing of Mutorials to teachers and potential volunteers.</p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/teams/pro lucas.png" alt="person" class="personImage">
          </div>
          <div class="text">
            <p class="personName">Lucas Wu</p>
            <p class="personTitle">Former VP of Content Development</p>
            <p class="personDesc"></p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/icons/Icon_Main.svg" alt="person" class="personImage">
          </div>
          <div class="text">
            <p class="personName">Jeffrey Song</p>
            <p class="personTitle">Former VP of Event Development</p>
            <p class="personDesc"></p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/icons/Icon_Main.svg" alt="person" class="personImage">
          </div>
          <div class="text">
            <p class="personName">Kevin Zhang</p>
            <p class="personTitle">Former Teasurer</p>
            <p class="personDesc"></p>
          </div>
        </div>
        <div class="personElement">
          <div class="imageElement">
            <img src="https://cdn.mutorials.org/images/icons/Icon_Main.svg" alt="person" class="personImage">
          </div>
          <div class="text">
            <p class="personName">Richard Su</p>
            <p class="personTitle">Former VP of Quality Assurance</p>
            <p class="personDesc"></p>
          </div>
        </div>
      </div>
    </details>
  </div>

  <div class="mt-8 text-left" id="contributorsSect">
    <div class="text-left" id="contributorSub">
      <div id="topTitle" class="text-left">
        <p id="contributorTeam">The Contributor Team</p>
        <p id="contributorDesc">
          Our team of contributors have been the key to our success. Divided into 4 tiers—Diamond, Gold, Silver, and Bronze—they have been crucial to the development of our project. Here are the acknowledgements of our top contributors, updated monthly!
        </p>
      </div>
      <div id="contributorBottom" class="text-left">
        <p class="contributorTitle">
          Currently, we have <span class="contributorNumber">0</span> diamond contributors. Could you be the first?
        </p>
        <p class="contributorTitle">
          Currently, we have <span class="contributorNumber">2</span> gold contributors.
        </p>
        <div class="flex gap-4 justify-start items-start text-left" id="goldPersonCont">
          <div class="personElement text-left">
            <div class="imageElement">
              <img src="https://cdn.mutorials.org/images/icons/Icon_Main.svg" alt="person" class="personImage">
            </div>
            <div class="text text-left">
              <p class="personName">Allen Wu</p>
              <p class="personTitle">Gold Contributor</p>
              <p class="personDesc"></p>
            </div>
          </div>
          <div class="personElement text-left">
            <div class="imageElement">
              <img src="https://cdn.mutorials.org/images/icons/Icon_Main.svg" alt="person" class="personImage">
            </div>
            <div class="text text-left">
              <p class="personName">Sophia Li</p>
              <p class="personTitle">Gold Contributor</p>
              <p class="personDesc"></p>
            </div>
          </div>
        </div>
      </div>
      <p class="contributorTitle">
        Currently, we have <span class="contributorNumber">6</span> silver contributors.
      </p>
      <div id="silverContributors" class="text-left">
        <p>Sarah Wu</p>
        <p>Hanting Li</p>
        <p>Andrew Yu</p>
        <p>Clarence Zheng</p>
        <p>Gnapika Kothakota</p>
        <p>Sean Park</p>
      </div>
      <div id="bottomJoin" class="text-left">
        <p id="joinTitle">Join Us Today!</p>
        <p>Do you want to become a contributor to the Mutorials team?</p>
        <ol id="joinList" class="list-decimal list-inside text-left">
          <li>
            <a href="https://discord.com/invite/ccbZu4q" id="discordLink" target="_blank" aria-label="Discord">
              Join our Discord Server
            </a>
          </li>
          <li>
            Send a message in the #i-can-help channel in our Discord server to let us know what you want to help with! We mainly need help with (a) writing questions for our database and (b) developing our website.
          </li>
          <li>
            Get <i>volunteer hours</i> for your work and build connections with the Mutorials team!
          </li>
        </ol>
      </div>
    </div>
  </div>

</div>