restyle portfolio and make all portfolio paths off of root and hide angular form until loaded

app.js

@@ -252,10 +252,6 @@ app.get(
     '/challenges/:challengeNumber',
     challengesController.returnChallenge
 );
-app.get(
-    '/campers/:username',
-    userController.returnUser
-);
 app.all('/account', passportConf.isAuthenticated);
 app.get('/account/api', userController.getAccountAngular);
 // Unique Check API route
@@ -267,6 +263,14 @@ app.post('/account/password', userController.postUpdatePassword);
 app.post('/account/delete', userController.postDeleteAccount);
 app.get('/account/unlink/:provider', userController.getOauthUnlink);
 
+
+
+//put this route last
+app.get(
+    '/:username',
+    userController.returnUser
+);
+
 /**
  * API examples routes.
  * accepts a post request. the challenge id req.body.challengeNumber

public/css/main.less

@@ -168,6 +168,10 @@ ul {
   margin-top: -10px;
 }
 
+.negative-5 {
+  margin-top: -5px;
+}
+
 .negative-15 {
   margin-top: -15px;
 }
@@ -303,7 +307,7 @@ ul {
   box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
 }
 .profile-image {
-  border-radius: 10px;
+  border-radius: 5px;
   width: 200px;
   height: 200px;
   padding-left: 5px;
@@ -411,7 +415,9 @@ thead {
 }
 
 .portfolio-image {
-  max-height: 164px;
+  height: 225px;
+  width: 300px;
+  border-radius: 5px;
 }
 
 .flat-top {
@@ -421,3 +427,34 @@ thead {
 .negative-bottom {
   margin-bottom: -20px;
 }
+
+.min-height-1000 {
+  min-height: 1000px;
+}
+
+.points-on-top {
+  color: #eee;
+  font-size: 50px;
+  z-index: 2;
+  width: 50%;
+  margin: 0 auto;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.background-svg {
+  width: 220px;
+  height: 220px;
+  background-image: url("https://s3.amazonaws.com/freecodecamp/certificate-icon.svg");
+  background-size: 120%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+//uncomment this to see the dimensions of all elements outlined in red
+//* {
+//  border-color: red;
+//  border-width: 1px;
+//  border-style: solid;
+//}

public/js/main.js

@@ -51,6 +51,7 @@ profileValidation.controller('profileValidationController', ['$scope', '$http',
             $scope.storedEmail = data.user.email;
             $scope.user.email = $scope.user.email.toLowerCase();
             $scope.user.profile.twitterHandle = $scope.user.profile.twitterHandle.toLowerCase();
+            $scope.asyncComplete = true;
         });
     }
 ]);

views/account/profile.jade

@@ -1,10 +1,10 @@
 extends ../layout
 block content
-    .panel.panel-primary(ng-controller="profileValidationController")
+    .panel.panel-primary.min-height-1000(ng-controller="profileValidationController")
         .panel-heading.text-center Update your profile here:
         .panel-body
           .container.text-center
-              form.form-horizontal(action='/account/profile', method='POST', novalidate='novalidate', name='profileForm')
+              form.form-horizontal(action='/account/profile', method='POST', novalidate='novalidate', name='profileForm' ng-show="asyncComplete")
                 input(type='hidden', name='_csrf', value=_csrf)
 
                 .col-sm-4.col-sm-offset-5

views/account/show.jade

@@ -1,15 +1,50 @@
 extends ../layout
 block content
-    .row
+    .col-xs-12.col-sm-12.col-md-12
-        .col-sm-12.col-md-8.col-xs-12
+        .panel.panel-primary
-            .panel.panel-primary.min650
+            .panel-heading.text-center #{username}
-                .panel-heading.text-center @#{username}'s Portfolio:
             .panel-body
+                .row
+                    .col-xs-12
+                        .col-xs-12.col-sm-12.col-md-5
+                            if picture
+                                img.img-center.img-responsive.public-profile-img(src=picture)
+                            else
+                                img.img-center.img-responsive.public-profile-img(src='#{user.gravatar(200)}')
+                            h1.text-center.negative-5
+                                - if (twitterHandle)
+                                a.ion-social-twitter.text-primary(title="@#{username}'s Twitter Profile", href="http://twitter.com/#{twitterHandle}")
+                                - if (githubProfile)
+                                a.ion-social-github.text-primary(title="@#{username}'s GitHub Profile", href=githubProfile)
+                                - if (linkedinProfile)
+                                a.ion-social-linkedin.text-primary(title="@#{username}'s LinkedIn Profile", href=linkedinProfile)
+                                - if (codepenProfile)
+                                a.ion-social-codepen.text-primary(title="@#{username}'s CodePen Profile", href=codepenProfile)
+                                - if (coderbyteProfile)
+                                a.ion-social-javascript.text-primary(title="@#{username}'s CoderByte Profile", href=coderbyteProfile)
+                        .visible-md.visible-lg
+                            .col-xs-12.col-sm-12.col-md-4.text-justify
+                                h1.flat-top.wrappable= name
+                                h3.flat-top.bolded.wrappable= location
+                                h4.flat-top.wrappable= bio
+                        .visible-xs.visible-sm
+                            .col-xs-12.col-sm-12.col-md-4.text-center
+                                h1.flat-top.wrappable= name
+                                h3.flat-top.bolded.wrappable= location
+                                h4.flat-top.wrappable= bio
+                        .col-xs-12.col-sm-12.col-md-3.text-center
+                            .background-svg.img-center
+                                .points-on-top
+                                    = "[ " + points + " ]"
+
+
+                .row
+                    .col-xs-12
                         if (website1Title && website1Link && website1Image)
                             .row
-                            .col-xs-12.col-md-4
+                                .col-xs-12.col-md-5
-                                img.img-responsive.portfolio-image.img-center(src=website1Image, alt="@#{username}'s #{website1Title")
+                                    img.img-center.img-responsive.portfolio-image(src=website1Image, alt="@#{username}'s #{website1Title")
-                            .col-xs-12.col-md-8
+                                .col-xs-12.col-md-7
                                     h3.text-center.wrappable.flat-top= website1Title
                                     a.btn.btn-lg.btn-block.btn-info(href=website1Link, target='_blank')
                                         i.fa.icon-beaker
@@ -24,9 +59,9 @@ block content
                                 br
                         if (website2Title && website2Link && website2Image)
                             .row
-                            .col-xs-12.col-md-4
+                                .col-xs-12.col-md-5
                                     img.img-responsive.portfolio-image.img-center(src=website2Image, alt="@#{username}'s #{website2Title")
-                            .col-xs-12.col-md-8
+                                .col-xs-12.col-md-7
                                     h3.text-center.wrappable.flat-top= website2Title
                                     a.btn.btn-lg.btn-block.btn-info(href=website2Link, target='_blank')
                                         i.fa.icon-beaker
@@ -41,9 +76,9 @@ block content
                                 br
                         if (website3Title && website3Link && website3Image)
                             .row
-                            .col-xs-12.col-md-4
+                                .col-xs-12.col-md-5
                                     img.img-responsive.portfolio-image.img-center(src=website3Image, alt="@#{username}'s #{website1Title")
-                            .col-xs-12.col-md-8
+                                .col-xs-12.col-md-7
                                     h3.text-center.wrappable.flat-top= website3Title
                                     a.btn.btn-lg.btn-block.btn-info(href=website3Link, target='_blank')
                                         i.fa.icon-beaker
@@ -54,43 +89,8 @@ block content
                                 a.btn.btn-lg.btn-block.btn-info(href=website3Link, target='_blank')
                                     i.fa.icon-beaker
                                     | Try it out
-        .col-sm-12.col-md-4.col-xs-12
-            .panel.panel-primary.min650
-                .panel-heading.text-center About @#{username}:
-                .panel-body
-                    .col-xs-12
-                        if picture
-                            img.img-center.img-responsive.public-profile-img(src=picture)
-                        else
-                            img.img-center.img-responsive.public-profile-img(src='#{user.gravatar(200)}')
-                    .row
-                        .col-xs-4.text-right
-                            h1
-                                = "[ " + points + " ]"
-                        .col-xs-8.text-left
-                            h1
-                                - if (twitterHandle)
-                                    a.ion-social-twitter.text-primary(title="@#{username}'s Twitter Profile", href="http://twitter.com/#{twitterHandle}")
-                                - if (githubProfile)
-                                    a.ion-social-github.text-primary(title="@#{username}'s GitHub Profile", href=githubProfile)
-                                - if (linkedinProfile)
-                                    a.ion-social-linkedin.text-primary(title="@#{username}'s LinkedIn Profile", href=linkedinProfile)
-                                - if (codepenProfile)
-                                    a.ion-social-codepen.text-primary(title="@#{username}'s CodePen Profile", href=codepenProfile)
-                                - if (coderbyteProfile)
-                                    a.ion-social-javascript.text-primary(title="@#{username}'s CoderByte Profile", href=coderbyteProfile)
-                        .col-xs-12.text-center
-                            h1.flat-top.wrappable= name
-                            h3.flat-top.bolded.wrappable= location
-                            h4.flat-top.wrappable= bio
-                            br
 
                 - if (ch[0] > 0)
-        .row
-            .col-sm-12
-                .panel.panel-primary
-                    .panel-heading.text-center @#{username}'s Completed Challenges:
-                    .panel-body
                     .col-sm-12
                         table.table.table-striped
                             thead