index.qmd

---
page-layout: custom
execute:
  echo: false
  output: false
---
<div class="banner-container">
 <img class="banner-image" src="images/leaves-dark4.png" alt="Green leaves"/>
 <div class="left-banner-box">
 <p class="custom-h1-light" style="margin-bottom: 0px">Elke Windschitl</p>
 <p class="custom-h2-light" style="font-size: 26px; font-weight: 200;">Environmental Data Scientist</p>
 </div>
 <img src="images/circle-headshot.png" class="banner-headshot" alt="Elke Windschitl" id="enlargeImage" />
 <div class="right-banner-box">
 <img class="right-box-img" src="images/rect3.png" alt="Icons of graphs and charts"/>
 </div>
</div>
<div class="clearfix"></div> <!-- Add this clearfix element -->

<!-- Modal -->
<div id="imageModal" class="modal">
  <span id="closeModal" class="close">×</span>
  <img id="modalImage" class="modal-content" alt="Enlarged Image">
</div>
<div class="gray-placeholder">
</div>

<!-- create custom layout for page -->
::::: {.grid}
<!-- left pad -->
::: {.g-col-2}
:::
<!-- middle content -->
::: {.g-col-8}
<p class="custom-h2-light" style="color: gray; text-align: center;">![](images/Hand.png){width="24"} Welcome!</p>

<p class="custom-p-light" style="color: gray"> A little bit about me: I recently earned a Master of Environmental Data Science degree from the [Bren School of Environmental Science & Management](https://bren.ucsb.edu/masters-programs/master-environmental-data-science) at the University of California, Santa Barbara. I am passionate about conservation, and I hope to build a career using data science tools to solve environmental problems. Learn more and read my full bio on my [About Me page](https://elkewind.github.io/about.html).</p>

<!-- subgrid -->
::: {.grid}
::: {.g-col-12 .g-col-md-7}
::: {.teal-bg}
<p class="custom-h2-light" style="text-align: center;">![](images/Book.png){width="32"} Education</p>

<p class="custom-h4-light">Master of Environmental Data Science</p>

<p class="custom-p-light" style="margin-top: 0px;">University of California, Santa Barbara \| June 2023</p>

<p class="custom-h4-light">Bachelor of Science in Biology with Honors</p>

<p class="custom-p-light">Iowa State University \| May 2020</p>
:::
<div class="button-container">
  <a href="https://github.com/elkewind" class="light-teal-button">GitHub</a>
  <a href="https://twitter.com/Elke_Windschitl" class="light-teal-button">Twitter</a>
  <a href="https://www.linkedin.com/in/elke-windschitl/" class="light-teal-button">LinkedIn</a>
</div>
:::
::: {.g-col-12 .g-col-md-5}
::: {.teal-bg}
<p class="custom-h2-light" style="text-align: center;">![](images/magnifying-glass.png){width="32"} My Interests</p>

<p class="custom-p-light" style="font-size: 24px;">Spatial Data Science \| Data Visualization</p>

<p class="custom-p-light" style="font-size: 20px;">Analytics \| Renewable Resources \| Sustainable Food Systems</p>

<p class="custom-p-light" style="font-size: 16px;">Ecology \| Biodiversity \| Climate Solutions \| Environmental Justice \| Environmental Art</p>
:::
:::
::: 
<!-- end middle content -->
:::
<!-- right pad -->
::: {.g-col-2}
:::
<br></br> 
<!-- end custom layout for page -->
:::::
<!-- Image footer at bottom -->
:::{.footer-container}
<img src="images/footer.png" class="custom-footer" alt="A banner showing mountains, trees, waves."/> 
:::

```{ojs style="display: none;"}
//| echo: false
//| output: false
setTimeout(function () {
  document.querySelector('.left-banner-box').classList.add('slide-in');
  document.querySelector('.right-banner-box').classList.add('slide-in');
}, 300); // Adjust the delay (in milliseconds) as needed

modal = {
  const modal = document.getElementById("imageModal");
  const modalImage = document.getElementById("modalImage");
  const closeBtn = document.getElementById("closeModal");
  const image = document.getElementById("enlargeImage");

// Function to open the modal (only for desktop)
image.onclick = function () {
  if (window.innerWidth >= 768) { // Check if the screen width is greater than or equal to 768px
    modal.style.display = "block";
    modalImage.src = this.src; // Set the source of the enlarged image
  }
};

// Function to close the modal
closeBtn.onclick = function () {
  modal.style.display = "none";
};

window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};
}
```