Profile Customization

Profile Customization in SnippKit allows you to personalize your public developer profile (/u/<username>), display your technical skills, link your social channels, share QR badges, and configure profile visibility preferences.

Your SnippKit profile serves as your personal knowledge portfolio — highlighting your published snippets, command playbooks, active streaks, and custom profile README.

Overview

Your SnippKit profile is accessible publicly at https://snippkit.com/u/<username>.

Through the Profile Settings dashboard (/settings/profile), you can manage your avatar, bio, skills list, location, and social media handles while controlling sensitive privacy toggles.

Direct App Shortcut

Go directly to your Profile Settings (/settings/profile) page to update your bio, social links, or avatar.

What you can do

With Profile Customization, you can:

Edit Profile Information: Customize your Display Name, Job Title, Bio, and Location.
Set Skills & Technologies: Add comma-separated skill tags (e.g., React, Docker, Python, TypeScript).
Link Social Profiles: Connect your GitHub, LinkedIn, and Instagram accounts.
Crop & Upload Avatar: Upload custom profile pictures with built-in interactive cropping.
Generate Profile QR Codes: View and download a custom QR code for instant mobile profile sharing.
Control Privacy Toggles: Toggle profile README visibility, email exposure, and public activity streak badges.
Track Profile Completion: Monitor real-time completion progress across profile requirements.

Getting started

Quick Links

Open Profile Settings (/settings/profile) — Manage your profile information and visibility toggles.

Accessing profile settings

Click your profile avatar in the header navigation.
Select Settings → Profile (or navigate directly to /settings/profile).
Update your desired fields.
Click Save Changes at the top or bottom of the page.

Avatar Cropping & Uploads

SnippKit provides an interactive image cropping tool when uploading a profile picture:

Click the Camera icon over your avatar preview.
Select an image file (.jpg, .png, .webp).
Adjust the crop boundaries and zoom level inside the modal.
Click Crop & Save to apply your new avatar.

Clerk & Supabase sync

Avatar updates sync across Clerk authentication and SnippKit user tables automatically.

You can generate a downloadable QR badge directly from your profile settings:

On the /settings/profile page, click Share QR Code.
A modal will display your personal profile QR code alongside your SnippKit handle (@username).
Click Download QR to save an image or scan it directly from a mobile camera.

Privacy & Visibility Toggles

SnippKit gives you fine-grained control over what information appears on your public profile:

Setting Toggle	Description	Default
Enable Profile README	Displays a custom Markdown README block below your profile header (/settings/readme).	Disabled
Show Email Address	Displays your primary account email on your public profile page.	Disabled
Public Activity Streak	Displays your daily code creation streak badge on your profile.	Enabled
Show Streak Counter	Displays your active streak counter on public snippet headers.	Enabled

Profile Completion Meter

The profile editor includes a live completion progress bar tracking key profile setup steps:

Display Name: Set a preferred display name.
Bio: Write a short bio (up to 200 characters).
3+ Skills: List at least 3 technical skills.
Profile Picture: Upload or sync a profile avatar.

Achieving 100% completion unlocks your complete developer card layout.

README Profile — Write a custom Markdown README for your public profile.
Find Developers — Browse public developer profiles across the SnippKit platform.
Appearance & Themes — Customize theme options and editor preferences.
Security & Privacy — Manage active browser sessions and Clerk security.