<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


  <title>SGDA Homepage</title>

  <!-- Favicon icon link -->
  <link rel="icon" type="image/png" href="img/sgda-favicon.png" sizes="32x32" />

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="css/sdgaCustom.css" rel="stylesheet">

  <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

  <!--Animate CSS-->
  <link rel="stylesheet" href="vendor/animateCSS/animate.css" rel="stylesheet" type="text/css">

  <!--FontAwesome Latest-->
  <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
    
</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
  <div class="container">
    <a class="navbar-brand" href="index.html">
      <img src="img/logos/sgda2.png" height="50">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <!--About Dropdown-->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="events.html" id="navbarDropdownAboutLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            About
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownAboutLink">
            <a class="dropdown-item" href="about.html">About</a>
            <a class="dropdown-item" href="clubs.html">Clubs</a>
            <a class="dropdown-item" href="team.html">Team</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle active" href="events.html" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Events
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="events.html">Events</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item font-weight-500" href="summit-info.html">SGDA Summit</a>
            <a class="dropdown-item" href="schedule.html">Schedule & Venue</a>
            <a class="dropdown-item" href="speakers.html">Speakers</a>
            <a class="dropdown-item active" href="workshops.html">Workshops</a>
            <a class="dropdown-item" href="showcase.html">Games Showcase</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item font-weight-500" href="game-jam.html">Game Jam</a>
          </div>
        </li>
        <!--<li class="nav-item">-->
        <!--<a class="nav-link" href="events.html">Events</a>-->
        <!--</li>-->
        <li class="nav-item">
          <a class="nav-link" href="sponsor.html">Sponsor</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="faq.html">FAQ</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!--Speakers Page Content-->
