import { forwardRef } from "react";
import {
Eye,
ExternalLink,
Calendar,
User,
Briefcase,
Code,
Palette,
ArrowRight,
MessageSquare
} from "lucide-react";
import {
Block,
Stack,
Grid,
Group,
Title,
Text,
Badge,
Button,
Card,
Image,
Icon,
Box
} from "@ui8kit/core";
import { skyOSTheme } from "@ui8kit/theme";
const currentTheme = skyOSTheme;
const theme = {
theme: currentTheme,
themeRounded: currentTheme.rounded,
themeButtonSize: currentTheme.buttonSize
}
import {
SplitBlock,
createContentHook,
} from "@ui8kit/core";
// Portfolio interfaces (reuse from GridPortfolio)
interface PortfolioProject {
id: string;
title: string;
description: string;
image: {
src: string;
alt: string;
};
tags: string[];
category?: string;
client?: string;
year?: string;
status?: "completed" | "in-progress" | "featured";
links?: {
live?: string;
github?: string;
case_study?: string;
};
stats?: {
views?: string;
likes?: string;
duration?: string;
};
lucideIcon?: any;
}
interface PortfolioCategory {
id: string;
name: string;
lucideIcon?: any;
color?: string;
}
// Split Portfolio data interface
export interface SplitPortfolioData {
badge?: string;
title: string;
description: string;
buttonText?: string;
categories?: PortfolioCategory[];
projects: PortfolioProject[];
stats?: {
totalProjects: string;
yearsExperience: string;
happyClients: string;
awards?: string;
};
skills?: string[];
testimonial?: {
text: string;
author: string;
role: string;
company?: string;
};
}
interface SplitPortfolioProps {
content: SplitPortfolioData;
variant?: "showcase" | "about" | "skills" | "testimonial" | "process";
leftMedia?: boolean;
useContainer?: boolean;
py?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
className?: string;
}
// Custom content hooks for different split portfolio variants
const splitPortfolioContentHooks = {
// Portfolio showcase
showcase: createContentHook({
content: (content: SplitPortfolioData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.description}
{/* Featured Projects */}
Featured Work
{content.projects.slice(0, 3).map((project) => (
{project.title}
{project.year && (
{project.year}
)}
{project.description}
{project.tags.slice(0, 2).map((tag, index) => (
{tag}
))}
))}
{/* Stats */}
{content.stats && (
{content.stats.totalProjects}
Projects Completed
{content.stats.yearsExperience}
Years Experience
)}
{content.buttonText && (
)}
)
}),
// About/Bio section
about: createContentHook({
content: (content: SplitPortfolioData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.description}
{/* Experience Stats */}
{content.stats && (
Experience
{content.stats.yearsExperience} years
Projects
{content.stats.totalProjects}+ completed
Clients
{content.stats.happyClients} happy clients
{content.stats.awards && (
Awards
{content.stats.awards} awards
)}
)}
{/* Categories/Specializations */}
{content.categories && (
Specializations
{content.categories.map((category) => (
{category.lucideIcon && (
)}
{category.name}
))}
)}
)
}),
// Skills showcase
skills: createContentHook({
content: (content: SplitPortfolioData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.description}
{/* Skills List */}
{content.skills && (
Technical Skills
{content.skills.map((skill, index) => (
{skill}
))}
)}
{/* Categories with Icons */}
{content.categories && (
Areas of Expertise
{content.categories.map((category) => (
{category.lucideIcon && (
)}
{category.name}
{content.projects.filter(p => p.category === category.name).length} projects
))}
)}
{content.buttonText && (
)}
)
}),
// Client testimonial
testimonial: createContentHook({
content: (content: SplitPortfolioData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.description}
{/* Testimonial */}
{content.testimonial && (
"{content.testimonial.text}"
{content.testimonial.author}
{content.testimonial.role}
{content.testimonial.company && ` at ${content.testimonial.company}`}
)}
{/* Recent Projects */}
Recent Work
{content.projects.slice(0, 4).map((project) => (
{project.title}
))}
)
}),
// Work process
process: createContentHook({
content: (content: SplitPortfolioData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.description}
{/* Process Steps */}
My Process
{[
{ step: "01", title: "Discovery", desc: "Understanding your needs and goals", icon: MessageSquare },
{ step: "02", title: "Planning", desc: "Creating strategy and roadmap", icon: Calendar },
{ step: "03", title: "Design", desc: "Crafting the visual experience", icon: Palette },
{ step: "04", title: "Development", desc: "Building with clean code", icon: Code },
{ step: "05", title: "Launch", desc: "Testing and going live", icon: ExternalLink }
].map((process, index) => (
{process.step}
{process.title}
{process.desc}
))}
{/* Tools & Technologies */}
{content.skills && (
Tools & Technologies
{content.skills.slice(0, 8).map((skill, index) => (
{skill}
))}
)}
{content.buttonText && (
)}
)
})
};
export const SplitPortfolio = forwardRef(
({
content,
variant = "showcase",
leftMedia = false,
useContainer = true,
py = "lg",
gap = "xl",
className,
...props
}, ref) => {
// Create media section based on variant and content
const createMediaSection = () => {
// Use first project image or create gradient based on variant
const firstProject = content.projects[0];
if (variant === "showcase" && firstProject) {
return (
{/* Overlay */}
{/* Featured Project Info */}
Featured
{firstProject.year && (
{firstProject.year}
)}
{firstProject.title}
{firstProject.description}
{firstProject.tags.slice(0, 3).map((tag, index) => (
#{tag}
))}
);
}
// Default gradient based on variant
const gradientMap = {
showcase: "from-primary/5 to-secondary/10",
about: "from-primary/5 to-secondary/10",
skills: "from-primary/5 to-secondary/10",
testimonial: "from-primary/5 to-secondary/10",
process: "from-primary/5 to-secondary/10"
};
// Icon map for decorative elements
const iconMap = {
showcase: Briefcase,
about: User,
skills: Code,
testimonial: MessageSquare,
process: Calendar
};
return (
{/* Decorative Elements */}
{/* Central Icon */}
);
};
// Choose content hooks based on variant
const contentHooks = splitPortfolioContentHooks[variant] || splitPortfolioContentHooks.showcase;
return (
);
}
);
SplitPortfolio.displayName = "SplitPortfolio";
// Export template configurations
export const splitPortfolioTemplates = {
showcase: {
id: "splitPortfolioShowcase",
name: "Portfolio Showcase",
description: "Split layout showcasing featured work and stats",
component: SplitPortfolio,
defaultProps: { variant: "showcase" as const }
},
about: {
id: "splitPortfolioAbout",
name: "About & Bio",
description: "Personal introduction with experience and specializations",
component: SplitPortfolio,
defaultProps: { variant: "about" as const }
},
skills: {
id: "splitPortfolioSkills",
name: "Skills & Expertise",
description: "Technical skills and areas of expertise showcase",
component: SplitPortfolio,
defaultProps: { variant: "skills" as const }
},
testimonial: {
id: "splitPortfolioTestimonial",
name: "Client Testimonials",
description: "Client feedback with recent work samples",
component: SplitPortfolio,
defaultProps: { variant: "testimonial" as const }
},
process: {
id: "splitPortfolioProcess",
name: "Work Process",
description: "Step-by-step work methodology and tools",
component: SplitPortfolio,
defaultProps: { variant: "process" as const }
}
};