My website
Redesign home page: larger centered profile, purple accent, drop bio
- Vertically centered profile with responsive avatar and type sizing
- Nav row below profile with flex-wrap for small viewports
- Remove bio/description from landing page
- Revert accent color to purple (#b497bf light, #c4aacf dark)
🐾 Generated with [Letta Code](https://letta.com)
Co-Authored-By: Letta Code <noreply@letta.com>
+9
-14
+3
-3
public/site.css
+3
-3
public/site.css
···
6
6
--site-text: #1a1a1a;
7
7
--site-text-secondary: #2a2a2a;
8
8
--site-text-muted: #555;
9
-
--site-accent: #23a64d;
9
+
--site-accent: #b497bf;
10
10
--site-border: #e8e8e8;
11
11
--site-code-bg: #f5f5f5;
12
12
--site-max-width: 640px;
···
20
20
--site-text: #e5e5e5;
21
21
--site-text-secondary: #b0b0b0;
22
22
--site-text-muted: #8a8a8a;
23
-
--site-accent: #3fbf6a;
23
+
--site-accent: #c4aacf;
24
24
--site-border: #2a2a2a;
25
25
--site-code-bg: #1a1a1a;
26
26
}
···
31
31
--site-text: #e5e5e5;
32
32
--site-text-secondary: #b0b0b0;
33
33
--site-text-muted: #8a8a8a;
34
-
--site-accent: #3fbf6a;
34
+
--site-accent: #c4aacf;
35
35
--site-border: #2a2a2a;
36
36
--site-code-bg: #1a1a1a;
37
37
}
+6
-11
src/components/site.tsx
+6
-11
src/components/site.tsx
···
8
8
const profile = await getProfile();
9
9
10
10
const avatarHtml = profile?.avatar
11
-
? `<img src="${profile.avatar}" alt="" style="width:80px;height:80px;border-radius:50%;object-fit:cover;" />`
11
+
? `<img src="${profile.avatar}" alt="" style="width:clamp(80px,15vw,160px);height:clamp(80px,15vw,160px);border-radius:50%;object-fit:cover;" />`
12
12
: "";
13
13
14
14
return (
15
-
<div>
16
-
<div style="text-align:center;padding:3em 0 1em">
15
+
<div style="text-align:center;padding:25vh 0 4em">
16
+
<div>
17
17
{raw(avatarHtml)}
18
-
<h1 style="margin:0.5em 0 0;font-size:1.75rem;font-weight:700">
18
+
<h1 style="margin:0.5em 0 0;font-size:clamp(1.75rem,5vw,3rem);font-weight:700">
19
19
{profile?.displayName ?? "Cameron Pfiffer"}
20
20
</h1>
21
-
<p style="margin:0.25em 0;color:var(--site-text-secondary);font-size:0.9rem">
21
+
<p style="margin:0.25em 0;color:var(--site-text-secondary);font-size:1.2rem">
22
22
<a
23
23
href={`https://bsky.app/profile/${profile?.handle ?? "cameron.stream"}`}
24
24
target="_blank"
···
28
28
@{profile?.handle ?? "cameron.stream"}
29
29
</a>
30
30
</p>
31
-
{profile?.description && (
32
-
<p style="margin:1em auto 0;max-width:480px;color:var(--site-text-secondary);font-size:0.9rem;line-height:1.5">
33
-
{profile.description}
34
-
</p>
35
-
)}
36
31
</div>
37
32
38
-
<nav class="site-nav" style="justify-content:center">
33
+
<nav class="site-nav" style="justify-content:center;margin-top:2em;flex-wrap:wrap">
39
34
<a href="/">Home</a>
40
35
<a href="/blog">Blog</a>
41
36
<a href="/about">About</a>