Add Author Profile to Blog Posts

[tyaga001]

Description

Add an author profile section to blog posts that includes the author's photo and basic information. This would be similar to how Stream's blog (https://getstream.io/blog) displays author information with a small circular avatar and name below the title.

Requirements

• Add circular author avatar (using Shadcn UI Avatar component)
• Display author's name
• Position below the blog post title
• Keep design minimal and consistent with the current blog aesthetic

Technical Tasks

• Create AuthorProfile component using Shadcn UI Avatar
• Add author metadata to blog post frontmatter
• Update blog post template to include author section
• Add placeholder author images to public directory

Example Implementation

// Basic component structure
interface AuthorProfileProps {
  name: string;
  image: string;
}

export function AuthorProfile({ name, image }: AuthorProfileProps) {
  return (
    <div className="flex items-center gap-2 my-4">
      <Avatar className="h-10 w-10">
        <AvatarImage src={image} alt={name} />
        <AvatarFallback>{name[0]}</AvatarFallback>
      </Avatar>
      <span className="text-sm font-medium">{name}</span>
    </div>
  );
}

References

• Current blog post structure: devtoolsacademy.com/blog
• Design inspiration: getstream.io/blog