add crowd dj to portfolio

README.md

@@ -4,7 +4,7 @@ Hello! Thanks for checking out the repo for my latest portfolio website. This we
 
 ## Getting started
 - `npm install`
-- `gulp` to start a dev server
+- `gulp serve` to start a dev server
 - `gulp build` for prod
 
 ## What I used

_data/portfolio.yml

@@ -1,25 +1,28 @@
-- title: HackerNews Theme Redesign
+- title: Crowd DJ
-  demo: https://github.com/bchiang7/hackernews-userstyles
+  demo: https://github.com/crowddj/crowddj-react
-  code: https://github.com/bchiang7/hackernews-userstyles
+  code: https://github.com/crowddj/crowddj-react
-  description: Upon coming across the <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe" target="_blank">Stylish</a> Chrome Extension, I decided to fork a theme for <a href="https://news.ycombinator.com/" target="_blank">HackerNews</a> to tweak myself. I've always enjoyed reading the articles on HackerNews, but always hated actually looking at the website. The content is good, but the styling is awful. So, I whipped up some quick CSS to make the site easier on the eyes while maintaining a similar look to the original style. Give the theme a try by following the instructions in the github repo linked above.
+  description: Crowd DJ is a web app that allows people who are at a party or social gathering with a DJ (who uses Spotify) to request songs via their smartphones. The web app allows people to see the currently playing song, request songs, upvote songs, and rate songs so the DJ can see how the crowd is feeling and act accordingly. In other words, Crowd DJ is essentially a crowdsourced music queue.
-  img: hackernews
+  img: crowddj
   used:
-    - thing: CSS
+    - thing: React.js
+    - thing: Sass
+    - thing: Firebase
+    - thing: Spotify API
 
-- title: Weather Widget
+# - title: Weather Widget
-  demo: http://quiet-dusk-89245.herokuapp.com/
+#   demo: http://quiet-dusk-89245.herokuapp.com/
-  code: https://github.com/bchiang7/DemoWebApp
+#   code: https://github.com/bchiang7/DemoWebApp
-  description: A simple weather app I made at HubSpot's Fall 2016 Web App Workshop utilizing Node.js, Express, and Heroku. I used the OpenWeatherMap API to get weather and forecast data, and then used the current city's coordinates to create a map background that reflected the current city using the Google Maps API.
+#   description: A simple weather app I made at HubSpot's Fall 2016 Web App Workshop utilizing Node.js, Express, and Heroku. I used the OpenWeatherMap API to get weather and forecast data, and then used the current city's coordinates to create a map background that reflected the current city using the Google Maps API.
-  img: weather
+#   img: weather
-  used:
+#   used:
-    - thing: OpenWeatherMap API
+#     - thing: OpenWeatherMap API
-    - thing: Google Maps API
+#     - thing: Google Maps API
-    - thing: JavaScript
+#     - thing: JavaScript
-    - thing: jQuery
+#     - thing: jQuery
-    - thing: CSS
+#     - thing: CSS
-    - thing: Node.js
+#     - thing: Node.js
-    - thing: Express
+#     - thing: Express
-    - thing: Heroku
+#     - thing: Heroku
 
 - title: Screentime 2.0
   demo: https://play.google.com/store/apps/details?id=com.starry.management

_includes/github_btn.html

@@ -0,0 +1,4 @@
+<a class="block-btn" href="https://github.com/bchiang7" target="_blank">
+  <span class="text">See more projects</span>
+  <img class="icon" src="img/icons/github.svg" alt="github">
+</a>

_includes/resume_btn.html

@@ -1,4 +1,4 @@
 <a class="block-btn" href="{{site.resume}}" target="_blank">
-  <span class="resume-text">View my full résumé</span>
+  <span class="text">View my full résumé</span>
-  <img class="resume-img" src="img/icons/download.png" alt="download resume">
+  <img class="icon" src="img/icons/download.png" alt="download resume">
 </a>

_scss/partials/_blockBtn.scss

@@ -17,33 +17,33 @@
   &:hover, &:focus {
     background: $blue;
     transition: all 0.3s ease;
-    .resume-text {
+    .text {
       opacity: 0;
       visibility: hidden;
       transform: translate3D(0, 4em, 0) scale(.25);
     }
-    .resume-img {
+    .icon {
       opacity: 1;
       visibility: visible;
       transform: translate3D(0, 0, 0) scale(1);
     }
   }
-  .resume-text,
+  .text,
-  .resume-img {
+  .icon {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     text-align: center;
   }
-  .resume-text {
+  .text {
     margin: 40px auto;
     opacity: 1;
     visibility: visible;
     transition: transform .4s cubic-bezier(.425, -.195, .005, 1.215), opacity .13333s linear, -webkit-transform .4s cubic-bezier(.425, -.195, .005, 1.215);
     transform: scale(1);
   }
-  .resume-img {
+  .icon {
     width: 50px;
     margin: 25px auto;
     opacity: 0;

index.html

@@ -10,6 +10,7 @@ layout: default
   {% include experience.html %}
   {% include resume_btn.html %}
   {% include portfolio.html %}
+  {% include github_btn.html %}
   {% include contact.html %}
   {% include footer.html %}
 </div>