Skip to content

New update #4925

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ajay-dhangar merged 1 commit into from
Jan 10, 2026
Merged

New update #4925

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
463 changes: 463 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"write-heading-ids": "docusaurus write-heading-ids"
},
"dependencies": {
"@codesandbox/sandpack-react": "^2.20.0",
"@docusaurus/core": "^3.4.0",
"@docusaurus/plugin-content-blog": "^3.8.1",
"@docusaurus/plugin-content-pages": "^3.3.2",
Expand Down
172 changes: 172 additions & 0 deletions src/pages/about/team.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
import Layout from "@theme/Layout";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import {
Github,
Twitter,
Linkedin,
Globe,
Cpu,
ShieldCheck,
Globe2,
Zap,
Mail
} from 'lucide-react';

export default function Team() {
const { siteConfig } = useDocusaurusContext();

const coreTeam = [
{
name: "Ajay Dhangar",
role: "Founder & Lead Architect",
image: "https://github.com/ajay-dhangar.png",
bio: "Visionary behind CodeHarborHub. Passionate about open-source and democratizing tech education.",
skills: ["System Design", "React", "Cloud"],
social: { github: "#", linkedin: "#", twitter: "#" }
},
{
name: "Team Member",
role: "Core Contributor",
image: "https://github.com/github.png",
bio: "Specializes in high-performance backend systems and community engagement strategies.",
skills: ["Node.js", "Go", "DevOps"],
social: { github: "#", linkedin: "#", twitter: "#" }
},
// Add more team members here
];

return (
<Layout
title={`Our Team - ${siteConfig.title}`}
description="Meet the visionaries and engineers building the future of CodeHarborHub."
>
<main className="bg-[#f8fafc] dark:bg-[#020617] transition-colors duration-500">

{/* --- Advanced Hero Section --- */}
<section className="relative pt-24 pb-20 px-6 overflow-hidden">
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-blue-500/10 via-transparent to-transparent -z-10" />

<div className="max-w-7xl mx-auto text-center">
<h1 className="text-5xl md:text-7xl font-black text-slate-900 dark:text-white mb-6 tracking-tight">
The Minds Behind <br/>
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-500">CodeHarborHub</span>
</h1>
<p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto leading-relaxed">
We are a global collective of engineers, designers, and educators
united by a single mission: to build the world's most accessible
technical harbor.
</p>
</div>
</section>

{/* --- Leadership / Bento Grid --- */}
<section className="py-12 px-6 max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{coreTeam.map((member, i) => (
<div key={i} className="group relative">
<div className="relative overflow-hidden rounded-[2.5rem] bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-8 h-full transition-all duration-500 hover:shadow-2xl hover:shadow-blue-500/10 hover:-translate-y-2">

{/* Avatar & Status */}
<div className="relative w-32 h-32 mb-8">
<img
src={member.image}
alt={member.name}
className="rounded-3xl object-cover w-full h-full grayscale group-hover:grayscale-0 transition-all duration-700"
/>
<div className="absolute -bottom-2 -right-2 bg-green-500 w-6 h-6 rounded-full border-4 border-white dark:border-slate-900 shadow-lg" />
</div>

{/* Content */}
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-1 group-hover:text-blue-600 transition-colors">
{member.name}
</h3>
<p className="text-sm font-bold text-blue-500 uppercase tracking-widest mb-4">
{member.role}
</p>
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-6">
{member.bio}
</p>

{/* Skill Tags */}
<div className="flex flex-wrap gap-2 mb-8">
{member.skills.map((skill, si) => (
<span key={si} className="px-3 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-lg text-xs font-bold">
{skill}
</span>
))}
</div>

{/* Social Footer */}
<div className="flex items-center gap-4 pt-6 border-t border-slate-100 dark:border-slate-800">
<a href={member.social.github} className="text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors">
<Github size={20} />
</a>
<a href={member.social.linkedin} className="text-slate-400 hover:text-blue-600 transition-colors">
<Linkedin size={20} />
</a>
<a href={member.social.twitter} className="text-slate-400 hover:text-sky-400 transition-colors">
<Twitter size={20} />
</a>
</div>
</div>
</div>
))}
</div>
</section>

