Skip to content

Commit

Permalink
mobile screens update
Browse files Browse the repository at this point in the history
  • Loading branch information
@cote3804
cote3804 committed Aug 18, 2024
1 parent 93ab7fd commit 7dc031f
Show file tree
Hide file tree
Showing 21 changed files with 423 additions and 116 deletions.
42 changes: 18 additions & 24 deletions bootstrap-portfolio/biography.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,19 @@
</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>
<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" 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">
Expand All @@ -35,9 +34,9 @@
<li class="nav-item">
<a class="nav-link fs-4" href="research.html">Research</a>
</li>
<li class="nav-item">
<!-- <li class="nav-item">
<a class="nav-link fs-4" href="biography.html">Bio</a>
</li>
</li> -->
</ul>
</div>
</div>
Expand All @@ -50,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>
38 changes: 37 additions & 1 deletion bootstrap-portfolio/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Binary file added bootstrap-portfolio/images/bitmap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added bootstrap-portfolio/images/cone_of_complexity.webp
View file
Binary file not shown.
Binary file added bootstrap-portfolio/images/email_iocn.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added bootstrap-portfolio/images/github-logo-white.webp
View file
Binary file not shown.
Binary file added bootstrap-portfolio/images/linkedin-app-white-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added bootstrap-portfolio/images/linkedin-app-white-icon.webp
View file
Binary file not shown.
Binary file added bootstrap-portfolio/images/scholar_logo_white.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added bootstrap-portfolio/images/surface_transparent_zoomed_out.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added bootstrap-portfolio/images/volcano.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added bootstrap-portfolio/images/white_atom_logo_micro.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
148 changes: 126 additions & 22 deletions bootstrap-portfolio/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,27 @@
<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>
<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" 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">
Expand All @@ -38,46 +38,139 @@
<li class="nav-item">
<a class="nav-link fs-4" href="research.html">Research</a>
</li>
<li class="nav-item">
<!-- <li class="nav-item">
<a class="nav-link fs-4" href="biography.html">Bio</a>
</li>
</li> -->
</ul>
</div>
</div>
</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="d-none d-md-block container-fluid d-flex flex-column custom-vh-75 z-2 position-relative text-center"> <!-- All large screen stuff -->
<div class="row flex-grow-1"> <!-- Title and other info -->
<div class="col-4 align-self-center">
<!-- <div class="col-1"></div> -->
<div class="col-3 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>
<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="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" 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" target="_blank">
<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-8 align-self-center">
<div class="col-1"></div>
<div class="col-7 align-self-start">
<div class="container">
<div class="row flex-grow-1 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-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>
and accompanied by an user interface that facilitates data exploration.</p>
<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 manipulated with
smart catalyst design.
</p>
</div>
</div>
</div>
</div>
</div>

</div>
<div class="d-block d-md-none container-flui d-flex flex-column custom-vh-75 z-2 position-relative text-center"> <!-- All small screen stuff -->
<div class="row align-center py-4">
<!-- <div class="col-2"></div> -->
<div class="col-8 offset-2">
<img src="/images/headshot_atoms_circle.png", class="image-fluid", style="max-width: 80%;">
</div>
<p class="fs-2 text-light">PhD Student, CU Boulder</p>
<p class="fs-2 text-light">Atomic Broker</p>
</div>
<div class="row align-center py-2">
<div class="col-2"></div>
<div class="col-2">
<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" 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" target="_blank">
<img src="/images/scholar_logo_white.png" class="img-fluid" alt="GitHub">
</a>
</div>
<div class="col-2">
<a href="mailto:[email protected]" class="text-light" target="_blank">
<img src="/images/email_iocn.png" class="img-fluid" alt="GitHub">
</a>
</div>
<div class="col-2"></div>
</div>
<div class="row py-2">
<div class="col px-5">
<p class="fs-2 fw-bold text-center text-light">Matching catalysts with reactions through simulation</p>
<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>
and accompanied by an user interface that facilitates data exploration.</p>
<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 manipulated with
smart catalyst design.
</p>
</div>
</div>
</div>
<script>
// Configure MathJax
window.MathJax = {
Expand Down Expand Up @@ -106,5 +199,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>
13 changes: 6 additions & 7 deletions bootstrap-portfolio/navbar.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
<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>
<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" 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">
Expand All @@ -23,9 +22,9 @@
<li class="nav-item">
<a class="nav-link fs-4" href="research.html">Research</a>
</li>
<li class="nav-item">
<!-- <li class="nav-item">
<a class="nav-link fs-4" href="biography.html">Bio</a>
</li>
</li> -->
</ul>
</div>
</div>
Expand Down
11 changes: 11 additions & 0 deletions bootstrap-portfolio/navbar_js.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 7dc031f

Please sign in to comment.