major update

css/style.css

@@ -45,4 +45,11 @@ table {
   border-radius: 50%;
   border: 2px solid #09b1bdcf;
   opacity: 0.9;
+}
+
+.research-item {
+  margin: 20px 0;
+  border: #09b1bdcf 1px solid;
+  border-radius: 10px;
+  padding: 10px;
 }

index.html

@@ -42,7 +42,7 @@
               <a href="#research" class="nav-link">Research</a>
             </li>
             <li class="nav-item">
-              <a href="#publication" class="nav-link">Publication</a>
+              <a href="publications.html" class="nav-link">Publication</a>
             </li>
             <!--           <li class="nav-item">
             <a href="etc.html" class="nav-link">.etc</a>
@@ -60,14 +60,10 @@
     <div class="container">
       <!-- <div class="card"> -->
       <div class="row">
-        <h1 class="txt_color_h">About Me</h1>
+        <h1 class="txt_color_h mt-4">About Me</h1>
         <div class="col-md-6 txt_color">
           <p>
-            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.
+            I am currently a Postdoctoral Researcher in the Department of Physics at Virginia Tech, USA, where I focus on constructing and detecting quantum phases with cold atoms. I earned my PhD from the Indian Institute of Technology Kharagpur, specializing in Quantum Turbulence in Bose-Einstein Condensates. My theoretical research spans various areas within the broad field of Atomic, Molecular, and Optical Physics. With over 6 years of experience, I have developed scientific code in C++ and excel in data post-processing using Python.
           </p>
         </div>
         <div class="col-md-6">
@@ -101,24 +97,74 @@ <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>
+      <h1 class="txt_color_h mt-4">Recent Research Works</h1>
+      <div class="row mt-4 research-item">
+        <div class="col-12">
+          <h2>Distinguishing superfluid and supersolid phase using vortex motion</h2>
+          <p>We propose an experimental method to distinguish supersolid and superfluid phases using vortex dipole. Vortex dipole behaves separately in these two phase. By tracing the trajectory of the vortices and calculating the correlation between trajectories, one can identify the phase.</p>
+        </div>
+        <div class="row">
+          <!-- Adjusted Column 1: Wrapped image in a flex container for vertical centering -->
+          <div class="col-lg-6 col-12 d-flex align-items-center mb-4 mb-lg-0">
+            <img class="img-fluid rounded mx-auto d-block"
+              style="background-color: transparent;max-width: 100%; max-height: 350px;"
+              src="img/works/Schema_SS_LG_Final_merge.png" alt="" />
+          </div>
+          <!-- Adjusted Column 2: Wrapped image in a flex container for vertical centering -->
+          <div class="col-lg-6 col-12 d-flex align-items-center">
+            <img class="img-fluid rounded mx-auto d-block"
+              style="background-color: transparent;max-width: 100%; max-height: 350px;"
+              src="img/works/SF_SS_Vortex_Path.png" alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="row mt-4 research-item">
+        <div class="col-12">
+          <h2>Studies on Dipolar Bose-Einstein Condensate</h2>
+          <p>We have done several works on dipolar BEC under different trapping geometries: 2D-3D harmonic potential and 3D bubble trap potential with rotation. We also consider dipolar-dipolar and dipolar-nondipolar multicomponent mixture of <sup>164</sup>Dy and <sup>168</sup>Er.
+          </p>
+        </div>
+        <div class="row">
+          <!-- Adjusted Column 1: Wrapped image in a flex container for vertical centering -->
+          <div class="col-lg-6 col-12 d-flex align-items-center mb-4 mb-lg-0">
+            <img class="img-fluid rounded mx-auto d-block"
+              style="background-color: transparent;max-width: 100%; max-height: 350px;" src="img/works/two-comp-1.png"
+              alt="" />
+          </div>
+          <!-- Adjusted Column 2: Wrapped image in a flex container for vertical centering -->
+          <div class="col-lg-6 col-12 d-flex align-items-center">
+            <img class="img-fluid rounded mx-auto d-block"
+              style="background-color: transparent;max-width: 100%; max-height: 350px;" src="img/works/ene.png"
+              alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="row mt-4 research-item">
+        <div class="col-12">
+          <h2>2D Quantum Turbulence in Bose-Einstein Condensate</h2>
+          <p>
+            We explore the dynamics of point vortices within a two-component Bose-Einstein Condensate (BEC), examining how interspecies interactions influence quantum turbulence. Our analysis reveals that the scaling laws of turbulence vary depending on the rotation frequency of the obstacle used to generate the vortices.
+          </p>
+        </div>
+        <div class="row">
+          <!-- Adjusted Column 1: Wrapped image in a flex container for vertical centering -->
+          <div class="col-lg-6 col-12 d-flex align-items-center mb-4 mb-lg-0">
+            <img class="img-fluid rounded mx-auto d-block"
+              style="background-color: transparent; max-width: 100%; max-height: 350px;" src="img/works/vor1.png"
+              alt="" />
+          </div>
+          <!-- Adjusted Column 2: Wrapped image in a flex container for vertical centering -->
+          <div class="col-lg-6 col-12 d-flex align-items-center">
+            <img class="img-fluid rounded mx-auto d-block"
+              style="background-color: transparent; max-width: 100%; max-height: 350px;" src="img/works/vor22.png"
+              alt="" />
+          </div>
+        </div>
+      </div>
     </div>
   </section>
 
