(Prototype team page) |
|||
Line 1: | Line 1: | ||
− | {{ | + | {{Vilnius-Lithuania/Loader}} |
− | {{Vilnius-Lithuania}} | + | {{Vilnius-Lithuania/menuOverlay}} |
+ | |||
<html> | <html> | ||
− | < | + | <head> |
+ | <meta charset="utf-8"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
+ | <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/CSS/ContentPage&action=raw&ctype=text/css" /> | ||
+ | <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/CSS/Team&action=raw&ctype=text/css" /> | ||
+ | <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/fonts.css&action=raw&ctype=text/css" /> | ||
+ | <link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/CSS/Animations&action=raw&ctype=text/css" /> | ||
+ | <style> | ||
+ | #footerWrapper { | ||
+ | margin-top: -2px; | ||
+ | position: relative; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
− | < | + | <body> |
− | < | + | <div class="introContainer"> |
+ | <span id="introImage" style="background-image: unset"></span> | ||
+ | <div class="heading"><div>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> | ||
+ | <div class="memberDiv" id="memberDiv"> | ||
+ | <div class="memberName" id="memberName"></div> | ||
+ | <div class="memberRole" id="memberRole"></div> | ||
+ | <div class="memberQuestion" id="memberQuestion"></div> | ||
+ | <div class="memberFunFact" id="memberFunFact"></div> | ||
+ | </div> | ||
+ | <div id="bubbleList" class="bubbleList"></div> | ||
+ | <div class="suggestClick"><span>Get to know the<br>team members</span></div> | ||
+ | |||
+ | </div> | ||
+ | <div class="milkWave" id="animWave"> | ||
+ | <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> | ||
+ | <path class="animWavePath" d="" fill="#fafafc"/> | ||
+ | </svg> | ||
+ | </div> | ||
+ | <main class="elevate-navbar"> | ||
+ | <div class="heading2">Meet our Instructors</div> | ||
+ | <div class="heading2 other">Instructors</div> | ||
+ | <div class="instructorList"> | ||
+ | <div class="instructor"> | ||
+ | <img src="https://static.igem.org/mediawiki/2020/f/f4/T--Vilnius-Lithuania--team-small-Denis.png"> | ||
+ | <!-- <div class="filter"></div> --> | ||
+ | <div class="instructorName"><span>Denis Baronas</span></div> | ||
+ | <div class="instructorAbout">Adélie penguin. Laboris nisi ut aliquip ex ea commodo consequat.</div> | ||
+ | </div> | ||
+ | <div class="instructor"> | ||
+ | <img src="https://static.igem.org/mediawiki/2020/9/92/T--Vilnius-Lithuania--team-small-Povilas.png"> | ||
+ | <!-- <div class="filter"></div> --> | ||
+ | <div class="instructorName"><span>Povilas Šėporaitis</span></div> | ||
+ | <div class="instructorAbout">Giant squid. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> | ||
+ | </div> | ||
+ | <a href="./Attributions" class="arrowMore"> | ||
+ | <span>Attributions<br>of the team</span> | ||
+ | </a> | ||
+ | </div> | ||
+ | </main><script> | ||
+ | document.getElementById("fixedOverlay").classList.add("team"); | ||
+ | </script> | ||
+ | <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> | ||
+ | var setWaveParams = () => { | ||
+ | let container = document.getElementById("animWave"); | ||
+ | return { | ||
+ | width: container.offsetWidth, | ||
+ | height: container.offsetHeight, | ||
+ | waveWidth: container.offsetWidth, | ||
+ | waveHeight: window.innerHeight * 0.98, | ||
+ | waveDelta: 15, | ||
+ | speed: 0.15, | ||
+ | wavePoints: 5, | ||
+ | }; | ||
+ | } | ||
+ | makeWave(document.getElementById("animWave"), setWaveParams); | ||
+ | </script> | ||
+ | |||
+ | <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Vilnius-Lithuania/JS/ScrollFadeIn&action=raw&ctype=text/javascript"></script> | ||
+ | <script> | ||
+ | scrollFadeIn([ | ||
+ | document.querySelector(".heading2"), | ||
+ | document.querySelector(".heading2.other"), | ||
+ | Array.from(document.querySelector(".instructorList").children), | ||
+ | ]); | ||
+ | </script> | ||
+ | |||
+ | </body> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</html> | </html> | ||
+ | |||
+ | {{Vilnius-Lithuania/footer}} |
Revision as of 11:03, 21 October 2020
![](https://static.igem.org/mediawiki/2020/e/e6/T--Vilnius-Lithuania--loader.gif)
Loading...
Who we
are.
Who we
are.
Get to know the
team members
team members
Meet our Instructors
Instructors
![](https://static.igem.org/mediawiki/2020/f/f4/T--Vilnius-Lithuania--team-small-Denis.png)
Denis Baronas
Adélie penguin. Laboris nisi ut aliquip ex ea commodo consequat.
![](https://static.igem.org/mediawiki/2020/9/92/T--Vilnius-Lithuania--team-small-Povilas.png)
Povilas Šėporaitis
Giant squid. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
of the team