<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mellanie Rodriguez Engineering Portfolio</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
  <header>
    <div class="container header-inner">
      <div class="header-left">
        <h1 aria-live="polite"><span id="typed"></span><span class="cursor" aria-hidden="true">|</span></h1>
      </div>
      <nav class="nav-pebbles" aria-label="Main navigation">
        <a class="nav-pebble" href="#about" aria-label="About">
          <!-- person icon (is not fully functional rn)-->
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4 0-7 2-7 4v1h14v-1c0-2-3-4-7-4z" fill="#fff"/></svg>
        </a>
  <a class="nav-pebble" href="#projects" aria-label="Projects">
          <!-- folder icon -->
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 7a2 2 0 012-2h4l2 2h6a2 2 0 012 2v7a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" fill="#fff"/></svg>
        </a>
  <a class="nav-pebble" href="#contact" aria-label="Contact">
          <!-- mail icon -->
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M3 6a2 2 0 012-2h14a2 2 0 012 2v1l-9 6L3 7V6z" fill="#fff"/><path d="M21 9v7a2 2 0 01-2 2H5a2 2 0 01-2-2V9l9 6 9-6z" fill="#fff"/></svg>
        </a>
      </nav>
    </div>

    <style>
      .header-scribble {
        transform: translateY(2cm) !important;
        transition: transform .16s ease;
        will-change: transform;
      }

      /* slightly reduces shift on small screens */
      @media (max-width: 600px) {
        .header-scribble { transform: translateY(3cm) !important; }
      }
    </style>
    <!-- decorative scribble underline under header text -->
    <div class="header-scribble" aria-hidden="true">
      <svg viewBox="0 0 1200 60" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 30 C80 8,160 52,240 30 C320 8,400 52,480 30 C560 8,640 52,720 30 C800 8,880 52,960 30 C1040 8,1120 52,1200 30" fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </header>

  <!-- Background floating blobs (decorative) --> 
  <div class="bg-blobs" aria-hidden="true">
    <div class="bg-blob-wrap" id="blob-wrap-1">
      <!-- Blob 1: purple-ish -->
      <svg class="bg-blob bg-blob--1" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
        <g transform="translate(300,300)">
          <path d="M120,-160C160,-120,190,-80,190,-30C190,20,160,70,120,110C80,150,30,180,-20,190C-70,200,-120,190,-160,150C-200,110,-220,50,-210,0C-200,-50,-160,-100,-120,-140C-80,-180,-40,-200,10,-210C60,-220,80,-200,120,-160Z"/>
        </g>
      </svg>
    </div>

    <div class="bg-blob-wrap" id="blob-wrap-2">
      <!-- Blob 2: teal-ish -->
      <svg class="bg-blob bg-blob--2" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
        <g transform="translate(300,300)">
          <path d="M140,-120C180,-80,200,-30,190,10C180,50,150,90,110,120C70,150,20,170,-30,180C-80,190,-130,180,-160,140C-190,100,-200,40,-190,0C-180,-40,-150,-80,-120,-120C-90,-160,-40,-190,10,-200C60,-210,100,-180,140,-120Z"/>
        </g>
      </svg>
    </div>
  </div>
  </div>

  <!-- Artistic background layer (decorative) no actual purpose -->
  <div class="art-bg" aria-hidden="true">
    <svg viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="g1" x1="0" x2="1">
          <stop offset="0%" stop-color="#ff9a9e" stop-opacity="0.18"/>
          <stop offset="100%" stop-color="#fad0c4" stop-opacity="0.06"/>
        </linearGradient>
        <linearGradient id="g2" x1="0" x2="1">
          <stop offset="0%" stop-color="#a18cd1" stop-opacity="0.12"/>
          <stop offset="100%" stop-color="#fbc2eb" stop-opacity="0.04"/>
        </linearGradient>
        <filter id="blurMe"><feGaussianBlur stdDeviation="40"/></filter>
      </defs>

      <!-- soft layered shapes -->
      <g class="art-layer art-layer--1" filter="url(#blurMe)">
        <path d="M0 300 C150 200, 300 180, 450 240 C600 300, 750 380, 900 340 C1050 300,1200 220,1200 220 L1200 800 L0 800 Z" fill="url(#g1)"/>
      </g>
      <g class="art-layer art-layer--2" filter="url(#blurMe)">
        <path d="M0 420 C180 360, 360 300, 540 340 C720 380, 900 460, 1080 420 L1200 800 L0 800 Z" fill="url(#g2)"/>
      </g>
      <!-- faint geometric mesh -->
      <g class="art-mesh" stroke="rgba(255,255,255,0.06)" stroke-width="1" fill="none">
        <path d="M60 720 L300 480 L540 720 L780 480 L1020 720" opacity="0.5"/>
        <path d="M0 640 L240 400 L480 640 L720 400 L960 640 L1200 400" opacity="0.35"/>
      </g>
    </svg>
  </div>
  <main class="container">
    <section> <picture>
      <!-- profile image: replaced absolute external path with a project-local file -->
      <img class="profile-pic" src="pfp.png" alt="Profile photo of Mellanie">
    <style>
      .profile-pic {
        width: 130px;
        height: 130px;
        object-fit: cover;
        border-radius: 50%;
        box-shadow: 0 2px 12px rgba(73, 6, 230, 0.12);
        max-width: 40%;
        margin-bottom: 2rem;
          /* move the profile image down by 1cm */
          transform: translateY(3cm);
          transition: transform 180ms ease;
      }
      @media (max-width: 800px){
        .profile-pic{
          width: 180px;
          height: 120px;
          max-width: 45%;
        }
      }
      @media (max-width: 420px){
        .profile-pic{
          width: 80px;
          height: 100px;
          max-width: 60%;
        }
      }
    /* layout: put an "about me" block beside the profile picture */
    .profile-pic{
      float: left;
      margin-right: 1rem;
    }

    /* text that flows alongside the image */
    .about-text{
      overflow: hidden; /* keeps layout tidy next to the floated image */
      max-width: calc(100% - 180px);
      min-width: 180px;
      line-height: 2;
      color: #c4adad; 
    }

    /* stack vertically on small screens */
    @media (max-width: 700px){
      .profile-pic{
        float: none;
        margin: 0 auto 0.75rem;
        display: block;
      }
      .about-text{
        max-width: 100%;
        text-align: center;
      }
    }
    </style>

  <!-- About text (sibling of the picture/img above) -->
  <div id="about" class="about-text" aria-label="About me">
      <h1>About</h1>
      <p>Hi, I'm Mellanie. I am a first-year student at MIT planning to study Electrical Engineering and Computer Science, also known as Course 6-5, with additional interests in Mechanical Engineering. My experience is primarily in CAD-focused projects, but I am always excited to build anything that captures my curiosity. Before coming to MIT, I was a dedicated hobbyist, and that mindset continues to shape how I approach my work.