{/* --- Values / Organization DNA --- */}
<section className="py-24 px-6 bg-slate-900 text-white mt-20">
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div>
<h2 className="text-4xl font-bold mb-8">Our Core Principles</h2>
<div className="space-y-8">
{[
{ title: "Radical Transparency", desc: "Every decision, from code to strategy, happens in the open.", icon: <ShieldCheck className="text-blue-400" /> },
{ title: "Global Inclusion", desc: "Empowering developers from underserved regions with high-tier tech.", icon: <Globe2 className="text-purple-400" /> },
{ title: "Obsessive Quality", desc: "We don't ship 'good enough'. We ship industry-defining standards.", icon: <Zap className="text-yellow-400" /> }
].map((val, i) => (
<div key={i} className="flex gap-6">
<div className="mt-1">{val.icon}</div>
<div>
<h4 className="text-xl font-bold mb-2">{val.title}</h4>
<p className="text-slate-400 leading-relaxed">{val.desc}</p>
</div>
</div>
))}
</div>
</div>
<div className="relative">
<div className="aspect-square bg-gradient-to-br from-blue-500 to-purple-600 rounded-[3rem] rotate-3 overflow-hidden shadow-2xl">
<div className="absolute inset-0 bg-black/20 backdrop-blur-3xl" />
<div className="absolute inset-0 flex items-center justify-center p-12">
<Cpu size={120} className="text-white/20 animate-pulse" />
</div>
</div>
</div>
</div>
</div>
</section>

{/* --- Join Us CTA --- */}
<section className="py-24 px-6 text-center">
<div className="max-w-3xl mx-auto border border-slate-200 dark:border-slate-800 rounded-[3rem] p-12 bg-white dark:bg-slate-900/50 shadow-sm">
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-6">Want to make an impact?</h2>
<p className="text-slate-600 dark:text-slate-400 mb-10 text-lg">
We're always looking for passionate maintainers, content creators, and community leads.
</p>
<div className="flex flex-wrap justify-center gap-4">
<a href="mailto:contact@codeharborhub.com" className="px-8 py-3 bg-blue-600 text-white rounded-2xl font-bold hover:scale-105 transition-all shadow-lg flex items-center gap-2">
<Mail size={18} /> Contact Us
</a>
<a href="/contributing" className="px-8 py-3 bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white rounded-2xl font-bold hover:bg-slate-200 dark:hover:bg-slate-700 transition-all flex items-center gap-2">
<Globe size={18} /> Browse Open Roles
</a>
</div>
</div>
</section>

</main>
</Layout>
);
}
186 changes: 186 additions & 0 deletions src/pages/contributing/contributors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
import React, { useState, useEffect } from "react";
import Layout from "@theme/Layout";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import {
Github,
Users,
Star,
GitPullRequest,
Trophy,
ExternalLink,
Code2,
Heart
} from 'lucide-react';

interface Contributor {
id: number;
login: string;
avatar_url: string;
html_url: string;
contributions: number;
}

