GretTech
Back to Components

Hero Section

portfolio

A modern hero section with animated blobs and stats.

Props

PropTypeDefaultDescription
personalData
object-Personal information
name
string"John Doe"Full name.
email
string"john@example.com"Contact email address.
phone
string"+1 234 567 890"Contact phone number.
address
string"San Francisco, CA"Physical address or location.
imageUrl
string"/placeholders/avatar.png"Profile picture URL.
professionalData
object-Professional details
designations
string[]['Software Engineer', 'UI/UX Designer']Job titles or roles (e.g. 'Frontend Developer').
about
string"Passionate software developer..."Short biography or about text.
skills
string[]['React', 'Next.js', 'TypeScript', 'Tailwind CSS']List of skills
socialLinks
object[]-Social media links
platform
string-Name of the platform (e.g. 'Twitter', 'LinkedIn').
url
string-Link to the profile.

Usage Examples

Minimalist Hero

import { Hero } from "@/showcase/hero";
export default function MinimalExample() {
  return (
    <Hero 
      personalData={{
        name: "Alex Developer",
      }}
      professionalData={{
        designations: ["Backend Specialist"],
        about: "I build robust, scalable, and secure APIs for the web."
      }}
      skills={[]}
    />
  );
}

Key Features

  • Animated background blobs
  • Responsive typography
  • Flexible call-to-action buttons
  • Statistics grid