feat: add multi-link support and new contribution items

Author: abhuzz

public/Kotlin_Icon.png

@@ -806,14 +806,20 @@ const ContributionsPage = () => {
       </div>
 
       <div className="contributions-list">
-        {currentItems.map((item: ContributionItem) => (
-          <a
-            key={item.id}
-            href={item.redirectionLink}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="contribution-card-link"
-          >
+        {currentItems.map((item: ContributionItem) => {
+          const hasManyLinks = item.redirectionLinks.length > 1;
+
+          const getLinkLabel = (url: string) => {
+            try {
+              const hostname = new URL(url).hostname.replace('www.', '');
+              if (hostname.includes('youtube')) return 'YouTube';
+              if (hostname.includes('github')) return 'GitHub';
+              const parts = hostname.split('.');
+              return parts.length > 1 ? parts.slice(0, -1).join('.') : hostname;
+            } catch { return 'Link'; }
+          };
+
+          const cardContent = (
             <GlassCard hover className="contribution-card">
               <div className="contribution-image-wrapper">
                 <img src={`/${item.imageUrl}`} alt={item.title} className="contribution-image" />
@@ -828,13 +834,48 @@ const ContributionsPage = () => {
                 <h3 className="contribution-title">{item.title}</h3>
                 <p className="contribution-card-subtitle">{item.subtitle}</p>
                 <p className="contribution-description">{item.description}</p>
-                <span className="contribution-read-more">
-                  Read More <ArrowRight size={16} />
-                </span>
+                {hasManyLinks ? (
+                  <div className="contribution-links">
+                    {item.redirectionLinks.map((link, idx) => (
+                      <a
+                        key={idx}
+                        href={link}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="contribution-link-btn"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <Link size={14} />
+                        {getLinkLabel(link)}
+                        <ArrowRight size={14} />
+                      </a>
+                    ))}
+                  </div>
+                ) : (
+                  <span className="contribution-read-more">
+                    Read More <ArrowRight size={16} />
+                  </span>
+                )}
               </div>
             </GlassCard>
-          </a>
-        ))}
+          );
+
+          if (hasManyLinks) {
+            return <div key={item.id} className="contribution-card-link">{cardContent}</div>;
+          }
+
+          return (
+            <a
+              key={item.id}
+              href={item.redirectionLinks[0]}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="contribution-card-link"
+            >
+              {cardContent}
+            </a>
+          );
+        })}
       </div>
 
       {totalPages > 1 && (
@@ -2224,6 +2265,39 @@ const App = () => {
           color: #22d3ee;
         }
 
+        /* Multi-link buttons */
+        .contribution-links {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.6rem;
+          margin-top: auto;
+          padding-top: 0.75rem;
+        }
+
+        .contribution-link-btn {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.4rem;
+          padding: 0.45rem 1rem;
+          border-radius: 10px;
+          border: 1px solid rgba(6, 182, 212, 0.3);
+          background: rgba(6, 182, 212, 0.08);
+          color: #06b6d4;
+          font-size: 0.82rem;
+          font-weight: 600;
+          text-decoration: none;
+          transition: all 0.3s ease;
+          white-space: nowrap;
+        }
+
+        .contribution-link-btn:hover {
+          background: rgba(6, 182, 212, 0.2);
+          border-color: rgba(6, 182, 212, 0.5);
+          box-shadow: 0 4px 15px rgba(6, 182, 212, 0.15);
+          color: #22d3ee;
+          transform: translateY(-1px);
+        }
+
         /* Pagination */
         .pagination-controls {
           display: flex;

public/swiftui-256x256_2x.png

@@ -6,7 +6,7 @@ export interface ContributionItem {
   date: string;
   description: string;
   imageUrl: string;
-  redirectionLink: string;
+  redirectionLinks: string[]; // Supports multiple links
 }
 
 // ============================================================
@@ -16,6 +16,57 @@ export interface ContributionItem {
 // ============================================================
 
 export const contributions: ContributionItem[] = [
+  {
+    id: 5,
+    title: "Hello, SwiftUI",
+    subtitle: "Get to know Xcode, Swift, and SwiftUI",
+    date: "March 24, 2026",
+    description:
+      "You will build Chat Prototype, a chat conversation using text views. The text and colors in the project are just suggestions, so feel free to make it your own by changing the words and style.",
+    imageUrl: "swiftui-256x256_2x.png",
+    redirectionLinks: [
+      "https://developer.apple.com/tutorials/develop-in-swift/hello-swiftui",
+    ],
+  },
+  {
+    id: 4,
+    title: "Flutter Learning Resources",
+    subtitle: "A catalog of tutorials, samples, and workshops",
+    date: "March 24, 2026",
+    description:
+      "An extensive collection of curated learning materials including guided Codelabs, feature-rich demo applications, instructor-led workshops, and quick-solution recipes for common development challenges.",
+    imageUrl: "Flutter_learning_resources_dashatar.png",
+    redirectionLinks: [
+      "https://docs.flutter.dev/learn/learning-resources",
+    ],
+  },
+  {
+    id: 3,
+    title: "Take Kotlin Tour",
+    subtitle:
+      "Kotlin is a modern language that's concise, multiplatform, and interoperable with Java and other languages.",
+    date: "March 24, 2026",
+    description:
+      "Understand the fundamentals of Kotlin and Jetpack Compose, Build basic Android apps, Use Jetpack libraries and modern Android development practices, Create adaptive layouts optimized for different display sizes",
+    imageUrl: "Kotlin_Icon.png",
+    redirectionLinks: [
+      "https://developer.android.com/courses/android-basics-compose/course",
+      "https://kotlinlang.org/docs/getting-started.html",
+    ],
+  },
+  {
+    id: 2,
+    title: "Flutter Tutorial",
+    subtitle: "Build pixel-perfect applications from scratch",
+    date: "March 24, 2026",
+    description:
+      "A comprehensive guide to building Flutter apps for mobile, desktop, and web. Starting from a blank canvas, you'll build several small applications to master critical framework features. Note: Requires a Flutter environment and basic Dart knowledge.",
+    imageUrl: "Flutter_tutorial.png",
+    redirectionLinks: [
+      "https://docs.flutter.dev/learn/pathway/tutorial",
+      "https://www.youtube.com/playlist?list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ",
+    ],
+  },
   {
     id: 1,
     title: "A Swift Tour",
@@ -24,7 +75,8 @@ export const contributions: ContributionItem[] = [
     description:
       "Get started with Apple's powerful and intuitive programming language. This guide provides a comprehensive overview of Swift's core features, from simple values and control flow to functions, closures, and object-oriented patterns. Perfect for developers looking to master the fundamentals of pure Swift through practical, hands-on examples.",
     imageUrl: "swift-256x256_2x.png",
-    redirectionLink:
+    redirectionLinks: [
       "https://docs.swift.org/swift-book/documentation/the-swift-programming-language/guidedtour/",
+    ],
   },
 ];