Added research section and active page highlighting js

cote3804 · Aug 15, 2024 · 93ab7fd · 93ab7fd
1 parent 6f71dee
commit 93ab7fd
Show file tree

Hide file tree

Showing 11 changed files with 163 additions and 74 deletions.
diff --git a/biography.html b/biography.html
@@ -19,7 +19,7 @@
       <div class="collapse navbar-collapse justify-content-start" id="navbarSupportedContent">
         <ul class="navbar-nav">
           <li class="nav-item">
-            <a class="nav-link active fs-4" aria-current="page" href="index.html">Home</a>
+            <a class="nav-link fs-4" aria-current="page" href="index.html">Home</a>
           </li>
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle fs-4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -49,22 +49,17 @@
     #content a { color: purple; }
   </style>
   <div class="container">
-  <div class="row">
-    <div class="col">
-      <div class="container" id="content">
-        <script>
+
+  </div>
+  <script>
     document.addEventListener('DOMContentLoaded', function() {
-      var converter = new showdown.Converter();
-      converter.setFlavor('github');
-      fetch('/biography.md')
-        .then(response => response.text())
-        .then(text => {
-          document.getElementById('content').innerHTML = converter.makeHtml(text);
-        })
-        .catch(error =>
-          console.error('Error loading markdown file', error));
+        const currentPage = window.location.pathname.split("/").pop();
+        const navItems = document.querySelectorAll('.nav-link');
+        navItems.forEach(item => {
+            if (item.getAttribute('href') === currentPage) {
+                item.classList.add('active');
+            }
         });
-        </script>
-      </div>
-    </div>
-  </div>
+    });
+</script>
+</body>
diff --git a/images/cone_of_complexity.webp b/images/cone_of_complexity.webp
diff --git a/index.html b/index.html
@@ -23,7 +23,7 @@
       <div class="collapse navbar-collapse justify-content-start" id="navbarSupportedContent">
         <ul class="navbar-nav">
           <li class="nav-item">
-            <a class="nav-link active fs-4" aria-current="page" href="index.html">Home</a>
+            <a class="nav-link fs-4" aria-current="page" href="index.html">Home</a>
           </li>
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle fs-4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -58,7 +58,7 @@
   <div class="container-fluid d-flex flex-column custom-vh-75 z-2 position-relative text-center">
     <div class="row flex-grow-1"> <!-- Title and other info -->
       <!-- <div class="col-1"></div> -->
-      <div class="col-4 transparent-column" style="min-height:100vh">
+      <div class="col-3 transparent-column" style="min-height:100vh">
         <div class="container-fluid">
           <div class="row flex-grow-1">
             <p class="name-fontsize fw-bold text-center text-light">Cooper Tezak</p>
@@ -73,17 +73,17 @@
             <div class="row flex-grow-1 p-3">
               <div class="col-3"></div>
               <div class="col-2">
-                <a href="www.linkedin.com/in/cooper-tezak-75a15b165" class="text-light">
+                <a href="https://www.linkedin.com/in/cooper-tezak-75a15b165/" class="text-light" target="_blank">
                   <img src="/images/linkedin-app-white-icon.png" class="img-fluid" alt="LinkedIn">
                 </a>
               </div>
               <div class="col-2">
-                <a href="https://github.com/cote3804" class="text-light">
+                <a href="https://github.com/cote3804" class="text-light" target="_blank">
                   <img src="/images/github-logo-white.webp" class="img-fluid" alt="GitHub">
                 </a>
               </div>
               <div class="col-2">
-                <a href="https://scholar.google.com/citations?user=XBZAHmIAAAAJ&hl=en" class="text-light">
+                <a href="https://scholar.google.com/citations?user=XBZAHmIAAAAJ&hl=en" class="text-light" target="_blank">
                   <img src="/images/scholar_logo_white.png" class="img-fluid" alt="GitHub">
                 </a>
               </div>
@@ -93,24 +93,24 @@
           </div>
         </div> 
       </div>
+      <div class="col-1"></div>
       <div class="col-7 align-self-start">
         <div class="container">
           <div class="row flex-grow-1 p-5 position-relative z-2"></div>
           <div class="row flex-grow-1 p-3 position-relative z-2">
             <div class="col align-self-start transparent-paragraph">
               <p class="fs-2 fw-bold text-center text-light">Matching catalysts with reactions through simulation</p>
