front page fleshed out

cote3804 · Aug 12, 2024 · 6f71dee · 6f71dee
1 parent acc2374
commit 6f71dee
Show file tree

Hide file tree

Showing 17 changed files with 176 additions and 94 deletions.
diff --git a/biography.html b/biography.html
@@ -3,17 +3,16 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Bio</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">
+    <nav class="navbar navbar-expand-sm 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">
+      <img src="/images/white_atom_logo_micro.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>
@@ -23,7 +22,7 @@
             <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">
+            <a class="nav-link dropdown-toggle fs-4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Publications
             </a>
             <ul class="dropdown-menu">

diff --git a/css/styles.css b/css/styles.css
@@ -22,4 +22,40 @@
 min-height: 75vh;
 }
 
-.custom-header {color: orange;}
+.custom-header {color: orange;}
+
+.transparent-column {
+    background-color: rgba(32, 32, 32, 0.85);
+    /* Or you can use hsla: */
+    /* background-color: hsla(0, 0%, 100%, 0.5); */
+    padding: 15px;
+  }
+
+.transparent-paragraph{
+    background-color: rgba(32, 32, 32, 0.85); 
+
+}
+
+.name-fontsize {
+    font-size: 3rem; /* Or any size you prefer */
+}
+
+.fullscreen-image-container {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  .fullscreen-image {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    max-width: none;
+    object-fit: cover;
+  }
diff --git a/images/bitmap.png b/images/bitmap.png
diff --git a/images/github-logo-white.webp b/images/github-logo-white.webp
diff --git a/images/linkedin-app-white-icon.png b/images/linkedin-app-white-icon.png
diff --git a/images/linkedin-app-white-icon.webp b/images/linkedin-app-white-icon.webp
diff --git a/images/scholar_logo_white.png b/images/scholar_logo_white.png
diff --git a/images/surface_transparent_zoomed_out.png b/images/surface_transparent_zoomed_out.png
diff --git a/images/volcano.png b/images/volcano.png
diff --git a/images/white_atom_logo_micro.png b/images/white_atom_logo_micro.png
diff --git a/index.html b/index.html
@@ -3,19 +3,20 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Atomic Brokerage</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>
+    <link rel="icon" href="/images/white_atom_logo_small.png" type="image/x-icon">
     <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" > 
-    <nav class="navbar navbar-expand-lg navbar-dark bg-navbardark">
+  <div class="container-fluid" > 
+    <nav class="navbar navbar-expand-sm 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">
+      <img src="/images/white_atom_logo_micro.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>
@@ -25,7 +26,7 @@
             <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">
+            <a class="nav-link dropdown-toggle fs-4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Publications
             </a>
             <ul class="dropdown-menu">
@@ -46,54 +47,77 @@
   </nav>
 </nav>
   </div>
-  <div class="container text-center z-n1 position-absolute">
-    <div class="row bg-dark bg-gradient nopadding opacity-50">
-      <div class="col p-0 fixed-bottom"> <!-- Background image -->
-        <img src="images/surface_transparent.png" class="z-n1"  alt="Main Image" style="align-items: flex-end; width: 100%">
+  <div class="container-fluid text-center z-n1 position-absolute">
+    <div class="row bg-dark bg-gradient nopadding opacity-50 z-n1">
+      <!-- <div class="col-3"></div> -->
+      <div class="fullscreen-image-container">
+        <img src="./images/surface_transparent_zoomed_out.png" class="fullscreen-image z-n1"  alt="Main Image">
       </div>
     </div>
   </div>
   <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 align-self-center">
+      <!-- <div class="col-1"></div> -->
+      <div class="col-4 transparent-column" style="min-height:100vh">
         <div class="container-fluid">
           <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/headshot_atoms_circle.png", class="image-fluid" style="max-width:40%;">
+            <p class="name-fontsize fw-bold text-center text-light">Cooper Tezak</p>
+            <div class="col-2"></div>
+            <div class="col-8 align-self-center">
+              <img src="/images/headshot_atoms_circle.png", class="image-fluid", style="max-width: 100%;">
+            </div>
+            <div class="col-2"></div>
+            <div class="row flex-grow-1">
+              <p class="fs-2 text-light">PhD Student, CU Boulder</p>
+              <p class="fs-2 text-light">Atomic Broker</p>
+            <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">
+                  <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">
+                  <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">
+                  <img src="/images/scholar_logo_white.png" class="img-fluid" alt="GitHub">
+                </a>
+              </div>
+              <div class="col-3"></div>
+            </div>
             </div>
           </div>
         </div> 
       </div>
-      <div class="col align-self-center">
+      <div class="col-7 align-self-start">
         <div class="container">
-          <div class="row flex-grow-1 border border-light rounded-5 position-relative z-2">
-            <div class="col align-self-center">
-              <p class="fs-1 fw-bold text-center text-light">Atomic Broker</p>
-              <p class="fs-4 text-light">Matching catalyst materials with desired chemical conversions</p>
+          <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 
+                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>
+                and accompanied by an user interface that facilitates data exploration.</p>
+                <p class="fs-4 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
+                smart catalyst design. 
+              </p>
             </div>
           </div>
         </div> 
       </div>
     </div>
-<!-- <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
@@ -124,4 +148,4 @@ <h1>MathJax with Custom Colors Example</h1>
   });
 </script>
 </body>
-</html>
+</html>
diff --git a/navbar.html b/navbar.html
@@ -1,7 +1,6 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-navbardark">
+<nav class="navbar navbar-expand-sm 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">
+      <img src="/images/white_atom_logo_micro.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>
@@ -11,7 +10,7 @@
             <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">
+            <a class="nav-link dropdown-toggle fs-4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Publications
             </a>
             <ul class="dropdown-menu">

diff --git a/research.html b/research.html
@@ -3,9 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Research</title>
     <link href="/css/main.min.css" rel="stylesheet">
     <link href="/css/styles.css" rel="stylesheet">
+    <link rel="icon" href="/images/white_atom_logo_small.png" type="image/x-icon">
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   <!-- Include MathJax -->
   <script id="MathJax-script" async
@@ -27,10 +28,9 @@
   </head>
 <body class="bg-dark">
   <div class="container-fluid px-0" > 
-    <nav class="navbar navbar-expand-lg navbar-dark bg-navbardark">
+    <nav class="navbar navbar-expand-sm 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">
+      <img src="/images/white_atom_logo_micro.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>
@@ -40,7 +40,7 @@
             <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">
+            <a class="nav-link dropdown-toggle fs-4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Publications
             </a>
             <ul class="dropdown-menu">
@@ -107,7 +107,7 @@
     </div>
       <div class="col">
       <img src="/images/spans_bar_chart.png" class="img-fluid" alt="Spans Bar Chart">
-      <img src="/images/volvano.png" class="img-fluid" alt="Volcano Plot">
+      <img src="/images/volcano.png" class="img-fluid" alt="Volcano Plot">
     </div>
   </div>
 </body>
diff --git a/source/biography.html b/source/biography.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Bio</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>