m |
m |
||
Line 28: | Line 28: | ||
<div class="memberName" id="memberName"></div> | <div class="memberName" id="memberName"></div> | ||
<div class="memberRole" id="memberRole"></div> | <div class="memberRole" id="memberRole"></div> | ||
+ | <div class="memberQuestion" id="memberQuestion"></div> | ||
<div class="memberFunFact" id="memberFunFact"></div> | <div class="memberFunFact" id="memberFunFact"></div> | ||
</div> | </div> | ||
Line 77: | Line 78: | ||
let suggestClick = document.querySelector(".suggestClick"); | let suggestClick = document.querySelector(".suggestClick"); | ||
let introContainer = document.querySelector(".introContainer"); | let introContainer = document.querySelector(".introContainer"); | ||
+ | |||
+ | let heading1 = document.querySelector(".introContainer .heading"); | ||
+ | let heading2 = document.querySelector(".introContainer .heading.other"); | ||
function createADiv(className, innerHTML){ | function createADiv(className, innerHTML){ | ||
Line 90: | Line 94: | ||
introImage.classList.add("novideo"); | introImage.classList.add("novideo"); | ||
introVideoPlay.classList.add("novideo"); | introVideoPlay.classList.add("novideo"); | ||
+ | heading1.classList.add("novideo"); | ||
+ | heading2.classList.add("novideo"); | ||
if (memberName.innerText.toUpperCase() == personData.name.toUpperCase()) return; | if (memberName.innerText.toUpperCase() == personData.name.toUpperCase()) return; | ||
Line 100: | Line 106: | ||
let newMemberDiv = document.createElement("div"); | let newMemberDiv = document.createElement("div"); | ||
newMemberDiv.classList.add("memberDiv", "alternative"); | newMemberDiv.classList.add("memberDiv", "alternative"); | ||
− | let newMemberName = createADiv("memberName", personData.name); | + | let newMemberName = createADiv("memberName", ""); |
+ | personData.name.split(" ").forEach((word)=>{ | ||
+ | let wordSpan = document.createElement("span"); | ||
+ | wordSpan.innerText = word; | ||
+ | newMemberName.appendChild(wordSpan); | ||
+ | }); | ||
+ | if (personData.linkedin != undefined){ | ||
+ | let linkin = document.createElement("a"); | ||
+ | linkin.href = "https://www.linkedin.com/in/" + personData.linkedin; | ||
+ | newMemberName.appendChild(linkin); | ||
+ | } | ||
newMemberDiv.appendChild(newMemberName); | newMemberDiv.appendChild(newMemberName); | ||
let newMemberRole = createADiv("memberRole", personData.role); | let newMemberRole = createADiv("memberRole", personData.role); | ||
newMemberDiv.appendChild(newMemberRole); | newMemberDiv.appendChild(newMemberRole); | ||
+ | let newMemberQuestion = createADiv("memberQuestion", (personData.bigImg == undefined) ? "" : "What water creature are you?"); | ||
+ | newMemberDiv.appendChild(newMemberQuestion); | ||
let newMemberFunFact = createADiv("memberFunFact", personData.about); | let newMemberFunFact = createADiv("memberFunFact", personData.about); | ||
newMemberDiv.appendChild(newMemberFunFact); | newMemberDiv.appendChild(newMemberFunFact); | ||
Line 118: | Line 136: | ||
memberDiv.classList.remove("transition"); | memberDiv.classList.remove("transition"); | ||
− | |||
memberRole.innerHTML = personData.role; | memberRole.innerHTML = personData.role; | ||
+ | memberQuestion.innerText = (personData.bigImg == undefined) ? "" : "What water creature are you?"; | ||
memberFunFact.innerText = personData.about; | memberFunFact.innerText = personData.about; | ||
+ | memberName.innerHTML = ""; | ||
+ | personData.name.split(" ").forEach((word)=>{ | ||
+ | let wordSpan = document.createElement("span"); | ||
+ | wordSpan.innerText = word; | ||
+ | memberName.appendChild(wordSpan); | ||
+ | }); | ||
+ | if (personData.linkedin != undefined){ | ||
+ | let linkin = document.createElement("a"); | ||
+ | linkin.href = "https://www.linkedin.com/in/" + personData.linkedin; | ||
+ | memberName.appendChild(linkin); | ||
+ | } | ||
newMemberDiv.remove(); | newMemberDiv.remove(); | ||
}, 400); | }, 400); | ||
Line 141: | Line 170: | ||
let team = [ | let team = [ | ||
{ | { | ||
− | name: "Liepa | + | name: "Liepa Šiupšinskaitė", |
img: "c/c3/T--Vilnius-Lithuania--team-small-Liepa", | img: "c/c3/T--Vilnius-Lithuania--team-small-Liepa", | ||
bigImg: "6/6e/T--Vilnius-Lithuania--team-big-Liepa", | bigImg: "6/6e/T--Vilnius-Lithuania--team-big-Liepa", | ||
− | role: "Design", | + | role: "Graphic Design", |
about: "Parrotfish. Just like a parrotfish, Liepa is not afraid to play with different colors, shapes and patterns and even completely switch them up if needed.", | about: "Parrotfish. Just like a parrotfish, Liepa is not afraid to play with different colors, shapes and patterns and even completely switch them up if needed.", | ||
}, | }, | ||
Line 181: | Line 210: | ||
role: "Wet Lab", | role: "Wet Lab", | ||
about: "North Pacific giant octopus. Has eight hands to accomplish all the tasks and can rapidly adapt to the environment.", | about: "North Pacific giant octopus. Has eight hands to accomplish all the tasks and can rapidly adapt to the environment.", | ||
+ | linkedin: "emilija-radlinskaitė-51967717b/", | ||
}, | }, | ||
{ | { | ||
Line 193: | Line 223: | ||
img: "2/23/T--Vilnius-Lithuania--team-small-Ieva", | img: "2/23/T--Vilnius-Lithuania--team-small-Ieva", | ||
bigImg: "6/69/T--Vilnius-Lithuania--team-big-Ieva", | bigImg: "6/69/T--Vilnius-Lithuania--team-big-Ieva", | ||
− | role: "Wet Lab", | + | role: "Team Leader & Wet Lab", |
about: "Axolotl. Like an Axolotl regenerating limbs, she is capable of regenerating entire lost parts of the project without any visible scars.", | about: "Axolotl. Like an Axolotl regenerating limbs, she is capable of regenerating entire lost parts of the project without any visible scars.", | ||
+ | linkedin: "ieva-lingytė-54a133181/", | ||
}, | }, | ||
{ | { | ||
Line 209: | Line 240: | ||
role: "IT", | role: "IT", | ||
about: "Black stingray. She is able to enclasp an impressive amount of knowledge and projects in a limited amount of time. If necessary, Kamilė will sting an incorrect part of the code with impeccable accuracy.", | about: "Black stingray. She is able to enclasp an impressive amount of knowledge and projects in a limited amount of time. If necessary, Kamilė will sting an incorrect part of the code with impeccable accuracy.", | ||
+ | linkedin: "kamilė-vainiūtė-b29845159/", | ||
}, | }, | ||
{ | { | ||
Line 221: | Line 253: | ||
img: "f/f3/T--Vilnius-Lithuania--team-small-Monika", | img: "f/f3/T--Vilnius-Lithuania--team-small-Monika", | ||
bigImg: "5/54/T--Vilnius-Lithuania--team-big-Monika", | bigImg: "5/54/T--Vilnius-Lithuania--team-big-Monika", | ||
− | role: " | + | role: "Finances", |
about: "Blue tang. May look relatively harmless, but when in need she can use her razor-sharp communication skills to persuade sponsors to fund the project.", | about: "Blue tang. May look relatively harmless, but when in need she can use her razor-sharp communication skills to persuade sponsors to fund the project.", | ||
}, | }, | ||
Line 231: | Line 263: | ||
introImage.innerHTML = | introImage.innerHTML = | ||
`<video muted autoplay playsinline loop preload> | `<video muted autoplay playsinline loop preload> | ||
− | <source src="https:// | + | <source src="https://srv-file6.gofile.io/downloadStore/srv-store2/Gt4x8C/test-video.mp4" type="video/mp4"> |
− | + | ||
</video>`; // TODO: change video | </video>`; // TODO: change video | ||
+ | // <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm"> | ||
} | } | ||
introVideoPlay.onclick = () => { | introVideoPlay.onclick = () => { | ||
showPersonInfo(nullPerson); | showPersonInfo(nullPerson); | ||
+ | heading1.classList.remove("novideo"); | ||
+ | heading2.classList.remove("novideo"); | ||
introImage.classList.remove("novideo"); | introImage.classList.remove("novideo"); | ||
introVideoPlay.classList.remove("novideo"); | introVideoPlay.classList.remove("novideo"); | ||
Line 243: | Line 278: | ||
function repositionSuggestion() { | function repositionSuggestion() { | ||
− | let | + | let bleft = bubbleList.firstElementChild.getBoundingClientRect().left; |
− | if ( | + | let bbottom = bubbleList.getBoundingClientRect().height; |
− | suggestClick.style.marginLeft = ( | + | if (bleft < 10) bleft = 10; |
+ | suggestClick.style.marginLeft = (bleft + 15) + "px"; | ||
+ | suggestClick.style.bottom = (bbottom + 0) + "px"; | ||
} | } | ||
window.addEventListener("resize", repositionSuggestion, { passive: 1 }); | window.addEventListener("resize", repositionSuggestion, { passive: 1 }); |
Revision as of 20:01, 21 September 2020
Who we
are.
Who we
are.
Get to know the
team members
team members
Meet our Instructors
Instructors
![](https://static.igem.org/mediawiki/2019/0/09/T--Vilnius-Lithuania--Denis.jpg)
Denis Baronas
Adélie penguin. Laboris nisi ut aliquip ex ea commodo consequat.
![](https://static.igem.org/mediawiki/2019/e/e2/T--Vilnius-Lithuania--Povilas.jpg)
Povilas Šėporaitis
Giant squid. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
![](https://static.igem.org/mediawiki/2019/e/ef/T--Vilnius-Lithuania--Ruta.jpg)
Rūta Matulevičiūtė
Sea bass. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
![](https://static.igem.org/mediawiki/2019/0/01/T--Vilnius-Lithuania--Vale.jpg)
Valentas Brasas
Pond turtle. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
of the team