Create a modern, interactive React component that showcases two web designers working on a 3D website project. The component should demonstrate their expertise in Three.js and feature smooth Framer Motion animations.
Each designer card should include:
Implement these specific animations:
const designers = [
{
id: 1,
name: "Alex Chen",
title: "Senior 3D Developer",
avatar: "/placeholder-avatar-1.jpg",
experience: 8,
location: "San Francisco, CA",
specializations: ["Three.js", "WebGL", "GLSL Shaders", "React Three Fiber"],
skills: {
"Three.js": 95,
"WebGL": 88,
"Framer Motion": 92,
"React": 90,
"TypeScript": 85
},
stats: {
projects: 127,
clients: 89,
awards: 15
},
social: {
github: "alexchen",
linkedin: "alex-chen-3d",
dribbble: "alexchen3d"
},
portfolio: "https://alexchen3d.com"
},
{
id: 2,
name: "Sarah Martinez",
title: "Creative Technologist",
avatar: "/placeholder-avatar-2.jpg",
experience: 6,
location: "New York, NY",
specializations: ["Creative Coding", "Interactive Design", "Motion Graphics", "AR/VR"],
skills: {
"Creative Coding": 92,
"Three.js": 87,
"After Effects": 94,
"Blender": 79,
"JavaScript": 88
},
stats: {
projects: 98,
clients: 64,
awards: 22
},
social: {
github: "sarahmartinez",
linkedin: "sarah-martinez-creative",
dribbble: "sarahcreates"
},
portfolio: "https://sarahcreates.studio"
}
];
A polished, production-ready React component that serves as an impressive showcase of both designers' skills while demonstrating advanced web technologies. The component should feel premium, interactive, and showcase the cutting-edge nature of 3D web development.
I've created a modern, interactive component that showcases two web designers with Three.js integration and Framer Motion animations. The component features a split-screen layout on desktop that stacks on mobile, with glassmorphism design, 3D elements, and interactive features.
3D Elements:
Framer Motion Animations:
Interactive Features:
Accessibility Features:
The component showcases both designers with their expertise in Three.js and web development, featuring all the requested visual effects, animations, and responsive behavior.
I can see the image has a beautiful, muted color palette with light gray/lavender backgrounds, white silhouettes, dark gray text, and orange accents. Let me extract these colors and apply them to the designers showcase component.
I've successfully extracted the color palette from the provided image and applied it to the designers showcase component. The new color scheme includes:
The design now has a more professional, muted aesthetic that matches the sophisticated color palette from your reference image while maintaining all the interactive features and animations.