campfire/src/routes/[server]/[account]/+page.svelte

<script>
    import Button from '@cf/ui/Button.svelte';
    import HomeIcon from '@cf/icons/unlisted.svg';
    import MoreIcon from '@cf/icons/more.svg';
    import Lang from '$lib/lang';

    const lang = Lang('en_GB');
</script>

<header>
    <div class="profile-tag">
        <!-- svelte-ignore a11y-img-redundant-alt -->
        <img src="https://f.mae.wtf/proxy/avatar.webp?url=https%3A%2F%2Ff.mae.wtf%2Ffiles%2F9cf9f3f1-70f6-4ecc-be2b-34ae6588bbdc&avatar=1" alt="Profile picture">
        <div class="profile-tag-names">
            <h1>mae</h1>
            <p>mae@f.mae.wtf</p>
        </div>
    </div>
</header>
<div class="profile-info">
    <div>
        <p class="profile-bio">
music maker and coder!
she/they/it - 18 - 🏳️‍⚧️🇬🇧
robotgirl in training

feel free to follow req if ur cool

https://mae.wtf/
also <a href="" class="mention">@mae</a>

"solid 7.5/10 motherliness rating" - <a href="" class="mention">@ellie</a>
        </p>
        <p class="profile-counts">
            <span>
                <b>{lang.string('profile.followers')}</b>   1225
            </span>
            <span>
                <b>{lang.string('profile.following')}</b>   1345
            </span>
        </p>
        <div class="profile-actions">
            <Button label="{lang.string('profile.follow')}" class="profile-btn-follow">{lang.string('profile.follow')}</Button>
            <Button label="{lang.string('profile.home_instance')}">
                <HomeIcon width="24px"/>
            </Button>
            <Button>
                <MoreIcon width="24px"/>
            </Button>
        </div>
    </div>
</div>

<div class="profile-post-categories">
    <Button active>{lang.string('profile.posts')}</Button>
    <Button>{lang.string('profile.replies')}</Button>
    <Button>{lang.string('profile.media')}</Button>
</div>

<style>
    header {
        margin-top: 1rem;
        width: 100%;
        height: 215px;
        background-image: url("https://f.mae.wtf/files/42bcf2ba-4256-4d22-b22f-019dfb2c0008.webp");
        background-position: center;
        background-size: cover;
        position: relative;
    }

    .profile-tag {
        position: absolute;
        bottom: 16px;
        left: 16px;
        background: color-mix(in srgb, transparent, var(--bg-1000) 50%);
        backdrop-filter: blur(8px);
        width: fit-content;
        display: flex;
        height: 64px;
        border-radius: 8px;
    }

    .profile-tag img {
        aspect-ratio: 1;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    .profile-tag-names {
        padding: 8px 16px;
        align-self: center;
    }

    .profile-tag-names * {
        margin: 0;
    }

    .profile-tag-names h1 {
        font-size: 1.15rem
    }

    .profile-info {
        background-color: var(--bg-800);
        padding: 16px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .profile-bio {
        margin: 0;

        /* !! may not be required in prod */
        white-space: pre-line;
    }

    .profile-counts > *:not(.profile-counts:first-child) {
        margin-right: 16px;
    }

    .profile-actions {
        width: fit-content;
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .profile-actions :global(button:first-child) {
        padding: 0 32px;
        background-color: var(--accent);
        color: var(--bg-900);
    }

    .profile-actions :global(button) {
        height: 42px;
        width: fit-content;
    }

    .profile-post-categories {
        display: flex;
        padding: 1rem 0;
        gap: 1rem;
    }
</style>