-  <section id="publication" class="p-5">
-    <div class="container">
-      <h1 class="txt_color_h">Publications</h1>
-      <table class="table">
-        <tr style="height: 60px;font-size: 20px;color: rgb(126, 133, 135);">
-          <!-- <th data-column="No" data-order="desc" class="noselect"></th> -->
-          <th data-column="Name" data-order="desc" class="noselect">Year</th>
-          <th data-column="Country" data-order="desc" class="noselect">Article</th>
-        </tr>
-        <tbody class="txt_color" id="myTable">
-
-        </tbody>
-      </table>
-    </div>
-  </section>
+
 
 
 
@@ -129,12 +175,12 @@ <h1 class="txt_color_h">Publications</h1>
     crossorigin="anonymous"></script>
 
   <script src="js/background.js"></script>
-  <script src="js/pubs.js"></script>
+
 </body>
 
 <footer class="footer">
   <div class="container">
-    <p class="text-muted">© 2023 Subrata Das. All rights reserved.</p>
+    <p class="text-muted">© 2024 Subrata Das</p>
   </div>
 </footer>
 

js/pubs.js

@@ -2,57 +2,42 @@ var myArray = []
 $.getJSON("data/pub.json", function (jsonData) {
     // console.log(jsonData); 
     myArray = jsonData["items"];
-    console.log(myArray)
+    // console.log(myArray)
     buildTable(myArray)
 });
 
-// $('th').on('click', function () {
-//     var column = $(this).data('column')
-//     var order = $(this).data('order')
-//     var text = $(this).html()
-//     // console.log(text)
-//     // text = text.substring(0, text.length - 1)
 
