index.html

---
layout: default
title: SUTDCO
---

<!-- The Homepage -->
<!-- About -->
<section class="content-section bg-light" id="about">
  <div class="container text-center">
    <div class="row">
      <div class="col-lg-10 mx-auto">
        <h2>About Us</h2>
        <p class="lead mb-5">
          SUTD Chinese Orchestra (SUTDCO) started back in 2015 with just 4
          passionate members and has since grown to a promising size with the
          skills required to perform professional grade musical pieces. SUTDCO
          has then been actively involved in various performance opportunities,
          including school events and external invitations. 2018 marked an
          extraordinary year for SUTDCO as we held our first concert –
          Impressions. In 2019, we continued our legacy and held our second
          concert – Impressions II.
        </p>
        <p class="lead mb-5">
          新加坡科技与设计大学华乐团（新科大华乐团）成立于2015年。在短短五年的时间里，新科大华乐团由原本五位创立人发展至如今，拥有数十名成员的乐团。不仅如此，新科大华乐团也成长成了拥有专业演奏水准的乐团，多次为校内和校外的活动演出，更在2018年举办了我们第一场的音乐会
          -
          心弦。在2019年，我们很荣幸能够延续前一年的传奇，举办了我们第二场音乐会
          - 心弦（二）。
        </p>
        <a class="btn btn-dark btn-xl" href="/about/">More</a>
      </div>
    </div>
  </div>
</section>

<!-- Who we are -->
<section
  class="content-section bg-primary text-white text-center"
  id="sections"
>
  <div class="container">
    <div class="content-section-heading">
      <h2 class="mb-5">Our Sections</h2>
    </div>
    <div class="row" style="padding-bottom: 50px">
      <div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
        <div class="woodwinds service-icon rounded-circle mx-auto mb-3"></div>

        <h4>
          <strong>Woodwinds</strong>
        </h4>
        <p class="text-faded mb-0">Dizi, Suona, Sheng</p>
      </div>
      <div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
        <div class="huqin service-icon rounded-circle mx-auto mb-3"></div>

        <h4>
          <strong>Huqin</strong>
        </h4>
        <p class="text-faded mb-0">The Hu family</p>
      </div>
      <div class="col-lg-3 col-md-6 mb-5 mb-md-0">
        <div class="plucking service-icon rounded-circle mx-auto mb-3"></div>

        <h4>
          <strong>Plucking</strong>
        </h4>
        <p class="text-faded mb-0">Zhongruan, Liuqin, Yangqin, Daruan</p>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="perc service-icon rounded-circle mx-auto mb-3"></div>

        <h4>
          <strong>Percussion</strong>
        </h4>
        <p class="text-faded mb-0">"don't spasm"</p>
      </div>
    </div>
    <a class="btn btn-dark btn-xl" href="/people/">Our People</a>
  </div>
</section>

<!-- Callout -->
<section class="callout">
  <div class="container text-center" style="color: #ffffff">
    <h2 class="mx-auto mb-4">Join us today!</h2>
    <h4 class="mb-5">
      We are a group of passionate musicians who aim to promote and cultivate
      the interest and appreciation of Chinese music, by forging bridges between
      traditional and contemporary Chinese music. <br /><br />If you have a keen
      interest in music but no musical background, don’t fret! Join us now to
      indulge in the world of music and lots more fun will be waiting for you.
    </h4>
    <a class="btn btn-primary btn-xl" href="/contact/">
      <!-- the hash scrolls to that part of the page -->
      Contact us
    </a>
  </div>
</section>

<!-- Highlights -->
<section class="content-section" id="highlights">
  <div class="container text-center">
    <div class="content-section-heading">
      <h5 class="text-secondary mb-0">Highlights</h5>
      <h2 class="mb-5">What we've been up to</h2>
    </div>
    <div class="row no-gutters" style="padding-bottom: 50px">
      <!-- for loop here to iterate through highlights.yml, so that it is easier to edit and update the featured posts -->
      {% for items in site.data.highlights %}
      <div class="col-lg-6">
        <span class="portfolio-item" id="{{ items.id }}">
          <span class="caption">
            <span class="caption-content text-left">
              <h2>{{ items.title }}</h2>
              <p class="mb-0">{{ items.date }}</p>
            </span>
          </span>
          <img
            class="img-fluid"
            src="{{ site.baseurl }}{{ items.img }}"
            loading="lazy"
          />
        </span>
      </div>
      {% endfor %}
    </div>
    <a class="btn btn-primary btn-xl" href="/events/">And more!</a>
  </div>
</section>

<!-- for loop to iterate through highlights.yml, this time to create the modals and embed the posts in them-->
{% for items in site.data.highlights %}
<div class="modal" id="{{ items.id }}Modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    {% if items.category == "yt" %}
    <div class="embed-responsive embed-responsive-16by9">
      {{ items.embedCode }}
    </div>
    {% else %} {{ items.embedCode }} {% endif %}
  </div>
</div>
{% endfor %}

<!-- This Modal is just for the sidebar menu -->
<div id="menuModal" class="modal"></div>

<script>
  var myModal; // this is to get and show the respective modals when they are activated
  var ytStopper; // this is to get the youtube players so that they stop playing after the modal closes

  // Get the close buttons for each modal
  var closesocialMedia1 = document.getElementsByClassName("close")[0];
  var closesocialMedia2 = document.getElementsByClassName("close")[1];
  var closeyt1 = document.getElementsByClassName("close")[2];
  var closeyt2 = document.getElementsByClassName("close")[3];

  // Get each highlight box
  var socialMedia1 = document.getElementById("socialMedia1");
  var socialMedia2 = document.getElementById("socialMedia2");
  var yt1 = document.getElementById("yt1");
  var yt2 = document.getElementById("yt2");

  // When the user clicks on the specific highlight box, open the respective modal
  socialMedia1.onclick = function () {
    myModal = document.getElementById("socialMedia1Modal");
    myModal.style.display = "block";
  };
  socialMedia2.onclick = function () {
    myModal = document.getElementById("socialMedia2Modal");
    myModal.style.display = "block";
  };
  yt1.onclick = function () {
    myModal = document.getElementById("yt1Modal");
    ytStopper = myModal.getElementsByTagName("iframe")[0]; // find the youtube frame
    myModal.style.display = "block";
  };
  yt2.onclick = function () {
    myModal = document.getElementById("yt2Modal");
    ytStopper = myModal.getElementsByTagName("iframe")[0]; // find the youtube frame
    myModal.style.display = "block";
  };

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function (event) {
    if (event.target == myModal) {
      myModal.style.display = "none";
      if (ytStopper != null) {
        ytStopper.src = ytStopper.src;
      }
    }
  };

  // I also added the functionality of closing the modal when ESC (keycode 27) is pressed
  window.onkeydown = function (event) {
    if (event.keyCode == 27) {
      myModal.style.display = "none";
      // if it is a yt modal, setting src=src reloads the vid and stops it from playing after the modal closes. Probably not the right way to do it but it works
      if (ytStopper != null) {
        ytStopper.src = ytStopper.src;
      }
    }
  };

  // When the user clicks on <span> (x), close the modal
  closesocialMedia1.onclick = function () {
    myModal.style.display = "none";
  };
  closesocialMedia2.onclick = function () {
    myModal.style.display = "none";
  };
  closeyt1.onclick = function () {
    myModal.style.display = "none";
    ytStopper.src = ytStopper.src;
  };
  closeyt2.onclick = function () {
    myModal.style.display = "none";
    ytStopper.src = ytStopper.src;
  };
</script>