gallery.old

---
layout: page
title: Gallery
---

<div class="gallery-page">

<p>
Photographs from the Birol Labs over the years, including lab gatherings, conferences, workshops, and other memorable moments.
</p>

<style>
.gallery-page .gallery-section {
    margin: 2.5rem 0;
}

.gallery-page .gallery-section h3 {
    margin-bottom: 1.2rem;
    text-align: center;
}

.gallery-page .gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    justify-items: center;
}

.gallery-page .gallery figure {
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    transition: transform 0.25s ease;
}

.gallery-page .gallery a {
    display: block;
    cursor: zoom-in;
    text-decoration: none;
}

.gallery-page .gallery figure img {
    width: 100%;
    max-width: 650px;
    height: auto;
    display: block;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.gallery-page .gallery figure:hover {
    transform: translateY(-4px);
}

.gallery-page .gallery figure:hover img {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    border-color: #bbb;
}

.gallery-page .gallery figcaption {
    margin-top: 0.6rem;
    text-align: center;
    font-size: 0.9em;
    color: #666;
    transition: color 0.25s ease;
}

.gallery-page .gallery figure:hover figcaption {
    color: #222;
}

/* Nice keyboard accessibility */
.gallery-page .gallery a:focus img {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,120,255,0.35);
}
</style>

<!-- ===================== -->
<!-- LAB GROUP SECTION -->
<!-- ===================== -->

<div class="gallery-section">

<h3>Lab Group &amp; Social Events</h3>

<div class="gallery">

<figure>
<a href="/assets/gallery/2022-lab-group.png">
<img src="/assets/gallery/2022-lab-group.png" alt="Lab Group 2022">
</a>
<figcaption>Lab Members &bull; May 2022</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2019-lab-group-fall.jpg">
<img src="/assets/gallery/2019-lab-group-fall.jpg" alt="Lab Group 2019">
</a>
<figcaption>Lab Members &bull; October 2019</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2019-lab-group.jpg">
<img src="/assets/gallery/2019-lab-group.jpg" alt="Lab Group 2019">
</a>
<figcaption>Lab Members &bull; February 2019</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2022-lab-social1.jpg">
<img src="/assets/gallery/2022-lab-social1.jpg" alt="Lab Social">
</a>
<figcaption>Social &bull; January 2022</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2022-lab-social2.jpg">
<img src="/assets/gallery/2022-lab-social2.jpg" alt="Lab Social">
</a>
<figcaption>Social &bull; September 2022</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2019-lab-visit.jpg">
<img src="/assets/gallery/2019-lab-visit.jpg" alt="Lab Visit">
</a>
<figcaption>Lab Visit &bull; March 2019</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2018-lab-hike.jpg">
<img src="/assets/gallery/2018-lab-hike.jpg" alt="Lab Hike">
</a>
<figcaption>Eagle Bluffs Hike (BC) &bull; July 2018</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2017-lab-social.jpg">
<img src="/assets/gallery/2017-lab-social.jpg" alt="Lab Social">
</a>
<figcaption>Social &bull; May 2017</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2015-lab-social.jpg">
<img src="/assets/gallery/2015-lab-social.jpg" alt="Lab Social">
</a>
<figcaption>Social &bull; June 2015</figcaption>
</figure>

</div>
</div>

<!-- ===================== -->
<!-- CONFERENCES SECTION -->
<!-- ===================== -->

<div class="gallery-section">

<h3>Conferences &amp; Workshops</h3>

<div class="gallery">

<figure>
<a href="/assets/gallery/2023-recomb-istanbul.jpg">
<img src="/assets/gallery/2023-recomb-istanbul.jpg" alt="RECOMB 2023">
</a>
<figcaption>RECOMB &bull; Istanbul, Türkiye (2023)</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2023-recombseq-istanbul.jpg">
<img src="/assets/gallery/2023-recombseq-istanbul.jpg" alt="RECOMB-Seq 2023">
</a>
<figcaption>RECOMB-Seq &bull; Istanbul, Türkiye (2023)</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2018-recomb-france.jpg">
<img src="/assets/gallery/2018-recomb-france.jpg" alt="RECOMB 2018">
</a>
<figcaption>RECOMB &bull; Paris, France (2018)</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2018-recomb-france-social1.jpg">
<img src="/assets/gallery/2018-recomb-france-social1.jpg" alt="RECOMB Social">
</a>
<figcaption>RECOMB Social &bull; Paris, France (2018)</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2018-recomb-france-social2.jpg">
<img src="/assets/gallery/2018-recomb-france-social2.jpg" alt="RECOMB Social">
</a>
<figcaption>RECOMB Social &bull; Paris, France (2018)</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2017-recombseq-hongkong.jpg">
<img src="/assets/gallery/2017-recombseq-hongkong.jpg" alt="RECOMB-Seq 2017">
</a>
<figcaption>RECOMB-Seq &bull; Hong Kong (2017)</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2015-ISMB-dublin.jpg">
<img src="/assets/gallery/2015-ISMB-dublin.jpg" alt="ISMB 2015">
</a>
<figcaption>ISMB &bull; Dublin, Ireland (2015)</figcaption>
</figure>

<figure>
<a href="/assets/gallery/2015-ISMBhitseq-dublin.jpg">
<img src="/assets/gallery/2015-ISMBhitseq-dublin.jpg" alt="HiTSeq Workshop">
</a>
<figcaption>HiTSeq Workshop &bull; ISMB 2015, Dublin</figcaption>
</figure>

</div>
</div>

</div>