avatar in a gradient ring with title, subtitle and social links.

Live preview

Mona Reyes

Illustrator & front-end tinkerer.

GitHub →

Install

From your site folder, run:

Copyjprot add AvatarHero

That downloads the self-contained component into theme/components/AvatarHero.js,

where it is picked up automatically — the same way as any built-in component.

To remove it later, just delete that file.

Use it as a homepage section

Add an entry to the sections: list in jprot.config.js:

Copysections: [
  { component: 'AvatarHero', title: 'AvatarHero' },
]

Use it inside a page

On its own line in any Markdown file, passing the props:

Copy:::AvatarHero avatar="https://picsum.photos/seed/ava/200" title="Mona Reyes" subtitle="Illustrator & front-end tinkerer." githubUrl="https://github.com" githubLabel="GitHub"

Props

Prop	Type	Note
avatar	string	square photo URL
title	string	name / headline
subtitle	string	role or tagline
githubUrl	string	bottom link target ('' hides it)
githubLabel	string	bottom link text

↩ Back to all elements