updated home page

nj-coder · nj-coder · commit 96d72801b100 · 2019-10-13T13:45:11.000+11:00
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
@@ -3,7 +3,7 @@
     <div class="left">
       NJ-Coder
     </div>
-    <div class="right">
+    <div class="right hide-sm">
       <div class="link-wrappeer">
         <a href="#">TECHS</a>
         <a href="#">PORTFOLIO</a>
@@ -12,28 +12,30 @@
     </div>
   </div>
   <div class="top-section">
-    <div class="left">
+    <div class="left hide-sm">
       <div class="outer-circle">
         <div class="inner-circle"></div>
       </div>
     </div>
     <div class="right">
       <div class="content">
-        <div class="hello">HEY THERE 👋</div>
-        <div class="name">I'M NIDHIN JOSEPH</div>
+        <div class="hello">HEY THERE 👋 I'M </div>
+        <div class="name">NIDHIN JOSEPH</div>
         <div class="socials">
-          <a class="link-wrap" href="https://www.linkedin.com/in/nidhin-joseph-225b49a3/" target="_blank">
-            <i class="fab fa-linkedin"></i>
-          </a>
-          <a class="link-wrap" href="https://github.com/nj-coder" target="_blank">
-            <i class="fab fa-github"></i>
-          </a>
-          <a class="link-wrap" href="https://stackoverflow.com/users/3289660/nidhin-joseph" target="_blank">
-            <i class="fab fa-stack-overflow"></i>
-          </a>
-          <a class="link-wrap" href="https://www.facebook.com/nidhin.joseph.1992" target="_blank">
-            <i class="fab fa-facebook-square"></i>
-          </a>
+          <div class="links">
+            <a class="link-wrap" href="https://www.linkedin.com/in/nidhin-joseph-225b49a3/" target="_blank">
+              <i class="fab fa-linkedin"></i>
+            </a>
+            <a class="link-wrap" href="https://github.com/nj-coder" target="_blank">
+              <i class="fab fa-github"></i>
+            </a>
+            <a class="link-wrap" href="https://stackoverflow.com/users/3289660/nidhin-joseph" target="_blank">
+              <i class="fab fa-stack-overflow"></i>
+            </a>
+            <a class="link-wrap" href="https://www.facebook.com/nidhin.joseph.1992" target="_blank">
+              <i class="fab fa-facebook-square"></i>
+            </a>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss
@@ -4,20 +4,25 @@ $shadow-secondary: #2a5298;
 .home {
 
   .header {
-    display: grid;
-    grid-template-columns: 30vw 70vw;
+    display: flex;
     width: 100%;
     position: fixed;
     z-index: 10;
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.23);
 
     .left {
       padding: 1em 1em 1em 2em;
       text-align: left;
       background: $shadow-primary;
+      flex-grow: 1;
+      color: #fff;
+      font-weight: bold;
+      letter-spacing: 4px;
+      text-transform: uppercase;
     }
 
     .right {
+      width: calc(70vw - 10vw);
       background: #ffffff;
       display: flex;
       align-items: center;
@@ -56,11 +61,11 @@ $shadow-secondary: #2a5298;
     color: #fff;
     background: $shadow-secondary;
     background: linear-gradient(to right, $shadow-primary, $shadow-primary);
-    display: grid;
-    grid-template-columns: 30vw 70vw;
+    display: flex;
 
 
     .left {
+      width: 30vw;
       height: 100%;
       display: flex;
       align-items: center;
@@ -97,27 +102,44 @@ $shadow-secondary: #2a5298;
 
     .right {
       height: 98vh;
+      flex-grow: 1;
       background: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #000;
 
       .content {
+        padding: 1em;
+
         .name {
-          font-size: 4em;
+          font-size: 3em;
           font-weight: bold;
-          padding: 0.2em 0;
+          padding: 0.2em 0
         }
 
         .socials {
           text-align: center;
           position: relative;
 
-          a {
+          .links {
             background: #fff;
-            padding: 4px 8px;
+            padding: 0 4px;
             position: relative;
+            display: inline-flex;
+
+            a {
+              padding: .5em 1em;
+              display: block;
+              color: $shadow-primary;
+              border-radius: 7px;
+              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.23);
+              margin-right: 1em;
+
+              &:last-child {
+                margin: 0;
+              }
+            }
           }
 
           &::before {
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,10 +1,15 @@
 /* You can add global styles to this file, and also import other style files */
 html,
 body {
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    font-family: 'Roboto', sans-serif;
-    overflow-x: hidden;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  font-family: 'Roboto', sans-serif;
+  overflow-x: hidden;
 }
 
+@media only screen and (max-width: 900px) {
+  .hide-sm {
+    display: none !important;
+  }
+}
