added social links

nj-coder · nj-coder · commit 90da02c89f07 · 2019-09-08T14:48:54.000+10:00
diff --git a/dist/index.html b/dist/index.html
@@ -16,18 +16,18 @@
         <div class="image"></div>
         <div class="typewriter" id="typewriter"></div>
         <div class="links">
-            <div class="link-wrap">
+            <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>
-            </div>
-            <div class="link-wrap">
-                <i class="fab fa-stack-overflow"></i>
-            </div>
-            <div class="link-wrap">
-                <i class="fab fa-stack-overflow"></i>
-            </div>
-            <div class="link-wrap">
-                <i class="fab fa-stack-overflow"></i>
-            </div>
+            </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>
     <script src="script.min.js" type="text/javascript"></script>
diff --git a/dist/script.js b/dist/script.js
diff --git a/dist/script.min.js b/dist/script.min.js
diff --git a/dist/style.css b/dist/style.css
@@ -39,16 +39,22 @@ body {
   .container .links {
     position: fixed;
     width: 100%;
-    bottom: 0;
+    bottom: -50px;
     padding: 1em;
     text-align: center;
     display: flex;
     flex-flow: row;
-    justify-content: center; }
+    justify-content: center;
+    transition: all 0.5s; }
     .container .links .link-wrap {
       padding: 0.5em 1em;
-      background: rgba(0, 0, 0, 0.1);
+      background: rgba(0, 0, 0, 0.2);
+      color: #fff;
       border-radius: 7px;
-      margin-right: 1em; }
+      margin-right: 1em;
+      transition: all 0.2s; }
       .container .links .link-wrap:last-child {
         margin: 0; }
+      .container .links .link-wrap:hover {
+        transform: scale(1.2);
+        background: rgba(0, 0, 0, 0.4); }
diff --git a/dist/style.min.css b/dist/style.min.css
diff --git a/gulpfile.js b/gulpfile.js
@@ -25,7 +25,7 @@ gulp.task('styles', function () {
 // build js
 gulp.task('scripts', function () {
     return gulp.src(['./src/libs/**/*.js', './src/main.js'])
-        //.pipe(babel())
+        // .pipe(babel())
         .pipe(concat('script.js'))
         .pipe(gulp.dest('dist'))
         .pipe(rename('script.min.js'))
diff --git a/src/index.html b/src/index.html
@@ -16,18 +16,18 @@
         <div class="image"></div>
         <div class="typewriter" id="typewriter"></div>
         <div class="links">
-            <div class="link-wrap">
+            <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>
-            </div>
-            <div class="link-wrap">
-                <i class="fab fa-stack-overflow"></i>
-            </div>
-            <div class="link-wrap">
-                <i class="fab fa-stack-overflow"></i>
-            </div>
-            <div class="link-wrap">
-                <i class="fab fa-stack-overflow"></i>
-            </div>
+            </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>
     <script src="script.min.js" type="text/javascript"></script>
diff --git a/src/main.js b/src/main.js
@@ -12,4 +12,8 @@
         .typeString('I\'m <b>Nidhin Joseph</b>')
         .start();
 
+    setTimeout(function () {
+        document.querySelector('.links').style.bottom = '-0px';
+    }, 5000);
+
 })();
diff --git a/src/main.scss b/src/main.scss
@@ -48,22 +48,30 @@ body {
     .links {
         position: fixed;
         width: 100%;
-        bottom: 0;
+        bottom: -50px;
         padding: 1em;
         text-align: center;
         display: flex;
         flex-flow: row;
         justify-content: center;
+        transition: all 0.5s;
 
         .link-wrap {
             padding: 0.5em 1em;
-            background: rgba(0, 0, 0, .1);
+            background: rgba(0, 0, 0, .2);
+            color: #fff;
             border-radius: 7px;
             margin-right: 1em;
+            transition: all 0.2s;
 
             &:last-child {
                 margin: 0;
             }
+
+            &:hover {
+                transform: scale(1.2);
+                background: rgba(0, 0, 0, .4);
+            }
         }
     }
 }
