From 907e03979e780b56d1836668282b57d6a4c83287 Mon Sep 17 00:00:00 2001
From: Osama Mabkhot <99215291+O2sa@users.noreply.github.com>
Date: Sun, 11 Oct 2026 03:59:20 +0300
Subject: [PATCH 1/4] feat(profile): enhance developer avatar with responsive
 layout and visual accents

- Add responsive centered column layout on mobile and row layout on desktop
- Add ambient glow, gradient halo ring, and floating score badge to avatar
- Wrap avatar in accessible GitHub profile link with hover micro-interaction
- Support priority prop on Avatar and align skeleton to prevent layout shift
---
 src/components/layout/avatar.tsx              | 11 +++-
 .../components/user-profile-client.tsx        | 51 +++++++++++++++----
 .../components/user-profile-skeleton.tsx      |  6 +--
 3 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/components/layout/avatar.tsx b/src/components/layout/avatar.tsx
index 8c2769e..7169598 100644
--- a/src/components/layout/avatar.tsx
+++ b/src/components/layout/avatar.tsx
@@ -6,6 +6,7 @@ type AvatarProps = {
   alt: string;
   size?: number;
   unoptimized?: boolean;
+  priority?: boolean;
   className?: string;
 };
 
@@ -13,7 +14,14 @@ type AvatarProps = {
  * Reusable avatar image component.
  *
  */
-export function Avatar({ src, alt, size = 32, unoptimized = true, className }: AvatarProps) {
+export function Avatar({
+  src,
+  alt,
+  size = 32,
+  unoptimized = true,
+  priority = false,
+  className,
+}: AvatarProps) {
   return (
     <Image
       src={src}
@@ -21,6 +29,7 @@ export function Avatar({ src, alt, size = 32, unoptimized = true, className }: A
       width={size}
       height={size}
       unoptimized={unoptimized}
+      priority={priority}
       className={cn("rounded-full ring-1 ring-border", className)}
     />
   );
diff --git a/src/features/developer/components/user-profile-client.tsx b/src/features/developer/components/user-profile-client.tsx
index 5757710..7760771 100644
--- a/src/features/developer/components/user-profile-client.tsx
+++ b/src/features/developer/components/user-profile-client.tsx
@@ -232,18 +232,49 @@ export function UserProfileClient({ user, location, countryParam }: Props) {
       {/* ── Header Profile Hero Section ────────────────────────────── */}
       <section className="rounded-3xl border border-border/60 bg-gradient-to-br from-primary/10 via-background to-background p-6 shadow-sm sm:p-8">
         <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
-          <div className="flex min-w-0 items-start gap-4 sm:items-center">
-            <Avatar
-              src={user.avatarUrl}
-              alt={t("comparison.avatarAlt", { name: displayName })}
-              size={84}
-              className="shadow-sm ring-4 ring-primary/20"
-            />
+          <div className="flex min-w-0 flex-col items-center gap-5 text-center sm:flex-row sm:items-center sm:gap-6 sm:text-left">
+            {/* Interactive Avatar with Ambient Glow & Floating Score Badge */}
+            <a
+              href={githubUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group relative shrink-0 rounded-full transition-transform duration-300 hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              aria-label={t("profile.viewOnGithub")}
+            >
+              {/* Ambient Glow */}
+              <div
+                aria-hidden="true"
+                className="absolute -inset-1.5 rounded-full bg-gradient-to-tr from-primary/30 via-primary/50 to-primary/20 opacity-70 blur-md transition-opacity duration-300 group-hover:opacity-100 dark:from-primary/25 dark:via-primary/45 dark:to-primary/15"
+              />
+
+              {/* Gradient Halo Ring */}
+              <div className="relative rounded-full bg-gradient-to-tr from-primary/40 via-primary/80 to-primary/30 p-1 shadow-lg shadow-primary/10 transition-all duration-300 group-hover:from-primary/60 group-hover:via-primary group-hover:to-primary/50">
+                <div className="relative h-20 w-20 overflow-hidden rounded-full bg-background sm:h-24 sm:w-24 md:h-28 md:w-28">
+                  <Avatar
+                    src={user.avatarUrl}
+                    alt={t("comparison.avatarAlt", { name: displayName })}
+                    size={112}
+                    priority={true}
+                    className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                  />
+                </div>
+              </div>
+
+              {/* Floating Score Badge on Corner */}
+              <div
+                className="absolute -bottom-1 -right-1 flex items-center gap-1 rounded-full border border-background bg-card px-2 py-0.5 text-[11px] font-bold text-foreground shadow-md ring-2 ring-primary/20 sm:bottom-0 sm:right-0"
+                title={`${t("comparison.final.score")}: ${Math.round(user.normalizedFinalScore ?? user.finalScore)}`}
+              >
+                <Trophy className="h-3 w-3 text-primary" />
+                <span>{Math.round(user.normalizedFinalScore ?? user.finalScore)}</span>
+              </div>
+            </a>
+
             <div className="space-y-1.5">
               <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">
                 {t("profile.header.eyebrow")}
               </p>
-              <div className="flex flex-wrap items-center gap-2.5">
+              <div className="flex flex-wrap items-center justify-center gap-2.5 sm:justify-start">
                 <h1 className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl lg:text-4xl">
                   {displayName}
                 </h1>
@@ -253,7 +284,7 @@ export function UserProfileClient({ user, location, countryParam }: Props) {
               </div>
 
               {location ? (
-                <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                <div className="flex items-center justify-center gap-1.5 text-sm text-muted-foreground sm:justify-start">
                   {flagCode ? (
                     <span
                       className={`fi fi-${flagCode} fis inline-block h-3.5 w-3.5 rounded-sm`}
@@ -266,7 +297,7 @@ export function UserProfileClient({ user, location, countryParam }: Props) {
                 </div>
               ) : null}
 
-              <div className="flex items-center gap-3 pt-1 text-xs text-muted-foreground">
+              <div className="flex flex-wrap items-center justify-center gap-3 pt-1 text-xs text-muted-foreground sm:justify-start">
                 <a
                   href={githubUrl}
                   target="_blank"
diff --git a/src/features/developer/components/user-profile-skeleton.tsx b/src/features/developer/components/user-profile-skeleton.tsx
index fe00123..bd3fbab 100644
--- a/src/features/developer/components/user-profile-skeleton.tsx
+++ b/src/features/developer/components/user-profile-skeleton.tsx
@@ -8,9 +8,9 @@ export function UserProfileSkeleton() {
       <Card className="border-2 border-primary/20 bg-gradient-to-br from-card via-card to-muted/20">
         <CardContent className="p-6 sm:p-8">
           <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
-            <div className="flex items-center gap-4">
-              <Skeleton className="h-20 w-20 rounded-full" />
-              <div className="space-y-2">
+            <div className="flex flex-col items-center gap-5 sm:flex-row sm:items-center sm:gap-6">
+              <Skeleton className="h-20 w-20 shrink-0 rounded-full sm:h-24 sm:w-24 md:h-28 md:w-28" />
+              <div className="flex flex-col items-center space-y-2 sm:items-start">
                 <Skeleton className="h-7 w-48 rounded-md" />
                 <Skeleton className="h-4 w-32 rounded-md" />
                 <Skeleton className="h-4 w-28 rounded-md" />

From f76d1eac00a3d92dc8c336736134f16689bf7c32 Mon Sep 17 00:00:00 2001
From: Osama Mabkhot <99215291+O2sa@users.noreply.github.com>
Date: Mon, 12 Oct 2026 01:08:49 +0300
Subject: [PATCH 2/4] feat(comparison): enhance winner card with avatar, trophy
 badge, and responsive layout

- Replace rigid flex row with responsive column/row layout
- Add winner avatar with floating gold trophy badge
- Add compact lead metric pill for small screens and prominent stat block on desktop
- Add handle badge and responsive typography to prevent overflow
---
 .../components/result-dashboard.tsx           | 82 +++++++++++++++----
 1 file changed, 64 insertions(+), 18 deletions(-)

diff --git a/src/features/comparison/components/result-dashboard.tsx b/src/features/comparison/components/result-dashboard.tsx
index e29ca18..d07882d 100644
--- a/src/features/comparison/components/result-dashboard.tsx
+++ b/src/features/comparison/components/result-dashboard.tsx
@@ -366,20 +366,45 @@ export function ResultDashboard({
   return (
     <div className="animate-fadeIn space-y-6">
       <Card className="border-2 border-primary/20 bg-gradient-to-r from-primary/10 via-primary/5 to-transparent">
-        <CardContent className="p-6">
-          <div className="flex items-center justify-between">
+        <CardContent className="p-4 sm:p-6">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
             {overallWinnerUser ? (
               <>
-                <div className="flex items-center gap-4">
-                  <div className="rounded-full bg-primary/20 p-3">
-                    <Trophy className="h-8 w-8 text-primary" />
+                <div className="flex min-w-0 items-center gap-3 sm:gap-4">
+                  {/* Winner Avatar with Corner Trophy Badge */}
+                  <div className="relative shrink-0">
+                    <Link
+                      href={`/user/${overallWinnerUser.username}` as Route}
+                      className="group block"
+                      aria-label={t("a11y.openProfile", {
+                        name: getDisplayName(overallWinnerUser),
+                      })}
+                    >
+                      <Avatar
+                        src={overallWinnerUser.avatarUrl}
+                        alt={t("comparison.avatarAlt", {
+                          name: getDisplayName(overallWinnerUser),
+                        })}
+                        size={56}
+                        className="h-12 w-12 object-cover ring-2 ring-primary/30 transition-transform duration-200 group-hover:scale-105 sm:h-14 sm:w-14"
+                      />
+                    </Link>
+                    <div
+                      className="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-amber-500 text-white shadow-sm ring-2 ring-background dark:bg-amber-400 dark:text-zinc-950"
+                      title={t("banner.winner")}
+                    >
+                      <Trophy className="h-3.5 w-3.5 fill-current" />
+                    </div>
                   </div>
-                  <div>
-                    <p className="text-sm text-muted-foreground">{t("banner.winner")}</p>
-                    <div className="flex items-center gap-2">
+
+                  <div className="min-w-0 flex-1 space-y-1">
+                    <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground sm:text-sm">
+                      {t("banner.winner")}
+                    </p>
+                    <div className="flex flex-wrap items-center gap-2">
                       <Link
                         href={`/user/${overallWinnerUser.username}` as Route}
-                        className="text-3xl font-bold text-primary hover:underline"
+                        className="truncate text-xl font-bold text-foreground transition-colors hover:text-primary hover:underline sm:text-2xl md:text-3xl"
                       >
                         {getDisplayName(overallWinnerUser)}
                       </Link>
@@ -387,26 +412,47 @@ export function ResultDashboard({
                         href={getGithubProfileUrl(overallWinnerUser.username)}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="inline-flex items-center text-muted-foreground transition-colors hover:text-foreground"
+                        className="inline-flex shrink-0 items-center text-muted-foreground transition-colors hover:text-foreground"
                         aria-label={t("a11y.openProfile", {
                           name: getDisplayName(overallWinnerUser),
                         })}
                       >
-                        <ExternalLink className="h-5 w-5" />
+                        <ExternalLink className="h-4 w-4" />
                       </a>
+                      <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                        @{overallWinnerUser.username}
+                      </span>
+                    </div>
+
+                    {/* Compact Lead Pill on Mobile */}
+                    <div className="pt-0.5 sm:hidden">
+                      <span className="inline-flex items-center gap-1.5 rounded-full border border-primary/20 bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary">
+                        <span className="text-muted-foreground">{t("banner.leadby")}:</span>
+                        <span>{winnerLeadValue}</span>
+                      </span>
                     </div>
                   </div>
                 </div>
-                <div className="text-right">
-                  <p className="text-sm text-muted-foreground">{t("banner.leadby")}</p>
-                  <p className="text-2xl font-bold text-primary">{winnerLeadValue}</p>
+
+                {/* Bold Stat Block on Desktop */}
+                <div className="hidden shrink-0 text-right sm:block">
+                  <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground sm:text-sm">
+                    {t("banner.leadby")}
+                  </p>
+                  <p className="text-2xl font-bold text-primary md:text-3xl">{winnerLeadValue}</p>
                 </div>
               </>
             ) : (
-              <>
-                <p className="text-sm text-muted-foreground">{t("banner.metric")}</p>
-                <h2 className="text-xl font-semibold">{t("banner.tie")}</h2>
-              </>
+              <div className="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground sm:text-sm">
+                    {t("banner.metric")}
+                  </p>
+                  <h2 className="text-xl font-bold text-foreground sm:text-2xl">
+                    {t("banner.tie")}
+                  </h2>
+                </div>
+              </div>
             )}
           </div>
           {scoreVersion ? (

From f76bc881f8afe7050e46081e2bb3c8eaaafcae07 Mon Sep 17 00:00:00 2001
From: Osama Mabkhot <99215291+O2sa@users.noreply.github.com>
Date: Mon, 12 Oct 2026 01:28:20 +0300
Subject: [PATCH 3/4] feat(comparison): keep action buttons in single row on
 small screens

---
 .../components/result-dashboard.tsx           | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/features/comparison/components/result-dashboard.tsx b/src/features/comparison/components/result-dashboard.tsx
index d07882d..85eaa3d 100644
--- a/src/features/comparison/components/result-dashboard.tsx
+++ b/src/features/comparison/components/result-dashboard.tsx
@@ -534,28 +534,28 @@ export function ResultDashboard({
         </Card>
       ) : null}
 
-      <div className="flex flex-wrap justify-end gap-2">
+      <div className="grid w-full grid-cols-3 gap-2 sm:flex sm:w-auto sm:justify-end sm:gap-2">
         <Button
           variant="secondary"
           size="sm"
           onClick={handleShare}
-          className="flex items-center gap-2"
+          className="flex w-full items-center justify-center gap-1.5 px-2 text-xs sm:w-auto sm:px-3 sm:text-sm"
           aria-label={t("results.shareAria")}
         >
           {shareState === "success" ? (
             <>
-              <Check className="h-4 w-4 text-green-500" />
-              <span className="text-green-500">{t("results.shareSuccess")}</span>
+              <Check className="h-3.5 w-3.5 shrink-0 text-green-500 sm:h-4 sm:w-4" />
+              <span className="truncate text-green-500">{t("results.shareSuccess")}</span>
             </>
           ) : shareState === "error" ? (
             <>
-              <XCircle className="h-4 w-4 text-destructive" />
-              <span className="text-destructive">{t("results.shareError")}</span>
+              <XCircle className="h-3.5 w-3.5 shrink-0 text-destructive sm:h-4 sm:w-4" />
+              <span className="truncate text-destructive">{t("results.shareError")}</span>
             </>
           ) : (
             <>
-              <Share2 className="h-4 w-4" />
-              {t("results.share")}
+              <Share2 className="h-3.5 w-3.5 shrink-0 sm:h-4 sm:w-4" />
+              <span className="truncate">{t("results.share")}</span>
             </>
           )}
         </Button>
@@ -563,18 +563,18 @@ export function ResultDashboard({
           variant="secondary"
           size="sm"
           onClick={handleCopy}
-          className="flex items-center gap-2"
+          className="flex w-full items-center justify-center gap-1.5 px-2 text-xs sm:w-auto sm:px-3 sm:text-sm"
           aria-label={t("results.copyAria")}
         >
           {copied ? (
             <>
-              <Check className="h-4 w-4 text-green-500" />
-              <span className="text-green-500">{t("results.copied")}</span>
+              <Check className="h-3.5 w-3.5 shrink-0 text-green-500 sm:h-4 sm:w-4" />
+              <span className="truncate text-green-500">{t("results.copied")}</span>
             </>
           ) : (
             <>
-              <Copy className="h-4 w-4" />
-              {t("results.copy")}
+              <Copy className="h-3.5 w-3.5 shrink-0 sm:h-4 sm:w-4" />
+              <span className="truncate">{t("results.copy")}</span>
             </>
           )}
         </Button>
@@ -582,18 +582,18 @@ export function ResultDashboard({
           variant="secondary"
           size="sm"
           onClick={handleCopyMarkdown}
-          className="flex items-center gap-2"
+          className="flex w-full items-center justify-center gap-1.5 px-2 text-xs sm:w-auto sm:px-3 sm:text-sm"
           aria-label={t("results.copyMarkdownAria")}
         >
           {markdownCopied ? (
             <>
-              <Check className="h-4 w-4 text-green-500" />
-              <span className="text-green-500">{t("results.copied")}</span>
+              <Check className="h-3.5 w-3.5 shrink-0 text-green-500 sm:h-4 sm:w-4" />
+              <span className="truncate text-green-500">{t("results.copied")}</span>
             </>
           ) : (
             <>
-              <Copy className="h-4 w-4" />
-              {t("results.copyMarkdown")}
+              <Copy className="h-3.5 w-3.5 shrink-0 sm:h-4 sm:w-4" />
+              <span className="truncate">{t("results.copyMarkdown")}</span>
             </>
           )}
         </Button>

From 62724607aa67add392045fe574527859da7c4ece Mon Sep 17 00:00:00 2001
From: Osama Mabkhot <99215291+O2sa@users.noreply.github.com>
Date: Mon, 12 Oct 2026 01:28:46 +0300
Subject: [PATCH 4/4] feat(profile): layout action buttons as one on top and
 two on bottom

---
 .../components/user-profile-client.tsx        | 88 ++++++++++---------
 .../components/user-profile-skeleton.tsx      |  9 +-
 2 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/src/features/developer/components/user-profile-client.tsx b/src/features/developer/components/user-profile-client.tsx
index 7760771..b10eeac 100644
--- a/src/features/developer/components/user-profile-client.tsx
+++ b/src/features/developer/components/user-profile-client.tsx
@@ -318,8 +318,9 @@ export function UserProfileClient({ user, location, countryParam }: Props) {
           </div>
 
           {/* Actions */}
-          <div className="grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:items-center sm:justify-end sm:gap-2.5">
-            <Link href={compareUrl as Route} className="w-full sm:w-auto">
+          <div className="flex w-full flex-col gap-2 sm:w-auto sm:min-w-[280px] lg:min-w-[300px]">
+            {/* Primary Action (1) */}
+            <Link href={compareUrl as Route} className="w-full">
               <Button className="flex w-full items-center justify-center gap-1.5 px-3 text-xs shadow-sm sm:px-4 sm:text-sm">
                 <Scale className="h-4 w-4 shrink-0" />
 
@@ -329,47 +330,50 @@ export function UserProfileClient({ user, location, countryParam }: Props) {
               </Button>
             </Link>
 
-            <Button
-              variant="secondary"
-              size="md"
-              onClick={handleCopyLink}
-              className="flex w-full items-center justify-center gap-1.5 px-3 text-xs sm:px-4 sm:text-sm"
-              aria-label={t("profile.copyLink")}
-            >
-              {copied ? (
-                <>
-                  <Check className="h-4 w-4 shrink-0 text-green-500" />
-
-                  <span className="truncate text-green-500 sm:hidden">
-                    {t("profile.copiedShort")}
-                  </span>
-
-                  <span className="hidden truncate text-green-500 sm:inline">
-                    {t("profile.copied")}
-                  </span>
-                </>
-              ) : (
-                <>
-                  <Copy className="h-4 w-4 shrink-0" />
-
-                  <span className="truncate sm:hidden">{t("profile.shareShort")}</span>
+            {/* Secondary Actions (2) */}
+            <div className="grid w-full grid-cols-2 gap-2">
+              <Button
+                variant="secondary"
+                size="md"
+                onClick={handleCopyLink}
+                className="flex w-full items-center justify-center gap-1.5 px-2.5 text-xs sm:px-3 sm:text-sm"
+                aria-label={t("profile.copyLink")}
+              >
+                {copied ? (
+                  <>
+                    <Check className="h-4 w-4 shrink-0 text-green-500" />
+
+                    <span className="truncate text-green-500 sm:hidden">
+                      {t("profile.copiedShort")}
+                    </span>
+
+                    <span className="hidden truncate text-green-500 sm:inline">
+                      {t("profile.copied")}
+                    </span>
+                  </>
+                ) : (
+                  <>
+                    <Copy className="h-4 w-4 shrink-0" />
+
+                    <span className="truncate sm:hidden">{t("profile.shareShort")}</span>
+
+                    <span className="hidden truncate sm:inline">{t("profile.copyLink")}</span>
+                  </>
+                )}
+              </Button>
 
-                  <span className="hidden truncate sm:inline">{t("profile.copyLink")}</span>
-                </>
-              )}
-            </Button>
-
-            {/* Get README Badge */}
-            <Button
-              variant="secondary"
-              size="md"
-              onClick={() => setBadgeDialogOpen(true)}
-              className="col-span-2 flex w-full items-center justify-center gap-1.5 whitespace-nowrap px-3 text-xs sm:col-span-1 sm:w-auto sm:px-4 sm:text-sm"
-              aria-label={t("profile.getBadge")}
-            >
-              <BadgeCheck className="h-4 w-4 shrink-0" />
-              <span className="truncate">{t("profile.getBadge")}</span>
-            </Button>
+              {/* Get README Badge */}
+              <Button
+                variant="secondary"
+                size="md"
+                onClick={() => setBadgeDialogOpen(true)}
+                className="flex w-full items-center justify-center gap-1.5 whitespace-nowrap px-2.5 text-xs sm:px-3 sm:text-sm"
+                aria-label={t("profile.getBadge")}
+              >
+                <BadgeCheck className="h-4 w-4 shrink-0" />
+                <span className="truncate">{t("profile.getBadge")}</span>
+              </Button>
+            </div>
           </div>
         </div>
       </section>
diff --git a/src/features/developer/components/user-profile-skeleton.tsx b/src/features/developer/components/user-profile-skeleton.tsx
index bd3fbab..ee62300 100644
--- a/src/features/developer/components/user-profile-skeleton.tsx
+++ b/src/features/developer/components/user-profile-skeleton.tsx
@@ -16,9 +16,12 @@ export function UserProfileSkeleton() {
                 <Skeleton className="h-4 w-28 rounded-md" />
               </div>
             </div>
-            <div className="flex flex-wrap gap-2 sm:justify-end">
-              <Skeleton className="h-9 w-32 rounded-lg" />
-              <Skeleton className="h-9 w-28 rounded-lg" />
+            <div className="flex w-full flex-col gap-2 sm:w-auto sm:min-w-[280px] lg:min-w-[300px]">
+              <Skeleton className="h-9 w-full rounded-lg" />
+              <div className="grid w-full grid-cols-2 gap-2">
+                <Skeleton className="h-9 w-full rounded-lg" />
+                <Skeleton className="h-9 w-full rounded-lg" />
+              </div>
             </div>
           </div>
         </CardContent>