Update about view

app/views/pages/about.erb

@@ -2,16 +2,22 @@
   <div class="about-picture"><img src="/img/me.jpg"></div>
   <div class="about-content">
     <p>I’m a self-taught 23 years old Front-End Developer and Designer living near Paris.</p>
-
-    <p>Back in 2009, after graduating from a litterary baccalauréat I learned Plastic Arts at the university Paris 1, Panthéon Sorbonne and then switched to a Graphic Design course at l’Ecole Multimedia.</p>
-
-    <p>Since then, I worked a year as a Front-End Developer and Designer at<br />
-    Beautiful Agency while taking a Web Development course at l’Ecole Multimedia.</p>
-
-    <p>On a daily basis I enjoy writing beautiful code mostly in HTML, CSS and JavaScript <br />
-    but also in PHP, Ruby and Objective-C to build awesome websites and applications. <br />
-    And when I have the opportunity I also like to design pixel perfect websites and user interfaces.</p>
-
+    <p>Back in 2009, after graduating from a litterary baccalauréat I learned Plastic Arts <br />at the university Paris 1, Panthéon Sorbonne and then switched to a Graphic Design course at l’Ecole Multimedia.</p>
+    <p>Since then, I worked a year as a Front-End Developer and Designer at
+    Beautiful Agency while taking a Web Development course at l’Ecole Multimedia that I just successfully graduated from.</p>
+    <p>On a daily basis I enjoy writing beautiful and maintanable code mostly in HTML, CSS and JavaScript
+    but also in PHP, Ruby and Objective-C to build wonderful websites and applications.</p>
+    <p>Also when I have the opportunity I like to draw pixel perfect websites and user interfaces.</p>
     <p>At last, in my spare time, as a wannabe artist, I also enjoy taking photographies of people, playing music (DJing and MAO), drawing and painting.</p>
+    <div class="about-contact">
+      <div class="about-contact-inner">
+        <h3 class="heading2">Contact</h3>
+        <p>As a passionate, I’m always looking for new fun project to work on.<br />
+          Then feel free to contact me if you want me to help you with your projects.</p>
+        <p class="about-contact-links">
+          <a href="mailto:hello@antoinelagadec.com" class="btn"><i class="icon icon-mail"></i>hello@antoinelagadec.com</a>
+        </p>
+      </div>
+    </div>
   </div>
 </section>

public/assets/css/screen.css

@@ -70,6 +70,10 @@ p {
   line-height: 1.2em;
 }
 
+p:last-child {
+  margin-bottom: 0;
+}
+
 a {
   text-decoration: none;
   color: #3f3c39;
@@ -122,6 +126,7 @@ strong {
 .btn .icon {
   display: inline-block;
   background: #000;
+  vertical-align: middle;
 }
 .btn .icon-github {
   -webkit-mask: url("../img/glyphicons_github.png") left top repeat;
@@ -183,6 +188,12 @@ strong {
   -o-mask: url("../img/icon-about.png") center center no-repeat;
   mask: url("../img/icon-about.png") center center no-repeat;
 }
+.btn .icon-mail {
+  -webkit-mask: url("../img/icon-mail.png") center center no-repeat;
+  -moz-mask: url("../img/icon-mail.png") center center no-repeat;
+  -o-mask: url("../img/icon-mail.png") center center no-repeat;
+  mask: url("../img/icon-mail.png") center center no-repeat;
+}
 
 .header {
   background: url("../img/background-darkbrown.png");
@@ -362,6 +373,28 @@ strong {
   #margin-left: -20px;
   display: inline;
 }
+.about .about-contact {
+  background: url("../img/background-lightgray.png");
+  border-top: 1px solid #d2d3d5;
+  border-bottom: 1px solid #d2d3d5;
+  margin-top: 23px;
+}
+.about .about-contact .about-contact-inner {
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  padding: 20px;
+}
+.about .btn {
+  line-height: 1em;
+}
+.about .btn .icon {
+  height: 20px;
+  width: 20px;
+  margin-right: 10px;
+}
+.about .btn .icon-mail {
+  margin-top: -4px;
+}
 
 .footer {
   position: relative;
@@ -383,7 +416,7 @@ strong {
   float: left;
   margin-right: 2.12766%;
   display: inline;
-  line-height: 1.6em;
+  line-height: 1.8em;
 }
 .footer .footer-social {
   width: 48.93617%;

public/assets/scss/screen.scss

@@ -33,6 +33,7 @@ p {
   margin-bottom: 1.4em;
   line-height: 1.2em;
 }
+p:last-child { margin-bottom: 0; }
 
 a {
   text-decoration: none;
@@ -69,7 +70,11 @@ strong { font-family: "Trade Gothic W01 Bold 2"; }
 .btn {
   display: inline-block;
 
-  .icon { display: inline-block; background: #000; }
+  .icon {
+    display: inline-block;
+    background: #000;
+    vertical-align: middle;
+  }
 
   .icon-github   { @include mask('../img/glyphicons_github.png'); }
   .icon-spotify  { @include mask('../img/glyphicons_spootify.png'); }
@@ -81,6 +86,7 @@ strong { font-family: "Trade Gothic W01 Bold 2"; }
   .icon-photo    { @include mask('../img/icon-photo.png', center center, no-repeat); }
   .icon-music    { @include mask('../img/icon-music.png', center center, no-repeat); }
   .icon-about    { @include mask('../img/icon-about.png', center center, no-repeat); }
+  .icon-mail     { @include mask('../img/icon-mail.png', center center, no-repeat); }
 }
 
 // Header
@@ -219,6 +225,32 @@ strong { font-family: "Trade Gothic W01 Bold 2"; }
 .about {
   .about-picture { @include span-columns(6, 16); }
   .about-content { @include span-columns(10 omega, 16); }
+
+  .about-contact {
+    background: url('../img/background-lightgray.png');
+    border-top: 1px solid #d2d3d5;
+    border-bottom: 1px solid #d2d3d5;
+    margin-top: 23px;
+
+    .about-contact-inner {
+      border-top: 1px solid transparent;
+      border-bottom: 1px solid transparent;
+      padding: 20px;
+    }
+
+    .about-contact-links {  }
+  }
+
+  .btn {
+    line-height: 1em;
+
+    .icon {
+      height: 20px;
+      width: 20px;
+      margin-right: 10px;
+    }
+    .icon-mail { margin-top: -4px; }
+  }
 }
 
 // Footer
@@ -240,7 +272,7 @@ strong { font-family: "Trade Gothic W01 Bold 2"; }
 
   .footer-infos {
     @include span-columns(8, 16);
-    line-height: 1.6em;
+    line-height: 1.8em;
   }
 
   .footer-social {