<div class="container">
  <div class="row">
    <!--Summit Info // Guest Speakers-->
    <div class="col-12 mx-auto p-4 mt-4" id="Summit-info-head">
      SUMMIT INFO <span class="lato-Light-Font">|</span> <span class="summit-info-category">WORKSHOPS</span>
    </div>
      
    <!--Button Quick Links-->
    <div class="text-center mt-4 col-lg-10 mx-auto">
      <div class="row text-center justify-content-center">
        <div class="col-4 p-0">
        <div class="d-block event-button m-1 m-xs-mobile  filter-btn" data-filter="all">    
          <div class="font-weight-500 m-1"><div class="fa-md-custom"><i class="fa fa-search"></i></div>ALL</div>
        </div>
        </div>
        <div class="col-4 p-0">
        <div class="d-block event-button m-1 m-xs-mobile  filter-btn" data-filter="engineering">
          <div class="font-weight-500 m-1"><div class="fa-md-custom"><i class="fa fa-code"></i></div>ENGINEERING</div>
        </div>
        </div>
        <div class="col-4 p-0">
        <div class="d-block event-button m-1 m-xs-mobile  filter-btn" data-filter="design">
          <div class="font-weight-500 m-1"><div class="fa-md-custom"><i class="fa fa-gamepad"></i></div>DESIGN</div>
        </div>
        </div>
      </div>
    </div>
    <div class="text-center col-lg-10 mx-auto">
      <div class="row text-center justify-content-center">
        <div class="col-4 p-0">
        <div class="d-block event-button m-1 m-xs-mobile  filter-btn" data-filter="art">
          <div class="font-weight-500 m-1"><div class="fa-md-custom"><i class="fa fa-paint-brush"></i></div>ART</div>
        </div>
        </div>
        <div class="col-4 p-0">
        <div class="d-block event-button m-1 m-xs-mobile  filter-btn" data-filter="sound">   
          <div class="font-weight-500 m-1"><div class="fa-md-custom"><i class="fa fa-volume-up"></i></div>SOUND</div>
        </div>
        </div>
      </div>
    </div>
      
    <!--Workshop Card-->
      <div class="speaker-card p-2 mt-4 mb-3 m-2 text-center col-lg-10 mx-auto  filter sound">
        <div class="inner-outline p-3" id="speaker">
          <!--Workshop 1-->
          <h4 class="text-center font-weight-bold"><i class="fa fa-angle-double-right"></i> How to Amplify your Game’s Music <i class="fa fa-angle-double-left"></i></h4>
          <div class="row">
            <div class="col-md-4 col-6 d-block mx-auto">
              <img src="img/workshops/dankim.png" class="img-fluid p-2" alt="">
            </div>
            <div class="col-12">
              <h5 class="font-weight-bold mt-2 mb-1">Host: Daniel Kim</h5>
              <p class="speaker-info">In this workshop, our host Daniel Kim will share his experience composing music for games, tips and tricks on how to make your audio sound better, as well as crucial information on how game developers and composers can communicate with each other to maximize workflow.

              </p>
              <h6>
                <b>Room:</b> <span class="speaker-info ml-2">Orion</span>
              </h6>
              <h6>
                <b>Time:</b>
                <span class="speaker-info ml-3">11:30 AM - 12:30 PM</span>
              </h6>
            </div>
          </div>
        </div> <!-- .inner-outline -->
      </div> <!-- .speaker-card -->
        
    <!--Workshop Card-->
      <div class="speaker-card p-2 mt-4 mb-3 m-2 text-center col-lg-10 mx-auto  filter art">
        <div class="inner-outline p-3" id="speaker">
          <!--Workshop 1-->
          <h4 class="text-center font-weight-bold"><i class="fa fa-angle-double-right"></i> Cloth Simulation in Games <i class="fa fa-angle-double-left"></i></h4>
          <div class="row">
            <div class="col-md-4 col-6 d-block mx-auto">
              <img src="img/workshops/gamespawn.jpg" class="img-fluid p-2" alt="">
            </div>
            <div class="col-12">
              <h5 class="font-weight-bold mt-2 mb-1">Host: Emmilio Segovia</h5>
              <h6 class="font-weight-bold">UCR Gamespawn</h6>
              <p class="speaker-info">Bring your games to life with flowing clothes and hair! This workshop will discuss the process of animating cloth using 3D modeling software like Maya/Blender and how to import your creations for use in Unity.
              </p>
              <h6>
                <b>Room:</b> <span class="speaker-info ml-2">Andromeda</span>
              </h6>
              <h6>
                <b>Time:</b>
                <span class="speaker-info ml-3">12:30 PM - 1:30 PM</span>
              </h6>
            </div>
          </div>
        </div> <!-- .inner-outline -->
      </div> <!-- .speaker-card -->
      
    <!--Workshop Card-->
      <div class="speaker-card p-2 mt-4 mb-3 m-2 text-center col-lg-10 mx-auto  filter art engineering">
        <div class="inner-outline p-3" id="speaker">
          <!--Workshop 1-->
          <h4 class="text-center font-weight-bold"><i class="fa fa-angle-double-right"></i> Intro to Particle Systems in Unity <i class="fa fa-angle-double-left"></i></h4>
          <div class="row">
            <div class="col-md-4 col-6 d-block mx-auto">
              <img src="img/workshops/lb.png" class="img-fluid p-2" alt="">
            </div>
            <div class="col-12">
              <h5 class="font-weight-bold mt-2 mb-1">Host: Ken Miller</h5>
              <h6 class="font-weight-bold">CSULB Video Game Development Association</h6>
              <p class="speaker-info">Visual effects can change how a game looks and feels. From falling leaves to light dust, this workshop will serve as an introduction to Unity's particle systems. Come by and learn how to make simple particle systems to add that extra layer of polish to your game!
              </p>
              <h6>
                <b>Room:</b> <span class="speaker-info ml-2">Orion</span>
              </h6>
              <h6>
                <b>Time:</b>
                <span class="speaker-info ml-3">1:30 PM - 2:30 PM</span>
              </h6>
            </div>
          </div>
        </div> <!-- .inner-outline -->
      </div> <!-- .speaker-card -->
      
    <!--Workshop Card-->
      <div class="speaker-card p-2 mt-4 mb-3 m-2 text-center col-lg-10 mx-auto  filter design">
        <div class="inner-outline p-3" id="speaker">
          <!--Workshop 1-->
          <h4 class="text-center font-weight-bold"><i class="fa fa-angle-double-right"></i> Game Design Roundtable <i class="fa fa-angle-double-left"></i></h4>
          <div class="row">
            <div class="col-md-4 col-6 d-block mx-auto">
              <img src="img/sgda-logo.png" class="img-fluid p-2" alt="">
            </div>
            <div class="col-12">
              <h5 class="font-weight-bold mt-2 mb-1">Host: Peter Doria</h5>
              <p class="speaker-info">Join fellow student game designers to share the philosophies and strategies you have used when desinging games in the past. Make connections and become even better collaborative game desginers!
              </p>
              <h6>
                <b>Room:</b> <span class="speaker-info ml-2">Andromeda</span>
              </h6>
              <h6>
                <b>Time:</b>
                <span class="speaker-info ml-3">2:30 PM - 3:30 PM</span>
              </h6>
            </div>
          </div>
        </div> <!-- .inner-outline -->
      </div> <!-- .speaker-card -->
      
    <!--Workshop Card-->
      <div class="speaker-card p-2 mt-4 mb-3 m-2 text-center col-lg-10 mx-auto  filter engineering">
        <div class="inner-outline p-3" id="speaker">
          <!--Workshop 1-->
          <h4 class="text-center font-weight-bold"><i class="fa fa-angle-double-right"></i> A Soft Intro to the Wild World of Shaders <i class="fa fa-angle-double-left"></i></h4>
          <div class="row">
            <div class="col-md-4 col-6 d-block mx-auto">
              <img src="img/workshops/uci.png" class="img-fluid p-2" alt="">
            </div>
            <div class="col-12">
              <h5 class="font-weight-bold mt-2 mb-1">Host: Ittai Mann</h5>
              <h6 class="font-weight-bold">UCI Video Game Development Club</h6>
              <p class="speaker-info">Shaders are an effective way to create a visually impressive game, by combining both art and programming. However they are challenging to understand and even harder to write. This workshop will explain what shaders are, what they can do, can’t do, and how to write simple shaders using unity's shaders lab in cg/hlsl.
              </p>
              <h6>
                <b>Room:</b> <span class="speaker-info ml-2">Orion</span>
              </h6>
              <h6>
                <b>Time:</b>
                <span class="speaker-info ml-3">3:30 PM - 4:30 PM</span>
              </h6>
            </div>
          </div>
        </div> <!-- .inner-outline -->
      </div> <!-- .speaker-card -->
      
    <!--Workshop Card-->
      <div class="speaker-card p-2 mt-4 mb-3 m-2 text-center col-lg-10 mx-auto  filter sound">
        <div class="inner-outline p-3" id="speaker">
          <!--Workshop 1-->
          <h4 class="text-center font-weight-bold"><i class="fa fa-angle-double-right"></i> The Art of (de)Isolation <i class="fa fa-angle-double-left"></i></h4>
          <div class="row">
            <div class="col-md-4 col-6 d-block mx-auto">
              <img src="img/workshops/danramos.png" class="img-fluid p-2" alt="">
            </div>
            <div class="col-12">
              <h5 class="font-weight-bold mt-2 mb-1">Host: Daniel Ramos</h5>
              <p class="speaker-info">This workshop will discuss the dialogue process in games. Intended for both audio and narrative folk. Learn what to expect when compiling a script, making casting calls, and directing audio, all the way to post-production editing and sound design. Gain the skills necessary to add great dialogue into your game!
              </p>
              <h6>
                <b>Room:</b> <span class="speaker-info ml-2">Andromeda</span>
              </h6>
              <h6>
                <b>Time:</b>
                <span class="speaker-info ml-3">4:30 PM - 5:30 PM</span>
              </h6>
            </div>
          </div>
        </div> <!-- .inner-outline -->
      </div> <!-- .speaker-card -->
      
  </div> <!-- .row -->
    
  <!--Button Quick Links-->
  <div class="row text-center justify-content-center font-weight-500 mb-3 p-3">
    <a href="schedule.html" class="d-block p-3 col-md-5 d-block mx-auto event-button m-1">SCHEDULE & VENUE</a>
    <a href="speakers.html" class="d-block p-3 col-md-5 d-block mx-auto event-button m-1">SPEAKERS</a>
    <a href="workshops.html" class="d-block p-3 col-md-5 d-block mx-auto event-button m-1">WORKSHOPS</a>
    <a href="showcase.html" class="d-block p-3 col-md-5 d-block mx-auto event-button m-1">GAMES SHOWCASE</a>
  </div>
    
