workExperience.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Work Experience | Portfolio</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/stylesheets/shared.css">
    <link rel="stylesheet" href="/static/stylesheets/workExperience.css">
    <link rel="stylesheet" href="/static/stylesheets/modal.css">
    <link rel="icon" type="image/png" sizes="64x64" href="/static/images/D-2.png">
    <style>
        .background {
            background-image: url("../static/images/workExperience.jpg");
        }
    </style>
</head>
<body>
    <div class="background">
        <nav class="navbar">
            <div class="nav-left">
                <a href="/" class="">Home</a>
                <a href="/projects.html">Projects</a>
                <a href="/resume.html" class="">Resume</a>
                <a href="/workExperience.html" class="">Work<br>Experience</a>
                <a href="/contact.html" class="" >Contact</a>
            </div>
        </nav>

        
    <h1>Work<br>&nbsp;&nbsp;Experience</h1>

    <div class="container">
        <div class="lab-containter">
            <h3>ROAR Lab @ Columbia</h3>
            <p>Developed and designed Augmented Reality support for an existing experiment to gather postural data for machine learning robotic postural assistance to wheelchair-disabled patients. To maintain the integrity of the original system and provide flexibility, networking methodologies were heavily utilized. Using a combination of VR/AR technology, Unity, RPCs, and complex synchronization, the experiment was developed to operate the robot using ROS. I was mentored by a postdoctoral researcher and guided toward developing a unique research paper I am creating.</p>
        </div>

        <div class="lab-containter">
            <h3>Systems Lab @ Columbia</h3>
            <p>I ported the SeKVM hypervisor from the most recent version built upon Linux kernel version 5.15 to 6.1. Research, study, and development of the newer kernel were done independently. The SeKVM kernel, as described in the Hypsec paper, is designed to compartmentalize data within the machine, making a compromised system still unable to access sensitive information. Details of such require the tracing of various updates and modification of the kernel itself to allow for an alternate, custom architecture.</p>
        </div>

        <div class="lab-containter">
            <h3>Robotics Workshop @ Los Angeles, CA</h3>
            <p>Developed curricula, presented and facilitated a robotics workshop with underprivileged, first-generation immigrant students from Latin America. Topics included scripting in python, modification of existing hardware, interfacing between code/open environment and theory surrounding electrical topics such as voltage, current, transistors and basic circuitry. </p>
            <!-- <a href="#" class="view-more" data-project="2" data-title="" data-image1="/static/images/rw1.jpeg" data-image2="/static/images/rw2.jpeg" data-image3="/static/images/rw3.jpeg">VIEW MORE</a> -->
        </div>
    </div>


        <h3 class="portfolio-tag"><strong>Portfolio</strong></h3>

    </div>

<!-- Modal Structure -->
<div id="projectModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <div class="carousel">
            <img id="carousel-image" src="" alt="Project Image" style="width: 100%; margin-top: 20px;">
            <button class="prev" onclick="changeImage(-1)">&#10094;</button>
            <button class="next" onclick="changeImage(1)">&#10095;</button>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var modal = document.getElementById('projectModal');
    var span = document.getElementsByClassName('close')[0];
    var carouselImage = document.getElementById('carousel-image');
    var images = [];
    var currentIndex = 0;

    document.querySelectorAll('.view-more').forEach(function(link) {
        link.onclick = function(event) {
            event.preventDefault();
            var projectId = this.getAttribute('data-project');
            
            images = [
                this.getAttribute('data-image1'),
                this.getAttribute('data-image2'),
                this.getAttribute('data-image3')
            ].filter(Boolean);

            if (images.length > 0) {
                currentIndex = 0;
                carouselImage.src = images[currentIndex];
                document.querySelector('.prev').style.display = 'block';
                document.querySelector('.next').style.display = 'block';
            } else {
                carouselImage.style.display = 'none';
                document.querySelector('.prev').style.display = 'none';
                document.querySelector('.next').style.display = 'none';
            }

            modal.style.display = 'block';
        };
    });

    span.onclick = function() {
        modal.style.display = 'none';
    };

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    };

    window.changeImage = function(direction) {
        currentIndex = (currentIndex + direction + images.length) % images.length;
        carouselImage.src = images[currentIndex];
    };
});


</script>

    
</body>
</html>