-              <p class="fs-4 text-light" style="text-align: justify;">I use grand-canonical density functional theory to simulate 
+              <p class="fs-5 text-light" style="text-align: justify;">I use grand-canonical density functional theory to simulate 
                 the electrified interface between catalyst and electrolyte. My simulations have shown
                 previously unknown potential dependence of fundamental catalytic phenomena that, across material
-                spaces, have significant impacts on electrocatalyst design. The data generated throughout my PhD is
-                is 
-                <a href="https://beastdb.nrel.gov/"> publicly available </a>
+                spaces, have significant impacts on electrocatalyst design. The data generated throughout my PhD is 
+                <a href="https://beastdb.nrel.gov/">publicly available</a> 
                 and accompanied by an user interface that facilitates data exploration.</p>
-                <p class="fs-4 text-light" style="text-align: justify;">
+                <p class="fs-5 text-light" style="text-align: justify;">
                 I seek generalizable chemical knoweldge that can be used to design catalysts for arbitray
                 reactions. By smartly restricting chemical space and leveraging massively parallel workflows,
                 I can quickly downselect material spaces to a few promising candidates. My goal is to match
-                catalysts with reactions by identfiying kinetic bottlenecks that can be maniuplated with
+                catalysts with reactions by identfiying kinetic bottlenecks that can be manipulated with
                 smart catalyst design. 
               </p>
             </div>
@@ -147,5 +147,16 @@
     MathJax.typesetPromise();
   });
 </script>
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const currentPage = window.location.pathname.split("/").pop();
+        const navItems = document.querySelectorAll('.nav-link');
+        navItems.forEach(item => {
+            if (item.getAttribute('href') === currentPage) {
+                item.classList.add('active');
+            }
+        });
+    });
+</script>
 </body>
 </html>
diff --git a/navbar.html b/navbar.html
@@ -7,7 +7,7 @@
       <div class="collapse navbar-collapse justify-content-start" id="navbarSupportedContent">
         <ul class="navbar-nav">
           <li class="nav-item">
-            <a class="nav-link active fs-4" aria-current="page" href="index.html">Home</a>
+            <a class="nav-link fs-4" aria-current="page" href="index.html">Home</a>
           </li>
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle fs-4" role="button" data-bs-toggle="dropdown" aria-expanded="false">

diff --git a/navbar_js.html b/navbar_js.html
@@ -0,0 +1,11 @@
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const currentPage = window.location.pathname.split("/").pop();
+        const navItems = document.querySelectorAll('.nav-link');
+        navItems.forEach(item => {
+            if (item.getAttribute('href') === currentPage) {
+                item.classList.add('active');
+            }
+        });
+    });
+</script>
diff --git a/research.html b/research.html
@@ -37,7 +37,7 @@
       <div class="collapse navbar-collapse justify-content-start" id="navbarSupportedContent">
         <ul class="navbar-nav">
           <li class="nav-item">
-            <a class="nav-link active fs-4" aria-current="page" href="index.html">Home</a>
+            <a class="nav-link fs-4" aria-current="page" href="index.html">Home</a>
           </li>
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle fs-4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -65,7 +65,7 @@
     <div class="h1 text-light">Research</div>
   <div class="row pt-5">
     <div class="col">
-      <div class="h3 text-light">Electrocatalyst Discovery</div>
+      <div class="h3 text-light">Electrocatalytic Scaling Relations</div>
       <div class="p-0 text-light">
         I combine electrochemical physics simulations with thermodynamic proxies of catalyst
         activity to screen broad material spaces for active catalysts. Typical electrochemical studies
@@ -75,8 +75,8 @@
         one half that of a hydrogen atom. <br> <br>
         \( G_{H^+} + G_{e^-} = -\frac{1}{2} G_{H_2} \) <br> <br>
         The free energy of the proton is potential-independent and the potential dependence of the electron is 
-        given by the difference in potential from 0V vs SHE.<br> <br>
-        \( G_{e^-} = G_{e^-}^0 - (U - U_{SHE}^0)\) <br> <br>
+        given by the potential with respect to the standard hydrogen electrode (SHE).<br> <br>
+        \( G_{e^-} = G_{e^-}^0 - U_{SHE}\) <br> <br>
         This then allows one to estimate the 
         <a href="https://chemistry-europe.onlinelibrary.wiley.com/doi/abs/10.1002/cssc.201500322">Limiting Potential \(U_{L}\)</a>
         at which an electrochemical step becomes favorable by dividing the free energy change of that step by the number
@@ -100,14 +100,56 @@
         of the 
         <a href="https://pubs.acs.org/doi/10.1021/ar1000956">energetic span</a>, which measures the largest barrier in a
         cyclic catalytic cycle. I used this descriptor to re-evaluate the typical CHE volcano plots for the electrochemical nitrogen
