+
+
+
+
+ {skills.length > 0 && (
+
+ {skills.map((skill) => (
+
+ ))}
+
+ )}
+
+
+
+
+ {displayItems.map((contrib) => (
+
+ ))}
+ {items.length > 3 && (
+
+ Show {items.length - 3} more contributions in this project
+
+ )}
+
+
+
+
+ )
+}
+
+function ContributionRow({ contrib }: { contrib: GitHubContribution }) {
+ const isPR = contrib.type === "pr"
+ const isMerged = contrib.status === "merged"
+ const isOpen = contrib.status === "open"
+
+ let Icon = CircleDot
+ let iconColor = "text-green-600 dark:text-green-400 bg-green-500/10"
+
+ if (isPR) {
+ if (isMerged) {
+ Icon = GitMerge
+ iconColor = "text-purple-600 dark:text-purple-400 bg-purple-500/10"
+ } else if (isOpen) {
+ Icon = GitPullRequest
+ iconColor = "text-green-600 dark:text-green-400 bg-green-500/10"
+ } else {
+ Icon = GitPullRequest
+ iconColor = "text-red-600 dark:text-red-400 bg-red-500/10"
+ }
+ } else {
+ if (isOpen) {
+ Icon = CircleDot
+ iconColor = "text-green-600 dark:text-green-400 bg-green-500/10"
+ } else {
+ Icon = CheckCircle2
+ iconColor = "text-red-600 dark:text-red-400 bg-red-500/10"
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
#{contrib.number}
+
•
+
+ {formatDistanceToNow(new Date(contrib.createdAt), {
+ addSuffix: true,
+ })}
+
+ {contrib.isPinned && (
+ <>
+
•
+
+
+ Pinned
+
+
+ )}
+
+
+
+ {contrib.title}
+
+
+
+ )
+}
diff --git a/src/app/(app)/components/home/sections/opensource-contributions/index.tsx b/src/app/(app)/components/home/sections/opensource-contributions/index.tsx
new file mode 100644
index 0000000..f90c718
--- /dev/null
+++ b/src/app/(app)/components/home/sections/opensource-contributions/index.tsx
@@ -0,0 +1,109 @@
+import Link from "next/link"
+import { CONTRIBUTION_CONFIG } from "@/data/portfolio/opensource-contributions"
+import { ArrowRight } from "lucide-react"
+
+import type { GitHubContribution } from "@/types/opensource-contributions"
+import { getOpenSourceContributions } from "@/lib/opensource-contributions"
+import {
+ Panel,
+ PanelContent,
+ PanelHeader,
+ PanelTitle,
+} from "@/components/panel"
+
+import { ProjectCard } from "./client"
+
+// Helper to map repo to languages/skills
+function getSkillsForRepo(repo: string): string[] {
+ const name = repo.toLowerCase()
+ if (name.includes("nestjs/nest") || name.includes("nestjs/")) {
+ return ["TypeScript", "Node.js", "NestJS"]
+ }
+ if (name.includes("vendurehq/vendure") || name.includes("vendure/")) {
+ return ["TypeScript", "Node.js", "GraphQL"]
+ }
+ if (name.includes("shoperzz/shoperzz") || name.includes("shoperzz/")) {
+ return ["TypeScript", "Next.js", "NestJS", "GraphQL"]
+ }
+ if (name.includes("wistant/portfolio") || name.includes("portfolio")) {
+ return ["TypeScript", "Next.js", "React"]
+ }
+ return ["TypeScript"]
+}
+
+export async function OpenSourceContributions() {
+ const contributions = await getOpenSourceContributions()
+ const username = CONTRIBUTION_CONFIG.username
+
+ // Filter out personal repositories unless explicitly included or pinned
+ const filtered = contributions.filter((item) => {
+ const repoOwner = item.repository.split("/")[0]
+ const isOwnRepo = repoOwner.toLowerCase() === username.toLowerCase()
+ const isIncluded = CONTRIBUTION_CONFIG.includePersonalRepos?.some(
+ (r) => r.toLowerCase() === item.repository.toLowerCase()
+ )
+ return !isOwnRepo || isIncluded || item.isPinned
+ })
+
+ // Group and sort by repository (pinned items first inside groups)
+ const groups: Record<
+ string,
+ { items: GitHubContribution[]; skills: string[] }
+ > = {}
+ filtered.forEach((item) => {
+ if (!groups[item.repository]) {
+ groups[item.repository] = {
+ items: [],
+ skills: getSkillsForRepo(item.repository),
+ }
+ }
+ groups[item.repository].items.push(item)
+ })
+
+ // Sort items in each group: pinned first, then by date desc
+ Object.values(groups).forEach((g) => {
+ g.items.sort((a, b) => {
+ if (a.isPinned && !b.isPinned) return -1
+ if (!a.isPinned && b.isPinned) return 1
+ return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+ })
+ })
+
+ const displayGroups = Object.entries(groups).slice(0, 3)
+
+ if (filtered.length === 0) {
+ return null
+ }
+
+ return (
+
+
+ Open Source Contributions 🌐
+
+
+
+
+ {displayGroups.map(([repoName, { items, skills }], index) => (
+
+ ))}
+
+
+ View all contributions
+
+
+
+ )
+}
diff --git a/src/app/(app)/page.tsx b/src/app/(app)/page.tsx
index b7b0b1f..c055dc6 100644
--- a/src/app/(app)/page.tsx
+++ b/src/app/(app)/page.tsx
@@ -2,14 +2,12 @@ import type { Metadata } from "next"
import { getDocsByCategory } from "@/data/doc/documents"
import { SPONSORS } from "@/data/sponsor-data"
-import { cn } from "@/lib/utils"
import { BlocksSeparator } from "@/components/blocks-separator"
import { Blog } from "./(pages)/blog/components"
import { Certifications } from "./(pages)/certifications/components"
import { Projects } from "./(pages)/projects/components"
import { ProfileCover } from "./components/home/profile/cover"
-import { ProfileHeader } from "./components/home/profile/header"
import { SocialLinks } from "./components/home/profile/social"
import { About } from "./components/home/sections/about"
import { Experiences } from "./components/home/sections/experiences"
@@ -31,13 +29,14 @@ export default function HomePage() {
<>
-
+ {/*
*/}
+ {/*
*/}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index aa10b7b..29e6c41 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -10,6 +10,7 @@ import type { WebSite, WithContext } from "schema-dts"
import { META_THEME_COLORS, SITE_INFO, X_HANDLE } from "@/config/site"
import { fontVariables } from "@/lib/fonts"
import { Providers } from "@/components/providers"
+import { RandomBackground } from "@/components/random-background"
function getWebSiteJsonLd(): WithContext
{
return {
@@ -140,6 +141,7 @@ export default function RootLayout({
+
{children}
diff --git a/src/components/random-background.tsx b/src/components/random-background.tsx
new file mode 100644
index 0000000..353db00
--- /dev/null
+++ b/src/components/random-background.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+const BACKGROUNDS = [
+ "/backgrounds/image1.webp",
+ "/backgrounds/image2.webp",
+ "/backgrounds/image3.webp",
+ "/backgrounds/image4.webp",
+ "/backgrounds/image5.webp",
+ "/backgrounds/image6.webp",
+ "/backgrounds/image7.webp",
+ "/backgrounds/image8.webp",
+]
+
+export function RandomBackground() {
+ const [bg, setBg] = useState("")
+
+ useEffect(() => {
+ // Pick a random background image on client mount, wrapped in requestAnimationFrame to avoid synchronous render warning
+ const randomIndex = Math.floor(Math.random() * BACKGROUNDS.length)
+ const handle = requestAnimationFrame(() => {
+ setBg(BACKGROUNDS[randomIndex])
+ })
+ return () => cancelAnimationFrame(handle)
+ }, [])
+
+ if (!bg) return null
+
+ return (
+
+ )
+}
diff --git a/src/config/site.ts b/src/config/site.ts
index 0b72274..6fd3d1a 100644
--- a/src/config/site.ts
+++ b/src/config/site.ts
@@ -29,6 +29,10 @@ export const MAIN_NAV: NavItem[] = [
title: "Certifications",
href: "/certifications",
},
+ {
+ title: "Open Source",
+ href: "/opensource",
+ },
...(SPONSORS.length > 0
? [
{
diff --git a/src/data/portfolio/opensource-contributions.ts b/src/data/portfolio/opensource-contributions.ts
new file mode 100644
index 0000000..b563bd6
--- /dev/null
+++ b/src/data/portfolio/opensource-contributions.ts
@@ -0,0 +1,126 @@
+import type {
+ ContributionConfig,
+ GitHubContribution,
+} from "@/types/opensource-contributions"
+import { GITHUB_USERNAME } from "@/config/site"
+
+export const CONTRIBUTION_CONFIG: ContributionConfig = {
+ username: GITHUB_USERNAME,
+ includePersonalRepos: [
+ "wistant/portfolio", // Explicitly show this personal repository
+ ],
+ pinnedPRs: [
+ { owner: "shoperzz", repo: "shoperzz", number: 42 },
+ { owner: "wistant", repo: "portfolio", number: 8 },
+ ],
+}
+
+export const MOCK_CONTRIBUTIONS: GitHubContribution[] = [
+ {
+ id: 1,
+ title:
+ "feat(core): implement high-performance cache interceptor for distributed systems",
+ url: "https://github.com/nestjs/nest/pull/42012",
+ repository: "nestjs/nest",
+ repositoryUrl: "https://github.com/nestjs/nest",
+ type: "pr",
+ status: "merged",
+ createdAt: "2026-05-10T14:22:00Z",
+ closedAt: "2026-05-12T10:00:00Z",
+ number: 42012,
+ labels: [
+ { name: "type: feature", color: "0e8a16" },
+ { name: "status: merged", color: "6f42c1" },
+ ],
+ },
+ {
+ id: 2,
+ title:
+ "fix(graphql): resolve database connection pooling issues under heavy loads",
+ url: "https://github.com/vendurehq/vendure/pull/189",
+ repository: "vendurehq/vendure",
+ repositoryUrl: "https://github.com/vendurehq/vendure",
+ type: "pr",
+ status: "merged",
+ createdAt: "2026-04-15T09:15:00Z",
+ closedAt: "2026-04-16T16:30:00Z",
+ number: 189,
+ labels: [
+ { name: "bug", color: "d73a4a" },
+ { name: "GraphQL", color: "a2eeef" },
+ ],
+ },
+ {
+ id: 3,
+ title:
+ "feat(admin): implement complete role-based access control dashboard UI",
+ url: "https://github.com/shoperzz/shoperzz/pull/42",
+ repository: "shoperzz/shoperzz",
+ repositoryUrl: "https://github.com/shoperzz/shoperzz",
+ type: "pr",
+ status: "open",
+ createdAt: "2026-06-01T11:00:00Z",
+ number: 42,
+ labels: [
+ { name: "enhancement", color: "a2eeef" },
+ { name: "frontend", color: "c5def5" },
+ ],
+ },
+ {
+ id: 4,
+ title: "perf(core): optimize memory leak in hot reload module",
+ url: "https://github.com/nestjs/nest/pull/41982",
+ repository: "nestjs/nest",
+ repositoryUrl: "https://github.com/nestjs/nest",
+ type: "pr",
+ status: "closed",
+ createdAt: "2026-03-20T08:00:00Z",
+ closedAt: "2026-03-22T09:00:00Z",
+ number: 41982,
+ labels: [
+ { name: "performance", color: "d876e3" },
+ { name: "wontfix", color: "ffffff" },
+ ],
+ },
+ {
+ id: 5,
+ title: "docs(llms): update general index endpoints and structure manifests",
+ url: "https://github.com/wistant/portfolio/pull/8",
+ repository: "wistant/portfolio",
+ repositoryUrl: "https://github.com/wistant/portfolio",
+ type: "pr",
+ status: "merged",
+ createdAt: "2026-06-16T18:00:00Z",
+ closedAt: "2026-06-16T19:30:00Z",
+ number: 8,
+ labels: [{ name: "documentation", color: "0075ca" }],
+ },
+ {
+ id: 6,
+ title: "issue: core module crashes on custom multi-tenant configuration",
+ url: "https://github.com/shoperzz/shoperzz/issues/12",
+ repository: "shoperzz/shoperzz",
+ repositoryUrl: "https://github.com/shoperzz/shoperzz",
+ type: "issue",
+ status: "open",
+ createdAt: "2026-06-05T12:00:00Z",
+ number: 12,
+ labels: [
+ { name: "bug", color: "d73a4a" },
+ { name: "critical", color: "e11d48" },
+ ],
+ },
+ {
+ id: 7,
+ title: "issue: support dynamic schema extensions via graphql-tools",
+ url: "https://github.com/vendurehq/vendure/issues/88",
+ repository: "vendurehq/vendure",
+ repositoryUrl: "https://github.com/vendurehq/vendure",
+ type: "issue",
+ status: "closed",
+ createdAt: "2026-02-10T10:00:00Z",
+ closedAt: "2026-02-15T18:00:00Z",
+ number: 88,
+ labels: [{ name: "feature request", color: "fbca04" }],
+ },
+]
diff --git a/src/lib/opensource-contributions.ts b/src/lib/opensource-contributions.ts
new file mode 100644
index 0000000..8a122c0
--- /dev/null
+++ b/src/lib/opensource-contributions.ts
@@ -0,0 +1,193 @@
+import { execSync } from "node:child_process"
+import { unstable_cache } from "next/cache"
+import {
+ CONTRIBUTION_CONFIG,
+ MOCK_CONTRIBUTIONS,
+} from "@/data/portfolio/opensource-contributions"
+
+import type { GitHubContribution } from "@/types/opensource-contributions"
+
+interface GitHubSearchItem {
+ id: number
+ title: string
+ html_url: string
+ number: number
+ state: string
+ created_at: string
+ closed_at?: string
+ repository_url: string
+ pull_request?: {
+ merged_at?: string | null
+ }
+ labels?: Array<{ name: string; color: string }>
+}
+
+interface GitHubSearchResponse {
+ items: GitHubSearchItem[]
+}
+
+async function fetchOpenSourceContributions(): Promise<
+ GitHubContribution[] | null
+> {
+ const { username } = CONTRIBUTION_CONFIG
+ // Search for issues and PRs created by the user
+ const query = `author:${username}`
+ const url = `https://api.github.com/search/issues?q=${encodeURIComponent(query)}&per_page=100`
+
+ const headers: Record = {
+ "User-Agent": "wistant-portfolio",
+ Accept: "application/vnd.github.v3+json",
+ }
+
+ if (process.env.GITHUB_TOKEN) {
+ headers["Authorization"] = `token ${process.env.GITHUB_TOKEN}`
+ }
+
+ // Helper to extract repo name from repository_url: "https://api.github.com/repos/owner/repo" -> "owner/repo"
+ const getRepoName = (repoUrl: string): string => {
+ const parts = repoUrl.split("/repos/")
+ return parts.length > 1 ? parts[1] : ""
+ }
+
+ // Helper to get repo web URL from name
+ const getRepoWebUrl = (repoName: string): string => {
+ return `https://github.com/${repoName}`
+ }
+
+ // 1. Try native fetch first
+ try {
+ const timeout = 6000
+ const controller = new AbortController()
+ const timeoutId = setTimeout(() => controller.abort(), timeout)
+
+ const res = await fetch(url, {
+ headers,
+ signal: controller.signal,
+ next: { revalidate: 3600 }, // Cache at fetch level for 1 hour
+ })
+ clearTimeout(timeoutId)
+
+ if (res.ok) {
+ const data = (await res.json()) as GitHubSearchResponse
+ if (data.items) {
+ return mapGitHubItems(data.items, getRepoName, getRepoWebUrl)
+ }
+ }
+ } catch {
+ // Fail silently and try curl fallback
+ }
+
+ // 2. Try curl fallback (handles Node.js DNS/timeout quirks in some environments)
+ try {
+ const authHeader = process.env.GITHUB_TOKEN
+ ? ` -H "Authorization: token ${process.env.GITHUB_TOKEN}"`
+ : ""
+ const output = execSync(
+ `curl -s -H "User-Agent: wistant-portfolio" -H "Accept: application/vnd.github.v3+json"${authHeader} "${url}"`,
+ {
+ encoding: "utf8",
+ timeout: 6000,
+ }
+ )
+ const data = JSON.parse(output) as GitHubSearchResponse
+ if (data.items) {
+ return mapGitHubItems(data.items, getRepoName, getRepoWebUrl)
+ }
+ } catch (error) {
+ const message = error instanceof Error ? error.message : String(error)
+ console.warn(
+ `All methods to fetch GitHub search contributions failed (${message}). Using mock data.`
+ )
+ }
+
+ return null
+}
+
+function mapGitHubItems(
+ items: GitHubSearchItem[],
+ getRepoName: (url: string) => string,
+ getRepoWebUrl: (name: string) => string
+): GitHubContribution[] {
+ return items.map((item) => {
+ const repoName = getRepoName(item.repository_url)
+ const [owner, repo] = repoName.split("/")
+ const isPR = !!item.pull_request
+ let status: "open" | "merged" | "closed" = "open"
+
+ if (isPR) {
+ if (item.pull_request?.merged_at) {
+ status = "merged"
+ } else if (item.state === "closed") {
+ status = "closed"
+ }
+ } else {
+ status = item.state === "open" ? "open" : "closed"
+ }
+
+ const isPinned = CONTRIBUTION_CONFIG.pinnedPRs?.some(
+ (pinned) =>
+ pinned.owner.toLowerCase() === owner.toLowerCase() &&
+ pinned.repo.toLowerCase() === repo.toLowerCase() &&
+ pinned.number === item.number
+ )
+
+ return {
+ id: item.id,
+ title: item.title,
+ url: item.html_url,
+ repository: repoName,
+ repositoryUrl: getRepoWebUrl(repoName),
+ type: isPR ? "pr" : "issue",
+ status,
+ createdAt: item.created_at,
+ closedAt: item.closed_at,
+ number: item.number,
+ labels: item.labels?.map((label) => ({
+ name: label.name,
+ color: label.color,
+ })),
+ isPinned,
+ }
+ })
+}
+
+let devCachePromise: Promise | null = null
+
+function getMockContributionsWithPinned(): GitHubContribution[] {
+ return MOCK_CONTRIBUTIONS.map((item) => {
+ const [owner, repo] = item.repository.split("/")
+ const isPinned = CONTRIBUTION_CONFIG.pinnedPRs?.some(
+ (pinned) =>
+ pinned.owner.toLowerCase() === owner.toLowerCase() &&
+ pinned.repo.toLowerCase() === repo.toLowerCase() &&
+ pinned.number === item.number
+ )
+ return { ...item, isPinned }
+ })
+}
+
+async function getCachedDevContributions(): Promise {
+ if (!devCachePromise) {
+ devCachePromise = fetchOpenSourceContributions()
+ }
+ const data = await devCachePromise
+ if (data) {
+ return data
+ }
+ devCachePromise = null
+ return getMockContributionsWithPinned()
+}
+
+async function getProductionContributions(): Promise {
+ const data = await fetchOpenSourceContributions()
+ return data || getMockContributionsWithPinned()
+}
+
+export const getOpenSourceContributions =
+ process.env.NODE_ENV === "development"
+ ? getCachedDevContributions
+ : unstable_cache(
+ getProductionContributions,
+ ["opensource-contributions"],
+ { revalidate: 86400 } // Cache for 1 day in production
+ )
diff --git a/src/types/opensource-contributions.ts b/src/types/opensource-contributions.ts
new file mode 100644
index 0000000..88ef3cf
--- /dev/null
+++ b/src/types/opensource-contributions.ts
@@ -0,0 +1,20 @@
+export interface GitHubContribution {
+ id: number
+ title: string
+ url: string
+ repository: string
+ repositoryUrl: string
+ type: "pr" | "issue"
+ status: "open" | "merged" | "closed"
+ createdAt: string
+ closedAt?: string
+ number: number
+ labels?: Array<{ name: string; color: string }>
+ isPinned?: boolean
+}
+
+export interface ContributionConfig {
+ username: string
+ includePersonalRepos?: string[]
+ pinnedPRs?: Array<{ owner: string; repo: string; number: number }>
+}
{
+ e.currentTarget.style.display = "none"
+ }}
+ />
+ e.stopPropagation()} // Prevent expand on click
+ className="font-mono text-base font-semibold tracking-tight text-foreground transition-colors hover:text-zinc-600 hover:underline dark:hover:text-zinc-300"
+ >
+ {repoName}
+
+
+ {items.length}{" "}
+ {items.length === 1
+ ? "contribution"
+ : "contributions"}
+
+