Difference between revisions of "Team:Vilnius-Lithuania/Team"

Line 21: Line 21:
 
<body>
 
<body>
 
         <div class="introContainer">
 
         <div class="introContainer">
−
         <span id="introImage" style="background-image: unset"></span>
+
         <span id="introImage" style="background-image: unset">
 +
<video muted autoplay playsinline loop preload>
 +
<source src="https://static.igem.org/mediawiki/2020/0/03/T--Vilnius-Lithuania--Team.mp4" type="video/mp4">
 +
</video>
 +
</span>
 
         <div class="heading"><div>Who we</div><br> are.</div>
 
         <div class="heading"><div>Who we</div><br> are.</div>
 
         <div class="heading other"><div class="invisible">Who we</div><br> are.</div>
 
         <div class="heading other"><div class="invisible">Who we</div><br> are.</div>
Line 64: Line 68:
 
document.getElementById("fixedOverlay").classList.add("team");
 
document.getElementById("fixedOverlay").classList.add("team");
 
</script>
 
</script>
−
<script>
+
<script defer type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/Team&action=raw&ctype=text/javascript"></script>
−
let suggestClick = document.querySelector(".suggestClick");
+
−
let introContainer = document.querySelector(".introContainer");
+
−
 
+
−
let heading1 = document.querySelector(".introContainer .heading");
+
−
let heading2 = document.querySelector(".introContainer .heading.other");
+
−
 
+
−
function createADiv(className, innerHTML){
+
−
let newDiv = document.createElement("div");
+
−
newDiv.className = className;
+
−
newDiv.innerHTML = innerHTML;
+
−
return newDiv;
+
−
}
+
−
 
+
−
function showPersonInfo(personData) {
+
−
suggestClick.classList.add("hidden");
+
−
 
+
−
introImage.classList.add("novideo");
+
−
introVideoPlay.classList.add("novideo");
+
−
heading1.classList.add("novideo");
+
−
heading2.classList.add("novideo");
+
−
 
+
−
if (memberName.innerText.toUpperCase() == personData.name.toUpperCase()) return;
+
−
 
+
−
// Animation begin
+
−
let newImgDiv = document.createElement("div");
+
−
newImgDiv.style = (personData.bigImg == undefined) ? "background-image: unset" : "background-image: url('https://static.igem.org/mediawiki/2020/" + personData.bigImg + ".jpg');";
+
−
introImage.appendChild(newImgDiv);
+
−
 
+
−
let newMemberDiv = document.createElement("div");
+
−
newMemberDiv.classList.add("memberDiv", "alternative");
+
−
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.rel = "noreferrer noopener";
+
−
linkin.target = "_blank";
+
−
linkin.href = "https://www.linkedin.com/in/" + personData.linkedin;
+
−
newMemberName.appendChild(linkin);
+
−
}
+
−
newMemberDiv.appendChild(newMemberName);
+
−
let newMemberRole = createADiv("memberRole", personData.role);
+
−
newMemberDiv.appendChild(newMemberRole);
+
−
let newMemberQuestion = createADiv("memberQuestion", (personData.bigImg == undefined) ? "" : "What water creature are you?");
+
−
newMemberDiv.appendChild(newMemberQuestion);
+
−
let newMemberFunFact = createADiv("memberFunFact", personData.about);
+
−
newMemberDiv.appendChild(newMemberFunFact);
+
−
introContainer.appendChild(newMemberDiv);
+
−
 
+
−
setTimeout(()=>{
+
−
newImgDiv.classList.add("transition");
+
−
memberDiv.classList.add("transition");
+
−
newMemberDiv.classList.add("transition");
+
−
}, 10);
+
−
setTimeout(()=>{
+
−
introImage.style = (personData.bigImg == undefined) ? "background-image: unset" : "background-image: url('https://static.igem.org/mediawiki/2020/" + personData.bigImg + ".jpg');";
+
−
newImgDiv.remove();
+
−
+
−
memberDiv.classList.remove("transition");
+
−
memberRole.innerHTML = personData.role;
+
−
memberQuestion.innerText = (personData.bigImg == undefined) ? "" : "What water creature are you?";
+
−
memberFunFact.innerHTML = 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.rel = "noreferrer noopener";
+
−
linkin.target = "_blank";
+
−
linkin.href = "https://www.linkedin.com/in/" + personData.linkedin;
+
−
memberName.appendChild(linkin);
+
−
}
+
−
newMemberDiv.remove();
+
−
}, 400);
+
−
// Animation end;
+
−
}
+
−
 
