index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Global Developer Trends Analysis 2026</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #0d1117;
      color: #c9d1d9;
      line-height: 1.6;
    }
    header {
      background: linear-gradient(135deg, #1f6feb 0%, #58a6ff 100%);
      padding: 48px 24px;
      text-align: center;
    }
    header h1 { font-size: 2rem; color: #fff; margin-bottom: 8px; }
    header p  { font-size: 1rem; color: #cae8ff; max-width: 600px; margin: 0 auto 16px; }
    .badge {
      display: inline-block;
      background: rgba(255,255,255,0.2);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.4);
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 0.85rem;
      text-decoration: none;
    }
    .badge:hover { background: rgba(255,255,255,0.3); }
    main { max-width: 1100px; margin: 0 auto; padding: 40px 24px; }
    h2 {
      font-size: 1.3rem;
      color: #58a6ff;
      border-bottom: 1px solid #21262d;
      padding-bottom: 8px;
      margin: 40px 0 20px;
    }
    .insights {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
      margin-bottom: 40px;
    }
    .card {
      background: #161b22;
      border: 1px solid #21262d;
      border-radius: 8px;
      padding: 20px;
    }
    .card .icon { font-size: 1.6rem; margin-bottom: 8px; }
    .card h3 { font-size: 1rem; color: #e6edf3; margin-bottom: 6px; }
    .card p  { font-size: 0.88rem; color: #8b949e; }
    .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 16px;
    }
    .dash-item {
      background: #161b22;
      border: 1px solid #21262d;
      border-radius: 8px;
      overflow: hidden;
    }
    .dash-item img {
      width: 100%;
      display: block;
      transition: transform 0.2s;
    }
    .dash-item:hover img { transform: scale(1.02); }
    .dash-item figcaption {
      padding: 10px 14px;
      font-size: 0.85rem;
      color: #8b949e;
    }
    .stack-table { width: 100%; border-collapse: collapse; }
    .stack-table th, .stack-table td {
      text-align: left;
      padding: 10px 14px;
      border-bottom: 1px solid #21262d;
      font-size: 0.9rem;
    }
    .stack-table th { color: #58a6ff; font-weight: 600; }
    .stack-table td { color: #c9d1d9; }
    footer {
      text-align: center;
      padding: 32px;
      font-size: 0.82rem;
      color: #484f58;
      border-top: 1px solid #21262d;
      margin-top: 60px;
    }
    footer a { color: #58a6ff; text-decoration: none; }
  </style>
</head>
<body>

<header>
  <h1>Global Developer Trends Analysis (2026)</h1>
  <p>IBM Data Science Professional Capstone — Python · SQL · PowerBI · IBM Cognos</p>
  <a class="badge"
     href="https://us1.ca.analytics.ibm.com/bi/?perspective=dashboard&pathRef=.my_folders%2FIBM%2BCapstone%2BProject&action=view&mode=dashboard&subView=model0000019b997510b3_00000000&nav_filter=true"
     target="_blank">
    View Live Interactive Dashboard
  </a>
</header>

<main>

  <h2>Key Insights</h2>
  <div class="insights">
    <div class="card">
      <div class="icon">🧱</div>
      <h3>Core Stability</h3>
      <p>Python, SQL, and JavaScript remain the primary entry-to-industry stack for 2026.</p>
    </div>
    <div class="card">
      <div class="icon">☁️</div>
      <h3>Infrastructure Pivot</h3>
      <p>40% YoY growth in Cloud-native and NoSQL adoption vs. traditional RDBMS systems.</p>
    </div>
    <div class="card">
      <div class="icon">💰</div>
      <h3>Premium Stack</h3>
      <p>Go/Rust paired with Cloud Architecture outperforms standard Full-Stack by 18% in compensation.</p>
    </div>
  </div>

  <h2>Dashboard</h2>
  <div class="dashboard-grid">
    <figure class="dash-item">
      <img src="Dashboard/Current Tech Usage.png" alt="Current Tech Usage" />
      <figcaption>Current Technology Usage</figcaption>
    </figure>
    <figure class="dash-item">
      <img src="Dashboard/Future Trends.png" alt="Future Trends" />
      <figcaption>Future Technology Trends</figcaption>
    </figure>
    <figure class="dash-item">
      <img src="Dashboard/Annual Average Salary.png" alt="Annual Average Salary" />
      <figcaption>Annual Average Salary by Stack</figcaption>
    </figure>
    <figure class="dash-item">
      <img src="Dashboard/Demographics.png" alt="Demographics" />
      <figcaption>Developer Demographics</figcaption>
    </figure>
    <figure class="dash-item">
      <img src="Dashboard/Job Posting.png" alt="Job Postings" />
      <figcaption>In-Demand Skills from Job Postings</figcaption>
    </figure>
  </div>

  <h2>Tech Stack</h2>
  <table class="stack-table">
    <thead><tr><th>Stage</th><th>Tools</th></tr></thead>
    <tbody>
      <tr><td>Data Acquisition</td><td>BeautifulSoup, REST APIs</td></tr>
      <tr><td>Processing</td><td>Python — Pandas, NumPy (70K+ records)</td></tr>
      <tr><td>Analysis</td><td>SQL — SQLite</td></tr>
      <tr><td>Visualization</td><td>PowerBI, IBM Cognos Analytics</td></tr>
    </tbody>
  </table>

</main>

<footer>
  IBM Data Science Professional Certificate — Capstone Project &nbsp;|&nbsp;
  <a href="https://github.com/fayfayMN/Developer_skills_Trends_analysis">GitHub Repo</a>
</footer>

</body>
</html>