Skip to content

Commit d98fc8c

Browse files
steam-bell-92steam-bell-92
committed
Made author images similiar to their github pfp
1 parent 02d7be4 commit d98fc8c

5 files changed

Lines changed: 345 additions & 3 deletions

File tree

‎src/components/blogCarousel/blogCard.tsx‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => {
4848

4949
{/* Card Image */}
5050
<div className="card-image">
51-
<img src={imageUrl} alt={title} />
51+
<img src={imageUrl} alt={title} />git a
5252
</div>
5353

5454
{/* Card Content */}
@@ -63,7 +63,48 @@ const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => {
6363
{/* Card Meta */}
6464
<div className="card-meta">
6565
<div className="card-author">
66-
<span className="author-avatar">👤</span>
66+
{/* Stacked Author Avatars */}
67+
{authorProfiles.length > 0 && (
68+
(() => {
69+
const max = 3;
70+
const visible = authorProfiles.slice(0, max);
71+
const extra = Math.max(0, authorProfiles.length - max);
72+
return (
73+
<div className="author-stack" aria-hidden>
74+
{visible.map((a, i) => (
75+
<div
76+
key={a.id}
77+
className="author-stack-item"
78+
style={{ zIndex: max - i }}
79+
>
80+
{a.imageUrl ? (
81+
<img
82+
src={a.imageUrl}
83+
alt={a.name}
84+
className="author-stack-avatar"
85+
onError={(e) => {
86+
const target = e.currentTarget;
87+
target.style.display = "none";
88+
const fallback = target.nextElementSibling;
89+
if (fallback) fallback.style.display = "flex";
90+
}}
91+
/>
92+
) : (
93+
<span className="author-stack-fallback">
94+
{a.name.charAt(0).toUpperCase()}
95+
</span>
96+
)}
97+
</div>
98+
))}
99+
{extra > 0 && (
100+
<div className="author-stack-more">+{extra}</div>
101+
)}
102+
</div>
103+
);
104+
})()
105+
)}
106+
107+
{/* Author Names */}
67108
<div className="author-name-group">
68109
{authorProfiles.map((author, authorIndex) => (
69110
<span key={author.id} className="author-item">

‎src/components/blogCarousel/blogCarousel.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,51 @@
251251
min-width: 0;
252252
}
253253

254+
.author-avatar-wrapper {
255+
position: relative;
256+
width: 28px;
257+
height: 28px;
258+
flex-shrink: 0;
259+
}
260+
261+
.author-avatar-image {
262+
width: 100%;
263+
height: 100%;
264+
border-radius: 50%;
265+
object-fit: cover;
266+
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
267+
transition: all 0.3s ease;
268+
border: 1px solid rgba(99, 102, 241, 0.2);
269+
}
270+
271+
.author-avatar-image:hover {
272+
transform: scale(1.1);
273+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
274+
}
275+
276+
.author-avatar-fallback {
277+
position: absolute;
278+
top: 0;
279+
left: 0;
280+
width: 100%;
281+
height: 100%;
282+
border-radius: 50%;
283+
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
284+
display: flex;
285+
align-items: center;
286+
justify-content: center;
287+
font-size: 12px;
288+
color: white;
289+
font-weight: 600;
290+
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
291+
transition: all 0.3s ease;
292+
}
293+
294+
.author-avatar-fallback:hover {
295+
transform: scale(1.1);
296+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
297+
}
298+
254299
.author-name-group {
255300
display: flex;
256301
align-items: center;
@@ -259,6 +304,59 @@
259304
min-width: 0;
260305
}
261306

307+
/* Stacked avatars */
308+
.author-stack {
309+
display: flex;
310+
align-items: center;
311+
margin-right: 8px;
312+
}
313+
314+
.author-stack-item {
315+
width: 28px;
316+
height: 28px;
317+
border-radius: 50%;
318+
overflow: hidden;
319+
margin-left: -10px;
320+
display: inline-flex;
321+
align-items: center;
322+
justify-content: center;
323+
background: #fff;
324+
border: 2px solid #fff;
325+
}
326+
327+
.author-stack-avatar {
328+
width: 100%;
329+
height: 100%;
330+
object-fit: cover;
331+
display: block;
332+
}
333+
334+
.author-stack-fallback {
335+
width: 100%;
336+
height: 100%;
337+
display: flex;
338+
align-items: center;
339+
justify-content: center;
340+
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
341+
color: #fff;
342+
font-weight: 700;
343+
}
344+
345+
.author-stack-more {
346+
width: 28px;
347+
height: 28px;
348+
border-radius: 50%;
349+
background: #6366f1;
350+
color: #fff;
351+
display: inline-flex;
352+
align-items: center;
353+
justify-content: center;
354+
margin-left: -10px;
355+
font-size: 12px;
356+
font-weight: 700;
357+
border: 2px solid #fff;
358+
}
359+
262360
.author-separator {
263361
color: #94a3b8;
264362
font-size: 12px;

‎src/pages/blogs/blogs-new.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1676,6 +1676,51 @@
16761676
text-decoration: none;
16771677
}
16781678

1679+
.author-avatar-wrapper {
1680+
position: relative;
1681+
width: 32px;
1682+
height: 32px;
1683+
flex-shrink: 0;
1684+
}
1685+
1686+
.author-avatar-image {
1687+
width: 100%;
1688+
height: 100%;
1689+
border-radius: 50%;
1690+
object-fit: cover;
1691+
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
1692+
transition: all 0.3s ease;
1693+
border: 1px solid rgba(99, 102, 241, 0.2);
1694+
}
1695+
1696+
.author-avatar-image:hover {
1697+
transform: scale(1.1);
1698+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
1699+
}
1700+
1701+
.author-avatar-fallback {
1702+
position: absolute;
1703+
top: 0;
1704+
left: 0;
1705+
width: 100%;
1706+
height: 100%;
1707+
border-radius: 50%;
1708+
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
1709+
display: flex;
1710+
align-items: center;
1711+
justify-content: center;
1712+
font-size: 14px;
1713+
color: white;
1714+
font-weight: 600;
1715+
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
1716+
transition: all 0.3s ease;
1717+
}
1718+
1719+
.author-avatar-fallback:hover {
1720+
transform: scale(1.1);
1721+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
1722+
}
1723+
16791724
.author-avatar {
16801725
width: 32px;
16811726
height: 32px;
@@ -1692,6 +1737,59 @@
16921737
transition: all 0.3s ease;
16931738
}
16941739

1740+
/* Stacked avatars */
1741+
.author-stack {
1742+
display: flex;
1743+
align-items: center;
1744+
margin-right: 8px;
1745+
}
1746+
1747+
.author-stack-item {
1748+
width: 32px;
1749+
height: 32px;
1750+
border-radius: 50%;
1751+
overflow: hidden;
1752+
margin-left: -10px;
1753+
display: inline-flex;
1754+
align-items: center;
1755+
justify-content: center;
1756+
background: #fff;
1757+
border: 2px solid #fff;
1758+
}
1759+
1760+
.author-stack-avatar {
1761+
width: 100%;
1762+
height: 100%;
1763+
object-fit: cover;
1764+
display: block;
1765+
}
1766+
1767+
.author-stack-fallback {
1768+
width: 100%;
1769+
height: 100%;
1770+
display: flex;
1771+
align-items: center;
1772+
justify-content: center;
1773+
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
1774+
color: #fff;
1775+
font-weight: 700;
1776+
}
1777+
1778+
.author-stack-more {
1779+
width: 32px;
1780+
height: 32px;
1781+
border-radius: 50%;
1782+
background: #6366f1;
1783+
color: #fff;
1784+
display: inline-flex;
1785+
align-items: center;
1786+
justify-content: center;
1787+
margin-left: -10px;
1788+
font-size: 12px;
1789+
font-weight: 700;
1790+
border: 2px solid #fff;
1791+
}
1792+
16951793
.author-avatar:hover {
16961794
transform: scale(1.1);
16971795
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);

‎src/pages/blogs/index.tsx‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -275,7 +275,48 @@ const BlogCard = ({ blog, index }) => {
275275
<p className="card-description">{blog.description}</p>
276276
<div className="card-meta">
277277
<div className="card-author">
278-
<span className="author-avatar">👤</span>
278+
{/* Stacked Author Avatars */}
279+
{authors.length > 0 && (
280+
(() => {
281+
const max = 3;
282+
const visible = authors.slice(0, max);
283+
const extra = Math.max(0, authors.length - max);
284+
return (
285+
<div className="author-stack" aria-hidden>
286+
{visible.map((a, i) => (
287+
<div
288+
key={a.id}
289+
className="author-stack-item"
290+
style={{ zIndex: max - i }}
291+
>
292+
{a.imageUrl ? (
293+
<img
294+
src={a.imageUrl}
295+
alt={a.name}
296+
className="author-stack-avatar"
297+
onError={(e) => {
298+
const target = e.currentTarget;
299+
target.style.display = "none";
300+
const fallback = target.nextElementSibling;
301+
if (fallback) fallback.style.display = "flex";
302+
}}
303+
/>
304+
) : (
305+
<span className="author-stack-fallback">
306+
{a.name.charAt(0).toUpperCase()}
307+
</span>
308+
)}
309+
</div>
310+
))}
311+
{extra > 0 && (
312+
<div className="author-stack-more">+{extra}</div>
313+
)}
314+
</div>
315+
);
316+
})()
317+
)}
318+
319+
{/* Author Names */}
279320
<div className="author-name-group">
280321
{authors.map((author, authorIndex) => (
281322
<span key={author.id} className="author-item">

0 commit comments

Comments
 (0)