Team page is way cooler and spellcheck and wording changes

gulpfile.js

@@ -22,8 +22,6 @@ gulp.task('serve', ['sass'], function() {
     });
 
     gulp.watch('sass/*.scss', ['sass']);
-    gulp.watch('*.html').on('change', reload);
-    gulp.watch('**/*.html').on('change', reload);
-    gulp.watch('*.js').on('change', reload);
-    gulp.watch('**/*.js').on('change', reload);
+    gulp.watch('templates/**/*.html').on('change', reload);
+    gulp.watch('js/**/*.js').on('change', reload);
 });

js/controllers/team-controller.js

@@ -1,6 +1,22 @@
 (function() {
   angular.module('CSM')
   .controller('TeamController', function($scope) {
+    const duties = {
+      'President': 'plans semester\'s organizational timeline and outreach efforts, leads exec meetings, works jointly with other exec roles.',
+      'Internal Vice President': 'Acts as ASUC/ESC liasion, drafts CSM budget, in charge of fundraisers, branding, and marketing.',
+      'External Vice President': 'Organizes outreach to companies, manages social media, also helps with branding and marketing.',
+      'Communications': 'Manages CSM email lists, drafts and sends feedback forms, newsletters, and emails, manages CSM apparel.',
+      'Coord': 'Plans course timelines based on semester + curriculum, main point of contact for course staff, leads Senior Mentor meetings, mentor recruitment, attendace, feedback, and Piazza.',
+      'Socials': 'Leads direction on social aspect of orientation w/ a committee, mentor training, facilitates discussions and brainstorming on developing a CSM community.',
+      'Technology': 'Leads software development of Scheduler, internal interviewing software, and other apps at https://github.com/csmberkeley. Acts as product manager.',
+      'Advisor': 'Provides input and advice during meetings to all members of Exec, assists with transition / training of new exec memebers.'
+    }
+    $scope.duty = function(position) {
+      if (position.indexOf('Coord') !== -1) {
+        return duties['Coord'];
+      }
+      return duties[position];
+    }
     const allOfficers = [[
       {
         "name": "Fahad Kamran",
@@ -11,7 +27,7 @@
       {
         "name": "Joseph Jiang",
         "img": "joseph.jpg",
-        "position": "Interal Vice President"
+        "position": "Internal Vice President"
       },
 
       {
@@ -40,7 +56,7 @@
 
       {
         "name": "Paul Bitutsky",
-        "img": "placeholder.jpg",
+        "img": "paul.jpg",
         "position": "CS 61A Coordinator"
       },
 
@@ -52,7 +68,7 @@
 
       {
         "name": "Byung Choi",
-        "img": "byung.jpg",
+        "img": "byung-sp17.jpg",
         "position": "CS 61B Coordinator"
       },
 
@@ -64,15 +80,34 @@
 
       {
         "name": "Jerry Huang",
-        "img": "placeholder.jpg",
+        "img": "jeralie.jpg",
         "position": "CS 70 Coordinator"
       },
-
       {
         "name": "Peijie Li",
-        "img": "placeholder.jpg",
+        "img": "peijie.jpg",
         "position": "CS 70 Coordinator"
       },
+      {
+        "name": "Jennifer Liang",
+        "img": "jennifer-sp17.jpg",
+        "position": "Advisor"
+      },
+      {
+        "name": "Ricky Liang",
+        "img": "ricky-sp17.jpg",
+        "position": "Advisor"
+      },
+      {
+        "name": "Tiffany Perumpali",
+        "img": "piffany.jpg",
+        "position": "Advisor"
+      },
+      {
+        "name": "Jerry Chen",
+        "img": "jerry-sp17.jpg",
+        "position": "Advisor"
+      },
     ], [
       {
         "name": "Fahad Kamran",
@@ -83,7 +118,7 @@
       {
         "name": "Kenneth Zhou",
         "img": "kenneth.jpg",
-        "position": "Interal Vice President"
+        "position": "Internal Vice President"
       },
 
       {
@@ -101,7 +136,7 @@
       {
         "name": "Jiana Huang",
         "img": "jiana.jpg",
-        "position": "Secretary"
+        "position": "Communications"
       },
 
       {

sass/team.scss

@@ -1,4 +1,5 @@
 .team {
+
   h5 {
     margin-top: 0.6em;
     margin-bottom: 1.2em;
@@ -30,4 +31,58 @@
     text-decoration: underline;
     cursor: pointer;
   }
+  .cube-scene {
+    -webkit-perspective: 1000;
+    width: 200px;
+    height: 200px;
+    margin: auto;
+
+    z-index: 999;
+  }
+  .cube:hover {
+    -webkit-transform: rotateY(-90deg);
+  }
+  .cube {
+    width: 200px;
+    height: 200px;
+    position: relative;
+
+    -webkit-transform-style: preserve-3d;
+
+    -webkit-transition: all 0.4s ease-out;
+    -webkit-transform-origin: 100px 100px -100px;
+
+    /* float: left; */
+    margin: 30px auto;
+  }
+
+  .unflipped, .flipped {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -webkit-backface-visibility: visible; 
+
+    -webkit-transform-origin: 0 0;
+  }
+  .unflipped {
+    -webkit-transform: rotateY(0deg);
+    z-index: 2;
+  }
+  .flipped {
+    background-color: #9dcc78;
+    -webkit-transform: rotateY(90deg);
+    z-index: 1;
+    left: 200px;
+  }
+
+  .cube-title {
+    margin-top: 8px;
+    font-weight: 500;
+  }
+  .cube-text {
+    margin: 12px;
+    text-align: left;
+    font-size: 0.8rem;
+  }
+
 }

templates/pages/home/index.html

@@ -18,13 +18,13 @@ <h5 class="white-text subtitle">Assisting, teaching, and mentoring services for
       <div class="col m4">
       <h4 class="label">What is CSM</h4>
         <p>
-          CSM is a student-run organization that fascilitates the fluidity of CS 61A, CS 61B, and CS70 by providing group and one-on-one tutoring sessions.
+          CSM is a student-run organization that provides guidance and resources in a smaller classroom environment for CS 61A, CS 61B, and CS70 through group tutoring sessions.
         </p>
       </div>
       <div class="col m4">
       <h4 class="label">Who we are</h4>
         <p>
-          We are a group of UC Berkeley students passionate about teaching and helping classmates succeed in computer science courses.
+          We are a group of UC Berkeley students passionate about teaching and helping students succeed in computer science.
         </p>
       </div>
       <div class="col m4">
@@ -51,7 +51,7 @@ <h5>We teach.</h5>
   </div>
   <div class="col l8 offset-l2 s10 offset-s1">
     <h5>We mentor.</h5>
-    <p>We have a tiered system of mentoring opportunities. Senior Mentors write material and provide tips to Junior Mentors on how to teach. All mentors meet up once a week to learn from each other, and meet up another time to teach a section. Our Associate Mentors are either tutors, readers, or other experienced teachers who teach a section without a Senior Mentor.</p>
+    <p>We have a tiered system of mentoring opportunities. Senior Mentors write material and provide tips to Junior Mentors on how to teach. All mentors meet up once a week to learn from each other, and use another time of the week to teach a section. Our Associate Mentors are either tutors, readers, or other experienced teachers who teach a section without a Senior Mentor.</p>
   </div>
   <div class="col l8 offset-l2 s10 offset-s1">
     <h5>We have fun.</h5>

templates/pages/team/index.html

@@ -3,9 +3,21 @@ <h5 class="subtitle">
     <span class="team-title" ng-class="{'team-title-inactive': activeTeam === 1}" ng-click="toggleTeam()">Spring 2017 Team</span> |
     <span class="team-title" ng-class="{'team-title-inactive': activeTeam === 0}" ng-click="toggleTeam()">Fall 2016 Team</span> 
   </h5>
+  <p><h6 class="center-align">Hover over photos for more info!</h6></p>
+  <br>
   <div class="col s10 offset-s1 team-display">
     <div class="member col l3 m4 s12" ng-repeat="officer in officers">
-      <img class="responsive-img" width="200px" ng-src="img/people/{{ officer.img }}">
+      <div class="cube-scene">
+        <div class="cube">
+          <div class="unflipped">
+            <img class="responsive-img" width="200px" ng-src="img/people/{{ officer.img }}">
+          </div>
+          <div class="flipped">
+            <div class="cube-title">{{ officer.position }}</div>
+            <div class="cube-text"> {{ duty(officer.position) }} </div>
+          </div>
+        </div>
+      </div>
       <p class="member-name">{{ officer.name }}</p>
       <p class="member-position">{{ officer.position }}</p>
     </div>