-        reduction reaction to understand how explicit inclusion of potential changes catalyst scaling relations. <br> <br>
+        reduction reaction to understand how explicit inclusion of potential changes catalyst scaling relations. 
+        <a href="https://pubs.acs.org/doi/abs/10.1021/acscatal.3c01978">[5]</a>
+        <br> <br>
 
-
+        <div class="h3 text-light">Electrocatalyst Screening</div>
+        Using the scaling relations developed above, I screened a material space for promising nitrogen reduction catalysts.
+        This space consisted of binary metal-covalent alloys that combined p-block dopants with transition metals. We found that
+        even the most active catalysts in our dataset did not surpass the the activity of the most active metal catalysts because these 
+        covalent alloy materials fail to favorably break scaling relations.        
+        <a href="https://onlinelibrary.wiley.com/doi/abs/10.1002/aenm.202304559">[6]</a>
+        <br><br>
+        Furthermore, we found that traditional electronic structure descriptors like d-band and p-band centers were unable to 
+        predict trends in binding energy across the dataset. We believe this is due to the highly geometry-dependent change in the renormalized
+        adsorbate frontier orbital energies, which lead to substantially different degrees of bonding for materials with similar d-band centers.
+        To correctly precict trends in binding energy across complex material spaces, it is necessary to incorporate the geometry of the surface.
+        <br><br>
+        <div class="h3 text-light">Bayesian Optimization of Battery Electrolyte Compositions</div>
+        I have recently begun working with 
+        <a href="https://www.colorado.edu/lab/ban/">Chunmei Ban</a>
+        on optimizing experimental electrolyte composition for Na-ion batteries. I lead the effort to develop a Bayesian optimization framework
+        that treats 
+        <br><br>
       </div>
     </div>
-      <div class="col">
-      <img src="/images/spans_bar_chart.png" class="img-fluid" alt="Spans Bar Chart">
+    <div class="col">
       <img src="/images/volcano.png" class="img-fluid" alt="Volcano Plot">
+      <p class="fs-6 px-5 text-light" style="text-align: justify;">
+        Re-evaluated nitrogen reduction reaction scaling relations using GC-DFT and the \( \Phi_{max} \) activity descriptor. Unlike
+        previous scaling relations, there is a flat peak shaving off the top of the volcano due to the chemical desoption of \( NH_3 \) that is less sensitive
+        to the applied potential than the left and right scaling lines, which are comprised of explicit electron transfer steps. These volcanos indicate that 
+        tuning the activity of catalysts near the peak of the volcano at modest potentials necessitates selective destabilization of the \( NH_3^* \) state.
+        <br> <br>
+      </p>
+      <img src="/images/spans_bar_chart.png" class="img-fluid" alt="Spans Bar Chart">
+      <p class="fs-6 px-5 text-light" style="text-align: justify;">
+      Select materials from the binary covalent alloy screening study. We found that the most active surfaces in our dataset tended
+      to have less occupied d-orbitals that were capable of strongly reducing the \( N_2 \) triple bond. However, all materials were
+      inevitably limited by the desorption of \( NH_3* \) from the surface. <br> <br>
+      </p>
     </div>
   </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const currentPage = window.location.pathname.split("/").pop();
+        const navItems = document.querySelectorAll('.nav-link');
+        navItems.forEach(item => {
+            if (item.getAttribute('href') === currentPage) {
+                item.classList.add('active');
+            }
+        });
+    });
+</script>
 </body>
diff --git a/source/biography.html b/source/biography.html
@@ -18,22 +18,7 @@
     #content a { color: purple; }
   </style>
   <div class="container">
-  <div class="row">
-    <div class="col">
-      <div class="container" id="content">
-        <script>
-    document.addEventListener('DOMContentLoaded', function() {
-      var converter = new showdown.Converter();
-      converter.setFlavor('github');
-      fetch('/biography.md')
-        .then(response => response.text())
-        .then(text => {
-          document.getElementById('content').innerHTML = converter.makeHtml(text);
-        })
-        .catch(error =>
-          console.error('Error loading markdown file', error));
-        });
-        </script>
-      </div>
-    </div>
-  </div>
+
+  </div>
+  @@include('navbar_js.html')
+</body>
diff --git a/source/index.html b/source/index.html
@@ -27,7 +27,7 @@
   <div class="container-fluid d-flex flex-column custom-vh-75 z-2 position-relative text-center">
     <div class="row flex-grow-1"> <!-- Title and other info -->
       <!-- <div class="col-1"></div> -->
