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

(Prototype team page)
 
Line 1: Line 1:
−
{{IGEM_TopBar}}
+
{{Vilnius-Lithuania/Loader}}
−
{{Vilnius-Lithuania}}
+
{{Vilnius-Lithuania/menuOverlay}}
 +
 
 
<html>
 
<html>
  
−
<div class="column two_thirds_size" >
+
<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>
  
−
<h1>Team</h1>
+
<body>
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
        <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");
  
−
<h3>What should this page contain?</h3>
+
let heading1 = document.querySelector(".introContainer .heading");
−
<ul>
+
let heading2 = document.querySelector(".introContainer .heading.other");
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
−
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
−
</ul>
+
  
−
<p><b>Important:</b> Your wiki pages will be archived at the end of the iGEM season and this content will remain online. Please keep this in mind as you post photos and personal information on this page.</p> 
+
function createADiv(className, innerHTML){
−
</div>
+
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>
  
−
<div class="column third_size" >
 
−
<div class="highlight decoration_A_full">
 
−
<h3>Inspiration</h3>
 
−
<p>You can look at what other teams did to get some inspiration! <br />
 
−
Here are a few examples:</p>
 
−
<ul>
 
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">2014 METU Turkey </a></li>
 
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">2014 Colombia</a></li>
 
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">2014 Stony Brook</a></li>
 
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">2014 OUC-China</a></li>
 
−
</ul>
 
−
</div>
 
−
</div>
 
 
</html>
 
</html>
 +
 +
{{Vilnius-Lithuania/footer}}

Revision as of 11:03, 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