<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Melvin Gilbert — IT • AWS • MySQL • Python • REST API • PHP • JS • Git</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Melvin Gilbert — IT • AWS • MySQL • Python • REST API • PHP • JavaScript • Git • HL7 • FHIR • SNOMED CT • LOINC">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
  <style>
    :root{
      --bg-top:#f2f7fb; --bg-bottom:#ffffff;
      --text:#1a1d26; --muted:#54677a;
      --brand:#0078d7; --accent:#00b3e6;
      --line:rgba(0,0,0,.08); --card-bg:#ffffff;
      --chip-bg:#e3f2fd; --chip-fg:#004e98;
    }
    html,body{background:linear-gradient(to bottom,var(--bg-top),var(--bg-bottom));color:var(--text);scroll-behavior:smooth}
    .navbar{background:rgba(255,255,255,.95)!important;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
    .nav-link{color:var(--muted)!important;font-weight:500}
    .nav-link:hover,.nav-link.active{color:var(--brand)!important}
    section{padding:6rem 0;opacity:0;transform:translateY(20px);transition:all .6s ease}
    section.visible{opacity:1;transform:translateY(0)}
    #home{padding-top:8rem;background:radial-gradient(circle at top left,#e3f2fd 0%,#ffffff 80%);border-bottom:1px solid var(--line)}
    .btn-brand{background:linear-gradient(90deg,var(--brand),var(--accent));border:0;color:#fff;font-weight:600;box-shadow:0 3px 10px rgba(0,120,215,.3)}
    .btn-brand:hover{filter:brightness(1.1);color:#fff}
    .card{background:var(--card-bg);border:1px solid rgba(0,0,0,.06);box-shadow:0 5px 18px rgba(0,0,0,.05);border-radius:14px}
    .badge-skill{background:var(--chip-bg);color:var(--chip-fg);border-radius:10px;padding:.4rem .65rem;font-size:.85rem;font-weight:600}
    .divider{height:1px;background:var(--line);margin:1rem 0 1.5rem}
    .footer{border-top:1px solid var(--line);background:#f5f8fb;color:var(--muted)}
    .lead{color:var(--muted)!important}
    .section-sub{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
  </style>
</head>
<body>

<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg fixed-top">
  <div class="container">
    <a class="navbar-brand fw-bold text-primary" href="#home">Melvin Gilbert</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div id="nav" class="collapse navbar-collapse">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#skills">Skills</a></li>
        <li class="nav-item"><a class="nav-link" href="#experience">Experience</a></li>
        <li class="nav-item"><a class="nav-link" href="#education">Education</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- HOME -->
<section id="home">
  <div class="container text-center">
    <h1 class="display-5 fw-bold mb-3">Hi, I’m <span class="text-primary">Melvin Gilbert</span></h1>
    <p class="lead mx-auto" style="max-width:800px;">
      IT • AWS • MySQL • Python • REST API • PHP • JavaScript • Git • HL7 • FHIR • SNOMED CT • LOINC<br>
      I design and build secure, scalable, and data-driven systems.
    </p>
    <p class="mt-2 text-secondary">Resume available upon request.</p>
    <div class="mt-4">
      <a href="#skills" class="btn btn-brand btn-lg me-2"><i class="bi bi-gear"></i> My Skills</a>
      <a href="#contact" class="btn btn-outline-dark btn-lg"><i class="bi bi-envelope"></i> Contact</a>
    </div>
  </div>
</section>

<!-- SKILLS -->
<section id="skills">
  <div class="container">
    <div class="text-center mb-4">
      <div class="section-sub">Core Skills</div>
      <h2 class="fw-bold">Technologies I use daily</h2>
    </div>

    <div class="row g-4">
      <div class="col-md-6 col-lg-4">
        <div class="card p-4 h-100">
          <h5 class="mb-1 text-primary"><i class="bi bi-cloud"></i> AWS & Cloud</h5>
          <div class="divider"></div>
          <p class="lead mb-3">Infrastructure, scaling, automation, and reliability.</p>
          <div class="d-flex flex-wrap gap-2">
            <span class="badge-skill">AWS</span><span class="badge-skill">EC2</span>
            <span class="badge-skill">RDS</span><span class="badge-skill">S3</span>
            <span class="badge-skill">CloudFront</span><span class="badge-skill">IAM</span>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="card p-4 h-100">
          <h5 class="mb-1 text-primary"><i class="bi bi-database"></i> MySQL & Data</h5>
          <div class="divider"></div>
          <p class="lead mb-3">Schema design, tuning, analytics, and backups.</p>
          <div class="d-flex flex-wrap gap-2">
            <span class="badge-skill">Normalization</span><span class="badge-skill">Indexing</span>
            <span class="badge-skill">FK Constraints</span><span class="badge-skill">Backups</span>
            <span class="badge-skill">Query Optimization</span>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4">
        <div class="card p-4 h-100">
          <h5 class="mb-1 text-primary"><i class="bi bi-code-slash"></i> Programming & APIs</h5>
          <div class="divider"></div>
          <p class="lead mb-3">APIs, automation, and integration.</p>
          <div class="d-flex flex-wrap gap-2">
            <span class="badge-skill">Python</span><span class="badge-skill">REST API</span>
            <span class="badge-skill">PHP</span><span class="badge-skill">JavaScript</span>
            <span class="badge-skill">Git</span><span class="badge-skill">Docker</span>
          </div>
        </div>
      </div>
    </div>

    <div class="row g-4 mt-1">
      <div class="col-12">
        <div class="card p-4">
          <h5 class="mb-1 text-primary"><i class="bi bi-hospital"></i> Healthcare Interoperability</h5>
          <div class="divider"></div>
          <p class="lead mb-3">Electronic Health Record (EHR) integration and standards.</p>
          <div class="d-flex flex-wrap gap-2">
            <span class="badge-skill">HL7</span><span class="badge-skill">FHIR</span>
            <span class="badge-skill">SNOMED CT</span><span class="badge-skill">LOINC</span>
            <span class="badge-skill">KPI Tracking</span><span class="badge-skill">Data Visualization</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- EXPERIENCE -->
<section id="experience">
  <div class="container">
    <div class="text-center mb-4">
      <div class="section-sub">Professional Overview</div>
      <h2 class="fw-bold">Experience & Projects</h2>
    </div>
    <div class="row justify-content-center">
      <div class="col-lg-10">

        <div class="card p-4 mb-4">
          <h5 class="fw-bold mb-2 text-primary">Technical and Analytical Skills</h5>
          <ul class="text-secondary mb-0">
            <li>EHR integration using <strong>HL7</strong>, <strong>FHIR</strong>, and <strong>SNOMED CT</strong>.</li>
            <li>MySQL database design and optimization.</li>
            <li>Statistical analysis, data visualization, and KPI tracking.</li>
            <li>Automation using Python for API workflows and trading bots.</li>
          </ul>
        </div>

        <div class="card p-4 mb-4">
          <h5 class="fw-bold mb-2 text-primary">Programming and Technology Tools</h5>
          <ul class="text-secondary mb-0">
            <li><strong>Languages:</strong> PHP, Python, JavaScript.</li>
            <li><strong>Cloud Infrastructure:</strong> AWS (EC2, RDS, S3, CloudFront, IAM) — 10+ years of DevOps experience.</li>
            <li><strong>Database Management:</strong> MySQL optimization and query tuning.</li>
            <li><strong>Containerization & Version Control:</strong> Docker and Git for deployment and versioning.</li>
            <li><strong>API Integration:</strong> Twilio and Meta APIs (WhatsApp, Facebook, Instagram).</li>
          </ul>
        </div>

        <div class="card p-4 mb-4">
          <h5 class="fw-bold mb-2 text-primary">MySQL Database Manager & AWS DevOps Engineer</h5>
          <ul class="text-secondary mb-0">
            <li>Designed and deployed cloud-based Hospital Management Systems (HMS) for hospitals and clinics.</li>
            <li>Automated patient records and insurance claim integrations.</li>
            <li>Integrated AI-powered modules for diagnosis and documentation improvement.</li>
            <li>Managed AWS infrastructure ensuring 99.9% uptime.</li>
            <li>Supported HL7/FHIR API interoperability (SATUSEHAT, BPJS SmartClaim).</li>
            <li>Implemented automated backups, replication, and monitoring systems.</li>
          </ul>
        </div>

        <div class="card p-4 mb-4">
          <h5 class="fw-bold mb-2 text-primary">Research and Project Experience</h5>
          <ul class="text-secondary mb-0">
            <li><strong>AI Clinical Documentation Translator (Ongoing):</strong> NLP model converting Bahasa Indonesia notes into FHIR-compliant data.</li>
            <li><strong>KuCoin & Alpaca Trading Bots:</strong> Automated trading using real-time APIs with averaging-down and breakout strategies.</li>
          </ul>
        </div>

        <div class="card p-4">
          <h5 class="fw-bold mb-2 text-primary">Awards</h5>
          <ul class="text-secondary mb-0">
            <li><strong>Summa Cum Laude</strong> — Bachelor of Applied Technology in Cybersecurity.</li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</section>

<!-- EDUCATION -->
<section id="education">
  <div class="container">
    <div class="text-center mb-4">
      <div class="section-sub">Education</div>
      <h2 class="fw-bold">Academic Background</h2>
    </div>
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6">
        <div class="card p-4 mb-3">
          <h5 class="mb-1 text-primary">Bachelor of Applied Technology in Cybersecurity</h5>
          <p class="text-secondary mb-0">Lone Star College, Cypress, TX — Graduated <em>Summa Cum Laude</em></p>
        </div>
        <div class="card p-4">
          <h5 class="mb-1 text-primary">Master of Health Information Management</h5>
          <p class="text-secondary mb-1">Concentration: Health Informatics and Data Analytics</p>
          <p class="text-secondary mb-0">Expected completion: 2027</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CONTACT -->
<section id="contact">
  <div class="container">
    <div class="text-center mb-4">
      <div class="section-sub">Contact</div>
      <h2 class="fw-bold">Let’s connect</h2>
    </div>
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6">
        <div class="card p-4">
          <ul class="list-unstyled mb-0">
            <li class="mb-3"><i class="bi bi-envelope"></i>
              <a href="/cdn-cgi/l/email-protection#eb868e879d8285ab868e879d82858c8287898e999fc5888486" class="link-primary"><span class="__cf_email__" data-cfemail="1a777f766c73745a777f766c73747d7376787f686e34797577">[email&#160;protected]</span></a>
            </li>
            <li class="mb-3"><i class="bi bi-github"></i>
              <a href="https://github.com/melvingilbert" target="_blank" rel="noopener" class="link-primary">github.com/melvingilbert</a>
            </li>
            <li class="mb-3"><i class="bi bi-instagram"></i>
              <a href="https://instagram.com/melvingilbert" target="_blank" rel="noopener" class="link-primary">instagram.com/melvingilbert</a>
            </li>
            <li class="mb-3"><i class="bi bi-twitter-x"></i>
              <a href="https://x.com/melvingilbert" target="_blank" rel="noopener" class="link-primary">x.com/melvingilbert</a>
            </li>
            <li class="mb-3"><i class="bi bi-geo-alt"></i> Houston, TX</li>
          </ul>
          <div class="mt-3 small text-secondary">Resume available upon request.</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FOOTER -->
<footer class="footer py-4">
  <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center gap-2">
    <div>© <span id="year"></span> Melvin Gilbert</div>
    <div class="text-secondary text-center">
      IT • AWS • MySQL • Python • REST API • PHP • JS • Git • HL7 • FHIR • SNOMED CT • LOINC
    </div>
  </div>
</footer>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// year
document.getElementById('year').textContent = new Date().getFullYear();

// fade-in on scroll
const observer = new IntersectionObserver(entries=>{
  entries.forEach(entry=>{ if(entry.isIntersecting) entry.target.classList.add('visible'); });
},{threshold:0.12});
document.querySelectorAll('section').forEach(sec=>observer.observe(sec));

// highlight navbar on scroll
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-link');
window.addEventListener('scroll',()=>{
  let current = '';
  sections.forEach(sec=>{
    const top = window.scrollY;
    const offset = sec.offsetTop - 120;
    const height = sec.offsetHeight;
    if(top >= offset && top < offset + height){ current = sec.id; }
  });
  navLinks.forEach(link=>{
    link.classList.remove('active');
    if(link.getAttribute('href') === '#'+current){ link.classList.add('active'); }
  });
});

// collapse mobile nav after clicking a link
document.querySelectorAll('.navbar .nav-link').forEach(a=>{
  a.addEventListener('click', ()=> {
    const nav = document.getElementById('nav');
    if(nav.classList.contains('show')){
      new bootstrap.Collapse(nav).toggle();
    }
  });
});
</script>
</body>
</html>
