dailydotdev · AmarTrebinjac · Feb 25, 2026
diff --git a/packages/shared/src/features/profile/components/githubRepos/GithubRepoCard.tsx b/packages/shared/src/features/profile/components/githubRepos/GithubRepoCard.tsx
@@ -0,0 +1,100 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { GitHubUserRepository } from '../../../../graphql/github';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+} from '../../../../components/typography/Typography';
+import { StarIcon } from '../../../../components/icons';
+import { IconSize } from '../../../../components/Icon';
+import { githubLanguageColors } from '../../../../lib/githubLanguageColors';
+import { largeNumberFormat } from '../../../../lib/numberFormat';
+
+interface GithubRepoCardProps {
+  repo: GitHubUserRepository;
+}
+
+export function GithubRepoCard({ repo }: GithubRepoCardProps): ReactElement {
+  const languageColor = repo.language
+    ? githubLanguageColors[repo.language]
+    : undefined;
+
+  return (
+    <a
+      href={repo.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex flex-col gap-2 rounded-16 border border-border-subtlest-tertiary p-4 transition-colors hover:border-border-subtlest-secondary"
+    >
+      <div className="flex items-center gap-1.5">
+        <Typography
+          type={TypographyType.Callout}
+          color={TypographyColor.Primary}
+          bold
+          className="truncate"
+        >
+          {repo.name}
+        </Typography>
+      </div>
+      {repo.description && (
+        <Typography
+          type={TypographyType.Footnote}
+          color={TypographyColor.Tertiary}
+          className="line-clamp-2"
+        >
+          {repo.description}
+        </Typography>
+      )}
+      <div className="mt-auto flex items-center gap-3">
+        {repo.language && (
+          <span className="flex items-center gap-1">
+            <span
+              className="inline-block size-3 rounded-full"
+              style={{
+                backgroundColor: languageColor ?? 'var(--text-quaternary)',
+              }}
+            />
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Quaternary}
+            >
+              {repo.language}
+            </Typography>
+          </span>
+        )}
+        {repo.stars > 0 && (
+          <span className="flex items-center gap-1">
+            <StarIcon
+              size={IconSize.XXSmall}
+              className="text-text-quaternary"
+            />
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Quaternary}
+            >
+              {largeNumberFormat(repo.stars)}
+            </Typography>
+          </span>
+        )}
+        {repo.forks > 0 && (
+          <span className="flex items-center gap-1">
+            <svg
+              className="size-3 text-text-quaternary"
+              viewBox="0 0 16 16"
+              fill="currentColor"
+            >
+              <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 0-1.5 0v.878H6.75v-.878a2.25 2.25 0 1 0-1.5 0ZM7.25 8.75a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 .75.75v2.5a2.25 2.25 0 1 1-1.51 0Zm.75 3.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm6 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" />
+            </svg>
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Quaternary}
+            >
+              {largeNumberFormat(repo.forks)}
+            </Typography>
+          </span>
+        )}
+      </div>
+    </a>
+  );
+}
diff --git a/packages/shared/src/features/profile/components/githubRepos/ProfileUserGithubRepos.tsx b/packages/shared/src/features/profile/components/githubRepos/ProfileUserGithubRepos.tsx
@@ -0,0 +1,53 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { PublicProfile } from '../../../../lib/user';
+import { useUserGithubRepos } from '../../hooks/useUserGithubRepos';
+import {
+  Typography,
+  TypographyType,
+  TypographyColor,
+} from '../../../../components/typography/Typography';
+import { GitHubIcon } from '../../../../components/icons';
+import { IconSize } from '../../../../components/Icon';
+import { GithubRepoCard } from './GithubRepoCard';
+
+interface ProfileUserGithubReposProps {
+  user: PublicProfile;
+}
+
+export function ProfileUserGithubRepos({
+  user,
+}: ProfileUserGithubReposProps): ReactElement | null {
+  const { repos, hasGithub, isLoading } = useUserGithubRepos(user);
+
+  if (!hasGithub || (!isLoading && repos.length === 0)) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-4 py-4">
+      <div className="flex items-center gap-2">
+        <GitHubIcon size={IconSize.XSmall} className="text-text-tertiary" />
+        <Typography
+          type={TypographyType.Body}
+          color={TypographyColor.Primary}
+          bold
+        >
+          GitHub Repositories
+        </Typography>
+      </div>
+      <div className="grid grid-cols-1 gap-3 laptop:grid-cols-2">
+        {isLoading
+          ? ['skeleton-1', 'skeleton-2', 'skeleton-3', 'skeleton-4'].map(
+              (key) => (
+                <div
+                  key={key}
+                  className="h-28 animate-pulse rounded-16 bg-surface-float"
+                />
+              ),
+            )
+          : repos.map((repo) => <GithubRepoCard key={repo.id} repo={repo} />)}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/shared/src/features/profile/hooks/useUserGithubRepos.ts b/packages/shared/src/features/profile/hooks/useUserGithubRepos.ts
@@ -0,0 +1,35 @@
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import type { PublicProfile } from '../../../lib/user';
+import { getUserGithubRepositories } from '../../../graphql/github';
+import { generateQueryKey, RequestKey, StaleTime } from '../../../lib/query';
+
+export function useUserGithubRepos(user: PublicProfile | null) {
+  const hasGithub = useMemo(() => {
+    if (!user?.socialLinks) {
+      return false;
+    }
+    return user.socialLinks.some((link) => link.platform === 'github');
+  }, [user?.socialLinks]);
+
+  const queryKey = generateQueryKey(
+    RequestKey.UserGithubRepos,
+    user,
+    'profile',
+  );
+
+  const query = useQuery({
+    queryKey,
+    queryFn: () => getUserGithubRepositories(user?.id as string),
+    staleTime: StaleTime.Default,
+    enabled: !!user?.id && hasGithub,
+  });
+
+  const repos = useMemo(() => query.data ?? [], [query.data]);
+
+  return {
+    ...query,
+    repos,
+    hasGithub,
+  };
+}
diff --git a/packages/shared/src/graphql/github.ts b/packages/shared/src/graphql/github.ts
@@ -0,0 +1,41 @@
+import { gql } from 'graphql-request';
+import { gqlClient } from './common';
+
+export type GitHubUserRepository = {
+  id: string;
+  owner: string;
+  name: string;
+  fullName: string;
+  url: string;
+  description: string | null;
+  stars: number;
+  forks: number;
+  language: string | null;
+  updatedAt: string;
+};
+
+export const USER_GITHUB_REPOSITORIES_QUERY = gql`
+  query UserGithubRepositories($userId: ID!) {
+    userGithubRepositories(userId: $userId) {
+      id
+      owner
+      name
+      fullName
+      url
+      description
+      stars
+      forks
+      language
+      updatedAt
+    }
+  }
+`;
+
+export const getUserGithubRepositories = async (
+  userId: string,
+): Promise<GitHubUserRepository[]> => {
+  const result = await gqlClient.request<{
+    userGithubRepositories: GitHubUserRepository[];
+  }>(USER_GITHUB_REPOSITORIES_QUERY, { userId });
+  return result.userGithubRepositories;
+};
diff --git a/packages/shared/src/lib/githubLanguageColors.ts b/packages/shared/src/lib/githubLanguageColors.ts
@@ -0,0 +1,33 @@
+export const githubLanguageColors: Record<string, string> = {
+  TypeScript: '#3178c6',
+  JavaScript: '#f1e05a',
+  Python: '#3572A5',
+  Java: '#b07219',
+  Go: '#00ADD8',
+  Rust: '#dea584',
+  'C++': '#f34b7d',
+  C: '#555555',
+  'C#': '#178600',
+  Ruby: '#701516',
+  PHP: '#4F5D95',
+  Swift: '#F05138',
+  Kotlin: '#A97BFF',
+  Dart: '#00B4AB',
+  Scala: '#c22d40',
+  Shell: '#89e051',
+  Lua: '#000080',
+  Haskell: '#5e5086',
+  R: '#198CE7',
+  Elixir: '#6e4a7e',
+  Clojure: '#db5855',
+  Erlang: '#B83998',
+  Julia: '#a270ba',
+  Zig: '#ec915c',
+  Nim: '#ffc200',
+  HTML: '#e34c26',
+  CSS: '#563d7c',
+  Vue: '#41b883',
+  SCSS: '#c6538c',
+  Svelte: '#ff3e00',
+  'Objective-C': '#438eff',
+};
diff --git a/packages/shared/src/lib/query.ts b/packages/shared/src/lib/query.ts
@@ -249,6 +249,7 @@ export enum RequestKey {
   UserAchievements = 'user_achievements',
   TrackedAchievement = 'tracked_achievement',
   AchievementSyncStatus = 'achievement_sync_status',
+  UserGithubRepos = 'user_github_repos',
 }
 
 export const getPostByIdKey = (id: string): QueryKey => [RequestKey.Post, id];

diff --git a/packages/webapp/pages/[userId]/index.tsx b/packages/webapp/pages/[userId]/index.tsx
@@ -12,6 +12,7 @@ import { ProfileUserExperiences } from '@dailydotdev/shared/src/features/profile
 import { ProfileUserStack } from '@dailydotdev/shared/src/features/profile/components/stack/ProfileUserStack';
 import { ProfileUserHotTakes } from '@dailydotdev/shared/src/features/profile/components/hotTakes/ProfileUserHotTakes';
 import { ProfileUserWorkspacePhotos } from '@dailydotdev/shared/src/features/profile/components/workspacePhotos/ProfileUserWorkspacePhotos';
+import { ProfileUserGithubRepos } from '@dailydotdev/shared/src/features/profile/components/githubRepos/ProfileUserGithubRepos';
 import { useUploadCv } from '@dailydotdev/shared/src/features/profile/hooks/useUploadCv';
 import { ActionType } from '@dailydotdev/shared/src/graphql/actions';
 import { ProfileWidgets } from '@dailydotdev/shared/src/features/profile/components/ProfileWidgets/ProfileWidgets';
@@ -130,6 +131,7 @@ const ProfilePage = ({
             className="no-scrollbar overflow-auto laptop:hidden"
           />
         </div>
+        <ProfileUserGithubRepos user={user} />
         <ProfileUserExperiences user={user} />
       </div>
     </div>