componentui-lib 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +435 -2
- package/dist/index.mjs +433 -1
- package/package.json +5 -5
package/dist/index.js
CHANGED
|
@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
var index_exports = {};
|
|
31
31
|
__export(index_exports, {
|
|
32
32
|
Button: () => Button,
|
|
33
|
-
Card: () => Card
|
|
33
|
+
Card: () => Card,
|
|
34
|
+
ProfileCard: () => ProfileCard
|
|
34
35
|
});
|
|
35
36
|
module.exports = __toCommonJS(index_exports);
|
|
36
37
|
|
|
@@ -264,8 +265,440 @@ var Card = ({
|
|
|
264
265
|
/* @__PURE__ */ import_react2.default.createElement("div", { style: accentBarStyle })
|
|
265
266
|
));
|
|
266
267
|
};
|
|
268
|
+
|
|
269
|
+
// src/components/ProfileCard/profileCard.jsx
|
|
270
|
+
var import_react3 = __toESM(require("react"));
|
|
271
|
+
var ProfileCard = ({
|
|
272
|
+
name = "Alex Morgan",
|
|
273
|
+
role = "Senior UI Engineer",
|
|
274
|
+
avatar = null,
|
|
275
|
+
initials = "AM",
|
|
276
|
+
bio = "Crafting pixel-perfect interfaces and scalable design systems with a passion for clean code.",
|
|
277
|
+
stats = [
|
|
278
|
+
{ label: "Projects", value: "142" },
|
|
279
|
+
{ label: "Followers", value: "12.4K" },
|
|
280
|
+
{ label: "Rating", value: "4.9" }
|
|
281
|
+
],
|
|
282
|
+
socials = [
|
|
283
|
+
{ icon: "\u{1D54F}", label: "Twitter", href: "#" },
|
|
284
|
+
{ icon: "\u25C9", label: "Dribbble", href: "#" },
|
|
285
|
+
{ icon: "\u2B21", label: "GitHub", href: "#" }
|
|
286
|
+
],
|
|
287
|
+
accentColor = "#7C5CFC",
|
|
288
|
+
accentColorEnd = "#00D4AA",
|
|
289
|
+
bgColor = "#0F0F1A",
|
|
290
|
+
cardBg = "#16162A",
|
|
291
|
+
textColor = "#E8E8F0",
|
|
292
|
+
subtextColor = "#8888A4",
|
|
293
|
+
width = "340px",
|
|
294
|
+
statusText = "Available for hire",
|
|
295
|
+
statusColor = "#00D4AA",
|
|
296
|
+
onContact = null,
|
|
297
|
+
...rest
|
|
298
|
+
}) => {
|
|
299
|
+
const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
|
|
300
|
+
const [isFlipped, setIsFlipped] = (0, import_react3.useState)(false);
|
|
301
|
+
const [tilt, setTilt] = (0, import_react3.useState)({ x: 0, y: 0 });
|
|
302
|
+
const [hoveredSocial, setHoveredSocial] = (0, import_react3.useState)(null);
|
|
303
|
+
const [contactHover, setContactHover] = (0, import_react3.useState)(false);
|
|
304
|
+
const [flipBtnHover, setFlipBtnHover] = (0, import_react3.useState)(false);
|
|
305
|
+
const cardRef = (0, import_react3.useRef)(null);
|
|
306
|
+
const handleMouseMove = (e) => {
|
|
307
|
+
if (!cardRef.current || isFlipped) return;
|
|
308
|
+
const rect = cardRef.current.getBoundingClientRect();
|
|
309
|
+
const x = (e.clientX - rect.left) / rect.width - 0.5;
|
|
310
|
+
const y = (e.clientY - rect.top) / rect.height - 0.5;
|
|
311
|
+
setTilt({ x: y * -8, y: x * 8 });
|
|
312
|
+
};
|
|
313
|
+
const handleMouseLeave = () => {
|
|
314
|
+
setTilt({ x: 0, y: 0 });
|
|
315
|
+
setIsHovered(false);
|
|
316
|
+
};
|
|
317
|
+
const keyframes = `
|
|
318
|
+
@keyframes profilecard-gradient-spin {
|
|
319
|
+
0% { transform: rotate(0deg); }
|
|
320
|
+
100% { transform: rotate(360deg); }
|
|
321
|
+
}
|
|
322
|
+
@keyframes profilecard-pulse {
|
|
323
|
+
0%, 100% { opacity: 1; transform: scale(1); }
|
|
324
|
+
50% { opacity: 0.6; transform: scale(1.15); }
|
|
325
|
+
}
|
|
326
|
+
@keyframes profilecard-shimmer {
|
|
327
|
+
0% { background-position: -200% center; }
|
|
328
|
+
100% { background-position: 200% center; }
|
|
329
|
+
}
|
|
330
|
+
@keyframes profilecard-fadein {
|
|
331
|
+
from { opacity: 0; transform: translateY(8px); }
|
|
332
|
+
to { opacity: 1; transform: translateY(0); }
|
|
333
|
+
}
|
|
334
|
+
`;
|
|
335
|
+
const containerStyle = {
|
|
336
|
+
perspective: "1200px",
|
|
337
|
+
width,
|
|
338
|
+
height: "460px",
|
|
339
|
+
fontFamily: "'Inter', 'SF Pro Display', -apple-system, sans-serif"
|
|
340
|
+
};
|
|
341
|
+
const cardInnerStyle = {
|
|
342
|
+
position: "relative",
|
|
343
|
+
width: "100%",
|
|
344
|
+
height: "100%",
|
|
345
|
+
transformStyle: "preserve-3d",
|
|
346
|
+
transition: "transform 0.7s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
347
|
+
transform: isFlipped ? "rotateY(180deg)" : `rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`
|
|
348
|
+
};
|
|
349
|
+
const faceBase = {
|
|
350
|
+
position: "absolute",
|
|
351
|
+
width: "100%",
|
|
352
|
+
height: "100%",
|
|
353
|
+
backfaceVisibility: "hidden",
|
|
354
|
+
WebkitBackfaceVisibility: "hidden",
|
|
355
|
+
borderRadius: "24px",
|
|
356
|
+
overflow: "hidden"
|
|
357
|
+
};
|
|
358
|
+
const borderGlowStyle = {
|
|
359
|
+
position: "absolute",
|
|
360
|
+
inset: "-2px",
|
|
361
|
+
borderRadius: "26px",
|
|
362
|
+
background: `conic-gradient(from 0deg, ${accentColor}, ${accentColorEnd}, ${accentColor})`,
|
|
363
|
+
animation: isHovered ? "profilecard-gradient-spin 3s linear infinite" : "none",
|
|
364
|
+
opacity: isHovered ? 1 : 0.4,
|
|
365
|
+
transition: "opacity 0.5s ease",
|
|
366
|
+
zIndex: 0
|
|
367
|
+
};
|
|
368
|
+
const frontStyle = {
|
|
369
|
+
...faceBase,
|
|
370
|
+
background: cardBg,
|
|
371
|
+
display: "flex",
|
|
372
|
+
flexDirection: "column",
|
|
373
|
+
alignItems: "center",
|
|
374
|
+
zIndex: 1,
|
|
375
|
+
position: "relative"
|
|
376
|
+
};
|
|
377
|
+
const frontInnerStyle = {
|
|
378
|
+
position: "relative",
|
|
379
|
+
zIndex: 2,
|
|
380
|
+
width: "100%",
|
|
381
|
+
height: "100%",
|
|
382
|
+
background: cardBg,
|
|
383
|
+
borderRadius: "24px",
|
|
384
|
+
display: "flex",
|
|
385
|
+
flexDirection: "column",
|
|
386
|
+
alignItems: "center",
|
|
387
|
+
overflow: "hidden"
|
|
388
|
+
};
|
|
389
|
+
const headerBgStyle = {
|
|
390
|
+
position: "absolute",
|
|
391
|
+
top: 0,
|
|
392
|
+
left: 0,
|
|
393
|
+
right: 0,
|
|
394
|
+
height: "110px",
|
|
395
|
+
background: `linear-gradient(135deg, ${accentColor}22, ${accentColorEnd}18)`,
|
|
396
|
+
zIndex: 0
|
|
397
|
+
};
|
|
398
|
+
const avatarWrapperStyle = {
|
|
399
|
+
marginTop: "48px",
|
|
400
|
+
position: "relative",
|
|
401
|
+
zIndex: 1
|
|
402
|
+
};
|
|
403
|
+
const avatarRingStyle = {
|
|
404
|
+
width: "88px",
|
|
405
|
+
height: "88px",
|
|
406
|
+
borderRadius: "50%",
|
|
407
|
+
padding: "3px",
|
|
408
|
+
background: `linear-gradient(135deg, ${accentColor}, ${accentColorEnd})`,
|
|
409
|
+
display: "flex",
|
|
410
|
+
alignItems: "center",
|
|
411
|
+
justifyContent: "center",
|
|
412
|
+
boxShadow: isHovered ? `0 0 30px ${accentColor}44, 0 0 60px ${accentColorEnd}22` : `0 0 15px ${accentColor}22`,
|
|
413
|
+
transition: "box-shadow 0.4s ease"
|
|
414
|
+
};
|
|
415
|
+
const avatarInnerStyle = {
|
|
416
|
+
width: "100%",
|
|
417
|
+
height: "100%",
|
|
418
|
+
borderRadius: "50%",
|
|
419
|
+
background: avatar ? `url(${avatar}) center/cover no-repeat` : `linear-gradient(135deg, ${accentColor}, ${accentColorEnd})`,
|
|
420
|
+
display: "flex",
|
|
421
|
+
alignItems: "center",
|
|
422
|
+
justifyContent: "center",
|
|
423
|
+
fontSize: "28px",
|
|
424
|
+
fontWeight: "700",
|
|
425
|
+
color: "#fff",
|
|
426
|
+
letterSpacing: "1px"
|
|
427
|
+
};
|
|
428
|
+
const statusDotStyle = {
|
|
429
|
+
position: "absolute",
|
|
430
|
+
bottom: "4px",
|
|
431
|
+
right: "4px",
|
|
432
|
+
width: "14px",
|
|
433
|
+
height: "14px",
|
|
434
|
+
borderRadius: "50%",
|
|
435
|
+
background: statusColor,
|
|
436
|
+
border: `3px solid ${cardBg}`,
|
|
437
|
+
animation: "profilecard-pulse 2s ease-in-out infinite",
|
|
438
|
+
zIndex: 2
|
|
439
|
+
};
|
|
440
|
+
const nameStyle = {
|
|
441
|
+
marginTop: "16px",
|
|
442
|
+
fontSize: "20px",
|
|
443
|
+
fontWeight: "700",
|
|
444
|
+
color: textColor,
|
|
445
|
+
letterSpacing: "0.2px",
|
|
446
|
+
textAlign: "center",
|
|
447
|
+
lineHeight: "1.2"
|
|
448
|
+
};
|
|
449
|
+
const roleStyle = {
|
|
450
|
+
marginTop: "6px",
|
|
451
|
+
fontSize: "13px",
|
|
452
|
+
fontWeight: "500",
|
|
453
|
+
color: subtextColor,
|
|
454
|
+
letterSpacing: "0.5px",
|
|
455
|
+
textTransform: "uppercase",
|
|
456
|
+
textAlign: "center"
|
|
457
|
+
};
|
|
458
|
+
const statusBadgeStyle = {
|
|
459
|
+
marginTop: "14px",
|
|
460
|
+
padding: "5px 14px",
|
|
461
|
+
borderRadius: "20px",
|
|
462
|
+
background: `${statusColor}15`,
|
|
463
|
+
border: `1px solid ${statusColor}33`,
|
|
464
|
+
fontSize: "11px",
|
|
465
|
+
fontWeight: "600",
|
|
466
|
+
color: statusColor,
|
|
467
|
+
letterSpacing: "0.4px",
|
|
468
|
+
display: "flex",
|
|
469
|
+
alignItems: "center",
|
|
470
|
+
gap: "6px"
|
|
471
|
+
};
|
|
472
|
+
const dividerStyle = {
|
|
473
|
+
width: "80%",
|
|
474
|
+
height: "1px",
|
|
475
|
+
background: `linear-gradient(90deg, transparent, ${subtextColor}33, transparent)`,
|
|
476
|
+
marginTop: "18px"
|
|
477
|
+
};
|
|
478
|
+
const statsRowStyle = {
|
|
479
|
+
display: "flex",
|
|
480
|
+
justifyContent: "center",
|
|
481
|
+
gap: "28px",
|
|
482
|
+
marginTop: "18px",
|
|
483
|
+
width: "100%",
|
|
484
|
+
padding: "0 24px",
|
|
485
|
+
boxSizing: "border-box"
|
|
486
|
+
};
|
|
487
|
+
const statItemStyle = {
|
|
488
|
+
display: "flex",
|
|
489
|
+
flexDirection: "column",
|
|
490
|
+
alignItems: "center",
|
|
491
|
+
gap: "3px"
|
|
492
|
+
};
|
|
493
|
+
const statValueStyle = {
|
|
494
|
+
fontSize: "18px",
|
|
495
|
+
fontWeight: "700",
|
|
496
|
+
color: textColor,
|
|
497
|
+
background: `linear-gradient(135deg, ${accentColor}, ${accentColorEnd})`,
|
|
498
|
+
WebkitBackgroundClip: "text",
|
|
499
|
+
WebkitTextFillColor: "transparent",
|
|
500
|
+
backgroundClip: "text"
|
|
501
|
+
};
|
|
502
|
+
const statLabelStyle = {
|
|
503
|
+
fontSize: "11px",
|
|
504
|
+
fontWeight: "500",
|
|
505
|
+
color: subtextColor,
|
|
506
|
+
textTransform: "uppercase",
|
|
507
|
+
letterSpacing: "0.6px"
|
|
508
|
+
};
|
|
509
|
+
const socialsRowStyle = {
|
|
510
|
+
display: "flex",
|
|
511
|
+
gap: "10px",
|
|
512
|
+
marginTop: "20px"
|
|
513
|
+
};
|
|
514
|
+
const socialBtnStyle = (index) => ({
|
|
515
|
+
width: "38px",
|
|
516
|
+
height: "38px",
|
|
517
|
+
borderRadius: "12px",
|
|
518
|
+
border: `1px solid ${hoveredSocial === index ? accentColor : subtextColor}33`,
|
|
519
|
+
background: hoveredSocial === index ? `${accentColor}18` : "transparent",
|
|
520
|
+
color: hoveredSocial === index ? accentColor : subtextColor,
|
|
521
|
+
fontSize: "16px",
|
|
522
|
+
display: "flex",
|
|
523
|
+
alignItems: "center",
|
|
524
|
+
justifyContent: "center",
|
|
525
|
+
cursor: "pointer",
|
|
526
|
+
transition: "all 0.25s ease",
|
|
527
|
+
transform: hoveredSocial === index ? "translateY(-3px)" : "translateY(0)",
|
|
528
|
+
textDecoration: "none",
|
|
529
|
+
outline: "none"
|
|
530
|
+
});
|
|
531
|
+
const flipBtnStyle = {
|
|
532
|
+
position: "absolute",
|
|
533
|
+
top: "16px",
|
|
534
|
+
right: "16px",
|
|
535
|
+
width: "32px",
|
|
536
|
+
height: "32px",
|
|
537
|
+
borderRadius: "10px",
|
|
538
|
+
border: `1px solid ${subtextColor}33`,
|
|
539
|
+
background: flipBtnHover ? `${subtextColor}18` : "transparent",
|
|
540
|
+
color: subtextColor,
|
|
541
|
+
fontSize: "14px",
|
|
542
|
+
display: "flex",
|
|
543
|
+
alignItems: "center",
|
|
544
|
+
justifyContent: "center",
|
|
545
|
+
cursor: "pointer",
|
|
546
|
+
zIndex: 5,
|
|
547
|
+
transition: "all 0.2s ease",
|
|
548
|
+
transform: flipBtnHover ? "rotate(180deg)" : "rotate(0deg)",
|
|
549
|
+
outline: "none"
|
|
550
|
+
};
|
|
551
|
+
const backStyle = {
|
|
552
|
+
...faceBase,
|
|
553
|
+
transform: "rotateY(180deg)",
|
|
554
|
+
zIndex: 1
|
|
555
|
+
};
|
|
556
|
+
const backInnerStyle = {
|
|
557
|
+
position: "relative",
|
|
558
|
+
zIndex: 2,
|
|
559
|
+
width: "100%",
|
|
560
|
+
height: "100%",
|
|
561
|
+
background: cardBg,
|
|
562
|
+
borderRadius: "24px",
|
|
563
|
+
display: "flex",
|
|
564
|
+
flexDirection: "column",
|
|
565
|
+
padding: "32px 28px",
|
|
566
|
+
boxSizing: "border-box",
|
|
567
|
+
overflow: "hidden"
|
|
568
|
+
};
|
|
569
|
+
const backHeaderStyle = {
|
|
570
|
+
display: "flex",
|
|
571
|
+
alignItems: "center",
|
|
572
|
+
justifyContent: "space-between",
|
|
573
|
+
marginBottom: "24px"
|
|
574
|
+
};
|
|
575
|
+
const backTitleStyle = {
|
|
576
|
+
fontSize: "16px",
|
|
577
|
+
fontWeight: "700",
|
|
578
|
+
color: textColor,
|
|
579
|
+
letterSpacing: "0.3px"
|
|
580
|
+
};
|
|
581
|
+
const bioStyle = {
|
|
582
|
+
fontSize: "14px",
|
|
583
|
+
lineHeight: "1.7",
|
|
584
|
+
color: subtextColor,
|
|
585
|
+
fontWeight: "400",
|
|
586
|
+
flex: 1
|
|
587
|
+
};
|
|
588
|
+
const contactBtnStyle = {
|
|
589
|
+
marginTop: "auto",
|
|
590
|
+
padding: "14px",
|
|
591
|
+
borderRadius: "14px",
|
|
592
|
+
border: "none",
|
|
593
|
+
background: contactHover ? `linear-gradient(135deg, ${accentColor}, ${accentColorEnd})` : `linear-gradient(135deg, ${accentColor}cc, ${accentColorEnd}cc)`,
|
|
594
|
+
color: "#fff",
|
|
595
|
+
fontSize: "14px",
|
|
596
|
+
fontWeight: "600",
|
|
597
|
+
cursor: "pointer",
|
|
598
|
+
letterSpacing: "0.3px",
|
|
599
|
+
transition: "all 0.3s ease",
|
|
600
|
+
transform: contactHover ? "translateY(-2px)" : "translateY(0)",
|
|
601
|
+
boxShadow: contactHover ? `0 8px 30px ${accentColor}44` : `0 4px 15px ${accentColor}22`,
|
|
602
|
+
outline: "none"
|
|
603
|
+
};
|
|
604
|
+
const backDecoStyle = {
|
|
605
|
+
position: "absolute",
|
|
606
|
+
top: "-40px",
|
|
607
|
+
right: "-40px",
|
|
608
|
+
width: "120px",
|
|
609
|
+
height: "120px",
|
|
610
|
+
borderRadius: "50%",
|
|
611
|
+
background: `radial-gradient(circle, ${accentColor}12, transparent 70%)`,
|
|
612
|
+
pointerEvents: "none"
|
|
613
|
+
};
|
|
614
|
+
const backDeco2Style = {
|
|
615
|
+
position: "absolute",
|
|
616
|
+
bottom: "-30px",
|
|
617
|
+
left: "-30px",
|
|
618
|
+
width: "100px",
|
|
619
|
+
height: "100px",
|
|
620
|
+
borderRadius: "50%",
|
|
621
|
+
background: `radial-gradient(circle, ${accentColorEnd}10, transparent 70%)`,
|
|
622
|
+
pointerEvents: "none"
|
|
623
|
+
};
|
|
624
|
+
return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("style", null, keyframes), /* @__PURE__ */ import_react3.default.createElement("div", { style: containerStyle, ...rest }, /* @__PURE__ */ import_react3.default.createElement(
|
|
625
|
+
"div",
|
|
626
|
+
{
|
|
627
|
+
ref: cardRef,
|
|
628
|
+
style: cardInnerStyle,
|
|
629
|
+
onMouseMove: handleMouseMove,
|
|
630
|
+
onMouseEnter: () => setIsHovered(true),
|
|
631
|
+
onMouseLeave: handleMouseLeave
|
|
632
|
+
},
|
|
633
|
+
/* @__PURE__ */ import_react3.default.createElement("div", { style: frontStyle }, /* @__PURE__ */ import_react3.default.createElement("div", { style: borderGlowStyle }), /* @__PURE__ */ import_react3.default.createElement("div", { style: frontInnerStyle }, /* @__PURE__ */ import_react3.default.createElement("div", { style: headerBgStyle }), /* @__PURE__ */ import_react3.default.createElement(
|
|
634
|
+
"button",
|
|
635
|
+
{
|
|
636
|
+
style: flipBtnStyle,
|
|
637
|
+
onClick: () => setIsFlipped(true),
|
|
638
|
+
onMouseEnter: () => setFlipBtnHover(true),
|
|
639
|
+
onMouseLeave: () => setFlipBtnHover(false),
|
|
640
|
+
"aria-label": "Show details"
|
|
641
|
+
},
|
|
642
|
+
"\u27F3"
|
|
643
|
+
), /* @__PURE__ */ import_react3.default.createElement("div", { style: avatarWrapperStyle }, /* @__PURE__ */ import_react3.default.createElement("div", { style: avatarRingStyle }, /* @__PURE__ */ import_react3.default.createElement("div", { style: avatarInnerStyle }, !avatar && initials)), /* @__PURE__ */ import_react3.default.createElement("div", { style: statusDotStyle })), /* @__PURE__ */ import_react3.default.createElement("div", { style: nameStyle }, name), /* @__PURE__ */ import_react3.default.createElement("div", { style: roleStyle }, role), /* @__PURE__ */ import_react3.default.createElement("div", { style: statusBadgeStyle }, /* @__PURE__ */ import_react3.default.createElement("span", { style: {
|
|
644
|
+
width: "6px",
|
|
645
|
+
height: "6px",
|
|
646
|
+
borderRadius: "50%",
|
|
647
|
+
background: statusColor,
|
|
648
|
+
display: "inline-block"
|
|
649
|
+
} }), statusText), /* @__PURE__ */ import_react3.default.createElement("div", { style: dividerStyle }), /* @__PURE__ */ import_react3.default.createElement("div", { style: statsRowStyle }, stats.map((stat, i) => /* @__PURE__ */ import_react3.default.createElement("div", { key: i, style: statItemStyle }, /* @__PURE__ */ import_react3.default.createElement("span", { style: statValueStyle }, stat.value), /* @__PURE__ */ import_react3.default.createElement("span", { style: statLabelStyle }, stat.label)))), /* @__PURE__ */ import_react3.default.createElement("div", { style: socialsRowStyle }, socials.map((social, i) => /* @__PURE__ */ import_react3.default.createElement(
|
|
650
|
+
"a",
|
|
651
|
+
{
|
|
652
|
+
key: i,
|
|
653
|
+
href: social.href,
|
|
654
|
+
style: socialBtnStyle(i),
|
|
655
|
+
onMouseEnter: () => setHoveredSocial(i),
|
|
656
|
+
onMouseLeave: () => setHoveredSocial(null),
|
|
657
|
+
"aria-label": social.label,
|
|
658
|
+
target: "_blank",
|
|
659
|
+
rel: "noopener noreferrer"
|
|
660
|
+
},
|
|
661
|
+
social.icon
|
|
662
|
+
))))),
|
|
663
|
+
/* @__PURE__ */ import_react3.default.createElement("div", { style: backStyle }, /* @__PURE__ */ import_react3.default.createElement("div", { style: borderGlowStyle }), /* @__PURE__ */ import_react3.default.createElement("div", { style: backInnerStyle }, /* @__PURE__ */ import_react3.default.createElement("div", { style: backDecoStyle }), /* @__PURE__ */ import_react3.default.createElement("div", { style: backDeco2Style }), /* @__PURE__ */ import_react3.default.createElement("div", { style: backHeaderStyle }, /* @__PURE__ */ import_react3.default.createElement("span", { style: backTitleStyle }, "About"), /* @__PURE__ */ import_react3.default.createElement(
|
|
664
|
+
"button",
|
|
665
|
+
{
|
|
666
|
+
style: flipBtnStyle,
|
|
667
|
+
onClick: () => setIsFlipped(false),
|
|
668
|
+
onMouseEnter: () => setFlipBtnHover(true),
|
|
669
|
+
onMouseLeave: () => setFlipBtnHover(false),
|
|
670
|
+
"aria-label": "Go back"
|
|
671
|
+
},
|
|
672
|
+
"\u2715"
|
|
673
|
+
)), /* @__PURE__ */ import_react3.default.createElement("p", { style: bioStyle }, bio), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
|
|
674
|
+
display: "flex",
|
|
675
|
+
flexWrap: "wrap",
|
|
676
|
+
gap: "8px",
|
|
677
|
+
margin: "16px 0"
|
|
678
|
+
} }, ["React", "TypeScript", "Figma", "Node.js"].map((tag, i) => /* @__PURE__ */ import_react3.default.createElement("span", { key: i, style: {
|
|
679
|
+
padding: "5px 12px",
|
|
680
|
+
borderRadius: "8px",
|
|
681
|
+
background: `${accentColor}12`,
|
|
682
|
+
border: `1px solid ${accentColor}25`,
|
|
683
|
+
fontSize: "11px",
|
|
684
|
+
fontWeight: "600",
|
|
685
|
+
color: accentColor,
|
|
686
|
+
letterSpacing: "0.3px"
|
|
687
|
+
} }, tag))), /* @__PURE__ */ import_react3.default.createElement(
|
|
688
|
+
"button",
|
|
689
|
+
{
|
|
690
|
+
style: contactBtnStyle,
|
|
691
|
+
onMouseEnter: () => setContactHover(true),
|
|
692
|
+
onMouseLeave: () => setContactHover(false),
|
|
693
|
+
onClick: onContact
|
|
694
|
+
},
|
|
695
|
+
"Get in Touch \u2192"
|
|
696
|
+
)))
|
|
697
|
+
)));
|
|
698
|
+
};
|
|
267
699
|
// Annotate the CommonJS export names for ESM import in node:
|
|
268
700
|
0 && (module.exports = {
|
|
269
701
|
Button,
|
|
270
|
-
Card
|
|
702
|
+
Card,
|
|
703
|
+
ProfileCard
|
|
271
704
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -228,7 +228,439 @@ var Card = ({
|
|
|
228
228
|
/* @__PURE__ */ React2.createElement("div", { style: accentBarStyle })
|
|
229
229
|
));
|
|
230
230
|
};
|
|
231
|
+
|
|
232
|
+
// src/components/ProfileCard/profileCard.jsx
|
|
233
|
+
import React3, { useState as useState3, useRef as useRef2 } from "react";
|
|
234
|
+
var ProfileCard = ({
|
|
235
|
+
name = "Alex Morgan",
|
|
236
|
+
role = "Senior UI Engineer",
|
|
237
|
+
avatar = null,
|
|
238
|
+
initials = "AM",
|
|
239
|
+
bio = "Crafting pixel-perfect interfaces and scalable design systems with a passion for clean code.",
|
|
240
|
+
stats = [
|
|
241
|
+
{ label: "Projects", value: "142" },
|
|
242
|
+
{ label: "Followers", value: "12.4K" },
|
|
243
|
+
{ label: "Rating", value: "4.9" }
|
|
244
|
+
],
|
|
245
|
+
socials = [
|
|
246
|
+
{ icon: "\u{1D54F}", label: "Twitter", href: "#" },
|
|
247
|
+
{ icon: "\u25C9", label: "Dribbble", href: "#" },
|
|
248
|
+
{ icon: "\u2B21", label: "GitHub", href: "#" }
|
|
249
|
+
],
|
|
250
|
+
accentColor = "#7C5CFC",
|
|
251
|
+
accentColorEnd = "#00D4AA",
|
|
252
|
+
bgColor = "#0F0F1A",
|
|
253
|
+
cardBg = "#16162A",
|
|
254
|
+
textColor = "#E8E8F0",
|
|
255
|
+
subtextColor = "#8888A4",
|
|
256
|
+
width = "340px",
|
|
257
|
+
statusText = "Available for hire",
|
|
258
|
+
statusColor = "#00D4AA",
|
|
259
|
+
onContact = null,
|
|
260
|
+
...rest
|
|
261
|
+
}) => {
|
|
262
|
+
const [isHovered, setIsHovered] = useState3(false);
|
|
263
|
+
const [isFlipped, setIsFlipped] = useState3(false);
|
|
264
|
+
const [tilt, setTilt] = useState3({ x: 0, y: 0 });
|
|
265
|
+
const [hoveredSocial, setHoveredSocial] = useState3(null);
|
|
266
|
+
const [contactHover, setContactHover] = useState3(false);
|
|
267
|
+
const [flipBtnHover, setFlipBtnHover] = useState3(false);
|
|
268
|
+
const cardRef = useRef2(null);
|
|
269
|
+
const handleMouseMove = (e) => {
|
|
270
|
+
if (!cardRef.current || isFlipped) return;
|
|
271
|
+
const rect = cardRef.current.getBoundingClientRect();
|
|
272
|
+
const x = (e.clientX - rect.left) / rect.width - 0.5;
|
|
273
|
+
const y = (e.clientY - rect.top) / rect.height - 0.5;
|
|
274
|
+
setTilt({ x: y * -8, y: x * 8 });
|
|
275
|
+
};
|
|
276
|
+
const handleMouseLeave = () => {
|
|
277
|
+
setTilt({ x: 0, y: 0 });
|
|
278
|
+
setIsHovered(false);
|
|
279
|
+
};
|
|
280
|
+
const keyframes = `
|
|
281
|
+
@keyframes profilecard-gradient-spin {
|
|
282
|
+
0% { transform: rotate(0deg); }
|
|
283
|
+
100% { transform: rotate(360deg); }
|
|
284
|
+
}
|
|
285
|
+
@keyframes profilecard-pulse {
|
|
286
|
+
0%, 100% { opacity: 1; transform: scale(1); }
|
|
287
|
+
50% { opacity: 0.6; transform: scale(1.15); }
|
|
288
|
+
}
|
|
289
|
+
@keyframes profilecard-shimmer {
|
|
290
|
+
0% { background-position: -200% center; }
|
|
291
|
+
100% { background-position: 200% center; }
|
|
292
|
+
}
|
|
293
|
+
@keyframes profilecard-fadein {
|
|
294
|
+
from { opacity: 0; transform: translateY(8px); }
|
|
295
|
+
to { opacity: 1; transform: translateY(0); }
|
|
296
|
+
}
|
|
297
|
+
`;
|
|
298
|
+
const containerStyle = {
|
|
299
|
+
perspective: "1200px",
|
|
300
|
+
width,
|
|
301
|
+
height: "460px",
|
|
302
|
+
fontFamily: "'Inter', 'SF Pro Display', -apple-system, sans-serif"
|
|
303
|
+
};
|
|
304
|
+
const cardInnerStyle = {
|
|
305
|
+
position: "relative",
|
|
306
|
+
width: "100%",
|
|
307
|
+
height: "100%",
|
|
308
|
+
transformStyle: "preserve-3d",
|
|
309
|
+
transition: "transform 0.7s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
310
|
+
transform: isFlipped ? "rotateY(180deg)" : `rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`
|
|
311
|
+
};
|
|
312
|
+
const faceBase = {
|
|
313
|
+
position: "absolute",
|
|
314
|
+
width: "100%",
|
|
315
|
+
height: "100%",
|
|
316
|
+
backfaceVisibility: "hidden",
|
|
317
|
+
WebkitBackfaceVisibility: "hidden",
|
|
318
|
+
borderRadius: "24px",
|
|
319
|
+
overflow: "hidden"
|
|
320
|
+
};
|
|
321
|
+
const borderGlowStyle = {
|
|
322
|
+
position: "absolute",
|
|
323
|
+
inset: "-2px",
|
|
324
|
+
borderRadius: "26px",
|
|
325
|
+
background: `conic-gradient(from 0deg, ${accentColor}, ${accentColorEnd}, ${accentColor})`,
|
|
326
|
+
animation: isHovered ? "profilecard-gradient-spin 3s linear infinite" : "none",
|
|
327
|
+
opacity: isHovered ? 1 : 0.4,
|
|
328
|
+
transition: "opacity 0.5s ease",
|
|
329
|
+
zIndex: 0
|
|
330
|
+
};
|
|
331
|
+
const frontStyle = {
|
|
332
|
+
...faceBase,
|
|
333
|
+
background: cardBg,
|
|
334
|
+
display: "flex",
|
|
335
|
+
flexDirection: "column",
|
|
336
|
+
alignItems: "center",
|
|
337
|
+
zIndex: 1,
|
|
338
|
+
position: "relative"
|
|
339
|
+
};
|
|
340
|
+
const frontInnerStyle = {
|
|
341
|
+
position: "relative",
|
|
342
|
+
zIndex: 2,
|
|
343
|
+
width: "100%",
|
|
344
|
+
height: "100%",
|
|
345
|
+
background: cardBg,
|
|
346
|
+
borderRadius: "24px",
|
|
347
|
+
display: "flex",
|
|
348
|
+
flexDirection: "column",
|
|
349
|
+
alignItems: "center",
|
|
350
|
+
overflow: "hidden"
|
|
351
|
+
};
|
|
352
|
+
const headerBgStyle = {
|
|
353
|
+
position: "absolute",
|
|
354
|
+
top: 0,
|
|
355
|
+
left: 0,
|
|
356
|
+
right: 0,
|
|
357
|
+
height: "110px",
|
|
358
|
+
background: `linear-gradient(135deg, ${accentColor}22, ${accentColorEnd}18)`,
|
|
359
|
+
zIndex: 0
|
|
360
|
+
};
|
|
361
|
+
const avatarWrapperStyle = {
|
|
362
|
+
marginTop: "48px",
|
|
363
|
+
position: "relative",
|
|
364
|
+
zIndex: 1
|
|
365
|
+
};
|
|
366
|
+
const avatarRingStyle = {
|
|
367
|
+
width: "88px",
|
|
368
|
+
height: "88px",
|
|
369
|
+
borderRadius: "50%",
|
|
370
|
+
padding: "3px",
|
|
371
|
+
background: `linear-gradient(135deg, ${accentColor}, ${accentColorEnd})`,
|
|
372
|
+
display: "flex",
|
|
373
|
+
alignItems: "center",
|
|
374
|
+
justifyContent: "center",
|
|
375
|
+
boxShadow: isHovered ? `0 0 30px ${accentColor}44, 0 0 60px ${accentColorEnd}22` : `0 0 15px ${accentColor}22`,
|
|
376
|
+
transition: "box-shadow 0.4s ease"
|
|
377
|
+
};
|
|
378
|
+
const avatarInnerStyle = {
|
|
379
|
+
width: "100%",
|
|
380
|
+
height: "100%",
|
|
381
|
+
borderRadius: "50%",
|
|
382
|
+
background: avatar ? `url(${avatar}) center/cover no-repeat` : `linear-gradient(135deg, ${accentColor}, ${accentColorEnd})`,
|
|
383
|
+
display: "flex",
|
|
384
|
+
alignItems: "center",
|
|
385
|
+
justifyContent: "center",
|
|
386
|
+
fontSize: "28px",
|
|
387
|
+
fontWeight: "700",
|
|
388
|
+
color: "#fff",
|
|
389
|
+
letterSpacing: "1px"
|
|
390
|
+
};
|
|
391
|
+
const statusDotStyle = {
|
|
392
|
+
position: "absolute",
|
|
393
|
+
bottom: "4px",
|
|
394
|
+
right: "4px",
|
|
395
|
+
width: "14px",
|
|
396
|
+
height: "14px",
|
|
397
|
+
borderRadius: "50%",
|
|
398
|
+
background: statusColor,
|
|
399
|
+
border: `3px solid ${cardBg}`,
|
|
400
|
+
animation: "profilecard-pulse 2s ease-in-out infinite",
|
|
401
|
+
zIndex: 2
|
|
402
|
+
};
|
|
403
|
+
const nameStyle = {
|
|
404
|
+
marginTop: "16px",
|
|
405
|
+
fontSize: "20px",
|
|
406
|
+
fontWeight: "700",
|
|
407
|
+
color: textColor,
|
|
408
|
+
letterSpacing: "0.2px",
|
|
409
|
+
textAlign: "center",
|
|
410
|
+
lineHeight: "1.2"
|
|
411
|
+
};
|
|
412
|
+
const roleStyle = {
|
|
413
|
+
marginTop: "6px",
|
|
414
|
+
fontSize: "13px",
|
|
415
|
+
fontWeight: "500",
|
|
416
|
+
color: subtextColor,
|
|
417
|
+
letterSpacing: "0.5px",
|
|
418
|
+
textTransform: "uppercase",
|
|
419
|
+
textAlign: "center"
|
|
420
|
+
};
|
|
421
|
+
const statusBadgeStyle = {
|
|
422
|
+
marginTop: "14px",
|
|
423
|
+
padding: "5px 14px",
|
|
424
|
+
borderRadius: "20px",
|
|
425
|
+
background: `${statusColor}15`,
|
|
426
|
+
border: `1px solid ${statusColor}33`,
|
|
427
|
+
fontSize: "11px",
|
|
428
|
+
fontWeight: "600",
|
|
429
|
+
color: statusColor,
|
|
430
|
+
letterSpacing: "0.4px",
|
|
431
|
+
display: "flex",
|
|
432
|
+
alignItems: "center",
|
|
433
|
+
gap: "6px"
|
|
434
|
+
};
|
|
435
|
+
const dividerStyle = {
|
|
436
|
+
width: "80%",
|
|
437
|
+
height: "1px",
|
|
438
|
+
background: `linear-gradient(90deg, transparent, ${subtextColor}33, transparent)`,
|
|
439
|
+
marginTop: "18px"
|
|
440
|
+
};
|
|
441
|
+
const statsRowStyle = {
|
|
442
|
+
display: "flex",
|
|
443
|
+
justifyContent: "center",
|
|
444
|
+
gap: "28px",
|
|
445
|
+
marginTop: "18px",
|
|
446
|
+
width: "100%",
|
|
447
|
+
padding: "0 24px",
|
|
448
|
+
boxSizing: "border-box"
|
|
449
|
+
};
|
|
450
|
+
const statItemStyle = {
|
|
451
|
+
display: "flex",
|
|
452
|
+
flexDirection: "column",
|
|
453
|
+
alignItems: "center",
|
|
454
|
+
gap: "3px"
|
|
455
|
+
};
|
|
456
|
+
const statValueStyle = {
|
|
457
|
+
fontSize: "18px",
|
|
458
|
+
fontWeight: "700",
|
|
459
|
+
color: textColor,
|
|
460
|
+
background: `linear-gradient(135deg, ${accentColor}, ${accentColorEnd})`,
|
|
461
|
+
WebkitBackgroundClip: "text",
|
|
462
|
+
WebkitTextFillColor: "transparent",
|
|
463
|
+
backgroundClip: "text"
|
|
464
|
+
};
|
|
465
|
+
const statLabelStyle = {
|
|
466
|
+
fontSize: "11px",
|
|
467
|
+
fontWeight: "500",
|
|
468
|
+
color: subtextColor,
|
|
469
|
+
textTransform: "uppercase",
|
|
470
|
+
letterSpacing: "0.6px"
|
|
471
|
+
};
|
|
472
|
+
const socialsRowStyle = {
|
|
473
|
+
display: "flex",
|
|
474
|
+
gap: "10px",
|
|
475
|
+
marginTop: "20px"
|
|
476
|
+
};
|
|
477
|
+
const socialBtnStyle = (index) => ({
|
|
478
|
+
width: "38px",
|
|
479
|
+
height: "38px",
|
|
480
|
+
borderRadius: "12px",
|
|
481
|
+
border: `1px solid ${hoveredSocial === index ? accentColor : subtextColor}33`,
|
|
482
|
+
background: hoveredSocial === index ? `${accentColor}18` : "transparent",
|
|
483
|
+
color: hoveredSocial === index ? accentColor : subtextColor,
|
|
484
|
+
fontSize: "16px",
|
|
485
|
+
display: "flex",
|
|
486
|
+
alignItems: "center",
|
|
487
|
+
justifyContent: "center",
|
|
488
|
+
cursor: "pointer",
|
|
489
|
+
transition: "all 0.25s ease",
|
|
490
|
+
transform: hoveredSocial === index ? "translateY(-3px)" : "translateY(0)",
|
|
491
|
+
textDecoration: "none",
|
|
492
|
+
outline: "none"
|
|
493
|
+
});
|
|
494
|
+
const flipBtnStyle = {
|
|
495
|
+
position: "absolute",
|
|
496
|
+
top: "16px",
|
|
497
|
+
right: "16px",
|
|
498
|
+
width: "32px",
|
|
499
|
+
height: "32px",
|
|
500
|
+
borderRadius: "10px",
|
|
501
|
+
border: `1px solid ${subtextColor}33`,
|
|
502
|
+
background: flipBtnHover ? `${subtextColor}18` : "transparent",
|
|
503
|
+
color: subtextColor,
|
|
504
|
+
fontSize: "14px",
|
|
505
|
+
display: "flex",
|
|
506
|
+
alignItems: "center",
|
|
507
|
+
justifyContent: "center",
|
|
508
|
+
cursor: "pointer",
|
|
509
|
+
zIndex: 5,
|
|
510
|
+
transition: "all 0.2s ease",
|
|
511
|
+
transform: flipBtnHover ? "rotate(180deg)" : "rotate(0deg)",
|
|
512
|
+
outline: "none"
|
|
513
|
+
};
|
|
514
|
+
const backStyle = {
|
|
515
|
+
...faceBase,
|
|
516
|
+
transform: "rotateY(180deg)",
|
|
517
|
+
zIndex: 1
|
|
518
|
+
};
|
|
519
|
+
const backInnerStyle = {
|
|
520
|
+
position: "relative",
|
|
521
|
+
zIndex: 2,
|
|
522
|
+
width: "100%",
|
|
523
|
+
height: "100%",
|
|
524
|
+
background: cardBg,
|
|
525
|
+
borderRadius: "24px",
|
|
526
|
+
display: "flex",
|
|
527
|
+
flexDirection: "column",
|
|
528
|
+
padding: "32px 28px",
|
|
529
|
+
boxSizing: "border-box",
|
|
530
|
+
overflow: "hidden"
|
|
531
|
+
};
|
|
532
|
+
const backHeaderStyle = {
|
|
533
|
+
display: "flex",
|
|
534
|
+
alignItems: "center",
|
|
535
|
+
justifyContent: "space-between",
|
|
536
|
+
marginBottom: "24px"
|
|
537
|
+
};
|
|
538
|
+
const backTitleStyle = {
|
|
539
|
+
fontSize: "16px",
|
|
540
|
+
fontWeight: "700",
|
|
541
|
+
color: textColor,
|
|
542
|
+
letterSpacing: "0.3px"
|
|
543
|
+
};
|
|
544
|
+
const bioStyle = {
|
|
545
|
+
fontSize: "14px",
|
|
546
|
+
lineHeight: "1.7",
|
|
547
|
+
color: subtextColor,
|
|
548
|
+
fontWeight: "400",
|
|
549
|
+
flex: 1
|
|
550
|
+
};
|
|
551
|
+
const contactBtnStyle = {
|
|
552
|
+
marginTop: "auto",
|
|
553
|
+
padding: "14px",
|
|
554
|
+
borderRadius: "14px",
|
|
555
|
+
border: "none",
|
|
556
|
+
background: contactHover ? `linear-gradient(135deg, ${accentColor}, ${accentColorEnd})` : `linear-gradient(135deg, ${accentColor}cc, ${accentColorEnd}cc)`,
|
|
557
|
+
color: "#fff",
|
|
558
|
+
fontSize: "14px",
|
|
559
|
+
fontWeight: "600",
|
|
560
|
+
cursor: "pointer",
|
|
561
|
+
letterSpacing: "0.3px",
|
|
562
|
+
transition: "all 0.3s ease",
|
|
563
|
+
transform: contactHover ? "translateY(-2px)" : "translateY(0)",
|
|
564
|
+
boxShadow: contactHover ? `0 8px 30px ${accentColor}44` : `0 4px 15px ${accentColor}22`,
|
|
565
|
+
outline: "none"
|
|
566
|
+
};
|
|
567
|
+
const backDecoStyle = {
|
|
568
|
+
position: "absolute",
|
|
569
|
+
top: "-40px",
|
|
570
|
+
right: "-40px",
|
|
571
|
+
width: "120px",
|
|
572
|
+
height: "120px",
|
|
573
|
+
borderRadius: "50%",
|
|
574
|
+
background: `radial-gradient(circle, ${accentColor}12, transparent 70%)`,
|
|
575
|
+
pointerEvents: "none"
|
|
576
|
+
};
|
|
577
|
+
const backDeco2Style = {
|
|
578
|
+
position: "absolute",
|
|
579
|
+
bottom: "-30px",
|
|
580
|
+
left: "-30px",
|
|
581
|
+
width: "100px",
|
|
582
|
+
height: "100px",
|
|
583
|
+
borderRadius: "50%",
|
|
584
|
+
background: `radial-gradient(circle, ${accentColorEnd}10, transparent 70%)`,
|
|
585
|
+
pointerEvents: "none"
|
|
586
|
+
};
|
|
587
|
+
return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("style", null, keyframes), /* @__PURE__ */ React3.createElement("div", { style: containerStyle, ...rest }, /* @__PURE__ */ React3.createElement(
|
|
588
|
+
"div",
|
|
589
|
+
{
|
|
590
|
+
ref: cardRef,
|
|
591
|
+
style: cardInnerStyle,
|
|
592
|
+
onMouseMove: handleMouseMove,
|
|
593
|
+
onMouseEnter: () => setIsHovered(true),
|
|
594
|
+
onMouseLeave: handleMouseLeave
|
|
595
|
+
},
|
|
596
|
+
/* @__PURE__ */ React3.createElement("div", { style: frontStyle }, /* @__PURE__ */ React3.createElement("div", { style: borderGlowStyle }), /* @__PURE__ */ React3.createElement("div", { style: frontInnerStyle }, /* @__PURE__ */ React3.createElement("div", { style: headerBgStyle }), /* @__PURE__ */ React3.createElement(
|
|
597
|
+
"button",
|
|
598
|
+
{
|
|
599
|
+
style: flipBtnStyle,
|
|
600
|
+
onClick: () => setIsFlipped(true),
|
|
601
|
+
onMouseEnter: () => setFlipBtnHover(true),
|
|
602
|
+
onMouseLeave: () => setFlipBtnHover(false),
|
|
603
|
+
"aria-label": "Show details"
|
|
604
|
+
},
|
|
605
|
+
"\u27F3"
|
|
606
|
+
), /* @__PURE__ */ React3.createElement("div", { style: avatarWrapperStyle }, /* @__PURE__ */ React3.createElement("div", { style: avatarRingStyle }, /* @__PURE__ */ React3.createElement("div", { style: avatarInnerStyle }, !avatar && initials)), /* @__PURE__ */ React3.createElement("div", { style: statusDotStyle })), /* @__PURE__ */ React3.createElement("div", { style: nameStyle }, name), /* @__PURE__ */ React3.createElement("div", { style: roleStyle }, role), /* @__PURE__ */ React3.createElement("div", { style: statusBadgeStyle }, /* @__PURE__ */ React3.createElement("span", { style: {
|
|
607
|
+
width: "6px",
|
|
608
|
+
height: "6px",
|
|
609
|
+
borderRadius: "50%",
|
|
610
|
+
background: statusColor,
|
|
611
|
+
display: "inline-block"
|
|
612
|
+
} }), statusText), /* @__PURE__ */ React3.createElement("div", { style: dividerStyle }), /* @__PURE__ */ React3.createElement("div", { style: statsRowStyle }, stats.map((stat, i) => /* @__PURE__ */ React3.createElement("div", { key: i, style: statItemStyle }, /* @__PURE__ */ React3.createElement("span", { style: statValueStyle }, stat.value), /* @__PURE__ */ React3.createElement("span", { style: statLabelStyle }, stat.label)))), /* @__PURE__ */ React3.createElement("div", { style: socialsRowStyle }, socials.map((social, i) => /* @__PURE__ */ React3.createElement(
|
|
613
|
+
"a",
|
|
614
|
+
{
|
|
615
|
+
key: i,
|
|
616
|
+
href: social.href,
|
|
617
|
+
style: socialBtnStyle(i),
|
|
618
|
+
onMouseEnter: () => setHoveredSocial(i),
|
|
619
|
+
onMouseLeave: () => setHoveredSocial(null),
|
|
620
|
+
"aria-label": social.label,
|
|
621
|
+
target: "_blank",
|
|
622
|
+
rel: "noopener noreferrer"
|
|
623
|
+
},
|
|
624
|
+
social.icon
|
|
625
|
+
))))),
|
|
626
|
+
/* @__PURE__ */ React3.createElement("div", { style: backStyle }, /* @__PURE__ */ React3.createElement("div", { style: borderGlowStyle }), /* @__PURE__ */ React3.createElement("div", { style: backInnerStyle }, /* @__PURE__ */ React3.createElement("div", { style: backDecoStyle }), /* @__PURE__ */ React3.createElement("div", { style: backDeco2Style }), /* @__PURE__ */ React3.createElement("div", { style: backHeaderStyle }, /* @__PURE__ */ React3.createElement("span", { style: backTitleStyle }, "About"), /* @__PURE__ */ React3.createElement(
|
|
627
|
+
"button",
|
|
628
|
+
{
|
|
629
|
+
style: flipBtnStyle,
|
|
630
|
+
onClick: () => setIsFlipped(false),
|
|
631
|
+
onMouseEnter: () => setFlipBtnHover(true),
|
|
632
|
+
onMouseLeave: () => setFlipBtnHover(false),
|
|
633
|
+
"aria-label": "Go back"
|
|
634
|
+
},
|
|
635
|
+
"\u2715"
|
|
636
|
+
)), /* @__PURE__ */ React3.createElement("p", { style: bioStyle }, bio), /* @__PURE__ */ React3.createElement("div", { style: {
|
|
637
|
+
display: "flex",
|
|
638
|
+
flexWrap: "wrap",
|
|
639
|
+
gap: "8px",
|
|
640
|
+
margin: "16px 0"
|
|
641
|
+
} }, ["React", "TypeScript", "Figma", "Node.js"].map((tag, i) => /* @__PURE__ */ React3.createElement("span", { key: i, style: {
|
|
642
|
+
padding: "5px 12px",
|
|
643
|
+
borderRadius: "8px",
|
|
644
|
+
background: `${accentColor}12`,
|
|
645
|
+
border: `1px solid ${accentColor}25`,
|
|
646
|
+
fontSize: "11px",
|
|
647
|
+
fontWeight: "600",
|
|
648
|
+
color: accentColor,
|
|
649
|
+
letterSpacing: "0.3px"
|
|
650
|
+
} }, tag))), /* @__PURE__ */ React3.createElement(
|
|
651
|
+
"button",
|
|
652
|
+
{
|
|
653
|
+
style: contactBtnStyle,
|
|
654
|
+
onMouseEnter: () => setContactHover(true),
|
|
655
|
+
onMouseLeave: () => setContactHover(false),
|
|
656
|
+
onClick: onContact
|
|
657
|
+
},
|
|
658
|
+
"Get in Touch \u2192"
|
|
659
|
+
)))
|
|
660
|
+
)));
|
|
661
|
+
};
|
|
231
662
|
export {
|
|
232
663
|
Button,
|
|
233
|
-
Card
|
|
664
|
+
Card,
|
|
665
|
+
ProfileCard
|
|
234
666
|
};
|
package/package.json
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "componentui-lib",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "ComponentUI is a modern, animated UI component library designed to help developers build beautiful landing pages and interfaces faster.",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"author": "SADIA",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"module": "dist/index.mjs",
|
|
9
|
-
"files": [
|
|
10
|
-
|
|
9
|
+
"files": [
|
|
10
|
+
"dist"
|
|
11
|
+
],
|
|
11
12
|
"scripts": {
|
|
12
13
|
"build": "tsup"
|
|
13
|
-
|
|
14
|
+
},
|
|
14
15
|
"peerDependencies": {
|
|
15
16
|
"react": ">=18",
|
|
16
17
|
"react-dom": ">=18"
|
|
@@ -20,4 +21,3 @@
|
|
|
20
21
|
"typescript": "^6.0.3"
|
|
21
22
|
}
|
|
22
23
|
}
|
|
23
|
-
|