Personal Portfolio Hero

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

44 sectionsView all →
1–5 of 44
Hero

Personal Portfolio Hero

Responsive · Animated
Hero

Image Background Hero

Responsive · Animated
Hero

SaaS Split Hero

Responsive · Animated
Hero

Centred Gradient Hero

Responsive · Animated
Hero

App Product Hero

Responsive · Animated

Personal Portfolio Hero — Free Website Section Template

Hero · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryHero
Tagsheroportfoliopersonalfreelancerdesignerdeveloperphoto
Updated October 20, 2026

What's included

Features

"Available for work" badge with a live green dot, switchable
Greeting, headline, short bio and two buttons
Up to three social links that hide when empty
Portrait photo cropped to an organic blob with a dashed outline
Upload your photo; it stays in your browser
Photo moves above the text on phones
GSAP entrance animation with reduced-motion support
Any Google Font, or upload your own brand font
Shared theme tokens for colours, fonts, radius and width
Export HTML, a ZIP, React or Vue, or fork to My Code

About this section

Personal Portfolio Hero — Free Hero Section for Developers & Designers

Personal Portfolio Hero: A personal website hero for designers, developers and freelancers: an "available for work" badge with a live dot, a friendly "Hi, I'm…" headline, a short bio, buttons for your work and contact, social links, and your photo in an organic blob frame.

Personal Portfolio Hero is a free hero section for developers, designers, freelancers and creators. It opens with an "available for work" badge and a live green dot, a friendly "Hi, I'm Alex" greeting, a headline about what you do, a short bio, buttons for your work and contact, social links, and your photo in an organic blob frame with a dashed outline.

Made for people, not products

A personal site has to answer three questions quickly: who you are, what you do and how to work with you. The greeting, headline and bio answer the first two; the "See my work" and "Get in touch" buttons and the availability badge answer the third. Switch the badge off when you're fully booked, and link the contact button to an email address, a booking page or a contact form.

Your photo, your links

Upload a portrait (resized in your browser, never uploaded) and it's cropped to the blob shape automatically. Add up to three social links, such as GitHub, LinkedIn and Dribbble, or swap in X, YouTube or Behance; empty links hide themselves.

Theme, motion and exports

Pick a warm preset or your own colours, choose any Google Font or upload your personal brand font, and set the corner radius. On phones the photo moves above the text. The GSAP entrance animation staggers the introduction and fades your photo in once on scroll. Export a single HTML file for a one-page site, a ZIP with your photo, a React or Vue component for your Next.js or Nuxt portfolio, or fork it into My Code.

Why use it

Why Use the Personal Portfolio Hero

👋
Personal from the first line
A greeting and your photo make visitors feel they are meeting a person, which matters when they are choosing who to hire.
🟢
Shows you are available
The live availability badge tells clients you are taking work right now, one of the first things they want to know.
🔗
Every next step in one place
Your work, your contact details and your social profiles are all one click away from the first screen.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the availability badge, intro, buttons, social links and photo in the panel. Switch the availability badge and social links on or off. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

💻
Developer portfolio
Introduce yourself with your stack in the bio, link the first button to your projects section and add GitHub and LinkedIn as social links.
🎨
Designer or illustrator website
Lead with a headline about the kind of work you love, link Dribbble or Behance, and use the button to open your case studies.
🧑‍💼
Freelancer or consultant homepage
Keep the availability badge on, link "Get in touch" to a booking page and describe the outcomes you deliver in the headline.
🎥
Creator and personal brand page
Creators can link YouTube, Instagram and a newsletter in the social links and use the main button for their latest video or course.

Got questions?

Frequently Asked Questions

Edit the greeting, headline, bio, buttons and links, upload your photo and pick your colours and fonts. Then download the .html file for a one-page site, or copy the React or Vue component into your Next.js, Nuxt or Astro portfolio and add more sections below it.

A portrait-oriented photo (around 900 × 1000 px) with your face in the upper middle. It is cropped to the blob shape automatically and resized in your browser.

Yes. Each of the three links has a text and a URL, so you can use GitHub, LinkedIn, X, Dribbble, Behance, YouTube or anything else. Leave a link empty to hide it.

Switch off "Availability badge" in the panel, or change its text to something like "Booked until March".

Yes. Download the ZIP, rename index.html if needed, and upload the folder to GitHub Pages, Netlify, Vercel or any static host. The images folder comes with it.

It saves an editable copy of your Personal Portfolio Hero in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.