If you are building a personal portfolio site or developer profile page and need an above-the-fold hero that communicates your identity, skills, and availability quickly, this snippet gives you a complete card-style personal hero: gradient avatar with initials, open-to-work status badge, name, role title, bio paragraph, skill tags, experience stats, dual CTA buttons, and four social media icon links — all in a centred card layout with no JavaScript required.

The status indicator system

A pulsing green dot in the top-right corner of the card signals current availability — a pattern borrowed from messaging apps (Discord, Slack). The .status-dot uses box-shadow: 0 0 0 3px rgba(34,197,94,0.2) for the glow ring, and a blink keyframe animates opacity between 1 and 0.4. The "✦ Open to work" badge below the avatar reinforces this with a green tinted pill — providing two availability signals at different visual weights.

The gradient avatar

The avatar uses gradient initials — the same pattern as the Profile Card snippet but at a larger size (88px) for a hero context. The gradient (indigo → purple) plus box-shadow: 0 8px 24px rgba(99,102,241,0.3) gives it lift and visual weight as the primary focal point. Replace with an img element for a real photo.

Skill tags and stats

The .tags flex row wraps skill labels in muted grey chips — easy to scan and update. The .stats-row shows years of experience, project count, and client count in a horizontal strip separated by 1px dividers. Both sections communicate professional depth at a glance before the visitor reads the bio.

Social icon links

Four social platform icons (GitHub, LinkedIn, X/Twitter, Dribbble) use inline SVG paths — no icon library. Each .soc link is a 40px square with a border-radius, a neutral grey default state, and a brand-coloured hover state (indigo fill, white icon). ARIA labels make them accessible to screen readers.

Customising for your profile

Change the avatar initials and gradient. Update name, role, bio, and skill tags. Update the stats numbers. Wire the CTA buttons to your portfolio page and CV file. Set the social link href values to your actual profile URLs.

Deploying as a personal domain page

Publish the portfolio hero as a standalone page at your-name.dev or via GitHub Pages (place the HTML export in a docs/ folder of a public repo and enable Pages in settings). Link the page from your LinkedIn profile URL, GitHub profile README, and email signature. For a full portfolio site, nest this hero above a Projects section (CSS Grid Cards) and a Contact section with a contact form.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to figure out every visual layering decision by staring at the CSS. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how the status-dot's box-shadow glow ring combines with the blink keyframe's opacity animation to read as a live availability indicator, and why the component ships with zero JavaScript despite looking dynamic. The same assistant can help you optimize it, for example checking whether the gradient avatar and box-shadow values render consistently across browsers, or whether the four inline SVG social icons could be deduplicated into a single reusable icon component if you convert this to a framework. It's also useful for extending the effect: ask it to swap the initials avatar for a real photo with a graceful fallback to initials if the image fails to load, add a copy-to-clipboard email button, or make the availability status (green/amber/red) driven by a single JavaScript variable instead of manually edited CSS. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a personal portfolio hero card in plain HTML and CSS only, with no JavaScript required for the base version.

Requirements:
- A centered card containing: a small pulsing status dot in the corner signaling live availability, a circular gradient avatar showing initials (sized to be the clear focal point), an "open to work" badge pill below the avatar, a name, a role/title line, and a short 2-3 sentence bio paragraph.
- The pulsing status dot must combine a colored box-shadow glow ring around it with a CSS keyframe animation that cycles its opacity between fully visible and partially faded, looping indefinitely, so it reads as "live" rather than static.
- A row of skill/technology tag chips that wraps naturally on narrow screens, followed by a stats row (for example years of experience, project count, client count) with thin vertical divider lines between each stat.
- Two call-to-action buttons side by side — one filled/solid as the primary action and one outlined/secondary — and below them a row of at least four social platform icon links, each built from an inline SVG path (not an icon font or image), with a neutral default color that switches to a solid brand-accent background and white icon color on hover.
- Make sure the entire component degrades gracefully with zero JavaScript: all interactive-looking states (hover colors, the pulse animation) must be achievable through CSS alone, and the avatar element should be structured so it could be swapped for a real img element with object-fit: cover without changing any of the surrounding sizing or shadow CSS.

Step by step

How to Use

