Skip to content

Commit 18447a2

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #4925 from codeharborhub/dev-5-1
New update
2 parents eef365b + 7214a31 commit 18447a2

File tree

17 files changed

+2068
-673
lines changed

17 files changed

+2068
-673
lines changed

‎package-lock.json‎

Lines changed: 463 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"write-heading-ids": "docusaurus write-heading-ids"
1717
},
1818
"dependencies": {
19+
"@codesandbox/sandpack-react": "^2.20.0",
1920
"@docusaurus/core": "^3.4.0",
2021
"@docusaurus/plugin-content-blog": "^3.8.1",
2122
"@docusaurus/plugin-content-pages": "^3.3.2",

‎src/pages/about/team.tsx‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
import Layout from "@theme/Layout";
2+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
3+
import {
4+
Github,
5+
Twitter,
6+
Linkedin,
7+
Globe,
8+
Cpu,
9+
ShieldCheck,
10+
Globe2,
11+
Zap,
12+
Mail
13+
} from 'lucide-react';
14+
15+
export default function Team() {
16+
const { siteConfig } = useDocusaurusContext();
17+
18+
const coreTeam = [
19+
{
20+
name: "Ajay Dhangar",
21+
role: "Founder & Lead Architect",
22+
image: "https://github.com/ajay-dhangar.png",
23+
bio: "Visionary behind CodeHarborHub. Passionate about open-source and democratizing tech education.",
24+
skills: ["System Design", "React", "Cloud"],
25+
social: { github: "#", linkedin: "#", twitter: "#" }
26+
},
27+
{
28+
name: "Team Member",
29+
role: "Core Contributor",
30+
image: "https://github.com/github.png",
31+
bio: "Specializes in high-performance backend systems and community engagement strategies.",
32+
skills: ["Node.js", "Go", "DevOps"],
33+
social: { github: "#", linkedin: "#", twitter: "#" }
34+
},
35+
// Add more team members here
36+
];
37+
38+
return (
39+
<Layout
40+
title={`Our Team - ${siteConfig.title}`}
41+
description="Meet the visionaries and engineers building the future of CodeHarborHub."
42+
>
43+
<main className="bg-[#f8fafc] dark:bg-[#020617] transition-colors duration-500">
44+
45+
{/* --- Advanced Hero Section --- */}
46+
<section className="relative pt-24 pb-20 px-6 overflow-hidden">
47+
<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" />
48+
49+
<div className="max-w-7xl mx-auto text-center">
50+
<h1 className="text-5xl md:text-7xl font-black text-slate-900 dark:text-white mb-6 tracking-tight">
51+
The Minds Behind <br/>
52+
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-cyan-500">CodeHarborHub</span>
53+
</h1>
54+
<p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto leading-relaxed">
55+
We are a global collective of engineers, designers, and educators
56+
united by a single mission: to build the world's most accessible
57+
technical harbor.
58+
</p>
59+
</div>
60+
</section>
61+
62+
{/* --- Leadership / Bento Grid --- */}
63+
<section className="py-12 px-6 max-w-7xl mx-auto">
64+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
65+
{coreTeam.map((member, i) => (
66+
<div key={i} className="group relative">
67+
<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">
68+
69+
{/* Avatar & Status */}
70+
<div className="relative w-32 h-32 mb-8">
71+
<img
72+
src={member.image}
73+
alt={member.name}
74+
className="rounded-3xl object-cover w-full h-full grayscale group-hover:grayscale-0 transition-all duration-700"
75+
/>
76+
<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" />
77+
</div>
78+
79+
{/* Content */}
80+
<h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-1 group-hover:text-blue-600 transition-colors">
81+
{member.name}
82+
</h3>
83+
<p className="text-sm font-bold text-blue-500 uppercase tracking-widest mb-4">
84+
{member.role}
85+
</p>
86+
<p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed mb-6">
87+
{member.bio}
88+
</p>
89+
90+
{/* Skill Tags */}
91+
<div className="flex flex-wrap gap-2 mb-8">
92+
{member.skills.map((skill, si) => (
93+
<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">
94+
{skill}
95+
</span>
96+
))}
97+
</div>
98+
99+
{/* Social Footer */}
100+
<div className="flex items-center gap-4 pt-6 border-t border-slate-100 dark:border-slate-800">
101+
<a href={member.social.github} className="text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors">
102+
<Github size={20} />
103+
</a>
104+
<a href={member.social.linkedin} className="text-slate-400 hover:text-blue-600 transition-colors">
105+
<Linkedin size={20} />
106+
</a>
107+
<a href={member.social.twitter} className="text-slate-400 hover:text-sky-400 transition-colors">
108+
<Twitter size={20} />
109+
</a>
110+
</div>
111+
</div>
112+
</div>
113+
))}
114+
</div>
115+
</section>
116+
117+
{/* --- Values / Organization DNA --- */}
118+
<section className="py-24 px-6 bg-slate-900 text-white mt-20">
119+
<div className="max-w-7xl mx-auto">
120+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
121+
<div>
122+
<h2 className="text-4xl font-bold mb-8">Our Core Principles</h2>
123+
<div className="space-y-8">
124+
{[
125+
{ title: "Radical Transparency", desc: "Every decision, from code to strategy, happens in the open.", icon: <ShieldCheck className="text-blue-400" /> },
126+
{ title: "Global Inclusion", desc: "Empowering developers from underserved regions with high-tier tech.", icon: <Globe2 className="text-purple-400" /> },
127+
{ title: "Obsessive Quality", desc: "We don't ship 'good enough'. We ship industry-defining standards.", icon: <Zap className="text-yellow-400" /> }
128+
].map((val, i) => (
129+
<div key={i} className="flex gap-6">
130+
<div className="mt-1">{val.icon}</div>
131+
<div>
132+
<h4 className="text-xl font-bold mb-2">{val.title}</h4>
133+
<p className="text-slate-400 leading-relaxed">{val.desc}</p>
134+
</div>
135+
</div>
136+
))}
137+
</div>
138+
</div>
139+
<div className="relative">
140+
<div className="aspect-square bg-gradient-to-br from-blue-500 to-purple-600 rounded-[3rem] rotate-3 overflow-hidden shadow-2xl">
141+
<div className="absolute inset-0 bg-black/20 backdrop-blur-3xl" />
142+
<div className="absolute inset-0 flex items-center justify-center p-12">
143+
<Cpu size={120} className="text-white/20 animate-pulse" />
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
</div>
149+
</section>
150+
151+
{/* --- Join Us CTA --- */}
152+
<section className="py-24 px-6 text-center">
153+
<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">
154+
<h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-6">Want to make an impact?</h2>
155+
<p className="text-slate-600 dark:text-slate-400 mb-10 text-lg">
156+
We're always looking for passionate maintainers, content creators, and community leads.
157+
</p>
158+
<div className="flex flex-wrap justify-center gap-4">
159+
<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">
160+
<Mail size={18} /> Contact Us
161+
</a>
162+
<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">
163+
<Globe size={18} /> Browse Open Roles
164+
</a>
165+
</div>
166+
</div>
167+
</section>
168+
169+
</main>
170+
</Layout>
171+
);
172+
}

‎src/pages/contributing/contributors.tsx‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
import React, { useState, useEffect } from "react";
2+
import Layout from "@theme/Layout";
3+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
4+
import {
5+
Github,
6+
Users,
7+
Star,
8+
GitPullRequest,
9+
Trophy,
10+
ExternalLink,
11+
Code2,
12+
Heart
13+
} from 'lucide-react';
14+
15+
interface Contributor {
16+
id: number;
17+
login: string;
18+
avatar_url: string;
19+
html_url: string;
20+
contributions: number;
21+
}
22+
23+
export default function Contributors() {
24+
const { siteConfig } = useDocusaurusContext();
25+
const [contributors, setContributors] = useState<Contributor[]>([]);
26+
const [loading, setLoading] = useState(true);
27+
28+
// --- Fetch Real GitHub Data ---
29+
useEffect(() => {
30+
fetch("https://api.github.com/repos/codeharborhub/codeharborhub.github.io/contributors?per_page=100")
31+
.then((res) => res.json())
32+
.then((data) => {
33+
setContributors(data);
34+
setLoading(false);
35+
})
36+
.catch((err) => console.error("Error fetching contributors:", err));
37+
}, []);
38+
39+
return (
40+
<Layout
41+
title={`Contributors | ${siteConfig.title}`}
42+
description="The amazing individuals building the future of CodeHarborHub."
43+
>
44+
<main className="min-h-screen pb-20" style={{ backgroundColor: 'var(--ifm-bg-color)', color: 'var(--ifm-text-color)' }}>
45+
46+
{/* --- Hero: The Recognition Wall --- */}
47+
<section className="relative py-24 px-6 overflow-hidden">
48+
<div className="absolute inset-0 opacity-10 pointer-events-none">
49+
<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)' }} />
50+
</div>
51+
52+
<div className="max-w-5xl mx-auto text-center relative z-10">
53+
<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">
54+
<Trophy size={14} style={{ color: 'var(--ifm-color-primary)' }} /> Community Powered
55+
</div>
56+
<h1 className="text-5xl md:text-8xl font-black mb-8 leading-[0.9] tracking-tighter uppercase italic">
57+
Our <span style={{ color: 'var(--ifm-color-primary)' }}>Engineers</span>
58+
</h1>
59+
<p className="text-xl opacity-60 max-w-2xl mx-auto font-medium leading-relaxed">
60+
Every pull request, documentation fix, and bug report helps CodeHarborHub grow.
61+
We are a community-first organization. Meet the humans behind the code.
62+
</p>
63+
</div>
64+
</section>
65+
66+
{/* --- Repository Stats --- */}
67+
<section className="pb-20 px-6">
68+
<div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4">
69+
{[
70+
{ label: "Contributors", value: contributors.length || "...", icon: <Users size={20}/> },
71+
{ label: "Open Issues", value: "20+", icon: <Code2 size={20}/> },
72+
{ label: "PRs Merged", value: "150+", icon: <GitPullRequest size={20}/> },
73+
{ label: "Community", value: "Global", icon: <Star size={20} className="text-yellow-500"/> },
74+
].map((stat, i) => (
75+
<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">
76+
<div className="flex justify-center mb-3" style={{ color: 'var(--ifm-color-primary)' }}>{stat.icon}</div>
77+
<div className="text-2xl font-black">{stat.value}</div>
78+
<div className="text-[10px] uppercase font-bold opacity-40 tracking-widest">{stat.label}</div>
79+
</div>
80+
))}
81+
</div>
82+
</section>
83+
84+
{/* --- The Contributor Wall --- */}
85+
<section className="py-12 px-6 max-w-7xl mx-auto">
86+
{loading ? (
87+
<div className="flex justify-center items-center h-40">
88+
<div className="animate-spin rounded-full h-12 w-12 border-b-2" style={{ borderColor: 'var(--ifm-color-primary)' }} />
89+
</div>
90+
) : (
91+
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
92+
{contributors.map((user) => (
93+
<a
94+
key={user.id}
95+
href={user.html_url}
96+
target="_blank"
97+
rel="noopener noreferrer"
98+
className="group relative block"
99+
>
100+
<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">
101+
<img
102+
src={user.avatar_url}
103+
alt={user.login}
104+
className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 scale-110 group-hover:scale-100"
105+
/>
106+
<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" />
107+
108+
{/* Badge for contributions */}
109+
<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">
110+
{user.contributions} Commits
111+
</div>
112+
113+
<div className="absolute bottom-4 left-4 right-4 text-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
114+
<p className="text-white text-xs font-black truncate uppercase tracking-tighter">@{user.login}</p>
115+
</div>
116+
</div>
117+
</a>
118+
))}
119+
</div>
120+
)}
121+
</section>
122+
123+
{/* --- How to Get Listed --- */}
124+
<section className="py-32 px-6">
125+
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
126+
<div className="text-left">
127+
<h2 className="text-4xl font-black mb-6 uppercase tracking-tighter leading-none">
128+
Want your name <br/>
129+
<span style={{ color: 'var(--ifm-color-primary)' }}>on this wall?</span>
130+
</h2>
131+
<p className="text-lg opacity-60 font-medium mb-10 leading-relaxed">
132+
Whether you're fixing a typo, optimizing a React component, or designing
133+
the UI, we want you on our team. Follow our contribution guidelines
134+
and get started today.
135+
</p>
136+
<div className="flex flex-wrap gap-4">
137+
<a
138+
href="https://github.com/codeharborhub/codeharborhub.github.io/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22"
139+
target="_blank"
140+
className="px-8 py-4 rounded-2xl font-black uppercase text-xs tracking-widest text-white shadow-xl transition-all hover:scale-105"
141+
style={{ backgroundColor: 'var(--ifm-color-primary)' }}
142+
>
143+
Find First Issue
144+
</a>
145+
<a
146+
href="/contributing"
147+
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"
148+
>
149+
Read Guidelines
150+
</a>
151+
</div>
152+
</div>
153+
154+
{/* Contribution Types Grid */}
155+
<div className="grid grid-cols-2 gap-4">
156+
{[
157+
{ label: "Code", color: "bg-blue-500/10", text: "text-blue-500" },
158+
{ label: "Docs", color: "bg-green-500/10", text: "text-green-500" },
159+
{ label: "Design", color: "bg-purple-500/10", text: "text-purple-500" },
160+
{ label: "Support", color: "bg-red-500/10", text: "text-red-500" },
161+
].map((item, i) => (
162+
<div key={i} className={`p-8 rounded-[2.5rem] ${item.color} flex flex-col items-center justify-center border border-white/5`}>
163+
<div className={`font-black uppercase tracking-widest text-lg ${item.text}`}>{item.label}</div>
164+
</div>
165+
))}
166+
</div>
167+
</div>
168+
</section>
169+
170+
{/* --- Support Section --- */}
171+
<section className="py-20 px-6 text-center border-t border-slate-200 dark:border-slate-800">
172+
<Heart className="mx-auto mb-6 animate-pulse text-red-500" size={40} />
173+
<h3 className="text-2xl font-bold mb-4 italic uppercase tracking-widest">Support our Open Source Journey</h3>
174+
<p className="opacity-50 mb-8 font-medium">Star the repo to show your support!</p>
175+
<a
176+
href="https://github.com/codeharborhub/codeharborhub.github.io"
177+
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"
178+
>
179+
<Github size={18}/> Star on GitHub <Star size={16} fill="currentColor" />
180+
</a>
181+
</section>
182+
183+
</main>
184+
</Layout>
185+
);
186+
}

0 commit comments

Comments
 (0)