This website is my first experience using HTML, CSS, and JavaScript in a web development context. I hope you enjoy exploring it. Please feel free to reach out. I would love to connect :)</p>
    </div>

    <section id="projects">
      <h1>Projects</h1>

      <!-- Project cards (each opens a modal with its own slides) -->
      <div class="project-grid">
        <div class="project-card" data-modal="modal-proj-1" tabindex="0">
          <img class="thumb" src="finaltrabot.jpg" alt="Trash Sorting Robot thumbnail">
          <h4>Trash Sorting Robot</h4>
          <p class="mini"> Designed and built an automated trash-sorting robot using a Raspberry Pi 3, OpenCV, and YOLO for real-time object detection. The robots (Toby the small one) helped push waste into (Terresa the big one with the shovel) which identified and separated cans from other waste materials with an integrated camera and servo-based mechanism.</p>
          <button class="open-gallery">View more here + Github↓</button>
        </div>

        <div class="project-card" data-modal="modal-proj-2" tabindex="0">
          <!-- fixed extension: file exists as IMG_1997.jpg in project folder -->
          <img class="thumb" src="frontWater.png" alt="Project 2 thumbnail">
          <h4>Inkbit 3D Internship</h4>
          <p class="mini"> Explored advanced additive manufacturing techniques at Inkbit 3D, focusing on optimizing 3D printer calibration and improving user experience in resin-based printing. Gained hands-on experience in CAD modeling and print validation. Materials I used for my small projects TEPU30A and Titan Tough Epoxy 85. I also prototyoed a could VR headset concepts</p>
          <button class="open-gallery">View more on my Inkbit work.. </button> 
        </div>

        <div class="project-card" data-modal="modal-proj-3" tabindex="0">
          <img class="thumb" src="GURT.png" alt="Project 3 thumbnail">
          <h4>Personal Assistant Robot (GURT)</h4>
          <p class="mini">Developed GURT, a personal assistant robot powered by a Raspberry Pi 4B and integrated with the OpenAI API for natural language interaction. Designed and built the system with a small team during the summer of 2025, implementing sensor feedback, motor control, and voice response to explore human-robot interaction and AI-assisted robotics. Full code available on GitHub.</p>
          <button class="open-gallery">View more on Gurt.. + Github↓ </button>
        </div>

        <div class="project-card" data-modal="modal-proj-4" tabindex="0">
          <img class="thumb" src="LLmain.jpg" alt="Project 4 thumbnail">
          <h4>MIT Lincoln Laboratory Internship</h4>
          <p class="mini">Selected as one of three high school students (out of 250 applicants) for a summer research internship at MIT Lincoln Laboratory. Designed and built a vibration simulator in Solidworks using Aluminum 6061 as my main material to demonstrate how frequency, material, and mass affect motion in satellite vibration testing. Applied Finite Element Analysis (FEA), Hooke’s Law, and Young’s Modulus to study stress and deformation in materials under dynamic loading.</p>
          <button class="open-gallery">View more on my MIT LL work...</button>
        </div>

        <div class="project-card" data-modal="modal-proj-5" tabindex="0">
          <img class="thumb" src="maincube.png" alt="Project 5 thumbnail">
          <h4>THE CUBE</h4>
          <p class="mini">Designed and fabricated a modular furniture piece called The CUBE, capable of transforming between a table, shelf, and bench. Used Onshape for design and implemented sustainable fabrication methods with plywood and metal fittings.</p>
          <button class="open-gallery">View More on the CUBE...</button>
        </div>

        <div class="project-card" data-modal="modal-proj-6" tabindex="0">
          <img class="thumb" src="plamuerte6.jpg" alt="Project 6 thumbnail">
          <h4>Artwork Gallery</h4>
          <p class="mini">Other than making robots and things that move around, I also enjoy painting and sculpting. Here are some of my favorite pieces :]</p>
          <button class="open-gallery">View my Art Gallery...</button>
        </div>

      <!-- Modals for each project (hidden on main page) -->
      <!-- Modal template: each modal contains its own carousel slides -->

      <div class="modal" id="modal-proj-1" aria-hidden="true">
        <div class="modal__content">
          <button class="modal__close" aria-label="Close">←</button>
          <div class="modal-carousel" data-project="1">
            <button class="mc-btn mc-prev" aria-label="Previous">←</button>
            <div class="mc-viewport">
              <div class="mc-track">
                <div class="mc-slide"><img src="failedshovel.png" alt="robot 1"><div class="caption">Original shovel designed to pick up trash failed (too heavy)</div></div>
                <div class="mc-slide"><img src="terresabot.jpg" alt="robot 2"><div class="caption">Side view of Terresa robot with RPi camera and ML detection</div></div>
                <div class="mc-slide"><img src="testtony.png" alt="robot 3"><div class="caption">Test version Tony — simpler flat shovel design</div></div>
                <div class="mc-slide">
                  <div class="video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
                    <video style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" controls preload="metadata" poster="finaltrabot.jpg">
                      <source src="mutedtrashvid.mp4" type="video/mp4">
                    </video>
                  </div>
                  <div class="caption">Robots in action!!</div>
                </div>
              </div>
            </div>
            <button class="mc-btn mc-next" aria-label="Next">→</button>
            <div class="mc-dots"></div>
          </div>
        </div>
      </div>

      <div class="modal" id="modal-proj-2" aria-hidden="true">
        <div class="modal__content">
          <button class="modal__close" aria-label="Close">←</button>
          <div class="modal-carousel" data-project="2">
            <button class="mc-btn mc-prev" aria-label="Previous">←</button>
            <div class="mc-viewport">
              <div class="mc-track">
                <div class="mc-slide"><img src="frontWater.png" alt="Front View"><div class="caption">Front view (Material: Titan Tough Epoxy 85)</div></div>
                <div class="mc-slide"><img src="sideviewwater.jpg" alt="Side View"><div class="caption">Side view</div></div>
                <div class="mc-slide"><img src="topviewwater.jpg" alt="Top View"><div class="caption">Top view</div></div>
                <div class="mc-slide"><img src="wr.jpg" alt="dash 1"><div class="caption">Top view — Weird Chair design (Material: TEPU30A)</div></div>
                <div class="mc-slide"><img src="wrside.jpg" alt="dash 2"><div class="caption">Side view</div></div>
              </div>
            </div>
            <button class="mc-btn mc-next" aria-label="Next">→</button>
            <div class="mc-dots"></div>
          </div>
        </div>
      </div>

      <div class="modal" id="modal-proj-3" aria-hidden="true">
        <div class="modal__content">
          <button class="modal__close" aria-label="Close">←</button>
          <div class="modal-carousel" data-project="3">
            <button class="mc-btn mc-prev" aria-label="Previous">←</button>
            <div class="mc-viewport">
              <div class="mc-track">
                <div class="mc-slide"><img src="innernan0.png" alt="sw 1"><div class="caption">Simulation</div></div>
                <div class="mc-slide"><img src="inner.png" alt="sw 2"><div class="caption">General setup for servo motors (excludes RPi & TFT)</div></div>
                <div class="mc-slide"><img src="GURT.png" alt="sw 3"><div class="caption">Controller tests</div></div>
                <div class="mc-slide">
                  <div class="video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
                    <video controls preload="metadata" poster="GURT.png" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                      <source src="gurtvideo.mp4" type="video/mp4">
                    </video>
                  </div>
                  <div class="caption">GURT in action (voice demo)</div>
                </div>
              </div>
            </div>
            <button class="mc-btn mc-next" aria-label="Next">→</button>
            <div class="mc-dots"></div>
          </div>
        </div>
      </div>

      <div class="modal" id="modal-proj-4" aria-hidden="true">
        <div class="modal__content">
          <button class="modal__close" aria-label="Close">←</button>
          <div class="modal-carousel" data-project="4">
            <button class="mc-btn mc-prev" aria-label="Previous">←</button>
            <div class="mc-viewport">
              <div class="mc-track">
                <div class="mc-slide"><img src="IMG_1513 copy.jpeg" alt="test 2"><div class="caption">Vibration table concept test</div></div>
                <div class="mc-slide"><img src="LLmain.jpg" alt="test 1"><div class="caption">Final product</div></div>
                <div class="mc-slide"><img src="20920.jpg" alt="test 3"><div class="caption">Post-test inspection</div></div>
              </div>
            </div>
            <button class="mc-btn mc-next" aria-label="Next">→</button>
            <div class="mc-dots"></div>
          </div>
        </div>
      </div>

      <div class="modal" id="modal-proj-5" aria-hidden="true">
        <div class="modal__content">
          <button class="modal__close" aria-label="Close">←</button>
          <div class="modal-carousel" data-project="5">
            <button class="mc-btn mc-prev" aria-label="Previous">←</button>
            <div class="mc-viewport">
              <div class="mc-track">
                <div class="mc-slide"><img src="sketchchair.jpg" alt="First prototype (Sketch)"><div class="caption">First prototype (Sketch)</div></div>
                <div class="mc-slide"><img src="chairprot.jpg" alt="Styrofoam lasercutted print"><div class="caption">Styrofoam lasercutted print</div></div>
                <div class="mc-slide"><img src="genlayout.jpg" alt="General Layout"><div class="caption">General layout</div></div>
                <div class="mc-slide"><img src="maincube.png" alt="final cube"><div class="caption">Final Cube (prototype photos)</div></div>
              </div>
            </div>
            <button class="mc-btn mc-next" aria-label="Next">→</button>
            <div class="mc-dots"></div>
          </div>
        </div>
      </div>

      <div class="modal" id="modal-proj-6" aria-hidden="true">
        <div class="modal__content">
          <button class="modal__close" aria-label="Close">←</button>
          <div class="modal-carousel" data-project="6">
            <button class="mc-btn mc-prev" aria-label="Previous">←</button>
            <div class="mc-viewport">
              <div class="mc-track">
                <div class="mc-slide"><img src="plamuerte6.jpg" alt="dash 1"><div class="caption">La Muerte Vivio</div></div>
                <div class="mc-slide"><img src="paperp4.jpg" alt="dash 2"><div class="caption">I Spy with my little eye...</div></div>
                <div class="mc-slide"><img src="p2.jpg" alt="dash 3"><div class="caption">Water Monster</div></div>
                <div class="mc-slide"><img src="dragp3.jpg" alt="dash 4"><div class="caption">Dragon painting</div></div>
              </div>
            </div>
            <button class="mc-btn mc-next" aria-label="Next">→</button>
            <div class="mc-dots"></div>
          </div>
        </div>
      </div>

    </section>

    <!-- Miscellaneous projects (short listings, ask about them) -->
    <section id="misc">
      <h2>Miscellaneous Projects</h2>
      <p>Side projects that I either am working on/would like collabortators.</p>
      <div class="misc-grid">
        <div class="misc-card">
          <h4>Microcontroller Power Optimizations</h4>
          <p class="mini">Techniques to reduce idle power across different MCU families.</p>
          <a class="ask-btn" href="mailto:mxrodrig@mit.edu?subject=Inquiry%20about%20Microcontroller%20Power%20Optimizations">Ask about this</a>
        </div>

        <div class="misc-card">
          <h4>Health Monitoring Home Robot</h4>
          <p class="mini">Development of a home robot prototype for health monitoring using low-cost technologies.</p>
          <a class="ask-btn" href="mailto:mxrodrig@mit.edu?subject=Inquiry%20about%20Health%20Monitoring%20Home%20Robot">Ask about this</a>
        </div>

        <div class="misc-card">
          <h4>Rapid Prototyping Fixtures</h4>
          <p class="mini">Design patterns for quick jigs and fixtures for assembly tasks.</p>
          <a class="ask-btn" href="mailto:mxrodrig@mit.edu?subject=Inquiry%20about%20Prototyping%20Fixtures">Ask about this</a>
        </div>

        <div class="misc-card">
          <h4>Signal Filtering Recipes</h4>
          <p class="mini">Practical IIR/FIR filter examples for sensor noise reduction.</p>
          <a class="ask-btn" href="mailto:mxrodrig@mit.edu?subject=Inquiry%20about%20Signal%20Filtering%20Recipes">Ask about this</a>
        </div>

        <div class="misc-card">
          <h4>Embedded Logging Strategies</h4>
          <p class="mini">Small-footprint logging for RTOS and bare-metal projects.</p>
          <a class="ask-btn" href="mailto:mxrodrig@mit.edu?subject=Inquiry%20about%20Embedded%20Logging%20Strategies">Ask about this</a>
        </div>

        <div class="misc-card">
          <h4>Rapid Thermal Testing Hacks</h4>
          <p class="mini">Lightweight approaches to screen for thermal issues quickly.</p>
          <a class="ask-btn" href="mailto:mxrodrig@mit.edu?subject=Inquiry%20about%20Rapid%20Thermal%20Testing%20Hacks">Ask about this</a>
        </div>
      </div>
    </section>

    <!-- Social icons row (insert at $SELECTION_PLACEHOLDER$) -->
    <style>
      .social-row {
        display: flex;
        gap: 12px;
        align-items: center;
        margin: 1rem 0 1.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255,255,255,0.06);
        justify-content: flex-start;
      }
      .social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
        transition: transform .12s ease, box-shadow .12s ease;
      }
      .social-link svg { width: 20px; height: 20px; display: block; fill: currentColor; }
      .social-link:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(174, 6, 6, 0.18); }
      .social-link.email { background: linear-gradient(180deg,#161313,#363265); }
      .social-link.linkedin { background: #031d38; }
      .social-link.github { background: #280856; }
      @media (max-width: 600px) { .social-row { justify-content: center; } }
    </style>
    <!-- Contact section: target for header "Contact" pebble -->
    <section id="contact">
      <h2>CONTACT :)</h2>
      <div class="social-row" aria-label="Contact links">
      <!-- Email -->
      <a class="social-link email" href="mailto:mxrodrig@mit.edu" aria-label="Email Mellanie Rodriguez" title="Email">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M2 4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v2l-10 6L2 6V4zm0 4.6V20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8.6l-10 6-10-6z"/>
        </svg>
      </a>

      <!-- LinkedIn -->
      <a class="social-link linkedin" href="https://www.linkedin.com/in/mellanie-rodriguez-256729215/" target="_blank" rel="noopener noreferrer" aria-label="Open LinkedIn profile" title="LinkedIn">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.225.792 24 1.771 24h20.451C23.2 24 24 23.225 24 22.271V1.729C24 .774 23.2 0 22.225 0zM7.081 20.452H3.907V9h3.174v11.452zM5.494 7.433a2.069 2.069 0 1 1 0-4.138 2.069 2.069 0 0 1 0 4.138zM20.452 20.452h-3.553v-5.569c0-1.329-.025-3.036-1.849-3.036-1.849 0-2.135 1.445-2.135 2.939v5.666h-3.172V9h3.047v1.561h.043c.425-.804 1.459-1.65 3.003-1.65 3.213 0 3.806 2.117 3.806 4.872v6.669z"/>
        </svg>
      </a>

      <!-- GitHub -->
      <a class="social-link github" href="https://github.com/mini-debug" target="_blank" rel="noopener noreferrer" aria-label="Open GitHub profile" title="GitHub">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387.6.113.82-.258.82-.577v-2.234c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.089-.745.083-.73.083-.73 1.205.085 1.84 1.237 1.84 1.237 1.07 1.835 2.809 1.305 3.495.998.108-.776.42-1.305.763-1.604-2.666-.307-5.467-1.334-5.467-5.93 0-1.31.468-2.381 1.235-3.222-.124-.303-.535-1.524.117-3.176 0 0 1.008-.323 3.301 1.23a11.48 11.48 0 0 1 3.005-.403c1.02.005 2.047.138 3.005.403 2.29-1.553 3.296-1.23 3.296-1.23.654 1.652.244 2.873.12 3.176.77.841 1.235 1.912 1.235 3.222 0 4.61-2.807 5.625-5.48 5.922.43.372.815 1.102.815 2.222v3.293c0 .32.218.694.825.576C20.565 22.092 24 17.593 24 12.297 24 5.67 18.627.297 12 .297z"/>
        </svg>
      </a>
      </div>
    </section>
  </main>
 
  <footer>
    <div class="container">
      <small> Made by Mellanie Rodriguez ❤️</small>
    </div>
  </footer>

  <script>
      // Modal + per-project carousel initialization
      (function(){
        // Open/close modal logic
        const openButtons = document.querySelectorAll('.open-gallery');
        const projectCards = document.querySelectorAll('.project-card');
        const modals = document.querySelectorAll('.modal');
        const body = document.body;

        function openModal(id){
          console.log('Opening modal:', id); // Debug log
          const modal = document.getElementById(id);
          if(!modal) {
            console.warn('Modal not found:', id); // Debug log
            return;
          }
          // mark opened state and manage focus
          modal.classList.add('open');
          modal.setAttribute('aria-hidden', 'false');
          modal.dataset.opened = 'true';
          modal.tabIndex = -1;
          try { modal.focus(); } catch(e) {}
          body.style.overflow = 'hidden';
          initModalCarousel(modal);
        }

        function closeModal(modal){
          modal.classList.remove('open');
          modal.setAttribute('aria-hidden', 'true');
          modal.dataset.opened = 'false';
          body.style.overflow = '';
        }

  console.log('Found', openButtons.length, 'open buttons,', projectCards.length, 'project cards,', modals.length, 'modals');

  // Attach listeners to cards and buttons
        openButtons.forEach(btn => {
          btn.addEventListener('click', (e)=>{
            e.preventDefault();
            e.stopPropagation();
            const card = e.target.closest('.project-card');
            if (!card) {
              console.warn('No parent project card found'); // Debug log
              return;
            }
            const id = card.dataset.modal;
            console.log('Button clicked, modal id:', id); // Debug log
            openModal(id);
          });
        });

        projectCards.forEach(card=>{
          // Make the whole card clickable
          card.style.cursor = 'pointer';
          
          card.addEventListener('click', (e)=>{
            if (!e.target.classList.contains('open-gallery')) {
              openModal(card.dataset.modal);
            }
          });
          
          card.addEventListener('keydown', (e)=>{
            if(e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
              openModal(card.dataset.modal);
            }
          });
        });

        // Add error checking for modal structure
        modals.forEach(modal => {
          if (!modal.querySelector('.modal-carousel')) {
            console.warn('Modal missing carousel:', modal.id);
          }
          if (!modal.querySelector('.modal__content')) {
            console.warn('Modal missing content:', modal.id);
          }
        });      // close when clicking overlay or close button
      modals.forEach(modal=>{
        modal.addEventListener('click', (e)=>{
          if(e.target === modal) closeModal(modal);
        });
        const closeBtn = modal.querySelector('.modal__close');
        closeBtn && closeBtn.addEventListener('click', ()=>closeModal(modal));
      });

      // Initialize a carousel inside a modal element (idempotent)
      function initModalCarousel(modal){
        if(modal.dataset.inited === 'true') return;
        modal.dataset.inited = 'true';

        const carousel = modal.querySelector('.modal-carousel');
        const track = carousel.querySelector('.mc-track');
        const slides = Array.from(track.children);
        const prev = carousel.querySelector('.mc-prev');
        const next = carousel.querySelector('.mc-next');
        const dotsWrap = carousel.querySelector('.mc-dots');
        let index = 0;

        // create dots
        slides.forEach((_,i)=>{
          const b = document.createElement('button');
          b.className = 'dot';
          b.setAttribute('aria-label', `Go to slide ${i+1}`);
          b.addEventListener('click', ()=>goTo(i));
          dotsWrap.appendChild(b);
        });
        const dots = Array.from(dotsWrap.children);

        function width(){return carousel.querySelector('.mc-viewport').offsetWidth}
        function set(){
          index = (index + slides.length) % slides.length;
          track.style.transform = `translateX(${ -index * width() }px)`;
          dots.forEach((d,i)=>d.classList.toggle('active', i===index));
        }
        function goTo(i){ index = i; set(); }
        prev.addEventListener('click', ()=>goTo(index-1));
        next.addEventListener('click', ()=>goTo(index+1));

        // pointer drag
        let dragging=false, startX=0;
        slides.forEach((s, i)=>{
          s.addEventListener('pointerdown', (e)=>{ dragging=true; startX=e.clientX; carousel.classList.add('grabbing');});
          s.addEventListener('pointerup', (e)=>{ if(!dragging) return; dragging=false; carousel.classList.remove('grabbing'); const diff = e.clientX - startX; if(Math.abs(diff) > width()*0.2){ if(diff<0) goTo(index+1); else goTo(index-1);} else goTo(index); });
          s.addEventListener('pointermove', (e)=>{ if(!dragging) return; const diff = e.clientX - startX; track.style.transform = `translateX(${ -index*width() + diff }px)`});
        });

        window.addEventListener('resize', set);
        // keyboard within modal
        modal.addEventListener('keydown', (e)=>{
          if(e.key === 'ArrowRight') goTo(index+1);
          if(e.key === 'ArrowLeft') goTo(index-1);
          if(e.key === 'Escape') closeModal(modal);
        });

        set();
      }

    })();
  </script>

  <style>
  /* shift the typing line down by 1cm */
  .header-left h1 {
    transform: translateY(1cm);
    transition: transform 160ms ease;
  }
    /* Project card and button improvements */
    .project-card {
      background: rgba(255,255,255,0.03);
      border-radius: 12px;
      padding: 1.5rem;
      position: relative;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      transform-origin: center;
    }

    .project-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      background: rgba(255,255,255,0.05);
    }

    .project-card:active {
      transform: translateY(0);
    }

    .open-gallery {
      display: inline-block;
      margin-top: 1rem;
      padding: 0.5rem 1rem;
      background: rgba(255,255,255,0.1);
      border: none;
      border-radius: 4px;
      color: #fff;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .open-gallery:hover {
      background: rgba(255,255,255,0.2);
    }

    .open-gallery:active {
      transform: scale(0.98);
    }

    /* Modal improvements */
    .modal.open {
      display: flex;
      animation: modalFadeIn 0.2s ease-out;
    }

    @keyframes modalFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    /* Image loading transitions */
  img {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }

  img.lazy-loaded:not([src^="data:"]) {
    opacity: 1;
  }

  img.lazy-loaded[src^="data:"] {
    opacity: 0;
  }

  /* Modal and carousel optimizations */
  .modal {
    transition: opacity 0.2s ease-in-out;
    will-change: opacity;
  }

  .modal__content {
    transition: transform 0.2s ease-in-out;
    will-change: transform;
  }

  .mc-track {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  /* Video container states */
  .video-container {
    position: relative;
    background: rgba(0,0,0,0.1);
    min-height: 200px;
  }

  .video-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
  }

  .video-container:not([data-loaded="true"])::before {
    opacity: 1;
  }
  </style>

  <script>
  /* keep the shift applied if scripts modify the element later (idempotent) */
      // --- My Typing animation ---
      const phrases = ["Hi, I'm Mellanie Rodriguez", "An MIT student","An innovator","An Artist", "An Engineer"];
      const typedEl = document.getElementById('typed');
      const cursor = document.querySelector('.header-subtitle .cursor');
      let pIndex = 0, charIndex = 0, typing = true;

      const TYPING_SPEED = 100; // ms per char
      const DELETING_SPEED = 40;
      const PAUSE_AFTER = 1200;

      function typeLoop(){
        const current = phrases[pIndex];
        if(typing){
          typedEl.textContent = current.slice(0, charIndex+1);
          charIndex++;
          if(charIndex === current.length){
            typing = false;
            setTimeout(typeLoop, PAUSE_AFTER);
            return;
          }
          setTimeout(typeLoop, TYPING_SPEED);
        } else {
          typedEl.textContent = current.slice(0, charIndex-1);
          charIndex--;
          if(charIndex === 0){
            typing = true;
            pIndex = (pIndex + 1) % phrases.length;
            setTimeout(typeLoop, 250);
            return;
          }
          setTimeout(typeLoop, DELETING_SPEED);
        }
      }
      // start when DOM ready
      document.addEventListener('DOMContentLoaded', ()=>{
        // ensure there's an initial value
        typedEl.textContent = '';
        typeLoop();
        // cursor blink (CSS handles animation too)
      });

      // --- Blob mouse-follow ---
      const wrap1 = document.getElementById('blob-wrap-1');
      const wrap2 = document.getElementById('blob-wrap-2');
      const speed = 0.06; // interpolation factor
      let mouseX = 0, mouseY = 0, cx = 0, cy = 0;

      document.addEventListener('pointermove', (e)=>{
        // normalized from -1..1
        mouseX = (e.clientX / window.innerWidth) * 2 - 1;
        mouseY = (e.clientY / window.innerHeight) * 2 - 1;
      });

      function raf(){
        // target offsets (pixels)
        const tx1 = mouseX * 30; const ty1 = mouseY * 18;
        const tx2 = mouseX * -20; const ty2 = mouseY * -12;
        // smooth interpolation
        cx += (tx1 - cx) * speed; cy += (ty1 - cy) * speed;
        wrap1.style.transform = `translate3d(${cx}px, ${cy}px, 0)`;
        // second blob uses its own smaller follow
        let dx = 0, dy = 0;
        dx += (tx2 - dx) * (speed*1.1);
        dy += (ty2 - dy) * (speed*1.1);
        wrap2.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
        requestAnimationFrame(raf);
      }
      requestAnimationFrame(raf);
    </script>
    <script>
      // Smooth scroll for nav pebbles and scroll-spy to update active pebble
      (function(){
        const links = Array.from(document.querySelectorAll('.nav-pebble[href^="#"]'));
        const sections = links.map(a => document.querySelector(a.getAttribute('href'))).filter(Boolean);

        // click -> smooth scroll and update hash
        links.forEach(a=>{
          a.addEventListener('click', (e)=>{
            const targetId = a.getAttribute('href').slice(1);
            const el = document.getElementById(targetId);
            if(!el) return; // fallback
            e.preventDefault();
            el.scrollIntoView({behavior:'smooth', block: 'start'});
            // update history so back/forward works
            history.replaceState(null, '', '#'+targetId);
          });
        });

        // highlight active pebble based on which section is mostly visible
        if('IntersectionObserver' in window && sections.length){
          const obs = new IntersectionObserver((entries)=>{
            entries.forEach(entry=>{
              const id = entry.target.id;
              const link = document.querySelector('.nav-pebble[href="#'+id+'"]');
              if(!link) return;
              if(entry.isIntersecting && entry.intersectionRatio > 0.45){
                link.classList.add('active');
              } else {
                link.classList.remove('active');
              }
            });
          }, {threshold:[0.45,0.6]});
          sections.forEach(s=>obs.observe(s));
        } else {
          // fallback: simple scroll listener
          function onScroll(){
            const y = window.scrollY + window.innerHeight/3;
            sections.forEach(s=>{
              const rect = s.getBoundingClientRect();
              const top = window.scrollY + rect.top;
              const link = document.querySelector('.nav-pebble[href="#'+s.id+'"]');
              if(!link) return;
              if(y >= top && y < top + rect.height){ link.classList.add('active'); } else { link.classList.remove('active'); }
            });
          }
          window.addEventListener('scroll', onScroll, {passive:true});
          onScroll();
        }
      })();
    </script>

    <script>
      // Custom circular cursor + nav/pebble interactions
      (function(){
        // create cursor element
        const cursor = document.createElement('div'); cursor.className='custom-cursor'; document.body.appendChild(cursor);

        // follow pointer
        document.addEventListener('mousemove', e=>{
          cursor.style.left = e.clientX + 'px';
          cursor.style.top = e.clientY + 'px';
        }, {passive:true});

        document.addEventListener('mousedown', ()=>cursor.classList.add('click'));
        document.addEventListener('mouseup', ()=>cursor.classList.remove('click'));

        // enlarge when hovering interactive elements
        const interactives = ['a','button','input','label','.project-card','.open-gallery','.nav-pebble'];
        function applyHoverListeners(){
          document.querySelectorAll(interactives.join(',')).forEach(el=>{
            el.addEventListener('mouseenter', ()=>cursor.classList.add('hover'));
            el.addEventListener('mouseleave', ()=>cursor.classList.remove('hover'));
          });
        }
        applyHoverListeners();

        
      })();
    </script>
    <!-- Performance: mark non-profile images lazy and set decoding to async; ensure videos don't preload fully -->
    <script>
      document.addEventListener('DOMContentLoaded', ()=>{
        // Set up intersection observer for images
        const imageObserver = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              const img = entry.target;
              if (img.dataset.src) {
                img.src = img.dataset.src;
                img.removeAttribute('data-src');
              }
              imageObserver.unobserve(img);
            }
          });
        }, {
          rootMargin: '50px 0px', // Start loading 50px before image enters viewport
          threshold: 0.1
        });

        // Handle images
        document.querySelectorAll('img').forEach(img => {
          if (img.classList.contains('profile-pic')) {
            // Profile pic loads immediately
            img.loading = 'eager';
            img.decoding = 'sync';
            try { img.setAttribute('fetchpriority', 'high'); } catch(e) {}
          } else {
            // Convert src to data-src for other images
            if (!img.classList.contains('lazy-loaded')) {
              img.dataset.src = img.src;
              img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"%3E%3C/svg%3E';
              img.classList.add('lazy-loaded');
              imageObserver.observe(img);
            }
          }
        });

        // Handle videos - only load when modal opens
        document.querySelectorAll('video').forEach(video => {
          video.preload = 'none'; // Don't preload at all
          video.playsInline = true;
        });

        // Update video loading when modal opens
        document.querySelectorAll('.modal').forEach(modal => {
          modal.addEventListener('click', () => {
            if (modal.classList.contains('open')) {
              const video = modal.querySelector('video');
              if (video && !video.hasAttribute('data-loaded')) {
                video.preload = 'metadata';
                video.setAttribute('data-loaded', 'true');
              }
            }
          });
        });
      });
    </script>
</body>
  </html>