export default function Contributors() {
const { siteConfig } = useDocusaurusContext();
const [contributors, setContributors] = useState<Contributor[]>([]);
const [loading, setLoading] = useState(true);

// --- Fetch Real GitHub Data ---
useEffect(() => {
fetch("https://api.github.com/repos/codeharborhub/codeharborhub.github.io/contributors?per_page=100")
.then((res) => res.json())
.then((data) => {
setContributors(data);
setLoading(false);
})
.catch((err) => console.error("Error fetching contributors:", err));
}, []);

return (
<Layout
title={`Contributors | ${siteConfig.title}`}
description="The amazing individuals building the future of CodeHarborHub."
>
<main className="min-h-screen pb-20" style={{ backgroundColor: 'var(--ifm-bg-color)', color: 'var(--ifm-text-color)' }}>

{/* --- Hero: The Recognition Wall --- */}
<section className="relative py-24 px-6 overflow-hidden">
<div className="absolute inset-0 opacity-10 pointer-events-none">
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full blur-[120px] rounded-full" style={{ backgroundColor: 'var(--ifm-color-primary)' }} />
</div>

<div className="max-w-5xl mx-auto text-center relative z-10">
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-[0.3em] mb-8 border border-slate-200 dark:border-slate-800 backdrop-blur-md shadow-xl">
<Trophy size={14} style={{ color: 'var(--ifm-color-primary)' }} /> Community Powered
</div>
<h1 className="text-5xl md:text-8xl font-black mb-8 leading-[0.9] tracking-tighter uppercase italic">
Our <span style={{ color: 'var(--ifm-color-primary)' }}>Engineers</span>
</h1>
<p className="text-xl opacity-60 max-w-2xl mx-auto font-medium leading-relaxed">
Every pull request, documentation fix, and bug report helps CodeHarborHub grow.
We are a community-first organization. Meet the humans behind the code.
</p>
</div>
</section>

{/* --- Repository Stats --- */}
<section className="pb-20 px-6">
<div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4">
{[
{ label: "Contributors", value: contributors.length || "...", icon: <Users size={20}/> },
{ label: "Open Issues", value: "20+", icon: <Code2 size={20}/> },
{ label: "PRs Merged", value: "150+", icon: <GitPullRequest size={20}/> },
{ label: "Community", value: "Global", icon: <Star size={20} className="text-yellow-500"/> },
].map((stat, i) => (
<div key={i} className="p-6 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl text-center shadow-sm">
<div className="flex justify-center mb-3" style={{ color: 'var(--ifm-color-primary)' }}>{stat.icon}</div>
<div className="text-2xl font-black">{stat.value}</div>
<div className="text-[10px] uppercase font-bold opacity-40 tracking-widest">{stat.label}</div>
</div>
))}
</div>
</section>

{/* --- The Contributor Wall --- */}
<section className="py-12 px-6 max-w-7xl mx-auto">
{loading ? (
<div className="flex justify-center items-center h-40">
<div className="animate-spin rounded-full h-12 w-12 border-b-2" style={{ borderColor: 'var(--ifm-color-primary)' }} />
</div>
) : (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
{contributors.map((user) => (
<a
key={user.id}
href={user.html_url}
target="_blank"
rel="noopener noreferrer"
className="group relative block"
>
<div className="relative overflow-hidden rounded-3xl aspect-square bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 transition-all duration-500 group-hover:-translate-y-2 group-hover:shadow-2xl group-hover:shadow-blue-500/10">
<img
src={user.avatar_url}
alt={user.login}
className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 scale-110 group-hover:scale-100"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

{/* Badge for contributions */}
<div className="absolute top-3 right-3 px-2 py-0.5 rounded-lg bg-black/60 backdrop-blur-md text-[8px] font-black text-white border border-white/10 opacity-0 group-hover:opacity-100 transition-opacity">
{user.contributions} Commits
</div>

<div className="absolute bottom-4 left-4 right-4 text-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
<p className="text-white text-xs font-black truncate uppercase tracking-tighter">@{user.login}</p>
</div>
</div>
</a>
))}
</div>
)}
</section>

{/* --- How to Get Listed --- */}
<section className="py-32 px-6">
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
<div className="text-left">
<h2 className="text-4xl font-black mb-6 uppercase tracking-tighter leading-none">
Want your name <br/>
<span style={{ color: 'var(--ifm-color-primary)' }}>on this wall?</span>
</h2>
<p className="text-lg opacity-60 font-medium mb-10 leading-relaxed">
Whether you're fixing a typo, optimizing a React component, or designing
the UI, we want you on our team. Follow our contribution guidelines
and get started today.
</p>
<div className="flex flex-wrap gap-4">
<a
href="https://github.com/codeharborhub/codeharborhub.github.io/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22"
target="_blank"
className="px-8 py-4 rounded-2xl font-black uppercase text-xs tracking-widest text-white shadow-xl transition-all hover:scale-105"
style={{ backgroundColor: 'var(--ifm-color-primary)' }}
>
Find First Issue
</a>
<a
href="/contributing"
className="px-8 py-4 rounded-2xl font-black uppercase text-xs tracking-widest border border-slate-200 dark:border-slate-800 transition-all hover:bg-slate-100 dark:hover:bg-slate-800"
>
Read Guidelines
</a>
</div>
</div>

{/* Contribution Types Grid */}
<div className="grid grid-cols-2 gap-4">
{[
{ label: "Code", color: "bg-blue-500/10", text: "text-blue-500" },
{ label: "Docs", color: "bg-green-500/10", text: "text-green-500" },
{ label: "Design", color: "bg-purple-500/10", text: "text-purple-500" },
{ label: "Support", color: "bg-red-500/10", text: "text-red-500" },
].map((item, i) => (
<div key={i} className={`p-8 rounded-[2.5rem] ${item.color} flex flex-col items-center justify-center border border-white/5`}>
<div className={`font-black uppercase tracking-widest text-lg ${item.text}`}>{item.label}</div>
</div>
))}
</div>
</div>
</section>

{/* --- Support Section --- */}
<section className="py-20 px-6 text-center border-t border-slate-200 dark:border-slate-800">
<Heart className="mx-auto mb-6 animate-pulse text-red-500" size={40} />
<h3 className="text-2xl font-bold mb-4 italic uppercase tracking-widest">Support our Open Source Journey</h3>
<p className="opacity-50 mb-8 font-medium">Star the repo to show your support!</p>
<a
href="https://github.com/codeharborhub/codeharborhub.github.io"
className="inline-flex items-center gap-2 px-10 py-4 bg-slate-900 dark:bg-white text-white dark:text-slate-900 rounded-full font-black uppercase tracking-widest hover:scale-110 transition-all shadow-2xl"
>
<Github size={18}/> Star on GitHub <Star size={16} fill="currentColor" />
</a>
</section>

</main>
</Layout>
);
}
Loading
Loading