added research section with 2 figures and mathjax

cote3804 · Aug 7, 2024 · 9456356 · 9456356
1 parent 04e3458
commit 9456356
Show file tree

Hide file tree

Showing 379 changed files with 77,561 additions and 44 deletions.
diff --git a/biography.html b/biography.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lan="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="/css/main.min.css" rel="stylesheet">
+    <link href="/css/styles.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+</head>
+<body class="bg-dark">
+  <div class="container-fluid px-0" >  
+    <nav class="navbar navbar-expand-lg navbar-dark bg-navbardark">
+    <div class="container-fluid">
+      <a class="navbar-brand h1" href="#"></a>
+      <img src="/images/white_atom_logo_tiny.png" alt="Logo" class="img-fluid">
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <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>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle fs-4" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Publications
+            </a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" target="_blank" href="https://pubs.acs.org/doi/abs/10.1021/acscatal.3c01978">NRR Scaling Relations</a></li>
+              <li><a class="dropdown-item" target="_blank" href="https://onlinelibrary.wiley.com/doi/abs/10.1002/aenm.202304559">NRR Catalyst Screening</a></li>
+              <li><a class="dropdown-item" target="_blank" href="https://arxiv.org/abs/2405.20239">Electrocatalysis Database</a></li>
+            </ul>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link fs-4" href="research.html">Research</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link fs-4" href="biography.html">Bio</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</nav>
+  </div>
+  <style>
+    #content h1 { color: rgb(221, 221, 221); }
+    #content p { color: rgb(180, 180, 180); }
+    #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>
diff --git a/css/styles.css b/css/styles.css
@@ -20,4 +20,6 @@
 
 .custom-vh-75 {
 min-height: 75vh;
-}
+}
+
+.custom-header {color: orange;}
diff --git a/gulpfile.js b/gulpfile.js
@@ -13,6 +13,8 @@ const paths = {
 async function includeHTML(){
   return src([
     './source/*.html',
+    './source/*.md',
+    './source/*.js',
     '!header.html', // ignore
     '!footer.html' // ignore
     ])

diff --git a/images/headshot_atoms.png b/images/headshot_atoms.png
diff --git a/images/headshot_atoms_circle.png b/images/headshot_atoms_circle.png
diff --git a/images/spans_bar_chart.png b/images/spans_bar_chart.png
diff --git a/images/volvano.png b/images/volvano.png
diff --git a/index.html b/index.html
@@ -6,10 +6,12 @@
     <title>Document</title>
     <link href="/css/main.min.css" rel="stylesheet">
     <link href="/css/styles.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.3.2/markdown-it.min.js"
+        integrity="sha512-TIDbN32lXOg2Mw1VcnKrQLZgfALryJogWCu/NHWtlMCR1jget+mOwMtdehBBZz2f9PKeK2AQPwVxkbl4u/1H5g=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>
 <body class="bg-dark">
-  <div class="container-fluid px-0" >
+  <div class="container-fluid px-0" > 
     <nav class="navbar navbar-expand-lg navbar-dark bg-navbardark">
     <div class="container-fluid">
       <a class="navbar-brand h1" href="#"></a>
@@ -58,7 +60,7 @@
           <div class="row flex-grow-1">
             <div class="col align-self-center">
               <p class="fs-1 fw-bold text-center text-light">Cooper Tezak</p>
-              <img src="/images/self_boat_face_smaller.png", class="image-fluid" style="max-width:40%;">
+              <img src="/images/headshot_atoms_circle.png", class="image-fluid" style="max-width:40%;">
             </div>
           </div>
         </div> 
@@ -77,5 +79,49 @@
 <!-- <button type="button" class="btn btn-primary">Primary</button>
 <button type="button" class="btn btn-secondary">Secondary</button>
 <button type="button" class="btn btn-other_color">Tertiary</button> -->
+<h1>MathJax with Custom Colors Example</h1>
+
+<div id="content">
+  <p>
+    This is an example of inline math: \(E = mc^2\)
+  </p>
+  <p>
+    And here is an example of display math:
+  </p>
+  <p>
+    $$
+    \int_{a}^{b} f(x) \,dx
+    $$
+  </p>
+</div>
+
+<script>
+  // Configure MathJax
+  window.MathJax = {
+    tex: {
+      inlineMath: [['$', '$'], ['\\(', '\\)']],
+      displayMath: [['$$', '$$'], ['\\[', '\\]']]
+    },
+    options: {
+      renderActions: {
+        addColor: [10, (doc) => {
+          for (const math of doc.math) {
+            const node = math.typesetRoot;
+            if (math.display) {
+              node.classList.add('mathjax-display');
+            } else {
+              node.classList.add('mathjax-inline');
+            }
+          }
+        }, '']
+      }
+    }
+  };
+
+  // Re-render MathJax after page load
+  window.addEventListener('load', () => {
+    MathJax.typesetPromise();
+  });
+</script>
 </body>
 </html>
diff --git a/markdown.js b/markdown.js
@@ -0,0 +1,6 @@
+var showdown  = require('showdown'),
+    converter = new showdown.Converter(),
+    text      = '# hello, markdown!',
+    html      = converter.makeHtml(text);
+
+console.log(html);
diff --git a/mathjax.html b/mathjax.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MathJax Example</title>
+  <!-- Include MathJax -->
+  <script id="MathJax-script" async
+    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
+  </script>
+  <script> 
+    MathJax = { 
+        loader: {load: ['[tex]/color']},
+        tex: { 
+            inlineMath: [['$', '$'],  
+                        ['\\(', '\\)']],
+            packages: {'[+]': ['color']}
+        }, 
+        svg: { 
+            fontCache: 'global' 
+        } 
+    }; 
+    </script> 
+</head>
+<body>
+  <h1>MathJax Example</h1>
+
+  <p>
+    This is an inline math example: \(\textcolor{red}{E = mc^2}\)
+  </p>
+
+  <p>
+    This is a display math example:
+  </p>
+
+  <p>
+    $$
+    \int_{a}^{b} f(x) \,dx
+    $$
+  </p>
+</body>
+</html>
diff --git a/node_modules/.bin/katex b/node_modules/.bin/katex
diff --git a/node_modules/.bin/markdown-it b/node_modules/.bin/markdown-it
diff --git a/node_modules/.bin/showdown b/node_modules/.bin/showdown