portfolio/contributions.html at main · rahulkaushal04/portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <!-- ── Core Meta ──────────────────────────────────── -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Open Source Contributions - Rahul Kaushal</title>
  <meta name="description" content="Merged pull requests and open source contributions by Rahul Kaushal to projects like FastAPI, NumPy, and more.">
  <meta name="author" content="Rahul Kaushal">
  <meta name="theme-color" content="#0F1117">

  <!-- ── Open Graph ─────────────────────────────────── -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="Open Source Contributions - Rahul Kaushal">
  <meta property="og:description" content="Merged pull requests and open source contributions to popular repositories.">
  <meta property="og:url" content="https://rahulkaushal04.github.io/portfolio/contributions.html">
  <meta property="og:image" content="https://rahulkaushal04.github.io/portfolio/assets/images/og-image.png">

  <!-- ── Canonical ──────────────────────────────────── -->
  <link rel="canonical" href="https://rahulkaushal04.github.io/portfolio/contributions.html">

  <!-- ── Favicons ───────────────────────────────────── -->
  <link rel="icon" href="assets/images/favicon.ico" sizes="any">
  <link rel="icon" href="assets/images/favicon-32.png" type="image/png" sizes="32x32">
  <link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">

  <!-- ── Stylesheets ────────────────────────────────── -->
  <link rel="stylesheet" href="assets/css/main.css">
</head>

<body>
  <!-- ── Scroll Progress Bar ────────────────────────── -->
  <div class="scroll-progress" id="scrollProgress" aria-hidden="true"></div>

  <!-- ── Custom Cursor (desktop only) ───────────────── -->
  <div class="cursor-dot" id="cursorDot" aria-hidden="true"></div>

  <!-- ================================================================
       NAVBAR (Simplified for subpage)
       ================================================================ -->
  <header class="navbar navbar--subpage" id="navbar">
    <nav class="container flex-between">
      <!-- Logo: links back to portfolio home -->
      <a href="index.html" class="navbar__logo" aria-label="Back to portfolio">
        <span class="navbar__logo-text">RK<span class="text-gradient">.</span></span>
      </a>

      <!-- Back link -->
      <a href="index.html#contributions" class="btn btn-outline contributions-page__back-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="19" y1="12" x2="5" y2="12"></line>
          <polyline points="12 19 5 12 12 5"></polyline>
        </svg>
        <span>Back to Portfolio</span>
      </a>
    </nav>
  </header>

  <main>
    <!-- ==============================================================
         CONTRIBUTIONS PAGE HERO
         ============================================================== -->
    <section class="contributions-page__hero">
      <div class="container">
        <span class="section-label">Open Source</span>
        <h1 class="contributions-page__title reveal">All Contributions</h1>
        <p class="contributions-page__subtitle reveal">
          Pull requests I've submitted to projects I use and admire, merged and shipped.
        </p>

        <!-- Stats Row -->
        <div class="contributions__stats" id="contributionsStats">
          <!-- JS will inject stat counters here -->
        </div>

        <!-- Search & Filter Bar -->
        <div class="contributions-page__toolbar reveal">
          <div class="contributions-page__search-wrapper">
            <svg class="contributions-page__search-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="11" cy="11" r="8"></circle>
              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
            <input type="search" class="contributions-page__search" id="contributionSearch"
                   placeholder="Search contributions..." aria-label="Search contributions">
          </div>

          <!-- Repo filter chips (populated by JS) -->
          <div class="contributions-page__repo-filters" id="contributionRepoFilters" role="group" aria-label="Filter by repository">
            <button class="contributions-page__repo-btn active" data-repo="all">All</button>
          </div>
        </div>

        <!-- Contribution count -->
        <p class="contributions-page__count reveal" id="contributionCount"></p>
      </div>
    </section>

    <!-- ==============================================================
         CONTRIBUTIONS GRID (all contributions)
         ============================================================== -->
    <section class="contributions-page__listing">
      <div class="container">
        <div class="contributions__grid" id="contributionsGrid">
          <!-- JS will inject all contribution cards here -->
        </div>

        <!-- Empty state (shown when filters match nothing) -->
        <div class="contributions-page__empty" id="contributionsEmpty" hidden>
          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            <line x1="8" y1="11" x2="14" y2="11"></line>
          </svg>
          <p>No contributions match your search.</p>
          <button class="btn btn-outline" id="contributionsClearFilters">Clear Filters</button>
        </div>
      </div>
    </section>
  </main>

  <!-- ================================================================
       FOOTER
       ================================================================ -->
  <footer class="footer">
    <div class="container">
      <div class="footer__tech-stack reveal">
        <span class="footer__tech-label">Built with</span>
        <div class="footer__tech-badges">
          <span class="tag-chip">HTML5</span>
          <span class="tag-chip">CSS3</span>
          <span class="tag-chip">JavaScript</span>
          <span class="tag-chip">GitHub Pages</span>
        </div>
      </div>

      <p class="footer__copy">
        &copy; <span id="footerYear">2026</span> Rahul Kaushal. All rights reserved.
      </p>
    </div>

    <!-- Back to Top -->
    <button class="footer__back-to-top" id="backToTop" aria-label="Back to top">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="12" y1="19" x2="12" y2="5"></line>
        <polyline points="5 12 12 5 19 12"></polyline>
      </svg>
    </button>
  </footer>

  <!-- ── Noscript Fallback ──────────────────────────── -->
  <noscript>
    <style>
      .cursor-dot, .scroll-progress { display: none !important; }
      .reveal { opacity: 1 !important; transform: none !important; }
    </style>
  </noscript>

  <!-- ── Scripts ────────────────────────────────────── -->
  <script type="module" src="assets/js/contributions-page.js"></script>
</body>
</html>