Organised and formated the info onto the sidebar

production/css/styles.css

@@ -1 +1 @@
-.side-nav li.card{margin:0}.side-nav li.card .card-image .profile-pic{width:100%}.inline{display:inline!important}h4{font-weight:400;color:#9e9e9e}
+.row,.side-bar,body,header,html{height:100%}.side-bar{padding:0!important}.side-bar header{overflow-x:hidden;overflow-y:auto;width:inherit}@media (min-width:601px){.side-bar header{position:fixed}}.side-bar header .card{background:inherit;margin:0}.side-bar header .card .card-image .profile-pic{width:100%}.side-bar header .contact-container .row,.side-bar header .links-container .row{margin:15px 0}.side-bar header .contact-container .row .col img,.side-bar header .links-container .row .col img{width:25px}.side-bar header .bio-container{padding:20px 0;background:rgba(255,255,255,.4)}.side-bar header .skills-container{padding:20px 0;margin-bottom:20px;background:rgba(255,255,255,.25)}.inline{display:inline!important}h1{background:rgba(0,0,0,.6)}h2{font-size:1.8em;font-weight:200;color:#FFF;text-shadow:1px 1px 1px rgba(0,0,0,.3);margin:.5em 0 0 1em}h4{font-weight:400;color:#9e9e9e}

src/locals.json

@@ -7,9 +7,13 @@
     "email":"sykes.alicia@gmail.com",
     "website":"AliciaSykes.com"
   },
+  "social":{
+    "github": "github.com/lissy93",
+    "linkedin":"linkedin.com/in/aliciasykes"
+  },
   "bio": [
-    "Software Engineer with broad development knowledge, but specialising",
-    "in full-stack modern web applications. Hardworking, adaptable and",
+    "Software Engineer with broad development knowledge, specialising",
+    "in full-stack modern web applications. \n Hardworking, adaptable and",
     "passionate about coding. Understands the importance of clean, good",
     "quality and well tested code."
   ],
@@ -154,4 +158,4 @@
     {"name":"Project-Management", "type":"dev", "level":"2"},
     {"name":"Agile", "type":"dev", "level":"4"}
   ]
-}
+}

src/styles/basic.sass

@@ -1,9 +1,35 @@
 
-.side-nav
-  li.card
-    margin: 0
-    .card-image .profile-pic
-      width: 100%
+html, body, .row, .side-bar, header
+  height: 100%
+
+.side-bar
+  padding: 0 !important
+  header
+    overflow-x: hidden
+    overflow-y: auto
+    width: inherit
+    @media (min-width: 601px)
+      position: fixed
+    .card
+      background: inherit
+      margin: 0
+      .card-image .profile-pic
+        width: 100%
+    .contact-container, .links-container
+      .row
+        margin: 15px 0
+        .col img
+          width: 25px
+    .bio-container
+      padding: 20px 0
+      background: rgba(255, 255, 255, 0.4)
+    .skills-container
+      padding: 20px 0
+      margin-bottom: 20px
+      background: rgba(255,255,255,0.25)
+
+
+
 
 
 
@@ -11,6 +37,14 @@
 .inline
   display: inline !important
 
+h1
+  background: rgba(0,0,0,0.6)
+h2
+  font-size: 1.8em
+  font-weight: 200
+  color: #FFFFFF
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.3)
+  margin: 0.5em 0  0 1em
 
 h4
   font-weight: 400

src/views/fragments/middle.jade

@@ -1,10 +1,6 @@
 
-div(style='padding-left: 300px; margin: 20px auto; width: 90%')
+div(style='margin: 20px auto; width: 90%')
   .row
-    h4.grey-text <i class="material-icons">perm_identity</i> Bio
-    .col.s12.card-panel
-      p= bio.join(" ")
-
     h4 <i class="material-icons">assignment</i> Employment
     .col.s12.card-panel
       for job in employment

src/views/fragments/side.jade

@@ -1,29 +1,42 @@
-header
-  ul.side-nav.fixed.light-blue
-    li.card
-      .card-image
-        img.profile-pic(src='assets/profile-pic-2.jpg', alt='Receiving the BCS Best Final Year Project Prize')
-        h1.card-title= heading1
+header.light-blue
+  .card
+    .card-image.show-on-medium-and-up
+      img.profile-pic(src='assets/profile-pic-2.jpg', alt='Receiving the BCS Best Final Year Project Prize')
+      h1.card-title= heading1
 
-    li
-      a(href="mailto:#{contact.email}")
-        i.small.white-text.material-icons email
-        span.right.white-text= contact.email
+  .bio-container.z-depth-1
+    h2(style='margin: 0 0 0.2em 1em') About
+    .row
+      i.col.s2.small.white-text.material-icons perm_identity
+      span.col.s10.white-text!= bio.join(" ").replace(/\n/g, "<br>")
 
-    li
-      a(href="dialer:#{contact.phone}")
-        i.small.white-text.material-icons phone
-        span.right.white-text= contact.phone
+  .contact-container
+    h2 Contact
+    .row
+      i.col.s2.small.white-text.material-icons email
+      a(href="mailto:#{contact.email}").col.s10.white-text= contact.email
 
-    li
-      a(href='#')
-        i.small.white-text.material-icons location_on
-        span.right.white-text= contact.address
+    .row
+      i.col.s2.small.white-text.material-icons phone
+      a(href="dialer:#{contact.phone}").col.s10.white-text= contact.phone
 
-    li
-      a(href='http://#{contact.website}')
-        i.small.white-text.material-icons http
-        span.right.white-text= contact.website
+    .row
+      i.col.s2.small.white-text.material-icons location_on
+      span.col.s10.white-text= contact.address
+
+
+  .links-container
+    h2 Links
+    .row
+      i.col.s2.small.white-text.material-icons http
+      a(href='http://#{contact.website}').col.s10.white-text= contact.website
+
+    .row
+      .col.s2: img(src='assets/github.png')
+      a(href='https://#{social.github}').col.s10.white-text= social.github
+    .row
+      .col.s2: img(src='assets/linkedin.png')
+      a(href='https://#{social.linkedin}').col.s10.white-text= social.linkedin
 
 
 

src/views/index.jade

@@ -1,6 +1,8 @@
 extend fragments/layout
 block content
 
-
-  include ./fragments/side
-  include ./fragments/middle
+  .row
+    .col.s12.m3.side-bar.z-depth-1
+      include ./fragments/side
+    .col.s12.m9
+      include ./fragments/middle