<%# Template for the "who we are" page %>

<h1 class="my-5 container">About Mutorials</h1>
<div class="container jumbotron mt-5">

    <h3 class="mb-4">What is Mutorials?</h3>
    <p>
    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 have all scored 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.
    </p>

    <p>
    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>
    
    <h3 class="mt-5">Board of Directors</h3>

    <div class="container">
        <div class="row">            
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card" style="width: 18rem;">
                    <div class="crop">
                        <img class="card-img-top" src="https://f000.backblazeb2.com/file/mutorials/teams/Arya.jpg" alt="Arya Gummadi">
                    </div>
                    <div class="card-body">
                        <p class="card-text">Arya Gummadi<br>President<br>
                            <a href = "mailto: president@mutorials.org">president@mutorials.org</a>
                            <br>
                            <br>                            
                            Arya manages the organization and is responsible for the overall direction of the Mu Foundation.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-4">
                <div class="card" style="width: 18rem;">
                    <div class="crop">
                        <img class="card-img-top" src="https://f000.backblazeb2.com/file/mutorials/teams/William.png" alt="William Y. Feng">
                    </div>
                    <div class="card-body">
                        <p class="card-text">William Y. Feng<br>Director of Software Development<br>
                            <a href = "mailto: admin@mutorials.org">admin@mutorials.org</a>
                            <br>
                            <br>                            
                            William is a junior at Lakeside School. As Director of Software Development, he maintains the codebase and facilitates code contribution.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-4">
                <div class="card" style="width: 18rem;">
                    <div class="crop">
                        <img class="card-img-top" src="https://f000.backblazeb2.com/file/mutorials/teams/Daniel.png" alt="Daniel Lu">
                    </div>
                    <div class="card-body">
                        <p class="card-text">Daniel Lu<br>Secretary<br>
                            <a href = "mailto: secretary@mutorials.org">secretary@mutorials.org</a>
                            <br>
                            <br>
                            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>

            <div class="col-12 col-md-6 col-lg-4">
                <div class="card" style="width: 18rem;">
                    <div class="crop">
                        <img class="card-img-top" src="https://f000.backblazeb2.com/file/mutorials/teams/Ishaan.png" alt="Ishaan Venkat">
                    </div>
                    <div class="card-body">
                        <p class="card-text">Ishaan Venkat<br>Director of Design<br>
                            <a href = "mailto: design@mutorials.org">design@mutorials.org</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-4">
                <div class="card" style="width: 18rem;">
                    <div class="crop">
                        <img class="card-img-top" src="https://f000.backblazeb2.com/file/mutorials/icons/Icon_Main.svg" alt="Nihal Josyula">
                    </div>
                    <div class="card-body">
                        <p class="card-text">Nihal Josyula<br>Director of Content Development<br>
                            <a href = "mailto: content@mutorials.org">content@mutorials.org</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-4">
                <div class="card" style="width: 18rem;">
                    <div class="crop">
                        <img class="card-img-top" src="https://f000.backblazeb2.com/file/mutorials/icons/Icon_Main.svg" alt="Jaewon Chung">
                    </div>
                    <div class="card-body">
                        <p class="card-text">Jaewon Chung<br>Director of Content Development<br>
                            <a href = "mailto: content@mutorials.org">content@mutorials.org</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-6 col-lg-4">
                <div class="card" style="width: 18rem;">
                    <div class="crop">
                        <img class="card-img-top" src="https://f000.backblazeb2.com/file/mutorials/teams/Grace.png" alt="Grace Chen">
                    </div>
                    <div class="card-body">
                        <p class="card-text">Grace Chen<br>Director of Marketing<br>
                            <a href = "mailto: marketing@mutorials.org">marketing@mutorials.org</a>
                            <br>
                            <br>
                            Grace oversees the outreach work at mutorials and forms partnerships with other organizations and schools.
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <style>
        summary > * {
            display: inline;
        }
    </style>
    <br><br>
    <details>
        <summary>
            <h3 class="mt-5">Former Board of Directors</h3>
        </summary>
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card" style="width: 18rem;">
                        <div class="crop">
                            <img class="card-img-top"  src="https://f000.backblazeb2.com/file/mutorials/teams/pro_ved.jpg" alt="Ved Thiru">
                        </div>
                        <div class="card-body">
                            <p class="card-text">Ved Thiru<br>VP of Software Development<br>
                                <a href = "mailto: admin@mutorials.org">admin@mutorials.org</a>
                                <br>
                                <br>
                                Ved is the team leader for software development, wrote much of the backend, and guides coding contributors for new features.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card" style="width: 18rem;">
                        <div class="crop">
                            <img class="card-img-top"  src="https://f000.backblazeb2.com/file/mutorials/teams/mischievous_michael.png" alt="Michael Li">
                        </div>
                        <div class="card-body">
                            <p class="card-text">Michael Li<br>VP of Project Development & Secretary<br>
                                <a href = "mailto: secretary@mutorials.org">secretary@mutorials.org</a>
                                <br>
                                <br>
                                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>
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card" style="width: 18rem;">
                        <div class="crop">
                            <img class="card-img-top"  src="https://f000.backblazeb2.com/file/mutorials/teams/pro ethan.png" alt="Ethan Shen">
                        </div>
                        <div class="card-body">
                            <p class="card-text">Ethan Shen<br>VP of Design<br>
                                <a href = "mailto: design@mutorials.org">design@mutorials.org</a>
                                <br>
                                <br>
                                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>
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card" style="width: 18rem;">
                        <div class="crop">
                            <img class="card-img-top"  src="https://f000.backblazeb2.com/file/mutorials/teams/pro_rohan.png" alt="Rohan Pandey">
                        </div>
                        <div class="card-body">
                            <p class="card-text">Rohan Pandey<br>VP of Marketing<br>
                                <a href = "mailto: marketing@mutorials.org">marketing@mutorials.org</a>
                                <br>
                                <br>
                                Rohan manages content transfer into the Mutorials database. He also leads the marketing of Mutorials to teachers and potential volunteers.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card" style="width: 18rem;">
                        <div class="crop">
                            <img class="card-img-top"  src="https://f000.backblazeb2.com/file/mutorials/teams/pro erik.png" alt="Erik Ma">
                        </div>
                        <div class="card-body">
                            <p class="card-text">Erik Ma<br>President<br>
                                <a href = "mailto: president@mutorials.org">president@mutorials.org</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card" style="width: 18rem;">
                        <div class="crop">
                            <img class="card-img-top"  src="https://f000.backblazeb2.com/file/mutorials/teams/pro lucas.png" alt="Lucas Wu">
                        </div>
                        <div class="card-body">
                            <p class="card-text">Lucas Wu<br>VP of Content Development<br>
                                <a href = "mailto: content@mutorials.org">content@mutorials.org</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card" style="width: 18rem;">
                        <div class="crop">
                            <!-- https://f000.backblazeb2.com/file/mutorials/teams/jeffrey.PNG -->
                            <img class="card-img-top"  src="https://f000.backblazeb2.com/file/mutorials/icons/Icon_Main.svg" alt="Jeffrey Song">
                        </div>
                        <div class="card-body">
                            <p class="card-text">Jeffrey Song<br>VP of Event Development<br>
                                <a href = "mailto: event@mutorials.org">event@mutorials.org</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card" style="width: 18rem;">
                        <div class="crop">
                            <!-- https://f000.backblazeb2.com/file/mutorials/teams/kevin.png -->
                            <img class="card-img-top" src="https://f000.backblazeb2.com/file/mutorials/icons/Icon_Main.svg" alt="Kevin Zhang">
                        </div>
                        <div class="card-body">
                            <p class="card-text">Kevin Zhang<br>Treasurer<br>
                                <a href = "mailto: treasurer@mutorials.org">treasurer@mutorials.org</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="card" style="width: 18rem;">
                        <div class="crop">
                            <!-- https://f000.backblazeb2.com/file/mutorials/teams/richard.png -->
                            <img class="card-img-top"  src="https://f000.backblazeb2.com/file/mutorials/icons/Icon_Main.svg" alt="Richard Su">
                        </div>
                        <div class="card-body">
                            <p class="card-text">Richard Su<br>VP Quality Assurance<br>
                                <a href = "mailto:  quality@mutorials.org">quality@mutorials.org</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </details>

    <h3 class="mt-5">The Contributor Team</h3>
    <p>
    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>

    <h4 class="mt-5">Diamond Contributors</h3>
    <p>
    We currently have <b>0</b> diamond contributors. Could you be the first? Join down below!
    </p>

    <h4 class="mt-5">Gold Contributors</h3>
    <p>
    We currently have <b>2</b> gold contributors.
    </p>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card" style="width: 18rem;">
                    <div class="crop">
                        <img class="card-img-top" src="https://f000.backblazeb2.com/file/mutorials/icons/Icon_Main.svg" alt="Allen Wu">
                    </div>
                    <div class="card-body">
                        <p class="card-text">Allen Wu<br>Gold Contributor
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card" style="width: 18rem;">
                    <div class="crop">
                        <img class="card-img-top" src="https://f000.backblazeb2.com/file/mutorials/icons/Icon_Main.svg" alt="Sophia Li">
                    </div>
                    <div class="card-body">
                        <p class="card-text">Sophia Li<br>Gold Contributor
                    </div>
                </div>
            </div>
        </div>
    </div>

    <h4 class="mt-5">Silver Contributors</h3>
    <p>These contributors have contributed a considerable amount to Mutorials. Our current silver contributors are:</p>

    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6 col-lg-4">
                <p>Sarah Wu</p>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <p>Hanting Li</p>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <p>Andrew Yu</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6 col-lg-4">
                <p>Clarence Zheng</p>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <p>Gnapika Kothakota</p>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <p>Sean Park</p>
            </div>
        </div>
    </div>

    <!-- <h3 class="mt-5">How does our team work?</h3>
    <p>The two main branches in Mutorials are software development and content development.</p>
    <p>Software development is lead by the core development team: Ved Thiru, Michael Li, and Ethan Shen.</p>
    <p>Content development in Mutorials is mostly based on a curriculum drafted by Lucas Wu, supported by  Jeffrey Song, Richard Su, and Kevin Zhang. Rohan Pandey transfers questions into the official Mutorials database.</p>
    <p>Administrative work and official paperwork is handled by Erik Ma.</p>
    <p>We would also like to give special recognition to our contributors, who have helped a lot in our software and content development, and especially in design.</p> -->
    
    <h3 class="mt-5" id="joinMutorials">Join Us Today!</h3>
    <p>Do you want to become a contributor and be a part of the Mutorials team?</p>
    <ol>
        <li><a target="_blank" href="https://discord.com/invite/ccbZu4q">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 <em>volunteer hours</em> for your work and build connections with the Mutorials team!</li>
    </ol>

</div>
