From 9da35a15f185e18361cf6692b56d8982bfa2dfe1 Mon Sep 17 00:00:00 2001
From: Nick Schaubeck <nick@devpost.com>
Date: Thu, 12 Nov 2015 18:31:49 -0500
Subject: [PATCH] Add the HackerTile.

---
 .DS_Store            | Bin 6148 -> 6148 bytes
 devpost-icon-rgb.svg |  11 ++++++++
 devpost-rgb.svg      |  26 ++++++++++++++++++
 hacker-card.html     |  61 +++++++++++++++++++++++++++++++++++++++----
 index.html           |   2 +-
 users.css            |  12 ++++++---
 6 files changed, 103 insertions(+), 9 deletions(-)
 create mode 100644 devpost-icon-rgb.svg
 create mode 100644 devpost-rgb.svg

diff --git a/.DS_Store b/.DS_Store
index 0d3f73120a8428d5b6548b80e75159d273f22fcd..53b8de73a24aa39f1fd63df137ae10de1cff4179 100644
GIT binary patch
delta 92
zcmZoMXfc@J&&aVcU^gQp$7CL+dVALY{~17lpCN@Im7$EGfFYlun4yG0m!XIuogs-q
o56CNHNcYUiPfp6oPXekGU|?Vj0@5>pm~C?plP&9Jc8<UN00u=A>i_@%

delta 33
pcmZoMXfc@J&&a+pU^gQp`(z%bdPe5Wr<iP6CpOq^X6N|J4*;o43KswX

diff --git a/devpost-icon-rgb.svg b/devpost-icon-rgb.svg
new file mode 100644
index 0000000..30be0a3
--- /dev/null
+++ b/devpost-icon-rgb.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 280.3 242.7" enable-background="new 0 0 280.3 242.7" xml:space="preserve">
+<g id="XMLID_126_">
+	<polygon id="XMLID_3_" fill="#003E54" points="70.1,242.7 0,121.4 70.1,0 210.2,0 280.3,121.4 210.2,242.7 	"/>
+	<path id="XMLID_2_" fill="#FFFFFF" d="M132.7,195h-44V47.7h46.1c42.1,0,73.3,19.8,73.3,73.7C208.1,173.2,170.6,195,132.7,195z
+		 M133.7,76.3h-15.6v90.1h14.5c30.9,0,45.1-18.1,45.1-45.1C177.8,91.3,164.9,76.3,133.7,76.3z"/>
+</g>
+</svg>
diff --git a/devpost-rgb.svg b/devpost-rgb.svg
new file mode 100644
index 0000000..ccf6d77
--- /dev/null
+++ b/devpost-rgb.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 600 116.5" enable-background="new 0 0 600 116.5" xml:space="preserve">
+<polygon fill="#3ACCE6" points="566.4,0 539.8,0 573.4,58.2 539.8,116.5 566.4,116.5 600,58.2 "/>
+<polygon fill="#3ACCE6" points="33.6,0 60.2,0 26.6,58.2 60.2,116.5 33.6,116.5 0,58.2 "/>
+<polygon fill="#003E54" points="50.2,116.5 16.6,58.2 50.2,0 549.8,0 583.4,58.2 549.8,116.5 "/>
+<g>
+	<path id="XMLID_2_" fill="#FFFFFF" d="M84.2,93.6H63V22.9h22.1c20.2,0,35.2,9.5,35.2,35.4C120.3,83.1,102.3,93.6,84.2,93.6z
+		 M84.7,36.6h-7.5v43.2h7c14.8,0,21.6-8.7,21.6-21.6C105.8,43.8,99.6,36.6,84.7,36.6z"/>
+	<path id="XMLID_5_" fill="#FFFFFF" d="M136.5,93.6V22.9h49.1v13.8h-35v12.2h20.3v13.7h-20.3v17.1h36.5v13.8H136.5z"/>
+	<path id="XMLID_7_" fill="#FFFFFF" d="M237,93.6h-13.7l-25.1-70.7h15.7l13.3,40.9c1.3,3.9,2.7,9.1,3.3,11.6
+		c0.6-2.6,1.9-7.5,3.2-11.6l13-40.9h15.5L237,93.6z"/>
+	<path id="XMLID_9_" fill="#FFFFFF" d="M306.9,68.5h-15.6v25.1h-14.1V22.9h30.9c13.3,0,24.3,7.4,24.3,22.4
+		C332.5,61.7,321.6,68.5,306.9,68.5z M307.7,36.6h-16.3v18.2h16.5c6.6,0,10.1-3,10.1-9.2C318,39.4,313.9,36.6,307.7,36.6z"/>
+	<path id="XMLID_12_" fill="#FFFFFF" d="M374.9,94.7c-19.3,0-30.7-15-30.7-36.5s11.4-36.5,30.7-36.5s30.7,15,30.7,36.5
+		S394.2,94.7,374.9,94.7z M374.9,35.8c-11.4,0-16.2,9.8-16.2,22.4s4.7,22.4,16.2,22.4c11.4,0,16.2-9.8,16.2-22.4
+		S386.3,35.8,374.9,35.8z"/>
+	<path id="XMLID_15_" fill="#FFFFFF" d="M444.6,94.7c-11.8,0-22.1-4.9-27.5-12.8l10.2-9.1c5,5.8,11.3,8.1,18.1,8.1
+		c8.4,0,12.3-2.3,12.3-7.7c0-4.5-2.4-6.6-15.8-9.6c-13-3-22.1-7.2-22.1-21.1c0-12.8,11.3-20.7,25.3-20.7c11,0,19.1,4.1,25.8,11.1
+		l-10.2,9.9c-4.5-4.6-9.6-7.3-16.1-7.3c-7.6,0-10.1,3.2-10.1,6.4c0,4.4,3,5.9,14.2,8.5c11.2,2.6,23.6,6.5,23.6,21.8
+		C472.4,85.6,463.9,94.7,444.6,94.7z"/>
+	<path id="XMLID_17_" fill="#FFFFFF" d="M516.6,36.8v56.8h-14.1V36.8h-20.3V22.9h54.8v13.9H516.6z"/>
+</g>
+</svg>
diff --git a/hacker-card.html b/hacker-card.html
index 50ad75f..0aaf163 100644
--- a/hacker-card.html
+++ b/hacker-card.html
@@ -13,14 +13,13 @@
       <div class='hacker-card' on-click="goToProfile">
         <div class="gallery-item">
           <div class="user-entry">
-            <header></header>
             <div class='entry-body'>
               <h5>
                 {{user.name}}
-                <span class="paragraph-end"></span>
               </h5>
 
-              <p>{{user.bio}}</p>
+              <p>on</p>
+              <img src='devpost-rgb.svg'>
             </div>
 
             <footer>
@@ -73,8 +72,60 @@ <h5>
 
   <dom-module id="hacker-tile">
     <template>
-      <div class='hacker-card' on-click="goToProfile">
-        <img>  
+      <style>
+        .hacker-container {
+          border-color: #b3b3b3;
+          box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.4);
+        }
+        .portfolio-link {
+          padding: 10px;
+          display: block;
+          color: black !important;
+          text-decoration: none;
+        }
+        .logo-container {
+          width: 20%;
+          float: left;
+        }
+        .logo-container img {
+          margin-right: 1em;
+          margin-top: 2px;
+        }
+        .user-container {
+          width: 80%;
+          margin-left: 20%;
+        }
+        .user-stats {
+          font-size: 0.6875em;
+          color: #999794;
+        }
+        .user-stats .count {
+          font-size: 1em;
+          color: black;
+          font-weight: bold;
+        }
+        .view-portfolio {
+          margin-bottom: 0.5em;
+        }
+      </style>
+      <div class='hacker-tile hacker-container' on-click="goToProfile">
+        <a class="portfolio-link" href="http://devpost.com/{{ userName }}" target="_blank">
+          <div class="logo-container">
+            <img src="devpost-icon-rgb.svg">
+          </div>
+          <div class="user-container">
+            <div class="view-portfolio">
+              <strong>{{ user.name }}</strong> on Devpost
+            </div>
+            <div class="user-stats">
+              <span class="count">{{user.projects_count}}</span> Projects
+              &middot;
+              <span class="count">{{user.hackathons_count}}</span> Hackathons
+              &middot;
+              <span class="count">{{user.followers_count}}</span> Followers 
+            </div>
+          </div>
+        </a>
       </div>
     </template>
 
diff --git a/index.html b/index.html
index b6d05e9..78d5600 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
 <body>
   <script src="components/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
   <link rel="import" href="hacker-card.html">
-
   <hacker-card user-name='MGerrior'></hacker-card>
+  <hacker-tile user-name="MGerrior"></hacker-tile>
 </body>
 </html>
\ No newline at end of file
diff --git a/users.css b/users.css
index c0362c2..011cdb9 100644
--- a/users.css
+++ b/users.css
@@ -1,5 +1,6 @@
 .user-photo, .user-avatar {
-  border-radius: 50%; }
+  border-radius: 50%; 
+}
 
 .user-entry {
   text-align: center;
@@ -7,8 +8,13 @@
 
 .entry-body h5 {
   font-weight: bold;
+  font-size: 1.2em;
 } 
 
+.entry-body img {
+  width: 45%;
+}
+
 .entry-body p {
   color: rgb(87, 85, 83);
   font-family: 'Helvetica Neue', sans-serif;
@@ -24,7 +30,7 @@
 
 .user-entry header {
   height: 70px; 
-  background-image: url(/devpost-reversed-rgb.svg);
+  background-image: url(/devpost-rgb.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-color: #003E54;
@@ -74,6 +80,6 @@
 
 .hacker-tile {
   cursor: pointer;
-  max-width: 300px;
+  max-width: 310px;
   font-family: 'HelveticaNeue', sans-serif;
 }