</div> <!-- .container -->




<!-- Footer -->
<footer class="py-5 bg-dark footr">
  <div class="container">
    <p class="m-0 text-center text-white">
      <a href="https://www.facebook.com/SGDAOfficial/"><img class="icons scale-on-hover-btn-small reverse-transition" src="img/icons/FB_Icon_small.png"/></a>           <a href="https://discord.gg/TTHCK5N"><img class="icons scale-on-hover-btn-small reverse-transition" src="img/icons/Discord_Icon_small.png"/></a>           <a href="mailto:main@sgda.io"><img class="icons icons scale-on-hover-btn-small reverse-transition" src="img/icons/Email_Icon_small.png"/></a>
    </p>
    <p class="m-0 text-center text-white">Copyright &copy; 2017 by Student Game Developer Alliance.</p>
    <p class="m-0 text-center text-white">Website Built by Samuel Huerta, Dylan Lang, &amp; Kyle Turchik</p>
  </div>
  <!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--Custom JS-->
<script src="js/main.js"></script>

<!--To Top Button with Scroll Animation-->
<ul class="nav justify-content-end fixed-bottom">
  <li class="nav-item">
    <a href="#top" class="scrollToTop col-1">
      <button class="btn btn-light mb-1 ml-1">
        <i class="fas fa-arrow-alt-circle-up fa-1x"></i>
      </button>
    </a>
</ul>

<script>
  $(document).ready(function(){
    //Click event to scroll to top
    $('.scrollToTop').click(function(){
      $('html, body').animate({scrollTop : 0},800);
      return false;
    });

  });
</script>
    
    
</body>

</html>
