upgrade

subratappt · Dec 10, 2023 · a7f8027 · a7f8027
1 parent 264d6b6
commit a7f8027
Show file tree

Hide file tree

Showing 16 changed files with 163 additions and 35 deletions.
diff --git a/css/background.css b/css/background.css
@@ -1,16 +1,26 @@
 .header {
-  background-image: url("img/background.jpg");
+  background-image: url("../img/my_photo_header.jpg");
   background-size: cover;
-  background-position: center;
+  background-position: center center !important;
   background-repeat: no-repeat;
-  max-height: 50px;
+  max-height: 200px;
+  max-width: 1600px;
+  margin: 0 auto;
 }
 
 body {
   /* background-image: url("img/5238994.jpg") no-repeat center center fixed; */
-  background-color: rgb(20, 30, 36);
+  background-color: rgb(233, 228, 228);
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
 }
+
+.footer {
+  padding: 10px 0;
+  background-color: rgba(34, 31, 31, 0.948);
+  text-align: center;
+  max-width: 1600px;
+  margin: 0 auto;
+}
diff --git a/css/style.css b/css/style.css
@@ -1,11 +1,48 @@
 .txt_color {
-  color: rgb(206, 212, 212);
+  color: rgb(27, 28, 28);
 }
 
 .txt_color_h {
-  color: rgb(127, 139, 139);
+  color: rgb(95, 110, 110);
 }
 
 table {
   border: none;
+}
+
+.navbar-fixed-top {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+  background-color: rgba(0, 0, 0, 0.505);
+  max-width: 1600px;
+}
+
+.navbar-fixed-top.scrolling {
+  background-color: rgba(34, 31, 31, 0.948);
+}
+
+
+.social-icons {
+  padding-top: 10px;
+}
+
+.social-icons a {
+  display: inline-block;
+  margin: 0 10px;
+  text-decoration: none;
+}
+
+.social-icons a img {
+  width: 30px;
+  height: 30px;
+}
+
+.social-icons a:hover img {
+  transition: all 0.2s ease-in-out;
+  scale: 1.4;
+  border-radius: 50%;
+  border: 2px solid #09b1bdcf;
+  opacity: 0.9;
 }
diff --git a/img/favicons/android-chrome-192x192.png b/img/favicons/android-chrome-192x192.png
diff --git a/img/favicons/android-chrome-512x512.png b/img/favicons/android-chrome-512x512.png
diff --git a/img/favicons/apple-touch-icon.png b/img/favicons/apple-touch-icon.png
diff --git a/img/favicons/favicon-16x16.png b/img/favicons/favicon-16x16.png
diff --git a/img/favicons/favicon-32x32.png b/img/favicons/favicon-32x32.png
diff --git a/img/favicons/favicon.ico b/img/favicons/favicon.ico
diff --git a/img/favicons/site.webmanifest b/img/favicons/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/img/icons/Google_Scholar_logo.svg b/img/icons/Google_Scholar_logo.svg
diff --git a/img/icons/ResearchGate.svg b/img/icons/ResearchGate.svg
diff --git a/img/icons/linkedin-icon.svg b/img/icons/linkedin-icon.svg
diff --git a/img/icons/orcid-icon.svg b/img/icons/orcid-icon.svg
diff --git a/img/my_photo_header.jpg b/img/my_photo_header.jpg
diff --git a/index.html b/index.html
@@ -7,44 +7,53 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   <link rel="stylesheet" href="css/style.css" />
   <link rel="stylesheet" href="css/background.css" />
+  <link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
+  <link rel="manifest" href="img/favicons/site.webmanifest">
 
   <title>Subrata</title>
 </head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
 <body>
   <!-- Navigation bar -->
-  <nav class="navbar navbar-expand-lg bg-dark navbar-dark shadow">
-    <div class="container">
-      <a href="#" class="navbar-brand">Subrata Das</a>
-
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-
-      <div class="collapse navbar-collapse" id="navmenu">
-        <ul class="navbar-nav ms-auto">
-          <!-- <li class="nav-item active">
+  <div class="header">
+    <nav class=" navbar navbar-fixed-top navbar-expand-lg nav-bg-color navbar-dark shadow">
+      <div class="container">
+        <a href="#" class="navbar-brand">Subrata Das</a>
+
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navmenu">
+          <ul class="navbar-nav ms-auto">
+            <!-- <li class="nav-item active">
             <a href="#home" class="nav-link">Home</a>
           </li> -->
