Add better about page

layout/bootstrap.moon

@@ -16,6 +16,7 @@ class Layout extends Widget
 
     link rel: "stylesheet", href: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"
     link rel: "stylesheet", href: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"
+    link rel: "stylesheet", href: "https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
     link rel: "stylesheet", href: "/static/css/readable.css"
     link rel: "stylesheet", href: "/static/css/main.css"
 

static/css/about/main.css

@@ -2,3 +2,126 @@ img.textwrap-right {
 	float: right;
 	margin: 10px;
 }
+
+*{
+	font-family: 'Open Sans', sans-serif;
+}
+
+.well {
+	margin-top:-20px;
+	background-color:#007FBD;
+	border:2px solid #0077B2;
+	text-align:center;
+	cursor:pointer;
+	font-size: 25px;
+	padding: 15px;
+	border-radius: 0px !important;
+}
+
+.well:hover {
+	margin-top:-20px;
+	background-color:#0077B2;
+	border:2px solid #0077B2;
+	text-align:center;
+	cursor:pointer;
+	font-size: 25px;
+	padding: 15px;
+	border-radius: 0px !important;
+	border-bottom : 2px solid rgba(97, 203, 255, 0.65);
+}
+
+body {
+	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+	font-size: 14px;
+	line-height: 1.42857143;
+	color: #fff;
+	background-color: #F1F1F1;
+}
+
+.bg_blur
+{
+	background-image:url('http://data2.whicdn.com/images/139218968/large.jpg');
+	height: 300px;
+	background-size: cover;
+}
+
+.follow_btn {
+	text-decoration: none;
+	position: absolute;
+	left: 35%;
+	top: 42.5%;
+	width: 35%;
+	height: 15%;
+	background-color: #007FBE;
+	padding: 10px;
+	padding-top: 6px;
+	color: #fff;
+	text-align: center;
+	font-size: 20px;
+	border: 4px solid #007FBE;
+}
+
+.follow_btn:hover {
+	text-decoration: none;
+	position: absolute;
+	left: 35%;
+	top: 42.5%;
+	width: 35%;
+	height: 15%;
+	background-color: #007FBE;
+	padding: 10px;
+	padding-top: 6px;
+	color: #fff;
+	text-align: center;
+	font-size: 20px;
+	border: 4px solid rgba(255, 255, 255, 0.8);
+}
+
+.header{
+	color : #808080;
+	margin-left:10%;
+	margin-top:70px;
+}
+
+.picture{
+	height:150px;
+	width:150px;
+	position:absolute;
+	top: 75px;
+	left:-75px;
+}
+
+.picture_mob{
+	position: absolute;
+	width: 35%;
+	left: 35%;
+	bottom: 70%;
+}
+
+.btn-style{
+	color: #fff;
+	background-color: #007FBE;
+	border-color: #adadad;
+	width: 33.3%;
+}
+
+.btn-style:hover {
+	color: #333;
+	background-color: #3D5DE0;
+	border-color: #adadad;
+	width: 33.3%;
+
+}
+
+
+@media (max-width: 767px) {
+	.header{
+		text-align : center;
+	}
+
+	.nav{
+		margin-top : 30px;
+	}
+}
+
+

views/about.moon

@@ -4,7 +4,23 @@ class About extends Widget
   content: =>
     link rel: "stylesheet", href: "/static/css/about/main.css"
 
-    img class: "textwrap-right", src: @user.avatar_url, height: 150, width: 150
+    div class: "row panel", ->
+      div class: "col-md-4 bg_blur", ->
+        a href: "https://github.com/Xe", class: "follow_btn hidden-xs", "Follow"
 
-    p ->
+      div class: "col-md-8 col-xs-12", ->
-      text "I am a GitHub power user. As of right now, I have #{@user.public_repos} open source projects tracked on GitHub. I have #{@user.followers} followers and am following #{@user.following} users."
+        img src: @user.avatar_url, class: "img-thumbnail picture hidden-xs"
+        img src: @user.avatar_url, class: "img-thumbnail picture visible-xs picture_mob"
+
+        div class: "header", ->
+          h1 "Christine Dodrill"
+          h4 "Rockstar Programmer"
+          span "I am a GitHub power user. I am constantly learning new languages and tools. I strongly believe in knowing many languages and ways to do things so I can pick the right tool for the job."
+
+    div class: "row nav", ->
+      div class: "col-md-4"
+      div class: "col-md-8 col-xs-12", style: "margin: 0px;padding: 0px;", ->
+        div class: "col-md-4 col-xs-4 well", ->
+          i class: "fa fa-weixin fa-lg", @user.public_repos
+          i class: "fa fa-heart-o fa-lg", @user.followers
+          i class: "fa fa-thumbs-o-up fa-lg", @user.following