Profile Card Generator: Team and Speaker Data from JSON

Use the Profile Card Generator to turn one person's JSON record into a team, speaker, or directory card. Supply a name, then add the role, biography, skills, and contact links that belong on the destination page. The tool previews one profile at a time.

This guide covers the data behind a person card: which fields to include, how links work, and how to reuse the result across a directory. For a customer's statement about a product or service, use the separate testimonial card guide.

Decide what the profile needs to answer

A useful profile helps a reader identify a person and understand why that person appears on the page. Start with the reader's task. A conference attendee needs a speaker's subject expertise. A support colleague needs a role and a contact route. A public team page may need neither a personal email nor a precise location.

Choose the fields before selecting colors. This keeps a directory consistent when some people have long biographies and others provide only a name and role.

The card generator displays supplied information. It does not verify employment, identity, qualifications, or ownership of a social account. Confirm those details with the person or the responsible content owner.

Prepare one JSON object

Open JSON to Profile Card. Start with a sample or paste an object. Use a non-empty string for name. The other fields are optional, but their value types still matter.

This fictional record shows the supported structure. Replace the example identity and links before publication.

{
 "name": "Sarah Johnson",
 "title": "Senior Software Engineer",
 "company": "Tech Corp",
 "location": "San Francisco, CA",
 "email": "sarah@example.com",
 "avatar": "",
 "bio": "Passionate about building scalable web applications.",
 "skills": ["React", "TypeScript", "Node.js", "Python"],
 "social": {
 "twitter": "sarahjdev",
 "linkedin": "sarahjohnson",
 "github": "sarahj",
 "website": "https://example.com/sarah"
 },
 "coverColor": "#6366f1"
}

Do not paste a complete employee export. Select the public fields you need, then create a profile object from that selection. Keep internal identifiers, approval records, and unpublished contact details in your own source system.

The input handler checks JSON parsing and the presence of name. It does not provide a complete schema check. For example, a number used as a name or a string used as skills can fail later in rendering. Use the types in this reference even when the editor does not report a field error.

Profile field reference

Build social links from the correct value

The template adds the platform prefix for Twitter/X, LinkedIn, and GitHub. For example, "github": "sarahj" becomes a link under https://github.com/. A complete GitHub URL in that field would repeat the prefix.

The LinkedIn field builds a personal /in/ link. Do not put a company-page URL in it. Use social.website for a different approved destination. Check the actual exported link before publishing; a valid JSON string does not prove that the account exists.

Use a complete HTTPS URL for the website when possible. Avoid adding query parameters that contain private tokens or account details. A website link and an avatar URL have different jobs: one is a reader destination, while the other loads image content.

Keep skills and biographies consistent

Write skills as ["React", "TypeScript"], not as "React, TypeScript". Select labels that help readers compare relevant experience. A long list can hide the role and contact details that the card needs to show first.

Write the biography as plain text. Do not use it as a place for HTML markup or a full résumé. For directory entries, describe the person's responsibility and useful area of knowledge. Put a longer biography on a linked profile page.

Choose a layout for the available fields

The generator offers Classic, Modern, Dark, Compact, Minimal, and Gradient. These templates have different uses and do not expose every field in the same way.

The Compact preview includes the platform account icons, but it does not show the social.website link. Choose another template or adapt the exported code if the website is the main contact route.

Try a long name and a missing portrait before settling on a template. These two cases often reveal layout problems that the short sample record does not show. Review the final exported code as well as the preview; they use separate rendering paths.

Example: a conference speaker without a public email

A speaker profile can explain subject expertise without publishing a personal mailbox. This fictional record keeps the location and email absent. It directs attendees to a public page instead.

{
 "name": "Mina Example",
 "title": "Accessibility Engineer",
 "company": "Example Studio",
 "bio": "Mina presents a session on keyboard access in data tables.",
 "skills": ["Accessibility", "Keyboard navigation"],
 "social": {
 "website": "https://example.com/speakers/mina"
 }
}

Start with Modern or Minimal for this record. Confirm that the website link appears in the selected layout. Put the session title, room, and event time in the conference schedule; this profile schema has no dedicated schedule fields.

If the speaker changes companies, update the organization and biography in the source record. Re-export any card images already used in slides or event materials. A downloaded PNG does not update when its original JSON changes.

Build a directory from a single-card prototype

The tool does not accept an array of people as a batch directory. Preview one representative person, then check another record with different field lengths. Use that work to define a reusable card in the destination project.

A practical sequence is:

1. Select one approved person record.
2. Check its field types and links.
3. Choose a template that supports the required contact route.
4. Export the markup for review.
5. Adapt the markup into the project's reusable component.
6. Render the directory records through that component.

For a Tailwind layout, the surrounding grid can use this structure:

<class="text-rose-400">div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Paste profile cards here -->
</class="text-rose-400">div>

This example supplies the grid, not a data loop, search function, or access restriction. Add those functions in your application when the directory needs them. Keep each person's source record separate from the card's layout rules.

An internal directory also needs its own access controls. Hiding a profile link in a menu does not restrict access to the underlying page. The generator does not provide employee authentication or control where an export is later hosted.

Export code or a profile image

Use the Code view for Tailwind HTML, inline-styled HTML, or React JSX. These are starting points for integration. Tailwind output needs the project's Tailwind styles. The React export contains the entered values in a static function; it is not a ready-made component that accepts a people array.

Review JSX before use. The generator changes class to className, but the Classic cover retains a string style attribute. Convert that value to a React style object. Check SVG property names against the React JSX rules. See the React style reference for the object form. Run the destination project's normal compiler after adapting the export.

Use PNG for a slide or another image-only destination. The download captures the card at twice the preview scale. It cannot create detail absent from a small source portrait, and its pictured contact controls are not clickable links.

For a web team page, keep the name, role, and contact route available as text. If an image carries information, provide an appropriate text alternative. See the W3C guidance for informative images.

Portrait requests and missing images

An empty avatar uses the first character of the name as a fallback. A supplied avatar URL causes a request to the image host. That host can receive the request even though the profile data is processed in the browser.

Use an approved portrait that you can continue to host. A temporary URL can stop working in exported markup. A captured PNG no longer depends on that portrait URL. A preview image that loads successfully can still fail during PNG capture because the capture process has different resource requirements.

If a portrait is missing, check the URL and image permissions. Then try the initial fallback to isolate the problem. Do not replace a missing employee photograph with an unrelated person's image.

Questions about people cards

Can I use one card for every person?

Use one reusable layout with separate person records in your project. The browser generator itself processes one JSON object at a time.

Why is my website missing from Compact?

The Compact template shows selected platform links, but not the website field. Select a layout that includes it or add the link during integration.

Will a profile card verify an author's expertise?

No. It displays the supplied role, biography, and skills. Publish only details that the person or organization can support.

Can I hide a field without inserting empty placeholder text?

Omit the optional field. Do not write "N/A" for a public email or account that the person does not want displayed.

Does formatting JSON repair every input problem?

No. Formatting does not turn a string into a skills array or verify a contact address. Check syntax with the JSON Formatter, then review the field types separately.

Which guide covers customer quotes?

The testimonial card guide explains quote attribution, optional ratings, and publication records. Use it when the card's main content is feedback rather than a person's biography.