Merge pull request #33 from BootcampersCollective/profile-branch

started profile page using flexbox for the layout
BootcampersCollective · Jun 15, 2017 · 1ac57a7 · 1ac57a7
2 parents 5eb393c + f2eae77
commit 1ac57a7
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 6 deletions.
diff --git a/Public/js/module.js b/Public/js/module.js
@@ -6,11 +6,11 @@ Config.$inject = ['$routeProvider'];
 function Config($routeProvider){
 
   $routeProvider
-  
-    
+
+
     .when('/auth', {
       templateUrl : '/html/auth.html',
       controller : 'authController',
       controllerAs : 'auth'
     })
-}
+}
diff --git a/public/css/profile.css b/public/css/profile.css
@@ -0,0 +1,62 @@
+@import url('https://fonts.googleapis.com/css?family=Muli|Nosifer');
+
+.profile-name {
+  font-family: 'Nosifer', cursive;
+  text-shadow: 5px 5px 10px;
+  font-size: 8rem;
+}
+
+.tag {
+  font-family: 'Muli', sans-serif;
+  flex: 1;
+  font-size: 5rem;
+}
+
+.red {
+  color: red;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  flex: 1;
+}
+
+.anchor-tags {
+  display: flex;
+  flex-direction: row;
+  width: 80vw;
+  text-align: center;
+}
+
+.anchor-tag {
+  font-family: 'Muli', sans-serif;
+  flex: 1;
+  color: white !important;
+  background-color: teal;
+  text-decoration: none;
+}
+
+.section-head {
+  flex: auto;
+  font-family: 'Muli', sans-serif;
+  font-size: 2rem;
+  text-align: left;
+  margin-left: 5vw;
+}
+
+.about {
+  display: flex;
+  flex-direction: column;
+}
+
+.about-contact {
+  flex: 1;
+}
+
+.about-summary {
+  flex: 3;
+}
diff --git a/public/index.html b/public/index.html
@@ -34,12 +34,13 @@
     <meta name="theme-color" content="#ffffff">
     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"> </script>
 </head>
-<body>
+<body> 
       <!--UNCOMMENT THE LINKS ONCE WE HAVE OUR VERSION 1 READY TO BE DEPLOYED-->
-      <!-- <a ng-href="#/">home</a>
+      <a ng-href="#/">home</a>
            <a ng-href="#/about">about</a>
            <a ng-href="#/auth">login</a>
-           <a ng-href="#/events">events</a> -->
+           <a ng-href="#/events">events</a>
+           <a ng-href="#/profile">profile</a>
     <ng-view ngController="bootcamperController as bCtl">
        <!--partials go here!-->
      </ng-view>

diff --git a/public/js/module.bc.js b/public/js/module.bc.js
@@ -24,6 +24,9 @@ function angularRouter ($routeProvider) {
 
         .when('/events', {
                 templateUrl : '/partials/event.html',
+                })
+        .when('/profile', {
+                templateUrl   : '/partials/profile.html',
                 });
 
 }
diff --git a/public/partials/profile.html b/public/partials/profile.html
@@ -0,0 +1,34 @@
+<section>
+  <link rel="stylesheet" href="/css/profile.css">
+<div class="main">
+  <div class="header">
+    <h1 class="profile-name red">Your Name</h1>
+  </div>
+  <div class="tag">
+    <h3>Web Developer</h3>
+  </div>
+  <div class="anchor-tags btn-group text-center">
+    <div class="anchor-tag btn btn-lg btn-info">
+      <a href="#about">About</a>
+    </div>
+    <div class="anchor-tag btn btn-lg btn-info">
+      <a href="#skills">Skills</a>
+    </div>
+    <div class="anchor-tag btn btn-lg btn-info">
+      <a href="#experience">Experience</a>
+    </div>
+    <div class="anchor-tag btn btn-lg btn-info">
+      <a href="#education">Education</a>
+    </div>
+    <div class="anchor-tag btn btn-lg btn-info">
+      <a href="#contact">Contact</a>
+    </div>
+  </div>
+  <div class="about" id="about">
+    <div class="about-contact">
+      <h3 class="section-head">About Me</h3>
+    </div>
+  </div>
+
+</div>
+</section>