<div style="background: #161B22; padding: 20px; border-radius: 12px; border-left: 4px solid #28a745;">
  <h3 style="color: #C9D1D9; margin-top: 0; margin-bottom: 10px;">🌱 Currently Learning</h3>
  <p style="color: #8B949E; margin: 0;">
    Advanced Vue.js 3, AI Integration, IONIC Framework, Vite Ecosystem
  </p>
</div>

<div style="background: #161B22; padding: 20px; border-radius: 12px; border-left: 4px solid #d73a49;">
  <h3 style="color: #C9D1D9; margin-top: 0; margin-bottom: 10px;">🎯 2024 Goals</h3>
  <p style="color: #8B949E; margin: 0;">
    Contribute to 10+ open-source projects<br>
    Master AI/ML integration in web apps<br>
    Build 5 production-ready Vue.js apps
  </p>
</div>

<img src="https://github-readme-streak-stats.herokuapp.com/?user=dixitcoder&theme=nord&hide_border=true&background=0D1117&stroke=30363d&ring=289BF9&fire=289BF9&currStreakLabel=289BF9" 
     alt="GitHub Streak" style="border-radius: 10px;" />

<!-- Project 1 -->
<div style="background: linear-gradient(135deg, #161B22 0%, #1a1f2a 100%); padding: 20px; border-radius: 15px; border: 1px solid #30363d; transition: all 0.3s;">
  <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px;">
    <h3 style="color: #C9D1D9; margin: 0; font-size: 18px;">🤖 AI Free Tools List</h3>
    <span style="background: #289BF9; color: white; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: bold;">Vue.js</span>
  </div>
  <p style="color: #8B949E; font-size: 14px; line-height: 1.5; margin-bottom: 15px;">
    Comprehensive collection of free AI tools and resources for developers and researchers
  </p>
  <div style="display: flex; justify-content: space-between; align-items: center;">
    <a href="https://github.com/dixitcoder/Ai-Free-Tools-List" 
       style="color: #289BF9; text-decoration: none; font-weight: bold; font-size: 14px;">
      View Project →
    </a>
    <span style="color: #8B949E; font-size: 12px;">⭐ 25+ Stars</span>
  </div>
</div>

<!-- Project 2 -->
<div style="background: linear-gradient(135deg, #161B22 0%, #1a1f2a 100%); padding: 20px; border-radius: 15px; border: 1px solid #30363d; transition: all 0.3s;">
  <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px;">
    <h3 style="color: #C9D1D9; margin: 0; font-size: 18px;">🦷 Dental Clinic System</h3>
    <span style="background: #28a745; color: white; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: bold;">Vue + Firebase</span>
  </div>
  <p style="color: #8B949E; font-size: 14px; line-height: 1.5; margin-bottom: 15px;">
    Full-featured dental clinic management system with appointment scheduling and patient records
  </p>
  <div style="display: flex; justify-content: space-between; align-items: center;">
    <a href="https://github.com/dixitcoder/dental-clinic-management-system-" 
       style="color: #289BF9; text-decoration: none; font-weight: bold; font-size: 14px;">
      View Project →
    </a>
    <span style="color: #8B949E; font-size: 12px;">⭐ 15+ Stars</span>
  </div>
</div>

<!-- Project 3 -->
<div style="background: linear-gradient(135deg, #161B22 0%, #1a1f2a 100%); padding: 20px; border-radius: 15px; border: 1px solid #30363d; transition: all 0.3s;">
  <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px;">
    <h3 style="color: #C9D1D9; margin: 0; font-size: 18px;">🔍 WebNmap Scanner</h3>
    <span style="background: #d73a49; color: white; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: bold;">Security Tool</span>
  </div>
  <p style="color: #8B949E; font-size: 14px; line-height: 1.5; margin-bottom: 15px;">
    Web-based network scanning tool for security analysis and penetration testing
  </p>
  <div style="display: flex; justify-content: space-between; align-items: center;">
    <a href="https://github.com/dixitcoder/WebNmap" 
       style="color: #289BF9; text-decoration: none; font-weight: bold; font-size: 14px;">
      View Project →
    </a>
    <span style="color: #8B949E; font-size: 12px;">⭐ 30+ Stars</span>
  </div>
</div>

<!-- Project 4 -->
<div style="background: linear-gradient(135deg, #161B22 0%, #1a1f2a 100%); padding: 20px; border-radius: 15px; border: 1px solid #30363d; transition: all 0.3s;">
  <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px;">
    <h3 style="color: #C9D1D9; margin: 0; font-size: 18px;">💻 Windows OS Clone</h3>
    <span style="background: #6f42c1; color: white; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: bold;">JavaScript</span>
  </div>
  <p style="color: #8B949E; font-size: 14px; line-height: 1.5; margin-bottom: 15px;">
    Interactive web-based Windows OS clone with desktop experience and applications
  </p>
  <div style="display: flex; justify-content: space-between; align-items: center;">
    <a href="https://github.com/dixitcoder/windows-clone" 
       style="color: #289BF9; text-decoration: none; font-weight: bold; font-size: 14px;">
      View Project →
    </a>
    <span style="color: #8B949E; font-size: 12px;">⭐ 40+ Stars</span>
  </div>
</div>

<div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 20px;">
  <a href="https://www.buymeacoffee.com/dixitcoder" target="_blank">
    <img src="https://img.shields.io/badge/Buy%20Me%20a%20Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black" alt="Buy Me A Coffee" height="45" />
  </a>
  <a href="https://ko-fi.com/dixitcoder" target="_blank">
    <img src="https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&logo=ko-fi&logoColor=white" alt="Ko-fi" height="45" />
  </a>
</div>