+
−
function addPersonBubble(to, personData) {
+
−
let item = document.createElement("span");
+
−
item.style = "background-image: url('https://static.igem.org/mediawiki/2020/" + personData.img + ".png');";
+
−
item.onclick = () => showPersonInfo(personData);
+
−
to.appendChild(item);
+
−
}
+
−
let nullPerson = {
+
−
name: "",
+
−
img: undefined,
+
−
bigImg: undefined,
+
−
role: "",
+
−
about: "",
+
−
};
+
−
let team = [
+
−
{
+
−
name: "Auksė Kazlauskaitė",
+
−
img: "a/a5/T--Vilnius-Lithuania--team-small-Auksė",
+
−
bigImg: "7/74/T--Vilnius-Lithuania--team-big-Auksė",
+
−
role: "Wet Lab",
+
−
about: "<b>Fur seal.</b> As fur seal Aukse has a sharp eyesight and keen hearing. Furthermore, Auksė's kindness and helpfulness is a constant reminder of this animal's cuteness.",
+
−
linkedin: "aukse-kazlauskaite-5309281b8/",
+
−
},
+
−
{
+
−
name: "Austėja Sungailaitė",
+
−
img: "9/92/T--Vilnius-Lithuania--team-small-Austėja",
+
−
bigImg: "9/9e/T--Vilnius-Lithuania--team-big-Austėja",
+
−
role: "Wet Lab",
+
−
about: "<b>Sea turtle.</b> She spends most of her free time travelling.",
+
−
linkedin: "austėja-sungailaitė-b4a9981b9/",
+
−
},
+
−
{
+
−
name: "Edvinas Jurgelaitis",
+
−
img: "1/13/T--Vilnius-Lithuania--team-small-Edvinas",
+
−
bigImg: "0/03/T--Vilnius-Lithuania--team-big-Edvinas",
+
−
role: "Wet Lab",
+
−
about: "<b>Crucian carp.</b> Remarkably hardy and finds a way to breathe even when brought out of water.",
+
−
linkedin: "edvinas-jurgelaitis-263645194/",
+
−
},
+
−
{
+
−
name: "Eglė Vitkūnaitė",
+
−
img: "c/c1/T--Vilnius-Lithuania--team-small-Eglė",
+
−
bigImg: "a/a0/T--Vilnius-Lithuania--team-big-Eglė",
+
−
role: "Wet Lab",
+
−
about: "<b>False killer whale.</b> Social, extremely rare and always shares her findings and ideas with others.",
+
−
},
+
−
{
+
−
name: "Emilija Radlinskaitė",
+
−
img: "e/e5/T--Vilnius-Lithuania--team-small-Emilija",
+
−
bigImg: "d/d7/T--Vilnius-Lithuania--team-big-Emilija",
+
−
role: "Wet Lab",
+
−
about: "<b>North Pacific giant octopus.</b> Has eight hands to accomplish all the tasks and can rapidly adapt to the environment.",
+
−
linkedin: "emilija-radlinskaitė-51967717b/",
+
−
},
+
−
{
+
−
name: "Emilis Gaidauskas",
+
−
img: "a/a0/T--Vilnius-Lithuania--team-small-Emilis",
+
−
bigImg: "2/2a/T--Vilnius-Lithuania--team-big-Emilis",
+
−
role: "Wet Lab",
+
−
about: "<b>Siamese fighting fish.</b> Shows off his colors and flare in sharply written texts and fashion.",
+
−
linkedin: "emilis-gaidauskas-1a3088175/",
+
−
},
+
−
{
+
−
name: "Ieva Lingytė",
+
−
img: "2/23/T--Vilnius-Lithuania--team-small-Ieva",
+
−
bigImg: "6/69/T--Vilnius-Lithuania--team-big-Ieva",
+
−
role: "Team Leader & Wet Lab",
+
−
about: "<b>Axolotl.</b> Like an Axolotl regenerating limbs, she is capable of regenerating entire lost parts of the project without any visible scars.",
+
−
linkedin: "ieva-lingytė-54a133181/",
+
−
},
+
−
{
+
−
name: "Barbora Vasiliauskaitė",
+
−
img: "6/60/T--Vilnius-Lithuania--team-small-Barbora",
+
−
bigImg: "8/83/T--Vilnius-Lithuania--team-big-Barbora",
+
−
role: "Human Practices",
+
−
about: "<b>Sea otter.</b> She has mastered digital tools to open the shells of delicious looking editing. Needs to be protected at all costs.",
+
−
linkedin: "barbora-vasiliauskaite/",
+
−
},
+
−
{
+
−
name: "Kamilė Liucija Vainiūtė",
+
−
img: "a/a0/T--Vilnius-Lithuania--team-small-Kamilė",
+
−
bigImg: "7/7e/T--Vilnius-Lithuania--team-big-Kamilė",
+
−
role: "IT",
+
−
about: "<b>Black stingray.</b> 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/",
+
−
},
+
−
{
+
−
name: "Paulius Sasnauskas",
+
−
img: "e/e6/T--Vilnius-Lithuania--team-small-Paulius",
+
−
bigImg: "d/d0/T--Vilnius-Lithuania--team-big-Paulius",
+
−
role: "IT",
+
−
about: "<b>Emperor penguin.</b> Remains chill even in challenging conditions. Likes to slide on thin ice.",
+
−
linkedin: "pauliussasnauskas/",
+
−
},
+
−
{
+
−
name: "Liepa Šiupšinskaitė",
+
−
img: "c/c3/T--Vilnius-Lithuania--team-small-Liepa",
+
−
bigImg: "6/6e/T--Vilnius-Lithuania--team-big-Liepa",
+
−
role: "Graphic Design",
+
−
about: "<b>Parrotfish.</b> Just like a parrotfish, Liepa is not afraid to play with different colors, shapes and patterns and even completely switch them up if needed.",
+
−
linkedin: "liepa-siupsinskaite-56971a1b7/",
+
−
},
+
−
{
+
−
name: "Monika Gineitytė",
+
−
img: "f/f3/T--Vilnius-Lithuania--team-small-Monika",
+
−
bigImg: "5/54/T--Vilnius-Lithuania--team-big-Monika",
+
−
role: "Finances",
+
−
about: "<b>Blue tang.</b> May look relatively harmless, but when in need she can use her razor-sharp communication skills to persuade sponsors to fund the project.",
+
−
},
+
−
];
+
−
 
