Two-letter avatars cost zero storage and zero API calls
Every comment in the portal shows an avatar next to the author name. The avatar is not an image. It is two letters — the initials of the person who wrote the comment — rendered in a 32-pixel circle with a border. The initials are generated at render time from the authorName field. Split on spaces, map to the first character of each word, join into a string, slice to two characters, uppercase. A client named Sarah Chen gets SC. I get JM. A single-name client gets the first two letters of their name. The generation is five chained string methods inline in the JSX. No utility function, no database field, no pre-computed value. The circle itself has two visual modes controlled by the isJames boolean on the comment record. When isJames is true, the border colour is the portal accent — the service-specific colour that runs through every accent element. When isJames is false, the border uses the muted glass colour that every non-interactive border shares. That single boolean — stored in the database at comment creation time — tells the client at a glance which comments are from me and which are from them. The author name below the avatar uses the same conditional. My name renders in the accent colour. Their name renders in the default text colour. Two visual signals — border and name colour — both driven by one boolean. No profile picture upload feature, no Gravatar lookup, no external avatar service. The comment model stores a plain string for authorName and a boolean for isJames. The component turns those two fields into a complete visual identity.
Comments coming soon
Sign in with TikTok to leave a comment. Coming soon.