From 3f81a9095fb9414aa0d0667dbd894a55893be394 Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Sat, 24 Jan 2026 10:45:34 +0530 Subject: [PATCH 1/2] team page added --- src/components/WhyChooseCodeHarbor.tsx | 113 +++++++++++++ src/data/team.ts | 68 ++++++++ src/pages/gsoc-2026-ideas.mdx | 62 +++++++ src/pages/index.tsx | 9 +- src/pages/our-team/details.tsx | 226 +++++++++++++++++++++++++ src/pages/our-team/index.tsx | 150 ++++++++++++++++ src/pages/proposal-template.mdx | 56 ++++++ 7 files changed, 683 insertions(+), 1 deletion(-) create mode 100644 src/components/WhyChooseCodeHarbor.tsx create mode 100644 src/data/team.ts create mode 100644 src/pages/gsoc-2026-ideas.mdx create mode 100644 src/pages/our-team/details.tsx create mode 100644 src/pages/our-team/index.tsx create mode 100644 src/pages/proposal-template.mdx diff --git a/src/components/WhyChooseCodeHarbor.tsx b/src/components/WhyChooseCodeHarbor.tsx new file mode 100644 index 000000000..ad61d9391 --- /dev/null +++ b/src/components/WhyChooseCodeHarbor.tsx @@ -0,0 +1,113 @@ +import Link from "@docusaurus/Link"; +import { + BookOpen, + Code2, + Users2, + Zap, + Trophy, + Github +} from 'lucide-react'; + +const reasons = [ + { + title: "Free Education", + desc: "Comprehensive tech curriculum taught by industry masters, 100% free.", + icon: , + }, + { + title: "Open Source", + desc: "Contribute to real-world projects and build your GitHub profile.", + icon: , + }, + { + title: "Live Editor", + desc: "Practice coding in real-time with our integrated browser-based IDE.", + icon: , + }, + { + title: "Active Community", + desc: "Join over 100+ contributors and thousands of learners worldwide.", + icon: , + }, + { + title: "DSA Mastery", + desc: "Curated problems and solutions to help you crack technical interviews.", + icon: , + }, + { + title: "Expert Guidance", + desc: "Roadmaps and tutorials designed for both beginners and pros.", + icon: , + }, +]; + +const WhyChooseCodeHarbor = () => { + return ( +
+ {/* Subtle Background Pattern */} +
+ +
+ +
+ + {/* Header */} +
+ + Why CodeHarborHub? + +

+ Empowering Your Tech Journey +

+

+ We shatter limitations by offering an exclusive open-source platform for mastering + in-demand skills and launching your dream career. +

+
+ + {/* Feature Grid */} +
+ {reasons.map((item, index) => ( +
+ {/* Animated Glow Effect */} +
+ + {/* Icon Container */} +
+ {item.icon} +
+ + {/* Content */} +

+ {item.title} +

+

+ {item.desc} +

+ + {/* Bottom Accent Line */} +
+
+ ))} +
+ + {/* Call to Action */} +
+ + + Join Our Open Source Mission + +
+ +
+
+ ); +}; + +export default WhyChooseCodeHarbor; \ No newline at end of file diff --git a/src/data/team.ts b/src/data/team.ts new file mode 100644 index 000000000..372f2d9e6 --- /dev/null +++ b/src/data/team.ts @@ -0,0 +1,68 @@ +export interface Socials { + github?: string; + twitter?: string; + linkedin?: string; +} + +export interface Member { + slug: string; + name: string; + role: string; + image: string; + bio: string; + email: string; + location: string; + skills: string[]; + socials: Socials; +} + +export const teamMembers: Member[] = [ + { + slug: "ajay-dhangar", + name: "Ajay Dhangar", + role: "Founder & CEO", + image: "https://github.com/ajay-dhangar.png", + bio: "Visionary developer and open-source advocate. Ajay founded CodeHarborHub to democratize tech education and build a collaborative ecosystem for developers worldwide.", + email: "ajaydhangar49@gmail.com", + location: "Mandsaur, MP, India", + skills: ["Full Stack Dev", "System Design", "Open Source", "Leadership"], + socials: { + twitter: "https://x.com/CodesWithAjay", + github: "https://github.com/ajay-dhangar", + linkedin: "https://www.linkedin.com/in/ajay-dhangar/", + }, + }, + { + slug: "sarah-jenkins", + name: "Sarah Jenkins", + role: "Full Stack Developer", + image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=500", + bio: "Expert in building scalable MERN stack applications. Sarah leads the frontend architecture and ensures a seamless user experience across the platform.", + email: "sarah@example.com", + location: "London, UK", + skills: ["React", "Node.js", "MongoDB", "Tailwind CSS"], + socials: { twitter: "#", github: "#", linkedin: "#" }, + }, + { + slug: "jhon-smith", + name: "Jhon Smith", + role: "Web Designer", + image: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&q=80&w=500", + bio: "Passionate about clean UI and accessible design. Jhon crafts the visual identity of CodeHarborHub, making complex documentation easy to navigate.", + email: "jhon@example.com", + location: "New York, USA", + skills: ["UI/UX", "Figma", "Accessibility", "CSS3"], + socials: { twitter: "#", github: "#", linkedin: "#" }, + }, + { + slug: "jake-nackos", + name: "Product Manager", + role: "Product Manager", + image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=500", + bio: "Strategist focused on community growth. Jake bridges the gap between user feedback and technical implementation to keep our roadmap on track.", + email: "jake@example.com", + location: "Berlin, Germany", + skills: ["Product Strategy", "Agile", "Community Building"], + socials: { twitter: "#", github: "#", linkedin: "#" }, + }, +]; \ No newline at end of file diff --git a/src/pages/gsoc-2026-ideas.mdx b/src/pages/gsoc-2026-ideas.mdx new file mode 100644 index 000000000..b4d1d0b67 --- /dev/null +++ b/src/pages/gsoc-2026-ideas.mdx @@ -0,0 +1,62 @@ +--- +title: GSoC 2026 Project Ideas +description: "Join CodeHarborHub for Google Summer of Code 2026 and help us bridge the gap between education and innovation." +--- + +Welcome to the **CodeHarborHub** project ideas page. We are a global community dedicated to transforming ideas into reality through open-source collaboration. + +--- + +## Contributor Checklist +Before reaching out to mentors, please complete the following: +- [ ] Join our [Discord/Slack Community](YOUR_LINK_HERE). +- [ ] Star our [GitHub Repositories](https://github.com/codeharborhub). +- [ ] Set up the local development environment for the project you are interested in. +- [ ] Look for issues labeled `good-first-issue` to make your first contribution. + +--- + +## Project Ideas for 2026 + +### 1. AI-Powered Learning Path Generator +**Difficulty:** Medium (175 hours) +**Tech Stack:** Python, LangChain, OpenAI/Gemini API, React + +**Description:** Develop an intelligent system that analyzes a user's career goals and current skill level to generate a personalized roadmap using CodeHarborHub resources. +- **Goal:** Implement a RAG system to index our educational content. +- **Expected Outcome:** A functional dashboard where users receive a step-by-step learning guide. +- **Mentors:** [@ajay-dhangar] + +--- + +### 2. Interactive "Live Code" Playground +**Difficulty:** Large (350 hours) +**Tech Stack:** React, Monaco Editor, Web Workers + +**Description:** Build an integrated, browser-based code editor for our platform so students can practice coding without leaving the lesson page. +- **Goal:** Create a secure sandbox to execute HTML/CSS/JS with real-time preview. +- **Expected Outcome:** A reusable component for our educational modules. +- **Mentors:** [@ajay-dhangar] + +--- + +### 3. Gamified Contribution Dashboard +**Difficulty:** Medium (175 hours) +**Tech Stack:** Node.js, GitHub REST API, MongoDB + +**Description:** Create a platform that tracks community contributions and awards digital badges and XP to encourage long-term engagement. +- **Goal:** Automate badge distribution based on merged Pull Requests. +- **Expected Outcome:** A public leaderboard and user profile pages. +- **Mentors:** [@ajay-dhangar] + +--- + +## Proposal Guidelines +Your proposal is the most important part of your application. Please follow our [Proposal Template](./proposal-template) and include: +1. **Detailed Timeline:** A week-by-step breakdown. +2. **Technical Implementation:** How do you plan to solve the problem? +3. **About You:** Your experience and why you chose CodeHarborHub. + +--- + +> **Note:** We value quality over quantity. A single well-researched proposal is better than multiple generic ones. \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d592c4aa0..c158e4915 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -13,6 +13,7 @@ import { CommunityStatsProvider } from "../context/CommunityStats"; import Faq from "./Faq"; import Organizations from "../components/HomePage/organizations"; import TweetsSection from "../components/HomePage/TweetsSection"; +import WhyChooseCodeHarbor from "../components/WhyChooseCodeHarbor"; export default function Home() { const { siteConfig } = useDocusaurusContext(); @@ -42,6 +43,12 @@ export default function Home() {
+
+ +
+ +
+
@@ -80,4 +87,4 @@ export default function Home() { ); -} +} \ No newline at end of file diff --git a/src/pages/our-team/details.tsx b/src/pages/our-team/details.tsx new file mode 100644 index 000000000..09e0f82fc --- /dev/null +++ b/src/pages/our-team/details.tsx @@ -0,0 +1,226 @@ +import { useLocation } from "@docusaurus/router"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import Layout from "@theme/Layout"; +import Link from "@docusaurus/Link"; +import { teamMembers } from "@site/src/data/team"; +import { + Github, + Twitter, + Linkedin, + Mail, + MapPin, + Terminal, + CheckCircle2, + ChevronRight, Home +} from "lucide-react"; + +const Header = ({ memberName }) => { + return ( +
+ + {/* 1. Animated Background Mesh Pattern */} +
+
+ {/* 2. Gradient Glows */} +
+
+
+ +
+ {/* Badge Style Subtitle */} + + Member Profile + + + {/* Dynamic Title with Text Gradient */} +

+ Member + Information + +

+ + {/* 3. Breadcrumbs */} + +
+ + {/* 4. Bottom Decorative Divider */} +
+ + {/* Internal CSS for the text gradient animation */} + +
+ ); +}; + +export default function MemberDetailsPage() { + const { siteConfig } = useDocusaurusContext(); + const location = useLocation(); + + // Get slug from URL: /our-team/details?member=ajay-dhangar + const params = new URLSearchParams(location.search); + const memberSlug = params.get("member"); + + const member = teamMembers.find((m) => m.slug === memberSlug); + + if (!member) { + return ( + +
+

Member not found

+ + Back to Team + +
+ + ); + } + + return ( + +
+ {/* Header Section */} + +
+ +
+
+ {/* Left Column: Image with Skewed Label (Branding from your image) */} +
+
+ {member.name} + + {/* Brand Skew Label */} +
+
+

+ {member.name} +

+

+ {member.role} +

+
+
+ + {/* Social Sidebar */} + +
+
+ + {/* Right Column: Bio & Skills */} +
+
+

Biography

+

+ {member.bio} +

+
+ + {/* Contact Info Grid */} +
+
+ +
+

+ Email +

+

{member.email}

+
+
+
+ +
+

+ Location +

+

{member.location}

+
+
+
+ + {/* Skills Ability */} +
+

+ + Skills & Abilities +

+
+ {member.skills.map((skill, idx) => ( +
+ + {skill} +
+ ))} +
+
+
+
+
+
+ + ); +} diff --git a/src/pages/our-team/index.tsx b/src/pages/our-team/index.tsx new file mode 100644 index 000000000..7cc5c936b --- /dev/null +++ b/src/pages/our-team/index.tsx @@ -0,0 +1,150 @@ +import Link from "@docusaurus/Link"; +import Layout from "@theme/Layout"; +import { Github, Linkedin, Twitter, Rocket, Heart, Code, Coffee } from "lucide-react"; +import { teamMembers } from '@site/src/data/team'; + +export default function TeamPage() { + + return ( + + {/* 1. Hero / Header Section */} +
+
+
+
+ +
+

+ The Faces Behind CodeHarborHub +

+

+ We are a global collective of developers, designers, and educators + united by a single mission: to make high-quality tech education + accessible, open-source, and community-driven. +

+
+ + Meet the Team + + + Join as Contributor + +
+
+
+ + {/* 2. Values Section (More Info) */} +
+
+
+
+
+

Open Source First

+

Everything we build is public. We believe the best way to learn is by contributing to real-world software.

+
+
+
+

Community Driven

+

Our roadmap is shaped by our learners. We grow together by sharing knowledge and peer-reviewing code.

+
+
+
+

Career Focused

+

We don't just teach syntax; we teach the industry standards, DSA, and architecture required for top tech roles.

+
+
+
+
+ + {/* 3. Team Grid Section */} +
+
+
+
+

+ Our Core Team +

+

+ Meet the leadership team ensuring CodeHarborHub remains the #1 destination for open-source learning. +

+
+
+ + Fuelled by 100+ contributors +
+
+ +
+ {teamMembers.map((member) => ( +
+ {member.name} + +
+ +
+
+
+ +

+ {member.name} +

+ +

+ {member.role} +

+
+ +
+ + + +
+
+
+
+
+ ))} +
+
+
+ + {/* 4. Join Us CTA Section (Increasing Content) */} +
+
+
+
+
+
+ +

Want to Join the Crew?

+

+ CodeHarborHub is always looking for passionate developers, technical writers, + and mentors. If you love open source and helping others grow, we'd love to have you. +

+
+ + Start Contributing + + + Contact Us + +
+
+
+ + ); +} \ No newline at end of file diff --git a/src/pages/proposal-template.mdx b/src/pages/proposal-template.mdx new file mode 100644 index 000000000..392c54bd3 --- /dev/null +++ b/src/pages/proposal-template.mdx @@ -0,0 +1,56 @@ +--- +title: GSoC 2026 Proposal Template +description: Use this template to structure your application for CodeHarborHub. +--- + +# 📝 GSoC 2026 Proposal Template: CodeHarborHub + +To ensure a fair and thorough review process, we require all applicants to follow this template. Please be as detailed as possible. + +--- + +## 1. Project Information +* **Project Title:** (e.g., AI-Powered Learning Path Generator) +* **Mentor(s):** (Name of the mentor you've been talking to) +* **Student Name:** +* **University/Location:** +* **Timezone:** (UTC +/-) + +## 2. Abstract +Provide a brief summary (200-300 words) of what you intend to build and why it is important for the CodeHarborHub community. + +## 3. Technical Implementation +This is the most important section. Explain **how** you will solve the problem. +* **Architecture:** What libraries/frameworks will you use? +* **Data Flow:** How will data move through your system? +* **Diagrams:** (Optional but highly recommended) Link to any flowcharts or UI mockups you've created. +* **Challenges:** What are the potential technical hurdles, and how will you overcome them? + +## 4. Timeline (12-Week Plan) +Break your summer down into weekly milestones. Be realistic! + +* **Community Bonding (May 4 - June 1):** Setting up the environment, finalizing the tech stack, and bonding with the community. +* **Week 1-3:** Initial setup, database schema, and basic API endpoints. +* **Week 4-6:** Core logic implementation (e.g., AI model integration). +* **Phase 1 Evaluation:** Delivery of a functional MVP. +* **Week 7-9:** Frontend development and UI/UX polish. +* **Week 10-11:** Bug fixing, writing unit tests, and documentation. +* **Final Week:** Final code cleanup and submission. + +## 5. Experience & Contributions +* **GitHub Profile:** (Link to your profile) +* **Relevant Projects:** Link to 2-3 projects you've built that demonstrate your skills for this specific proposal. +* **Contributions to CodeHarborHub:** Link to any Pull Requests (merged or open) or issues you've helped resolve in our organization. + +## 6. Commitment +* How many hours per week can you dedicate to this project? +* Do you have any other commitments (exams, internships, vacations) during the GSoC period? If so, please list the dates. + +--- + +### 💡 Submission Tips +1. **Be Specific:** Instead of saying "I will write tests," say "I will achieve 80% code coverage using Vitest." +2. **Ask for Feedback:** Share your draft with us on Discord **before** the final deadline. +3. **Proofread:** A clean, well-formatted proposal shows you care about your work. + +> **Good luck! We can't wait to see your innovative ideas.** \ No newline at end of file From f7e7a104fff1d64a70449a0c9fcf5f854d523d2f Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Sat, 24 Jan 2026 11:25:04 +0530 Subject: [PATCH 2/2] team page added --- src/pages/gsoc-2026-ideas.mdx | 62 --------------------------------- src/pages/proposal-template.mdx | 56 ----------------------------- 2 files changed, 118 deletions(-) delete mode 100644 src/pages/gsoc-2026-ideas.mdx delete mode 100644 src/pages/proposal-template.mdx diff --git a/src/pages/gsoc-2026-ideas.mdx b/src/pages/gsoc-2026-ideas.mdx deleted file mode 100644 index b4d1d0b67..000000000 --- a/src/pages/gsoc-2026-ideas.mdx +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: GSoC 2026 Project Ideas -description: "Join CodeHarborHub for Google Summer of Code 2026 and help us bridge the gap between education and innovation." ---- - -Welcome to the **CodeHarborHub** project ideas page. We are a global community dedicated to transforming ideas into reality through open-source collaboration. - ---- - -## Contributor Checklist -Before reaching out to mentors, please complete the following: -- [ ] Join our [Discord/Slack Community](YOUR_LINK_HERE). -- [ ] Star our [GitHub Repositories](https://github.com/codeharborhub). -- [ ] Set up the local development environment for the project you are interested in. -- [ ] Look for issues labeled `good-first-issue` to make your first contribution. - ---- - -## Project Ideas for 2026 - -### 1. AI-Powered Learning Path Generator -**Difficulty:** Medium (175 hours) -**Tech Stack:** Python, LangChain, OpenAI/Gemini API, React - -**Description:** Develop an intelligent system that analyzes a user's career goals and current skill level to generate a personalized roadmap using CodeHarborHub resources. -- **Goal:** Implement a RAG system to index our educational content. -- **Expected Outcome:** A functional dashboard where users receive a step-by-step learning guide. -- **Mentors:** [@ajay-dhangar] - ---- - -### 2. Interactive "Live Code" Playground -**Difficulty:** Large (350 hours) -**Tech Stack:** React, Monaco Editor, Web Workers - -**Description:** Build an integrated, browser-based code editor for our platform so students can practice coding without leaving the lesson page. -- **Goal:** Create a secure sandbox to execute HTML/CSS/JS with real-time preview. -- **Expected Outcome:** A reusable component for our educational modules. -- **Mentors:** [@ajay-dhangar] - ---- - -### 3. Gamified Contribution Dashboard -**Difficulty:** Medium (175 hours) -**Tech Stack:** Node.js, GitHub REST API, MongoDB - -**Description:** Create a platform that tracks community contributions and awards digital badges and XP to encourage long-term engagement. -- **Goal:** Automate badge distribution based on merged Pull Requests. -- **Expected Outcome:** A public leaderboard and user profile pages. -- **Mentors:** [@ajay-dhangar] - ---- - -## Proposal Guidelines -Your proposal is the most important part of your application. Please follow our [Proposal Template](./proposal-template) and include: -1. **Detailed Timeline:** A week-by-step breakdown. -2. **Technical Implementation:** How do you plan to solve the problem? -3. **About You:** Your experience and why you chose CodeHarborHub. - ---- - -> **Note:** We value quality over quantity. A single well-researched proposal is better than multiple generic ones. \ No newline at end of file diff --git a/src/pages/proposal-template.mdx b/src/pages/proposal-template.mdx deleted file mode 100644 index 392c54bd3..000000000 --- a/src/pages/proposal-template.mdx +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: GSoC 2026 Proposal Template -description: Use this template to structure your application for CodeHarborHub. ---- - -# 📝 GSoC 2026 Proposal Template: CodeHarborHub - -To ensure a fair and thorough review process, we require all applicants to follow this template. Please be as detailed as possible. - ---- - -## 1. Project Information -* **Project Title:** (e.g., AI-Powered Learning Path Generator) -* **Mentor(s):** (Name of the mentor you've been talking to) -* **Student Name:** -* **University/Location:** -* **Timezone:** (UTC +/-) - -## 2. Abstract -Provide a brief summary (200-300 words) of what you intend to build and why it is important for the CodeHarborHub community. - -## 3. Technical Implementation -This is the most important section. Explain **how** you will solve the problem. -* **Architecture:** What libraries/frameworks will you use? -* **Data Flow:** How will data move through your system? -* **Diagrams:** (Optional but highly recommended) Link to any flowcharts or UI mockups you've created. -* **Challenges:** What are the potential technical hurdles, and how will you overcome them? - -## 4. Timeline (12-Week Plan) -Break your summer down into weekly milestones. Be realistic! - -* **Community Bonding (May 4 - June 1):** Setting up the environment, finalizing the tech stack, and bonding with the community. -* **Week 1-3:** Initial setup, database schema, and basic API endpoints. -* **Week 4-6:** Core logic implementation (e.g., AI model integration). -* **Phase 1 Evaluation:** Delivery of a functional MVP. -* **Week 7-9:** Frontend development and UI/UX polish. -* **Week 10-11:** Bug fixing, writing unit tests, and documentation. -* **Final Week:** Final code cleanup and submission. - -## 5. Experience & Contributions -* **GitHub Profile:** (Link to your profile) -* **Relevant Projects:** Link to 2-3 projects you've built that demonstrate your skills for this specific proposal. -* **Contributions to CodeHarborHub:** Link to any Pull Requests (merged or open) or issues you've helped resolve in our organization. - -## 6. Commitment -* How many hours per week can you dedicate to this project? -* Do you have any other commitments (exams, internships, vacations) during the GSoC period? If so, please list the dates. - ---- - -### 💡 Submission Tips -1. **Be Specific:** Instead of saying "I will write tests," say "I will achieve 80% code coverage using Vitest." -2. **Ask for Feedback:** Share your draft with us on Discord **before** the final deadline. -3. **Proofread:** A clean, well-formatted proposal shows you care about your work. - -> **Good luck! We can't wait to see your innovative ideas.** \ No newline at end of file