-          <li class="nav-item">
-            <a href="#aboutme" class="nav-link">About Me</a>
-          </li>
-          <li class="nav-item">
-            <a href="#research" class="nav-link">Research</a>
-          </li>
-          <li class="nav-item">
-            <a href="#publication" class="nav-link">Publication</a>
-          </li>
-<!--           <li class="nav-item">
+            <li class="nav-item">
+              <a href="#aboutme" class="nav-link">About Me</a>
+            </li>
+            <li class="nav-item">
+              <a href="#research" class="nav-link">Research</a>
+            </li>
+            <li class="nav-item">
+              <a href="#publication" class="nav-link">Publication</a>
+            </li>
+            <!--           <li class="nav-item">
             <a href="etc.html" class="nav-link">.etc</a>
           </li> -->
-        </ul>
+          </ul>
+        </div>
       </div>
-    </div>
-  </nav>
+    </nav>
+  </div>
+
+
 
   <!-- Sections -->
   <section id="aboutme" class="p-5 text-center text-sm-start">
@@ -54,9 +63,8 @@
         <h1 class="txt_color_h">About Me</h1>
         <div class="col-md-6 txt_color">
           <p>
-            Hello and welcome to my webpage! My name is Subrata Das and I am a Postdoctoral Researcher in the
-            Department
-            of Physics at Virginia Tech,
+            I am a Postdoctoral Researcher in the
+            Department of Physics at Virginia Tech,
             US.</p>
           <p> I did my PhD from Indian Institute of Technology Kharagpur on Quantum Turbulence in Bose-Einstein
             Condensate.
@@ -67,6 +75,20 @@ <h1 class="txt_color_h">About Me</h1>
         </div>
       </div>
       <!-- </div> -->
+      <div class="social-icons">
+        <a href="https://scholar.google.com/citations?user=PvcLNcIAAAAJ&hl=en" target="_blank">
+          <img src="img/icons/Google_Scholar_logo.svg" alt="Google Scholar" />
+        </a>
+        <a href="https://www.researchgate.net/profile/Subrata-Das-11" target="_blank">
+          <img src="img/icons/ResearchGate.svg" alt="ResearchGate" />
+        </a>
+        <a href="https://orcid.org/0000-0003-4527-8308" target="_blank">
+          <img src="img/icons/orcid-icon.svg" alt="ORCID" />
+        </a>
+        <a href="https://www.linkedin.com/in/subratappt/" target="_blank">
+          <img src="img/icons/linkedin-icon.svg" alt="LinkedIn" />
+        </a>
+      </div>
     </div>
   </section>
 
@@ -75,7 +97,7 @@ <h1 class="txt_color_h">About Me</h1>
 
   <section class="p-5" id="research">
     <div class="container">
-      <h1 class="txt_color_h">Research</h1>
+      <h1 class="txt_color_h">Research Interests</h1>
       <div class="txt_color d-sm-flex">
         Quantum Gas, Bose-Einstein condensate, Quantum Vortex, Quantum Turbulence
       </div>
@@ -100,6 +122,8 @@ <h1 class="txt_color_h">Publications</h1>
 
 
 
+
+
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
     crossorigin="anonymous"></script>
@@ -108,4 +132,10 @@ <h1 class="txt_color_h">Publications</h1>
   <script src="js/pubs.js"></script>
 </body>
 
-</html>
+<footer class="footer">
+  <div class="container">
+    <p class="text-muted">© 2023 Subrata Das. All rights reserved.</p>
+  </div>
+</footer>
+
+</html>
diff --git a/js/background.js b/js/background.js
@@ -4,4 +4,14 @@ var ready = (callback) => {
 }
 ready(() => {
     document.querySelector(".header").style.height = window.innerHeight + "px";
+
+    // For changing navbar color on scroll
+    window.onscroll = function () {
+        const navbar = document.querySelector('.navbar-fixed-top');
+        if (window.scrollY > 100) {
+            navbar.classList.add('scrolling');
+        } else {
+            navbar.classList.remove('scrolling');
+        }
+    };
 })
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}