UI improvement

Author: devashishg

css/main.css

@@ -48,6 +48,28 @@
 	 right: 20px;
 }
 
+.bronze {
+	color: #d19b71;
+}
+.gold {
+	color: gold;
+}
+.silver {
+	color: silver;
+}
+
+.stk-oflw {
+	display: flex;
+	text-decoration: none;
+	margin-bottom: 7px;
+	white-space: nowrap;
+	font-size: 11px;
+    font-weight: bold;
+}
+.stk-oflw > i {
+	font-size: 15px;
+}
+
 .greetings {
 	font-family:'Arya',sans-serif;padding:10px;
 }

css/slider/slider.css

@@ -179,6 +179,27 @@ nav ul > li {
   left: 0; /* On mouse-over, make the elements appear as they should */
 }
 
+.float {
+  position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    background-color: #3a7648;
+    width: 50px;
+    height: 50px;
+    border-radius: 50px;
+    padding:13px;
+}
+
+.float > a {
+  color: white;
+}
+
+.float > a:hover {
+  color: black;
+}
+
+
 /* The about link: 20px from the top with a green background */
 #about {
   top: 30%;

index.html

@@ -44,9 +44,6 @@ <h1><b>&ltदेवाशीष/&gt</b></h1>
       </button>
       <div class="collapse navbar-collapse" id="navbarResponsive">
         <ul class="navbar-nav ml-auto flex-center">
-          <li class="nav-item">
-            <a class="nav-link" href="#">Home </a>
-          </li>
           <li class="nav-item mx-2">
             <a class="nav-link" href="#aboutme">About</a>
           </li>
@@ -64,7 +61,6 @@ <h1><b>&ltदेवाशीष/&gt</b></h1>
               @imdevacsh</a>
           </li>
 
-
         </ul>
       </div>
     </div>
@@ -123,6 +119,12 @@ <h3 class="box-right">Nice to see you here. 🙏🏻</h3>
         class="material-icons">cloud_download</i></a>
   </div>
 
+  <div class="float">
+    <a href="./typing-test.html" target="_blank"><i
+        class="material-icons">keyboard</i></a>
+  </div>
+
+
   <section class="py-4" id="aboutme">
     <div class="container-fluid">
       <div class="card px-1">
@@ -148,7 +150,7 @@ <h3 class="box-right">Nice to see you here. 🙏🏻</h3>
               an enthusiast for working on different project, building cool stuff and writing code.I
               have written codes in <span style="text-decoration:none;color:#086fd6 ;" class="typewrite"
                 data-period="2000"
-                data-type='[ "C/C++.", "Java.", "Php.","Python.","JavaScript.","TypeScript.","Dart."]'>
+                data-type='[ "C/C++.", "Java.", "Python.","JavaScript.","TypeScript.","Dart."]'>
             </div>
             <div class="textAbout mt-2">
               I am enthusiast for gadgets/mobile-devices, writes blog on mobile technologies.
@@ -164,21 +166,17 @@ <h3 class="box-right">Nice to see you here. 🙏🏻</h3>
 
 
   <section id="work">
-    <div class="container-fluid">
-      <div class="row">
-        <div class="twitter-icon">
-          <a class="github-button" href="https://github.com/devashishg" aria-label="Follow @devashishg on GitHub">Follow
-            @devashishg</a>
-
-        </div>
-        <div class="card-git calendar">
-          Loading the data just for you.
+      <div class="flex-center flex-justify-center">
+        <div id="stk-oflw" class="btn-light border c-pointer stk-oflw px-2 py-1">
+          <i class="fa fa-stack-overflow" aria-hidden="true"></i>
         </div>
+        <a class="github-button" href="https://github.com/devashishg" aria-label="Follow @devashishg on GitHub">Follow
+          @devashishg</a>
       </div>
-    </div>
-    <script>
-      GitHubCalendar(".calendar", "devashishg", { responsive: true });
-    </script>
+      <div class="card-git calendar">
+        Loading the data just for you.
+      </div>
+
 
 
     <div class="container-fluid mt-2">
@@ -241,7 +239,7 @@ <h1 class="card-title py-2"> Projects</h1>
     </div>
 
     <div class="container-fluid mt-2 py-2">
-      <h1 class="card-title py-2"> Hands-on experience</h1>
+      <h1 class="card-title py-2"> Skills </h1>
       <div class="chart-container">
         <div class="flex-center justify-content-center f-8">
           <i class="devicon-cplusplus-line colored m-2 p-2 border-danger" title="C++"></i>
@@ -379,6 +377,9 @@ <h1 class="card-title py-2"> Blog </h1>
     </div>
   </footer>
 
+  <script>
+    GitHubCalendar(".calendar", "devashishg", { responsive: true });
+  </script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

js/main.js

@@ -52,6 +52,7 @@ window.onload = function () {
   var css = document.createElement("style");
   css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #cff9d9}";
   document.body.appendChild(css);
+  loadStackOverFlow();
 };
 
 
@@ -90,6 +91,28 @@ function drawBasic() {
   chart.draw(data, options);
 }
 
+async function loadStackOverFlow  () {
+  const element = document.getElementById('stk-oflw');
+  const res = await fetch('https://api.stackexchange.com/2.3/users/8504438?site=stackoverflow');
+  const data = (await res.json()).items[0];
+  let layout = `<img src="${data.profile_image}" width="15px" class="mx-2"/>${data.reputation}`;
+  let bdgs = data.badge_counts;
+  if(bdgs.gold >0) {
+    layout+=`<span class="gold mx-1">● ${bdgs.gold}</span>`;
+  }
+  if(bdgs.silver >0) {
+    layout+=`<span class="silver mx-1">● ${bdgs.silver}</span>`;
+  }
+  if(bdgs.bronze > 0) {
+    layout+=`<span class="bronze mx-1">● ${bdgs.bronze}</span>`;
+  }
+  const ele = document.createElement('span');
+  ele.innerHTML = layout;
+  element.appendChild(ele);
+
+  console.log(data);
+}
+
 
 var container = document.getElementById("retainable-rss-embed");
 if (container) {