1
Update your name, role, and bioIn the HTML panel, edit the .name h1, .role paragraph, and .bio paragraph. Keep the bio to 2–3 sentences — enough to communicate who you are and what you do, short enough to read in 5 seconds.
2
Add your actual avatar photoReplace the .av div with <img class="av" src="photo.jpg" alt="Your Name" style="object-fit:cover"> and add object-fit: cover to the .av CSS rule. The existing border-radius, size, and box-shadow apply automatically to the img element.
3
Update skill tags and statsIn the HTML, edit the .tag span elements to list your actual tech stack. Update the three .stat elements with your real years of experience, project count, and client count.
4
Wire the CTA buttons and social linksSet href="#" on .btn-primary to your portfolio or projects page URL. Set .btn-secondary href to your CV file (hosted on Google Drive, Dropbox, or your own server). Update all four .soc anchor href values to your actual social profile URLs.
5
Change the availability statusIf you are not currently available, remove the .av-badge "Open to work" element and change the .status-dot background to #f59e0b (yellow for "busy") or #ef4444 (red for "not available"). Update the blink keyframe opacity values to match.
6
Export in your formatClick "HTML" for a standalone file to paste into your portfolio site, "JSX" for a React component, or "Tailwind" for a Tailwind CSS version.

Real-world uses

Common Use Cases

Developer and designer personal portfolio homepage hero

The card layout with avatar, role, bio, skills, and stats is the most information-dense above-the-fold hero pattern for a personal portfolio. Visitors know who you are, what you do, and whether you are available in under 10 seconds.

Freelancer availability and contact landing page

The pulsing green status dot and "Open to work" badge are the most direct signals that you are currently taking on new work. Update the badge and dot colour to reflect your actual availability — green for available, amber for selective, red for fully booked.

UX/UI designer portfolio and case study index page

Replace the skill tags with design tools (Figma, Sketch, Principle, Framer) and update the stats to "Design systems built", "Products shipped", and "Team members led". The social links support Dribbble and Behance for design platform presence.

Developer conference speaker profile pages

Use the card hero for conference or meetup speaker profile pages. Replace "Open to work" with "Speaking at [Event]". Link the CTA to your talk abstract or session recordings. The compact card format fits well in a speaker grid.

Study the gradient avatar and status indicator patterns

The gradient avatar initials demonstrate how to create visually rich profile images without any image file — useful for any user-generated content UI where photos are optional. The status dot pattern applies to any online/busy/offline indicator in a chat, dashboard, or team directory.

Job seeker technical profile page for applications

Publish the portfolio hero as a standalone page (your-name.dev or GitHub Pages) and link to it in job applications, LinkedIn, and your email signature. The skills, stats, and CTA buttons signal professionalism before recruiters reach your work samples.

Got questions?

Frequently Asked Questions

Replace the .av div element with an img tag: <img class="av" src="your-photo.jpg" alt="Your Name" />. In the CSS, add object-fit: cover to the .av rule so the photo fills the circle without distortion. The existing width: 88px, height: 88px, border-radius: 50%, and box-shadow apply automatically to the img element. For best results, use a square photo (1:1 ratio) at at least 176×176px (2× for Retina screens).

Duplicate a .soc anchor element in the social-row div. Find the SVG icon for your platform (SVG Repo, Heroicons, or the platform's own brand kit). Paste the SVG path inside a 24-viewBox SVG tag with fill="currentColor". Adjust the width and height attributes on the SVG to 18px. The hover style (background: #6366f1, color: #fff) applies automatically from the .soc:hover rule.

Find #6366f1 in the CSS panel and replace all instances with your brand hex. This updates the avatar gradient, the role text colour, the primary CTA button, and the social icon hover state simultaneously. For the avatar, also update the second gradient colour (#a78bfa). For the box-shadow, update the rgba() values to match your new hex (use an online hex-to-rgba converter for the glow colour).

Yes. Click "JSX" to download a React component. Since this snippet uses no JavaScript, no useState or useEffect is needed — it can be a pure Server Component in Next.js App Router (no "use client" directive). Export it as the default function from app/page.tsx for a single-page portfolio site. For a multi-page site, use it as the first section in app/page.tsx above a projects section and a contact section.

Loading…