diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..0d3f731
Binary files /dev/null and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b512c09
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/.sass-cache/f722d28650ac725e34d54d4b7ca3c9f534140a23/_users.sassc b/.sass-cache/f722d28650ac725e34d54d4b7ca3c9f534140a23/_users.sassc
new file mode 100644
index 0000000..fc71553
Binary files /dev/null and b/.sass-cache/f722d28650ac725e34d54d4b7ca3c9f534140a23/_users.sassc differ
diff --git a/devpost-reversed-rgb.svg b/devpost-reversed-rgb.svg
new file mode 100644
index 0000000..c8ef425
--- /dev/null
+++ b/devpost-reversed-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="#FFFFFF" 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="#003E54" 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="#003E54" d="M136.5,93.6V22.9h49.1v13.8h-35v12.2h20.3v13.7h-20.3v17.1h36.5v13.8H136.5z"/>
+	<path id="XMLID_7_" fill="#003E54" 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="#003E54" 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="#003E54" 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="#003E54" 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="#003E54" 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 54c4e5b..50ad75f 100644
--- a/hacker-card.html
+++ b/hacker-card.html
@@ -5,21 +5,98 @@
 </head>
 <body>
   <link rel="import" href="components/bower_components/polymer/polymer.html">
+  <link rel="stylesheet" href="users.css"/>
+  <script src="node_modules/superagent/superagent.js"></script>
+
   <dom-module id="hacker-card">
     <template>
-      <style>
-        span {
-          font-weight: bold;
+      <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>
+            </div>
+
+            <footer>
+              <div class="count">
+                <span>{{user.projects_count}}</span>
+                <br>
+                Projects
+              </div>
+              <div class="count">
+                <span>{{user.hackathons_count}}</span>
+                <br>
+                Hackathons
+              </div>
+              <div class="count">
+                <span>{{user.followers_count}}</span>
+                <br>
+                Followers
+              </div>
+            </footer>
+          </div>
+        </div>  
+      </div>
+    </template>
+
+    <script>
+      Polymer({
+        is: 'hacker-card',
+        properties: {
+          userName: {
+            type: String
+          },
+          user: {
+            type: Object
+          }
+        },
+        goToProfile: function() {
+
+        },
+        ready: function() {
+          var self = this;
+          request
+            .get("https://iii3mdppm7.execute-api.us-east-1.amazonaws.com/prod/UserPortfolioEndpoint/" + this.userName)
+            .end(function(err, res) {
+              window.user = self.user = res.body;
+            });
         }
-      </style>
-      <div>
-        <span>Some stuff</span>
+      });
+    </script>
+  </dom-module>
+
+  <dom-module id="hacker-tile">
+    <template>
+      <div class='hacker-card' on-click="goToProfile">
+        <img>  
       </div>
     </template>
 
     <script>
       Polymer({
-        is: 'hacker-card'
+        is: 'hacker-tile',
+        properties: {
+          userName: {
+            type: String
+          },
+          user: {
+            type: Object
+          }
+        },
+        ready: function() {
+          var self = this;
+          request
+            .get("https://iii3mdppm7.execute-api.us-east-1.amazonaws.com/prod/UserPortfolioEndpoint/" + this.userName)
+            .end(function(err, res) {
+              window.user = self.user = res.body;
+            });
+        }
       });
     </script>
   </dom-module>
diff --git a/index.html b/index.html
index 7088314..b6d05e9 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title></title>
+  <title></title>
 </head>
 <body>
-	<script src="components/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>	
-	<link rel="import" href="hacker-card.html">
-	<hacker-card></hacker-card>
+  <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>
 </body>
 </html>
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..728cff0
--- /dev/null
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "hacker_card",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "superagent": "^1.4.0"
+  }
+}
diff --git a/users.css b/users.css
new file mode 100644
index 0000000..c0362c2
--- /dev/null
+++ b/users.css
@@ -0,0 +1,79 @@
+.user-photo, .user-avatar {
+  border-radius: 50%; }
+
+.user-entry {
+  text-align: center;
+}
+
+.entry-body h5 {
+  font-weight: bold;
+} 
+
+.entry-body p {
+  color: rgb(87, 85, 83);
+  font-family: 'Helvetica Neue', sans-serif;
+  font-size: 14px;
+  font-style: italic;
+  font-weight: normal;
+}
+
+.user-entry, .user-entry:hover, .user-entry:active, .user-entry:focus {
+  border-color: #b3b3b3;
+  box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.4); 
+}
+
+.user-entry header {
+  height: 70px; 
+  background-image: url(/devpost-reversed-rgb.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: #003E54;
+}
+
+.user-entry .entry-body h4 {
+  margin-top: 0.5em; 
+}
+
+.user-entry footer {
+  background-color: #f0f0f0;
+  padding: 6px;
+}
+
+.user-entry footer .count {
+  display: inline-block;
+  width: 32%;
+  font-size: 0.6875em;
+  color: #999794; 
+}
+
+.user-entry footer .count span {
+  font-weight: bold;
+  color: #1a1918;
+  font-size: 1rem; 
+}
+
+.user-entry .user-photo {
+  background: white;
+  margin: 0 auto;
+  height: 90px;
+  width: 90px;
+  margin-top: -52px;
+  border: 3px solid white; 
+}
+
+.user-entry .follow-button-wrapper {
+  min-height: 1.5em;
+  margin-bottom: 0.3em; 
+}
+
+.hacker-card {
+  cursor: pointer;
+  max-width: 270px;
+  font-family: 'HelveticaNeue', sans-serif;
+}
+
+.hacker-tile {
+  cursor: pointer;
+  max-width: 300px;
+  font-family: 'HelveticaNeue', sans-serif;
+}
