import Portfolio from "@/components/portfolio";
 
export default function Example() {
  return (
    <Portfolio
      config={{
        firstName: "John",
        experience: 5,
        domain: "design",
        role: "designers",
        bioText: {
          prefix: "It's been",
          emphasis1: "years",
          midText: "since I got into design. I now have clear principles, the main one being",
          emphasis2: "value instead of mindless execution",
          suffix: ". It's easy to print generic solutions, but what we designers are hired for is our unique point of view and creative thinking."
        },
        colors: {
          bioButton: "bg-orange-600",
          menuButton: "bg-blue-600",
          plusButton: "bg-green-600"
        }
      }}
    />
  );
}

import Portfolio from "@/components/portfolio";
 
export default function Example() {
  return (
    <Portfolio
      config={{
        image: "/path/to/profile.jpg",
        firstName: "Sarah",
        experience: 8,
        domain: "development",
        role: "developers",
        colors: {
          bioButton: "bg-purple-600",
          menuButton: "bg-indigo-600",
          plusButton: "bg-emerald-600"
        },
        cvLink: "https://example.com/cv",
        twitterUrl: "https://twitter.com/username",
        githubLink: "https://github.com/username",
        layersLink: "https://portfolio.com"
      }}
    />
  );
}

type PortfolioConfig = {
  // Basic Info
  image?: string;
  firstName: string;
  experience: number;
  domain: string;
  role: string;
 
  // Bio Content
  bioText: {
    prefix: string;
    emphasis1: string;
    midText: string;
    emphasis2: string;
    suffix: string;
  };
 
  // Styling
  colors: {
    bioButton: string;    // Tailwind color class
    menuButton: string;   // Tailwind color class
    plusButton: string;   // Tailwind color class
  };
 
  // Links
  cvLink: string;
  twitterUrl: string;
  layersLink: string;
  githubLink: string;
};