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

m
 
(6 intermediate revisions by 2 users not shown)
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>
  
 
         <button id="introVideoPlay" class="introVideoPlay"></button>
 
         <button id="introVideoPlay" class="introVideoPlay"></button>
−
         <div class="memberDiv" id="memberDiv">
+
         <div class="memberDiv elevate-navbar" id="memberDiv">
 
             <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="memberStudy" id="memberStudy"></div>
 
             <div class="memberQuestion" id="memberQuestion"></div>
 
             <div class="memberQuestion" id="memberQuestion"></div>
 
             <div class="memberFunFact" id="memberFunFact"></div>
 
             <div class="memberFunFact" id="memberFunFact"></div>
Line 41: Line 46:
 
         </svg>
 
         </svg>
 
     </div>
 
     </div>
−
     <main class="elevate-navbar">
+
     <main>
 
         <div class="heading2">Meet our Instructors</div>
 
         <div class="heading2">Meet our Instructors</div>
 
         <div class="heading2 other">Instructors</div>
 
         <div class="heading2 other">Instructors</div>
Line 48: Line 53:
 
                 <img src="https://static.igem.org/mediawiki/2020/f/f4/T--Vilnius-Lithuania--team-small-Denis.png">
 
                 <img src="https://static.igem.org/mediawiki/2020/f/f4/T--Vilnius-Lithuania--team-small-Denis.png">
 
                 <!-- <div class="filter"></div> -->
 
                 <!-- <div class="filter"></div> -->
−
                 <div class="instructorName"><span>Denis Baronas</span></div>
+
                 <div class="instructorName"><span style="display:flex;align-items:center;">Denis Baronas<a rel="noreferrer noopener" target="_blank" href="https://www.linkedin.com/in/denis-baronas-a54431201/" style="outline: none;"></a></span></div>
−
                 <div class="instructorAbout">Adélie penguin. Laboris nisi ut aliquip ex ea commodo consequat.</div>
+
                 <div class="instructorAbout"><b>Adélie penguin.</b> Just like this bird, Denis might look harmless and adorable, but do not get fooled, he is feisty and will fight for what is important and defend his opinion.</div>
 
             </div>
 
             </div>
 
             <div class="instructor">
 
             <div class="instructor">
Line 55: Line 60:
 
                 <!-- <div class="filter"></div> -->
 
                 <!-- <div class="filter"></div> -->
 
                 <div class="instructorName"><span>Povilas Šėporaitis</span></div>
 
                 <div class="instructorName"><span>Povilas Šėporaitis</span></div>
−
                 <div class="instructorAbout">Giant squid. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+
                 <div class="instructorAbout"><b>Bigfin squid.</b> Very rare and unique, just like the Bigfin squid, Povilas is extremely wise, has perfect British accent, and his intelligence surprises even professors.</div>
 
             </div>
 
             </div>
 
             <a href="./Attributions" class="arrowMore">
 
             <a href="./Attributions" class="arrowMore">
Line 64: Line 69:
 
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>
Line 294: Line 78:
 
                 height: container.offsetHeight,
 
                 height: container.offsetHeight,
 
                 waveWidth: container.offsetWidth,
 
                 waveWidth: container.offsetWidth,
−
                 waveHeight: window.innerHeight * 0.98,
+
                 waveHeight: window.innerHeight * 0.99,
 
                 waveDelta: 15,
 
                 waveDelta: 15,
 
                 speed: 0.15,
 
                 speed: 0.15,

Latest revision as of 08:57, 18 December 2020

Loading...

Who we

are.

are.
Get to know the
team members
Meet our Instructors
Instructors
Denis Baronas
Adélie penguin. Just like this bird, Denis might look harmless and adorable, but do not get fooled, he is feisty and will fight for what is important and defend his opinion.
Povilas Šėporaitis
Bigfin squid. Very rare and unique, just like the Bigfin squid, Povilas is extremely wise, has perfect British accent, and his intelligence surprises even professors.
Attributions
of the team