activity.html

---
title: What I Have Been Up To
layout: generic
sectionid: timeline
---

<div class="container">
    <div class="inner-content">
        <h1>What I Have Been Up to?</h1>
        <div class="row">
            <div class="col-md-4">
                <img src="/img/build-2024-ai-demo.jpg" class="img-responsive" style="margin-top: 10px;" />
            </div>
            <div class="col-md-4">
                <img src="/img/conferencetalk.jpg" class="img-responsive" style="margin-top: 10px;" />
            </div>
            <div class="col-md-4">
                <img src="/img/panel.jpg" class="img-responsive" style="margin-top: 10px;" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-9">
                <div class="timeline">
                    {% assign blogs = site.data.blogs %}
                    {% assign talks = site.data.talks %}
                    {% assign videos = site.data.videos %}
                    {% assign all_items = blogs | concat: talks | concat: videos %}
                    {% assign sorted_items = all_items | sort: 'date' | reverse %}
                    {% assign current_year = "" %}
                    {% for item in sorted_items %}
                    {% assign item_year = item.date | date: "%Y" %}
                    {% if item_year != current_year %}
                    {% assign current_year = item_year %}
                    <div class="timeline-year">
                        <h2>{{ current_year }}</h2>
                    </div>
                    {% endif %}
                    <div class="timeline-item" id="item-{{ forloop.index }}">
                        <div class="timeline-icon">
                            {% if blogs contains item %}
                            <span class="icon-pencil"></span>
                            {% elsif talks contains item %}
                            <span class="icon-mic"></span>
                            {% elsif videos contains item %}
                            <span class="icon-video"></span>
                            {% endif %}
                        </div>
                        <div class="timeline-content">
                            {% if blogs contains item %}
                            <h6>Blogged</h6>
                            {% elsif talks contains item %}
                            <h6>Spoke at a Conference</h6>
                            {% elsif videos contains item %}
                            <h6>Made a video</h6>
                            {% endif %}
                            {% if item.url %}
                            <h4><a href="{{ item.url }}">{{ item.title }}</a></h4>
                            {% else %}
                            <h4>{{ item.title }}</h4>
                            {% endif %}
                            <p>{{ item.date | date: "%B %d, %Y" }}</p>
                            <p>{{ item.location }}</p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="col-md-3">
                <div class="timeline-menu">
                    {% assign current_year = "" %}
                    {% for item in sorted_items %}
                    {% assign item_year = item.date | date: "%Y" %}
                    {% if item_year != current_year %}
                    {% assign current_year = item_year %}
                    <div class="timeline-menu-year">
                        <h4>{{ current_year }}</h4>
                    </div>
                    {% endif %}
                    <div class="timeline-menu-item">
                        <a href="#item-{{ forloop.index }}" class="timeline-menu-dot"></a>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .timeline {
        position: relative;
        padding: 20px 0;
        list-style: none;
    }

    .timeline:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #C5C5C5;
        left: 50%;
        margin-left: -1px;
    }

    .timeline-year {
        text-align: center;
        margin: 20px 0;
        z-index: 2; 
        position: relative;
    }

    .timeline-year h2 {
        background: #fff;
        display: inline-block;
        padding: 10px 20px;
        border-radius: 5px;
        border: 2px solid #C5C5C5;
    }

    .timeline-item {
        margin-bottom: 20px;
        position: relative;
    }

    .timeline-item:before,
    .timeline-item:after {
        content: " ";
        display: table;
    }

    .timeline-item:after {
        clear: both;
    }

    .timeline-item .timeline-icon {
        position: absolute;
        left: 50%;
        width: 40px;
        height: 40px;
        margin-left: -20px;
        background: #fff;
        border-radius: 50%;
        border: 2px solid #C5C5C5;
        text-align: center;
        line-height: 36px;
        font-size: 18px;
        color: #C5C5C5;
    }

    .timeline-item .timeline-content {
        width: 45%;
        padding: 20px;
        background: #f5f5f5;
        position: relative;
        border-radius: 5px;
    }

    .timeline-item:nth-child(odd) .timeline-content {
        left: 0;
    }

    .timeline-item:nth-child(even) .timeline-content {
        left: 55%;
    }

    .icon-pencil::before {
        content: "\270F";
        /* Unicode for pencil icon */
    }

    .icon-mic::before {
        content: "\1F3A4";
        /* Unicode for microphone icon */
    }

    .icon-video::before {
        content: "\1F4F9";
        /* Unicode for video camera icon */
    }

    .timeline-menu {
        position: fixed;
        right: 20px;
        top: 100px;
        width: 100px;
        max-height: 80vh;
        overflow-y: auto;
        overflow-x: hidden;
        transition: transform 0.3s ease-in-out;
    }

    .timeline-menu-year {
        text-align: center;
        margin-bottom: 10px;
    }

    .timeline-menu-item {
        text-align: center;
        margin-bottom: 10px;
        transition: transform 0.3s ease-in-out;
    }

    .timeline-menu-item:hover {
        transform: scale(2);
    }

    .timeline-menu-dot {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #C5C5C5;
        border-radius: 50%;
        border: 2px solid #fff;
        transition: background 0.3s;
    }

    .timeline-menu-dot:hover {
        background: #000;
    }

    @media (max-width: 767px) {
        .timeline-menu {
            display: none;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const menuItems = document.querySelectorAll('.timeline-menu-item a');
        menuItems.forEach(item => {
            item.addEventListener('click', function(event) {
                event.preventDefault();
                const targetId = this.getAttribute('href').substring(1);
                const targetElement = document.getElementById(targetId);
                targetElement.scrollIntoView({ behavior: 'smooth' });
            });
        });
    });
</script>