From 469a98130a480a6f124f7aea65f074f6575a8639 Mon Sep 17 00:00:00 2001
From: Katie Spivakovsky <kspivakovsky@gmail.com>
Date: Thu, 10 Aug 2023 19:55:38 -0400
Subject: [PATCH] team photos
---
static/scripts/functions.js | 5 +-
static/style.css | 88 +++++++++++++++++++++++++++++----
wiki/pages/human-practices.html | 6 +--
wiki/pages/team.html | 72 +++++++++++++++++++++++++--
4 files changed, 152 insertions(+), 19 deletions(-)
diff --git a/static/scripts/functions.js b/static/scripts/functions.js
index 1e52f95..a49dd7a 100644
--- a/static/scripts/functions.js
+++ b/static/scripts/functions.js
@@ -73,8 +73,9 @@ function countTo(start, end, element, withPercent, intervalLength){
if (window.location.href.endsWith("mit/") || window.location.href.indexOf("index") > -1) {
const headerHeight = `${document.querySelector('#home-header-container').clientHeight + 120 + document.querySelector('#home-lead').clientHeight}`
console.log(headerHeight)
- document.querySelector('#home-header-container').style.height = '0'//`${headerHeight}`
- document.querySelector('#home-header').style.font_size = 'calc(2.5*(1.475rem + 2.7vw))'
+ document.querySelector('#home-header-container').style.height = headerHeight.toString()
+ document.querySelector('#home-header').style.fontSize = 'calc(2.5*(1.475rem + 2.7vw))'
+ document.querySelector('#home-header').style.color = 'transparent'
document.querySelector('#home-lead').style.color = '#fff'
setTimeout(function() {
diff --git a/static/style.css b/static/style.css
index deab376..4345820 100644
--- a/static/style.css
+++ b/static/style.css
@@ -51,15 +51,13 @@ h1, .gradient-header {
#home-header {
font-size: calc(3*(1.475rem + 2.7vw));
+ transition: font-size 1s ease-in-out 3s, color 0.4s ease-in-out;
+ color:#3f0766;
}
#home-lead {
color:rgba(255, 255, 255, 0);
- transition-property: color;
- transition-duration: 1s;
- transition-timing-function: ease-in-out;
- transition-delay: 1.2s;
- margin-left:2vw;
+ transition: color 1s ease-in-out 1.2s;
}
/* body */
@@ -83,10 +81,6 @@ body {
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }
-.shadowed {
- text-shadow: 1.7px 1.7px 1.7px #af465eab
-}
-
/* centering text */
.centered {
text-align:center
@@ -291,3 +285,79 @@ footer a:hover { color: white; text-decoration: underline; }
background-position: -200%;
animation: animated-gradient 2s infinite alternate-reverse;
}
+
+/* start team page card animation */
+.card-container {
+ perspective: 1000px;
+}
+.card-container:hover .card {
+ transform: rotateY(180deg);
+}
+.card-container, .front, .back {
+ width: 20vw;
+ height: 30vw;
+}
+.front, .back {
+ background: #ffffff00;
+}
+.card {
+ transition: 0.6s;
+ transform-style: preserve-3d;
+ position: relative;
+ justify-content:center;
+ align-content:center;
+}
+.front, .back {
+ backface-visibility: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.front {
+ z-index: 2;
+ transform: rotateY(0deg);
+}
+
+.back {
+ transform: rotateY(180deg);
+ align-content:center;
+ justify-content:center;
+}
+
+.profile-circle {
+ width: 20vw;
+ height: 20vw;
+ position:absolute;
+ -webkit-border-radius: 10vw;
+ -moz-border-radius: 10vw;
+ border-radius: 10vw;
+ color: transparent;
+ background-image: linear-gradient(to right ,#afa5cb, #cfaca5, #a5d7d9, #d6aea0, #ad9fd5);
+ background-size: 1000%;
+ background-position: -200%;
+ animation: animated-gradient 18s infinite alternate-reverse;
+ z-index:-1;
+}
+
+.profile-photo {
+ height: 20vw;
+ position:absolute;
+ -webkit-border-radius: 10vw;
+ -moz-border-radius: 10vw;
+ border-radius: 10vw;
+}
+
+.profile-caption {
+ position:relative;
+ margin-top:20vw;
+ justify-content:center;
+ text-align:center;
+}
+
+.profile-bio {
+ position:relative;
+ justify-content:center;
+ text-align:center;
+}
+
+/* end team page card animation */
diff --git a/wiki/pages/human-practices.html b/wiki/pages/human-practices.html
index aa46058..6b11e72 100644
--- a/wiki/pages/human-practices.html
+++ b/wiki/pages/human-practices.html
@@ -100,7 +100,7 @@
<h1>The Boston Mammalian Synthetic Biology Symposium</h1>
</div>
<p> On August 9th, our team presented a poster at da BOMB, more formally known
- as the Boston Mammalian Synthetic Biology Symposium. da BOMB is an annual conference held
+ as the Boston Mammalian Synthetic Biology Symposium. Da BOMB is an annual conference held
at MIT's Koch Institute for Integrative Cancer Research that attracts nearly 200 local researchers and industry professionals with years of experience in
synthetic biology. We had a wonderful time pitching our project and gaining
valuable feedback from experts along with listening to talks on genetic circuitry,
@@ -108,11 +108,11 @@
</p>
<row>
<div class="col-6">
- <embed src="https://static.igem.wiki/teams/4764/wiki/dabomb/poster.png" width='40vw'>
+ <img src="https://static.igem.wiki/teams/4764/wiki/dabomb/poster.png" width='95%'>
<figcaption style="font-size:0.9rem">Our poster for da BOMB.</figcaption>
</div>
<div class="col-6">
- <img src="https://static.igem.wiki/teams/4764/wiki/dabomb/dabomb.jpg" width='40vw'>
+ <img src="https://static.igem.wiki/teams/4764/wiki/dabomb/dabomb.png" width='95%'>
<figcaption style="font-size:0.9rem">Katie and Jeannie after a successful poster session!</figcaption>
</div>
</row>
diff --git a/wiki/pages/team.html b/wiki/pages/team.html
index dee55ab..474de7b 100644
--- a/wiki/pages/team.html
+++ b/wiki/pages/team.html
@@ -11,9 +11,46 @@
<p style="margin:auto;text-align:center">Hover over each member to read a short bio.</p>
<br>
<div class="d-flex flex-row justify-content-center mw-100" style="gap:50px">
- <img src="https://static.igem.wiki/teams/4764/wiki/team-photos/jeannie-dedeed.png" style="width:20%" onmouseover='imgHover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/jeannie-bio-test.png")' onmouseleave='imgUnhover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/jeannie-dedeed.png")'>
- <img src="https://static.igem.wiki/teams/4764/wiki/team-photos/allison-dedeed.png" style="width:20%" onmouseover='imgHover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/allison-bio-test.png")' onmouseleave='imgUnhover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/allison-dedeed.png")'>
- <img src="https://static.igem.wiki/teams/4764/wiki/team-photos/katie-dedeed.png" style="width:20%" onmouseover='imgHover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/katie-bio-test.png")' onmouseleave='imgUnhover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/katie-dedeed.png")'>
+ <div class="card-container">
+ <div class="card">
+ <div class="front">
+ <div class="profile-circle"></div>
+ <img class='profile-photo' src="https://static.igem.wiki/teams/4764/wiki/team-photos/jeannie.png">
+ <p class="profile-caption">Katie Spivakovsky</p>
+ </div>
+ <div class="back">
+ <p class="profile-bio">Jeannie is our fabulous Team Lead! She is a rising second-year majoring in Biological Engineering.</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="card-container">
+ <div class="card">
+ <div class="front">
+ <div class="profile-circle"></div>
+ <img class='profile-photo' src="https://static.igem.wiki/teams/4764/wiki/team-photos/katie.png">
+ <p class="profile-caption">Katie Spivakovsky</p>
+ </div>
+ <div class="back">
+ <p class="profile-bio">Katie is our amazing Experiment Lead! She is a rising second-year majoring in Biological Engineering.</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="card-container">
+ <div class="card">
+ <div class="front">
+ <div class="profile-circle"></div>
+ <img class='profile-photo' src="https://static.igem.wiki/teams/4764/wiki/team-photos/allison.png">
+ <p class="profile-caption">Allison Lin</p>
+ </div>
+ <div class="back">
+ <p class="profile-bio">Allison is our wonderful Human Practices Lead! She is a rising second-year majoring in Electrical Engineering and Computer Science.</p>
+ </div>
+ </div>
+ </div>
+
+
</div>
<hr>
@@ -25,8 +62,33 @@
<p style="margin:auto;text-align:center">Hover over each mentor to read a short bio.</p>
<br>
<div class="d-flex flex-row justify-content-center mw-100" style="gap:50px">
- <img src="https://static.igem.wiki/teams/4764/wiki/team-photos/amanda-dedeed.png" style="width:20%" onmouseover='imgHover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/amanda-bio.png")' onmouseleave='imgUnhover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/amanda-dedeed.png")'>
- <img src="https://static.igem.wiki/teams/4764/wiki/team-photos/ellie-dedeed.png" style="width:20%" onmouseover='imgHover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/ellie-bio.png")' onmouseleave='imgUnhover(this, "https://static.igem.wiki/teams/4764/wiki/team-photos/ellie-dedeed.png")'>
+ <div class="card-container">
+ <div class="card">
+ <div class="front">
+ <div class="profile-circle"></div>
+ <img class='profile-photo' src="https://static.igem.wiki/teams/4764/wiki/team-photos/amanda.png">
+ <p class="profile-caption">Amanda Mei</p>
+ </div>
+ <div class="back">
+ <p class="profile-bio">Amanda was on the 2022 iGEM team and now serves as
+ a mentor! She is a rising senior majoring in Biological Engineering.</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="card-container">
+ <div class="card">
+ <div class="front">
+ <div class="profile-circle"></div>
+ <img class='profile-photo' src="https://static.igem.wiki/teams/4764/wiki/team-photos/ellie.png">
+ <p class="profile-caption">Ellie Feng</p>
+ </div>
+ <div class="back">
+ <p class="profile-bio">Ellie was on the 2021 iGEM team and now serves as
+ a mentor! She is a rising senior majoring in Biological Engineering.</p>
+ </div>
+ </div>
+ </div>
</div>
<br>
--
GitLab