-//     if (order == 'desc') {
-//         $(this).data('order', "asc")
-//         myArray = myArray.sort((a, b) => a[column] > b[column] ? 1 : -1)
-//         // text += '&#9660'
+function toggleAbstract(abstractId) {
+    var abstractDiv = document.getElementById(abstractId);
+    var abstractTrigger = abstractDiv.previousElementSibling; // Assuming the <b> tag is directly before the <div>
 
-//     } else {
-//         $(this).data('order', "desc")
-//         myArray = myArray.sort((a, b) => a[column] < b[column] ? 1 : -1)
-//         // text += '&#9650'
-
-//     }
-//     $(this).html(text)
-//     buildTable(myArray)
-// })
-
-// $(function () {
-//     $('[data-toggle="tooltip"]').tooltip()
-// })
+    if (abstractDiv.style.display === "none") {
+        abstractDiv.style.display = "block";
+        abstractTrigger.innerHTML = abstractTrigger.innerHTML.replace('▶', '▼');
+    } else {
+        abstractDiv.style.display = "none";
+        abstractTrigger.innerHTML = abstractTrigger.innerHTML.replace('▼', '▶');
+    }
+}
 
 function buildTable(data) {
     var table = document.getElementById('myTable')
     table.innerHTML = ''
+    // Assuming data is an array of objects and each object has a date property
+    data.sort(function (a, b) {
+        var dateA = new Date(a.date); // Convert date string to Date object
+        var dateB = new Date(b.date); // Convert date string to Date object
+        return dateB - dateA; // Sort in descending order
+    });
+    var lastYear = null;
     for (var i = 0; i < data.length; i++) {
-        // var appsLink = data[i].applicationLink
-        // var link = "&#x1F5CF"
-        // if (typeof appsLink == "undefined") {
-        //     appsLink = ""
-        //     // link = "&#x1F5CF"
-        //     link = "&#x2709"
-        // }
-        // var deadline = data[i].deadline
-        // if (typeof deadline == "undefined") {
-        //     deadline = ""
-        // }
-        // var msg = data[i].message
-        // if (typeof msg == "undefined") {
-        //     msg = ""
-        // }
         var date = new Date(data[i].date)
         var yy = date.getFullYear()
+        if (lastYear !== null && yy !== lastYear) {
+            // If the year changes, insert a horizontal line
+            table.innerHTML += '<tr><td colspan="100%" style="padding: 0; height: auto;"><hr style="margin: 0;"></td></tr>';
+        }
+        lastYear = yy;
         var mm = date.getMonth()
         var creators = data[i].creators
         var authorList = ''
@@ -63,12 +48,23 @@ function buildTable(data) {
             }
             authorList += and + creators[j].firstName + " " + creators[j].lastName + ", ";
         }
+        var journal = null;
+        if (data[i].itemType == "journalArticle") {
+            dataIssue = data[i].issue ? " (" + data[i].issue + ")" : ""
+            journal = data[i].journalAbbreviation + " " + data[i].volume + dataIssue + ", " + data[i].pages
+        } else if (data[i].itemType == "preprint") {
+            journal = "arXiv preprint " + data[i].archiveID
+        }
 
-        var row = `<tr>
-                            <td  class=""> ${yy}</td>
-							<td  class="text-wrap">${authorList} ${data[i].title}, <a href=${data[i].url}>${data[i].journalAbbreviation} ${data[i].volume} (${data[i].issue}), ${data[i].pages}</a></td>
-					  </tr>`
-        table.innerHTML += row
+        var row = `<tr style="font-family: Garamond, serif; font-size:18px;">
+        <td>${yy}</td>
+        <td class="text-wrap"> <i style="color: #565656;">${data[i].title}</i>, ${authorList}  <a href="${data[i].url}" style="text-decoration: none;">${journal}</a> <b style="color: #565656; cursor: pointer;" onclick="toggleAbstract('abstract${i}')">▶ Abstract</b>
+            <div id="abstract${i}" style="display: none; font-family: 'Times New Roman'; color: black; margin-top: 10px;border: 1px solid #ccc; border-radius: 8px; padding: 10px;background-color: #f9f9f9;">
+                ${data[i].abstractNote ? data[i].abstractNote : "No abstract available."}
+            </div>
+        </td>
+   </tr>`;
+        table.innerHTML += row;
     }
 }
 

publications.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <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>Publications</title>
+</head>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
+<body>
+    <!-- Navigation bar -->
+    <div class="header">
+        <nav class=" navbar navbar-fixed-top navbar-expand-lg nav-bg-color navbar-dark shadow">
+            <div class="container">
+                <a href="index.html#" 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="index.html#aboutme" class="nav-link">About Me</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="index.html#research" class="nav-link">Research</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="publications.html" class="nav-link">Publication</a>
+                        </li>
+                        <!--           <li class="nav-item">
+            <a href="etc.html" class="nav-link">.etc</a>
+          </li> -->
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </div>
+
+    <section id="publication" class="p-5">
+        <div class="container">
+            <h1 class="txt_color_h">Publications and Preprints</h1>
+            <table class="table">
+                <tr style="height: 60px;font-size: 20px;color: rgb(126, 133, 135);">
+                    <!-- <th data-column="No" data-order="desc" class="noselect"></th> -->
+                    <th data-column="Name" data-order="desc" class="noselect">Year</th>
+                    <th data-column="Country" data-order="desc" class="noselect">Article</th>
+                </tr>
+                <tbody class="txt_color" id="myTable">
+
+                </tbody>
+            </table>
+        </div>
+    </section>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+        crossorigin="anonymous"></script>
+
+    <script src="js/background.js"></script>
+    <script src="js/pubs.js"></script>
+</body>
+
+</html>