index.html

---
layout: default
title: Home
---

<div class="hero-section">
  <div class="container">
    <div class="hero-content">
      <div class="hero-text">
        <h1 class="hero-title typewriter" id="terminal-name">{{ site.data.profile.name }}</h1>
        <h2 class="hero-subtitle typewriter-delay-1" id="terminal-headline">{{ site.data.profile.headline }}</h2>
        <p class="hero-description typewriter-delay-2" id="terminal-bio">{{ site.data.profile.bio }}</p>
        <div class="hero-buttons fade-in-after-typing">
          <a href="{{ site.data.profile.contact.github }}" class="btn btn-primary github-btn" target="_blank">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" style="margin-right: 8px;">
              <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
            </svg>
            View GitHub
          </a>
          <a href="{{ site.data.profile.contact.linkedin }}" class="btn btn-secondary linkedin-btn" target="_blank">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" style="margin-right: 8px;">
              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
            </svg>
            Connect on LinkedIn
          </a>
        </div>
      </div>
      <div class="hero-image">
        <div class="profile-image-wrapper">
          <img src="https://avatars.githubusercontent.com/u/{{ site.github_username }}?s=400" alt="{{ site.data.profile.name }}" class="profile-image" onerror="this.style.display='none'">
          <div class="profile-image-glow"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Stats Section -->
<section class="stats-section">
  <div class="container">
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-number" data-count="{{ site.data.profile.experience.size }}">{{ site.data.profile.experience.size }}+</div>
        <div class="stat-label">Years Experience</div>
      </div>
      <div class="stat-card">
        <div class="stat-number" id="github-contributions" data-count="0">Loading...</div>
        <div class="stat-label">Contributions Last Year</div>
      </div>
      <div class="stat-card">
        <div class="stat-number" id="github-repos" data-count="0">Loading...</div>
        <div class="stat-label">Open Source Repos</div>
      </div>
    </div>
  </div>
</section>

<!-- Quick Links Section -->
<section class="quick-links-section">
  <div class="container">
    <div class="quick-links-grid">
      <a href="/resume.html" class="quick-link-card cv-card">
        <svg class="quick-link-icon" viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
          <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
        </svg>
        <h3>Professional CV</h3>
        <p>View my complete career history and skills</p>
      </a>
      <a href="/speaking/" class="quick-link-card speaking-card">
        <svg class="quick-link-icon" viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
          <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
        </svg>
        <h3>Speaking</h3>
        <p>Conferences, meetups, and sessions I deliver</p>
      </a>
      <a href="https://github.com/NotAwar?tab=repositories" class="quick-link-card projects-card" target="_blank">
        <svg class="quick-link-icon" viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
          <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
        </svg>
        <h3>GitHub Projects</h3>
        <p>Open source work and implementations</p>
      </a>
      <a href="/socials" class="quick-link-card socials-card">
        <svg class="quick-link-icon" viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
          <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z"/>
        </svg>
        <h3>Connect</h3>
        <p>Find me on social platforms</p>
      </a>
    </div>
  </div>
</section>

<style>
  /* CSS-based typewriter effect */
  .typewriter {
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 0.05em;
    opacity: 0;
    animation: 
      typing 0.8s steps(30, end) forwards,
      fade-in 0s 0s forwards;
  }
  
  .typewriter::after {
    content: '_';
    color: var(--gold-primary);
    animation: 
      blink-caret 0.75s step-end infinite,
      hide-cursor-0 0s 0.9s forwards;
  }
  
  .typewriter-delay-1 {
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: 0.05em;
    opacity: 0;
    animation: 
      typing 0.7s steps(40, end) 0.9s forwards,
      fade-in 0s 0.9s forwards;
  }
  
  .typewriter-delay-1::after {
    content: '_';
    color: var(--gold-primary);
    animation: blink-caret 0.75s step-end infinite 0.9s;
  }
  
  .typewriter-delay-2 {
    overflow: visible;
    white-space: normal;
    max-width: 600px;
    animation: fade-in 0.4s 1.7s forwards;
    opacity: 0;
  }
  
  @keyframes typing {
    from { 
      max-width: 0;
    }
    to { 
      max-width: 100%;
    }
  }
  
  @keyframes blink-caret {
    from, to { opacity: 0; }
    50% { opacity: 1; }
  }
  
  @keyframes hide-cursor-0 {
    to { 
      content: '';
      display: none;
    }
  }
  
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .fade-in-after-typing {
    opacity: 0;
    animation: fade-in 0.4s ease-in 2.6s forwards;
  }
  
  /* Mobile: disable typewriter effect for better readability */
  @media (max-width: 768px) {
    .typewriter,
    .typewriter-delay-1 {
      animation: none !important;
      width: auto !important;
      white-space: normal !important;
      overflow: visible !important;
      opacity: 1 !important;
    }
    
    .typewriter::after,
    .typewriter-delay-1::after {
      display: none !important;
    }
    
    .typewriter-delay-2 {
      animation: none !important;
      opacity: 1 !important;
    }
    
    .typewriter-delay-2::after {
      display: none !important;
    }
    
    .fade-in-after-typing {
      animation: none !important;
      opacity: 1 !important;
    }
  }
</style>

<script>
  // Fetch live GitHub contributions count
  async function fetchGitHubContributions() {
    const contributionsElement = document.getElementById('github-contributions');
    
    try {
      // Fetch the GitHub profile page
      const response = await fetch('https://github.com/NotAwar');
      const html = await response.text();
      
      // Parse the HTML to find the contribution count
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');
      
      // Find the contributions heading
      const contributionHeading = doc.querySelector('h2.f4.text-normal.mb-2');
      
      if (contributionHeading) {
        // Extract just the number from the text
        const text = contributionHeading.textContent.trim();
        const match = text.match(/^([\d,]+)/);
        
        if (match) {
          const count = match[1].replace(/,/g, '');
          const displayCount = parseInt(count).toLocaleString();
          
          // Animate the counter
          animateCounter(contributionsElement, parseInt(count), displayCount);
        } else {
          contributionsElement.textContent = '620+';
        }
      } else {
        contributionsElement.textContent = '620+';
      }
    } catch (error) {
      console.error('Error fetching GitHub contributions:', error);
      // Fallback to a default value
      contributionsElement.textContent = '620+';
    }
  }
  
  // Fetch live GitHub repos count
  async function fetchGitHubRepos() {
    const reposElement = document.getElementById('github-repos');
    
    try {
      // Use GitHub API to get user info
      const response = await fetch('https://api.github.com/users/NotAwar');
      const data = await response.json();
      
      if (data.public_repos) {
        // Animate the counter
        animateCounter(reposElement, data.public_repos, data.public_repos.toString());
      } else {
        reposElement.textContent = '45+';
      }
    } catch (error) {
      console.error('Error fetching GitHub repos:', error);
      // Fallback to a default value
      reposElement.textContent = '45+';
    }
  }
  
  // Animate counter from 0 to target
  function animateCounter(element, targetNum, displayCount) {
    const duration = 2000; // 2 seconds
    const steps = 60;
    const increment = targetNum / steps;
    let current = 0;
    let step = 0;
    
    const timer = setInterval(() => {
      step++;
      current += increment;
      
      if (step >= steps) {
        element.textContent = displayCount;
        clearInterval(timer);
      } else {
        element.textContent = Math.floor(current).toLocaleString();
      }
    }, duration / steps);
  }
  
  // Run on page load
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      fetchGitHubContributions();
      fetchGitHubRepos();
    });
  } else {
    fetchGitHubContributions();
    fetchGitHubRepos();
  }
</script>