Profile

1export interface ProfileProps {
2  name: string;
3  role: string;
4  bio: string;
5  avatar?: string;
6  website: string;
7}
8 
9const initials = (name: string) =>
10  name
11    .split(" ")
12    .map((part) => part.charAt(0))
13    .slice(0, 2)
14    .join("")
15    .toUpperCase();
16 
17export const Profile = ({ name, role, bio, avatar, website }: ProfileProps) => (
18  <div
19    style={{
20      alignItems: "center",
21      backgroundColor: "#18181b",
22      backgroundImage:
23        "radial-gradient(circle at 0% 100%, rgba(244,63,94,0.18), transparent 55%)",
24      color: "#fafafa",
25      display: "flex",
26      gap: "64px",
27      height: "100%",
28      padding: "80px",
29      width: "100%",
30    }}
31  >
32    {avatar ? (
33      <img
34        alt={name}
35        height={300}
36        src={avatar}
37        style={{
38          border: "4px solid rgba(250,250,250,0.15)",
39          borderRadius: "999px",
40        }}
41        width={300}
42      />
43    ) : (
44      <div
45        style={{
46          alignItems: "center",
47          backgroundColor: "#f43f5e",
48          border: "4px solid rgba(250,250,250,0.15)",
49          borderRadius: "999px",
50          color: "#ffffff",
51          display: "flex",
52          flexShrink: 0,
53          fontSize: "120px",
54          fontWeight: 700,
55          height: "300px",
56          justifyContent: "center",
57          width: "300px",
58        }}
59      >
60        {initials(name)}
61      </div>
62    )}
63 
64    <div style={{ display: "flex", flexDirection: "column" }}>
65      <div
66        style={{
67          display: "flex",
68          fontSize: "72px",
69          fontWeight: 700,
70          letterSpacing: "-0.03em",
71          lineHeight: 1.05,
72        }}
73      >
74        {name}
75      </div>
76      <div
77        style={{
78          color: "#f43f5e",
79          display: "flex",
80          fontSize: "34px",
81          fontWeight: 600,
82          marginTop: "12px",
83        }}
84      >
85        {role}
86      </div>
87      <div
88        style={{
89          color: "#a1a1aa",
90          display: "flex",
91          fontSize: "28px",
92          lineHeight: 1.4,
93          marginTop: "24px",
94          maxWidth: "560px",
95        }}
96      >
97        {bio}
98      </div>
99      <div
100        style={{
101          alignItems: "center",
102          alignSelf: "flex-start",
103          backgroundColor: "rgba(250,250,250,0.06)",
104          border: "1px solid rgba(250,250,250,0.12)",
105          borderRadius: "999px",
106          color: "#d4d4d8",
107          display: "flex",
108          fontSize: "26px",
109          fontWeight: 500,
110// … truncated