index.html

---
layout: default
title: Home
notitle: true

# groups of columns of {roles: list, width: num, image: bool}
role-tables:
- - roles: [faculty, master]
    width: 4
    image: true
  - roles: [postdoc, ugrad]
    width: 4
    image: true
  - roles: [collab]
    width: 4
    image: false
- - roles: [ugrad-alum]
    width: 8
    image: false
  - roles: [master-alum, phd-alum]
    width: 4
    image: false

---
<link rel="stylesheet" type="text/css" href="css/slide.css">
<div class="jumbotron">
    <p>
        <span style="font-size: larger; font-weight: bold;">We are recruiting!!!</span> We have a new open position for an Assistant Professor in Los Andes University department of Systems Engineering and Computing and as part of the IMAGINE research group. We are seeking for talented
        researchers in areas like visual computing, interaction or mixed realities. For more information, click <a href="https://sistemas.uniandes.edu.co/es/departamento/trabaje-con-nosotros">here</a>
    </p>
</div>
<div class="jumbotron">
    <p>
        IMAGINE is a Visual Computing research group at <a href="http://www.uniandes.edu.co">Los Andes University</a> in the <a href="http://sistemas.uniandes.edu.co">Systems &amp; Computing Engineering</a> department. 
        The group develops research and innovation with knowledge-based image processing, computer graphics, mixed reality, human machine interaction and interactive robotics. Our main application domains are: biomedicine, 
        training and entertainment, visual analytics and sustainable urban systems.
    </p>
    <p>
        IMAGINE hosts a weekly seminar every Monday, 1:00 PM GMT-5. All past seminars, along with other projects
        and events, can be found in our <a href="https://www.youtube.com/channel/UCVFbKXkAp52OxAiIj1N8xuQ">Youtube Channel</a>
    </p>
</div>

<section>
    <div class="slideshow-container">

        <div class="mySlides">
          <div class="numbertext">1 / 3</div>
          <img src="img/slides/slide1.jpg" style="width:100%">
          <div class="text">Caption Text</div>
        </div>
        
        <div class="mySlides">
          <div class="numbertext">2 / 3</div>
          <img src="img/slides/slide2.jpg" style="width:100%">
        </div>
        
        <div class="mySlides">
          <div class="numbertext">3 / 3</div>
          <img src="img/slides/slide3.jpg" style="width:100%">
        </div>
        
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
        
        </div>
        <br>
        
        <div style="text-align:center">
          <span class="dot" onclick="currentSlide(1)"></span> 
          <span class="dot" onclick="currentSlide(2)"></span> 
          <span class="dot" onclick="currentSlide(3)"></span> 
        </div>
</section>

<section>
    <h2>Research</h2>
    <div class="research_projects">
        {% comment %}
        Sort the projects by date, putting those without dates last
        {% endcomment %}
        {% assign projects_by_area = site.projects | group_by: 'research_area' %}
        {% assign shuffled_areas = projects_by_area | shuffle %}
        {% for area in shuffled_areas %}
            <a href="#{{ area.name }}" > {{ area.name }} </a>
            &nbsp;&nbsp;
        {% endfor %}
        <br>
        <br>
        {% for area in shuffled_areas %}
            <h3 id ="{{ area.name }}" >{{ area.name }}</h3>
            <div class="card-columns">
                {% assign sorted_projects = area.items | sort: 'last-updated', 'first' | reverse %}
                {% for p in sorted_projects %}
                    {% include project-card.html project=p %}
                {% endfor %}
            </div>
            <hr>
        {% endfor %}
    </div>
</section>

<div id="people">
    <h2>People</h2>
    {% for role-table in page.role-tables %}
        <section class="people row justify-content-between">
            {% for role-column in role-table %}
                <div class="col-md-{{ role-column.width }}">
                    {% for role in role-column.roles %}
                        {% include role-people.html role=role image=role-column.image %}
                    {% endfor %}
                </div>
            {% endfor %}
        </section>
    {% endfor %}
</div>

<script>
    var slideIndex = 0;
    showSlides();

    function plusSlides(n) {
        moveSlides(slideIndex += n);
    }

    function currentSlide(n) {
        moveSlides(slideIndex = n);
    }

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";  
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}    
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";  
        dots[slideIndex-1].className += " active";
        setTimeout(showSlides, 4000); // Change image every 2 seconds
    }

    function moveSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        if (n > slides.length) {slideIndex = 1}    
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";  
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";  
        dots[slideIndex-1].className += " active";
    }
</script>