+
−
team.forEach((item) => addPersonBubble(bubbleList, item));
+
−
 
+
−
document.body.onload = () => {
+
−
introImage.innerHTML =
+
−
`<video muted autoplay playsinline loop preload>
+
−
<source src="https://static.igem.org/mediawiki/2020/0/03/T--Vilnius-Lithuania--Team.mp4" type="video/mp4">
+
−
</video>`; // TODO: change video
+
−
}
+
−
introVideoPlay.onclick = () => {
+
−
showPersonInfo(nullPerson);
+
−
heading1.classList.remove("novideo");
+
−
heading2.classList.remove("novideo");
+
−
introImage.classList.remove("novideo");
+
−
introVideoPlay.classList.remove("novideo");
+
−
introImage.firstElementChild.play();
+
−
}
+
−
 
+
−
function repositionSuggestion() {
+
−
let bleft = bubbleList.firstElementChild.getBoundingClientRect().left;
+
−
let bbottom = bubbleList.getBoundingClientRect().height;
+
−
if (bleft < 10) bleft = 10;
+
−
suggestClick.style.marginLeft = (bleft + 15) + "px";
+
−
suggestClick.style.bottom = (bbottom + 0) + "px";
+
−
}
+
−
window.addEventListener("resize", repositionSuggestion, { passive: 1 });
+
−
repositionSuggestion();
+
−
 
+
−
</script>
+
 
     <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/WaveScript&action=raw&ctype=text/javascript"></script>
 
     <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/WaveScript&action=raw&ctype=text/javascript"></script>
 
     <script>
 
     <script>

Revision as of 12:24, 21 October 2020

Loading...

Who we

are.

are.
Get to know the
team members
Meet our Instructors
Instructors
Denis Baronas
Adélie penguin. Laboris nisi ut aliquip ex ea commodo consequat.
Povilas Šėporaitis
Giant squid. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Attributions
of the team