-      <div class="col-4 transparent-column" style="min-height:100vh">
+      <div class="col-3 transparent-column" style="min-height:100vh">
         <div class="container-fluid">
           <div class="row flex-grow-1">
             <p class="name-fontsize fw-bold text-center text-light">Cooper Tezak</p>
@@ -42,17 +42,17 @@
             <div class="row flex-grow-1 p-3">
               <div class="col-3"></div>
               <div class="col-2">
-                <a href="www.linkedin.com/in/cooper-tezak-75a15b165" class="text-light">
+                <a href="https://www.linkedin.com/in/cooper-tezak-75a15b165/" class="text-light" target="_blank">
                   <img src="/images/linkedin-app-white-icon.png" class="img-fluid" alt="LinkedIn">
                 </a>
               </div>
               <div class="col-2">
-                <a href="https://github.com/cote3804" class="text-light">
+                <a href="https://github.com/cote3804" class="text-light" target="_blank">
                   <img src="/images/github-logo-white.webp" class="img-fluid" alt="GitHub">
                 </a>
               </div>
               <div class="col-2">
-                <a href="https://scholar.google.com/citations?user=XBZAHmIAAAAJ&hl=en" class="text-light">
+                <a href="https://scholar.google.com/citations?user=XBZAHmIAAAAJ&hl=en" class="text-light" target="_blank">
                   <img src="/images/scholar_logo_white.png" class="img-fluid" alt="GitHub">
                 </a>
               </div>
@@ -62,23 +62,24 @@
           </div>
         </div> 
       </div>
+      <div class="col-1"></div>
       <div class="col-7 align-self-start">
         <div class="container">
           <div class="row flex-grow-1 p-5 position-relative z-2"></div>
           <div class="row flex-grow-1 p-3 position-relative z-2">
             <div class="col align-self-start transparent-paragraph">
               <p class="fs-2 fw-bold text-center text-light">Matching catalysts with reactions through simulation</p>
-              <p class="fs-4 text-light" style="text-align: justify;">I use grand-canonical density functional theory to simulate 
+              <p class="fs-5 text-light" style="text-align: justify;">I use grand-canonical density functional theory to simulate 
                 the electrified interface between catalyst and electrolyte. My simulations have shown
                 previously unknown potential dependence of fundamental catalytic phenomena that, across material
-                spaces, have significant impacts on electrocatalyst design. The data generated throughout my PhD is
-                <a href="https://beastdb.nrel.gov/"> publicly available </a>
+                spaces, have significant impacts on electrocatalyst design. The data generated throughout my PhD is 
+                <a href="https://beastdb.nrel.gov/">publicly available</a> 
                 and accompanied by an user interface that facilitates data exploration.</p>
-                <p class="fs-4 text-light" style="text-align: justify;">
+                <p class="fs-5 text-light" style="text-align: justify;">
                 I seek generalizable chemical knoweldge that can be used to design catalysts for arbitray
                 reactions. By smartly restricting chemical space and leveraging massively parallel workflows,
                 I can quickly downselect material spaces to a few promising candidates. My goal is to match
-                catalysts with reactions by identfiying kinetic bottlenecks that can be maniuplated with
+                catalysts with reactions by identfiying kinetic bottlenecks that can be manipulated with
                 smart catalyst design. 
               </p>
             </div>
@@ -115,5 +116,6 @@
     MathJax.typesetPromise();
   });
 </script>
+@@include('navbar_js.html')
 </body>
 </html>
diff --git a/source/navbar.html b/source/navbar.html
@@ -7,7 +7,7 @@
       <div class="collapse navbar-collapse justify-content-start" id="navbarSupportedContent">
         <ul class="navbar-nav">
           <li class="nav-item">
-            <a class="nav-link active fs-4" aria-current="page" href="index.html">Home</a>
+            <a class="nav-link fs-4" aria-current="page" href="index.html">Home</a>
           </li>
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle fs-4" role="button" data-bs-toggle="dropdown" aria-expanded="false">

diff --git a/source/navbar_js.html b/source/navbar_js.html
@@ -0,0 +1,11 @@
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const currentPage = window.location.pathname.split("/").pop();
+        const navItems = document.querySelectorAll('.nav-link');
+        navItems.forEach(item => {
+            if (item.getAttribute('href') === currentPage) {
+                item.classList.add('active');
+            }
+        });
+    });
+</script>