import Image from 'next/image'
import { EnvelopeIcon, LinkIcon } from '@heroicons/react/24/outline'
import Link from 'next/link'
// Emoji map for skills
const skillEmojis = {
'UX/UI': '🎨',
'Automations': '🤖',
'AI/ML': '🧠',
'Prompt Engineering': '💡',
'Elixir': '⚗️',
'Phoenix': '🦅',
'Distributed Systems': '🌐',
'Functional Programming': '🔢',
'Teaching': '👨🏫',
'Open Source': '🌍',
}
const contactEmojis = {
email: '✉️',
github: '🐙',
linkedin: '💼',
instagram: '📸',
}
const sectionEmojis = {
projects: '🚀',
ai: '🤖',
achievements: '🏅',
skills: '🛠️',
}
// Enhanced team member data
const teamMembers = [
{
name: "Kristiyan Tsvetanov",
role: "Full-Stack Developer & Co-Founder",
tagline: "Building the future, one line of code at a time",
image: "/developers/kris.png",
education: {
degree: "Computer Science & Management Science",
university: "The University of Edinburgh",
year: "2015-2019"
},
location: "Edinburgh, Scotland",
description: "Passionate about creating scalable solutions that make a real impact. Specializes in full-stack development with a focus on modern web technologies and AI integration.",
skills: ["UX/UI", "Automations", "AI/ML", "Prompt Engineering"],
experience: "4+ years building everything from startup MVPs to enterprise applications. Led development of multiple AI-powered projects that serve thousands of users.",
projects: [
{
name: "ethereum/ethereum-org-website",
description: "Ethereum.org is a primary online resource for the Ethereum community.",
language: "Markdown",
stars: "5.4k",
forks: "5.1k",
url: "https://github.com/ethereum/ethereum-org-website",
featured: true
},
{
name: "mui/material-ui",
description: "Material UI: Comprehensive React component library implementing Google's Material Design.",
language: "TypeScript",
stars: "95.8k",
forks: "32.6k",
url: "https://github.com/mui/material-ui",
featured: true
},
{
name: "daylogs-front",
description: "Project management tool with modern Vue.js frontend",
language: "Vue",
url: "https://github.com/kristiyanTs/daylogs-front"
},
{
name: "daylogs-back",
description: "Robust Rails API backend for project management",
language: "Ruby",
url: "https://github.com/kristiyanTs/daylogs-back"
}
],
aiProjects: [
{ name: "bookwiz.io", description: "AI-powered book recommendation engine" },
{ name: "yoursitehurts.com", description: "Intelligent website audit platform" },
{ name: "vkashti.bar", description: "Smart property management system" }
],
achievements: ["📈 Scaled apps to 10k+ users", "🏆 Contributed to top OSS projects", "🎯 Built 3 profitable AI products"],
contact: {
email: "kristiyan.c@gmail.com",
github: "https://github.com/kristiyanTs/",
linkedin: "https://www.linkedin.com/in/kristiyan-ts/",
instagram: "https://www.instagram.com/kr1stiyan/"
},
gradient: "from-blue-400 via-purple-500 to-pink-500"
},
{
name: "Nikola Jichev",
role: "Elixir Expert & Lecturer",
tagline: "Crafting distributed systems that scale",
image: "/developers/nikola.png",
education: {
degree: "Computer Science",
university: "FMI Sofia, Sofia University",
year: "2015-2019"
},
location: "Sofia, Bulgaria",
description: "Academic researcher turned industry expert. Teaches distributed systems while building production-grade Elixir applications that handle millions of requests.",
skills: ["Elixir", "Phoenix", "Distributed Systems", "Functional Programming", "Teaching", "Open Source"],
experience: "6+ years in distributed systems architecture. University lecturer teaching next-gen developers while contributing to critical open-source infrastructure.",
projects: [
{
name: "elixir-lang/elixir",
description: "Elixir is a dynamic, functional language for building scalable and maintainable applications",
language: "Elixir",
stars: "25.3k",
forks: "3.4k",
url: "https://github.com/elixir-lang/elixir",
featured: true
},
{
name: "vim-test/vim-test",
description: "Run your tests at the speed of thought",
language: "Vim Script",
stars: "3.1k",
forks: "401",
url: "https://github.com/vim-test/vim-test",
featured: true
},
{
name: "whatyouhide/stream_data",
description: "Data generation and property-based testing for Elixir 🔮",
language: "Elixir",
stars: "900",
forks: "70",
url: "https://github.com/whatyouhide/stream_data"
},
{
name: "elixir-tools/next-ls",
description: "The language server for Elixir that just works. Ready for early adopters!",
language: "Elixir",
stars: "739",
forks: "39",
url: "https://github.com/elixir-tools/next-ls"
}
],
achievements: ["🎓 Teaching 200+ students yearly", "⚡ Core Elixir ecosystem contributor", "🔧 Built fault-tolerant systems"],
contact: {
email: "njichev@gmail.com",
github: "https://github.com/njichev",
linkedin: "https://www.linkedin.com/in/nikola-jichev-509135350/"
},
gradient: "from-green-400 via-teal-500 to-blue-500"
},
]
// Helper to get emoji for a skill
function getSkillEmoji(skill: string) {
return (skillEmojis as Record<string, string>)[skill] || '🔹';
}
export default function DevelopersPage() {
return (
<div className="min-h-screen bg-gradient-to-br from-slate-100 via-slate-200 to-slate-100 py-12 px-2 sm:px-4">
<div className="max-w-5xl mx-auto">
<h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight text-center mb-12 bg-gradient-to-r from-teal-500 via-purple-500 to-pink-500 bg-clip-text text-transparent">
Meet the Bookwiz Developers
</h1>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{teamMembers.map((member) => (
<div
key={member.name}
className="relative bg-white rounded-2xl p-6 sm:p-8 shadow-xl hover:shadow-2xl transition-all duration-300 flex flex-col items-center group"
style={{ minHeight: 480 }}
>
<div className="relative w-24 h-24 sm:w-28 sm:h-28 rounded-full overflow-hidden shadow-lg mb-4 border-4 border-white">
<Image src={member.image} alt={member.name} fill className="object-cover" sizes="112px" />
</div>
<h2 className="text-xl sm:text-2xl font-bold text-slate-900 mb-1 text-center flex items-center gap-2">
{member.name} {member.role.includes('Co-Founder') && <span className="text-lg">🦄</span>}
</h2>
<div className="text-sm text-slate-500 font-medium mb-1 text-center flex items-center gap-2">
{member.role} {member.role.includes('Lecturer') && <span>🎓</span>}
</div>
<div className="text-xs text-slate-400 italic mb-2 text-center">{member.tagline}</div>
<div className="text-xs text-slate-400 mb-2 text-center flex items-center gap-1 justify-center">📍 {member.location}</div>
<div className="mb-3 text-slate-700 text-sm text-center">{member.description}</div>
<div className="mb-2 flex flex-wrap gap-2 justify-center">
{member.skills.map((skill) => (
<span key={skill} className="px-2 py-1 bg-slate-100 rounded-lg text-xs font-semibold text-teal-600 border border-teal-100 flex items-center gap-1">
<span>{getSkillEmoji(skill)}</span> {skill}
</span>
))}
</div>
<div className="mb-3 text-xs text-slate-400 text-center">{member.experience}</div>
<div className="mb-4 w-full">
<div className="font-semibold text-slate-700 mb-1 text-sm flex items-center gap-1">🚀 Featured Projects</div>
<ul className="space-y-1">
{member.projects.filter(p => p.featured).map((project) => (
<li key={project.name}>
<a href={project.url} target="_blank" rel="noopener noreferrer" className="flex flex-wrap items-center gap-2 text-xs text-blue-600 hover:underline">
<LinkIcon className="w-4 h-4" />
<span className="font-semibold">{project.name}</span>
<span className="text-xs text-slate-400">({project.language})</span>
{project.stars && <span className="ml-2 text-xs text-yellow-500">★ {project.stars}</span>}
{project.forks && <span className="ml-2 text-xs text-slate-400">⎇ {project.forks}</span>}
</a>
<div className="ml-8 text-xs text-slate-400">{project.description}</div>
</li>
))}
</ul>
</div>
{member.aiProjects && (
<div className="mb-4 w-full">
<div className="font-semibold text-slate-700 mb-1 text-sm flex items-center gap-1">🤖 AI Projects</div>
<ul className="flex flex-wrap gap-2">
{member.aiProjects.map((ai) => (
<li key={ai.name} className="bg-slate-100 rounded px-2 py-1 text-xs text-purple-600 border border-purple-100 flex items-center gap-1">🤖 {ai.name}: <span className="text-slate-400">{ai.description}</span></li>
))}
</ul>
</div>
)}
<div className="mb-4 w-full">
<div className="font-semibold text-slate-700 mb-1 text-sm flex items-center gap-1">🏅 Achievements</div>
<ul className="flex flex-wrap gap-2">
{member.achievements.map((ach) => (
<li key={ach} className="bg-slate-200 rounded px-2 py-1 text-xs text-amber-600 border border-amber-100 flex items-center gap-1">🏅 {ach}</li>
))}
</ul>
</div>
<div className="flex flex-wrap gap-4 mt-auto pt-4 w-full justify-center border-t border-slate-100">
{member.contact.email && (
<a href={`mailto:${member.contact.email}`} className="text-slate-500 hover:text-teal-600 flex items-center gap-1 text-xs">
<span>{contactEmojis.email}</span> Email
</a>
)}
{member.contact.github && (
<a href={member.contact.github} target="_blank" rel="noopener noreferrer" className="text-slate-500 hover:text-teal-600 flex items-center gap-1 text-xs">
<span>{contactEmojis.github}</span> GitHub
</a>
)}
{member.contact.linkedin && (
<a href={member.contact.linkedin} target="_blank" rel="noopener noreferrer" className="text-slate-500 hover:text-teal-600 flex items-center gap-1 text-xs">
<span>{contactEmojis.linkedin}</span> LinkedIn
</a>
)}
{member.contact.instagram && (
<a href={member.contact.instagram} target="_blank" rel="noopener noreferrer" className="text-slate-500 hover:text-teal-600 flex items-center gap-1 text-xs">
<span>{contactEmojis.instagram}</span> Instagram
</a>
)}
</div>
</div>
))}
</div>
</div>
</div>
)
}