Passport/pkg/views/users/me.gohtml

<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.4.6/dist/base.min.css">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.4.6/dist/components.min.css">
<link rel="stylesheet" href="https://unpkg.com/@tailwindcss/typography@0.1.2/dist/typography.min.css">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.4.6/dist/utilities.min.css">

<div class="banner-container">
    {{if gt (len .userinfo.Banner) 0}}
        <img src="/api/avatar/{{.userinfo.Banner}}" alt="Banner" class="banner">
    {{end}}
</div>

<div class="left-part name-card">
    {{if gt (len .userinfo.Avatar) 0}}
        <img src="/api/avatar/{{.userinfo.Avatar}}" alt="Avatar" class="avatar">
    {{else}}
        <div class="avatar empty">
            <span class="material-symbols-outlined">account_circle</span>
        </div>
    {{end}}

    <div class="name">
        <h2 class="username">{{.userinfo.Nick}}</h2>
        <h6 class="nickname">@{{.userinfo.Name}}</h6>
    </div>
    {{if gt (len .userinfo.Description) 0}}
        <div class="description">{{.userinfo.Description}}</div>
    {{else}}
        <div class="description empty">No description yet.</div>
    {{end}}
    <div class="uid">#{{.uid}}</div>

    <div class="metadata">
        <div><span class="material-symbols-outlined">calendar_month</span> {{.joined_at}}</div>
        <div><span class="material-symbols-outlined">cake</span> {{.birthday_at}}</div>
    </div>

    <div class="actions">
        <md-filled-tonal-button class="action" href="/users/me/personalize">
            Personalize
            <span slot="icon" class="material-symbols-outlined">palette</span>
        </md-filled-tonal-button>
        <md-filled-tonal-button disabled class="action" href="/users/me/security">
            Security
            <span slot="icon" class="material-symbols-outlined">security</span>
        </md-filled-tonal-button>
    </div>
</div>

<div class="right-part">
    <article class="personal-page prose">
        {{.personal_page}}
    </article>
</div>

<style>
    .avatar {
        display: block;
        width: 64px;
        height: 64px;
        object-fit: cover;

        clip-path: circle();
    }

    .avatar.empty {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--md-sys-color-secondary);
        color: var(--md-sys-color-on-secondary);
    }

    @media (min-width: 768px) {
        .banner-container {
            grid-column: span 2;
        }
    }

    .banner {
        display: block;
        object-fit: cover;
        border-radius: 28px;
        aspect-ratio: 3 / 1;
        width: 100%;
    }

    .name-card {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .name-card .name {
        display: flex;
        align-items: baseline;
        gap: 0.3rem;
    }

    .name-card .username {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
    }

    .name-card .nickname {
        margin: 0;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .name-card .uid {
        margin-top: -0.8rem;
        font-size: 0.7rem;
        font-weight: 400;
        font-family: Roboto Mono, monospace;
    }

    .name-card .description {
        margin-top: -1.25rem;
    }

    .description.empty {
        font-style: italic;
    }

    .name-card .metadata {
        font-size: 0.85rem;
        font-weight: 500;
        display: flex;
        flex-direction: column;
    }

    .metadata > div {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .metadata .material-symbols-outlined {
        font-size: 1rem;
        display: block;
    }

    .actions {
        display: flex;
        gap: 0.5rem;
        margin: 0 -0.5rem;
    }

    @media (min-width: 768px) {
        .actions {
            flex-direction: column;
        }
    }

    .actions .action {
        width: fit-content;
    }

    .actions .material-symbols-outlined {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .left-part .prose {
        min-width: 0;
        max-width: unset;
    }
</style>