├── app
├── favicon.ico
├── fonts
│ ├── GeistVF.woff
│ └── GeistMonoVF.woff
├── page.js
├── layout.js
└── globals.css
├── public
├── cardbg.png
└── herobg.png
├── jsconfig.json
├── next.config.mjs
├── lib
├── utils.js
├── blogs.js
└── data.js
├── postcss.config.mjs
├── components.json
├── .gitignore
├── package.json
├── components
├── ui
│ ├── avatar.jsx
│ ├── card.jsx
│ └── button.jsx
├── blogs.jsx
├── section.jsx
├── Navbar.jsx
├── hero.jsx
├── howtocon.jsx
├── footer.jsx
└── cards.jsx
├── tailwind.config.js
├── CONTRIBUTING.md
├── CODE_OF_CONDUCT.md
└── README.md
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AayushPaigwar/Innovate-with-Open-Soucre/HEAD/app/favicon.ico
--------------------------------------------------------------------------------
/public/cardbg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AayushPaigwar/Innovate-with-Open-Soucre/HEAD/public/cardbg.png
--------------------------------------------------------------------------------
/public/herobg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AayushPaigwar/Innovate-with-Open-Soucre/HEAD/public/herobg.png
--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "paths": {
4 | "@/*": ["./*"]
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AayushPaigwar/Innovate-with-Open-Soucre/HEAD/app/fonts/GeistVF.woff
--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 |
4 | export default nextConfig;
5 |
--------------------------------------------------------------------------------
/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AayushPaigwar/Innovate-with-Open-Soucre/HEAD/app/fonts/GeistMonoVF.woff
--------------------------------------------------------------------------------
/lib/utils.js:
--------------------------------------------------------------------------------
1 | import { clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export function cn(...inputs) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 | plugins: {
4 | tailwindcss: {},
5 | },
6 | };
7 |
8 | export default config;
9 |
--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "new-york",
4 | "rsc": true,
5 | "tsx": false,
6 | "tailwind": {
7 | "config": "tailwind.config.js",
8 | "css": "app/globals.css",
9 | "baseColor": "zinc",
10 | "cssVariables": true,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "@/components",
15 | "utils": "@/lib/utils",
16 | "ui": "@/components/ui",
17 | "lib": "@/lib",
18 | "hooks": "@/hooks"
19 | }
20 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 | .yarn/install-state.gz
8 |
9 | # testing
10 | /coverage
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/app/page.js:
--------------------------------------------------------------------------------
1 | import Blogs from "@/components/blogs";
2 | import Cards from "@/components/cards";
3 | import Footer from "@/components/footer";
4 | import HeroSection from "@/components/hero";
5 | import HowToContribute from "@/components/howtocon";
6 | import Navbar from "@/components/Navbar";
7 | import SecretStats from "@/components/section";
8 |
9 | export default function Home() {
10 | return (
11 | <>
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | >
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/app/layout.js:
--------------------------------------------------------------------------------
1 | import localFont from "next/font/local";
2 | import "./globals.css";
3 |
4 | const geistSans = localFont({
5 | src: "./fonts/GeistVF.woff",
6 | variable: "--font-geist-sans",
7 | weight: "100 900",
8 | });
9 | const geistMono = localFont({
10 | src: "./fonts/GeistMonoVF.woff",
11 | variable: "--font-geist-mono",
12 | weight: "100 900",
13 | });
14 |
15 | export const metadata = {
16 | title: "Innovate With Open Source",
17 | description: "The secret management platform for developers",
18 | };
19 |
20 | export default function RootLayout({ children }) {
21 | return (
22 |
23 |
26 | {children}
27 |
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "innovate-with-open-soucre",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@radix-ui/react-avatar": "^1.1.1",
13 | "@radix-ui/react-icons": "^1.3.0",
14 | "@radix-ui/react-slot": "^1.1.0",
15 | "autoprefixer": "^10.4.20",
16 | "class-variance-authority": "^0.7.0",
17 | "clsx": "^2.1.1",
18 | "lucide-react": "^0.446.0",
19 | "next": "14.2.13",
20 | "react": "^18",
21 | "react-dom": "^18",
22 | "react-icons": "^5.3.0",
23 | "tailwind-merge": "^2.5.2",
24 | "tailwindcss-animate": "^1.0.7"
25 | },
26 | "devDependencies": {
27 | "postcss": "^8.4.47",
28 | "tailwindcss": "^3.4.13"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/components/ui/avatar.jsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Avatar = React.forwardRef(({ className, ...props }, ref) => (
9 |
13 | ))
14 | Avatar.displayName = AvatarPrimitive.Root.displayName
15 |
16 | const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (
17 |
21 | ))
22 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
23 |
24 | const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (
25 |
32 | ))
33 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
34 |
35 | export { Avatar, AvatarImage, AvatarFallback }
36 |
--------------------------------------------------------------------------------
/components/ui/card.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | const Card = React.forwardRef(({ className, ...props }, ref) => (
6 |
10 | ))
11 | Card.displayName = "Card"
12 |
13 | const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
14 |
18 | ))
19 | CardHeader.displayName = "CardHeader"
20 |
21 | const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
22 |
26 | ))
27 | CardTitle.displayName = "CardTitle"
28 |
29 | const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
30 |
34 | ))
35 | CardDescription.displayName = "CardDescription"
36 |
37 | const CardContent = React.forwardRef(({ className, ...props }, ref) => (
38 |
39 | ))
40 | CardContent.displayName = "CardContent"
41 |
42 | const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
43 |
47 | ))
48 | CardFooter.displayName = "CardFooter"
49 |
50 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
51 |
--------------------------------------------------------------------------------
/components/ui/button.jsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { cva } from "class-variance-authority";
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
9 | {
10 | variants: {
11 | variant: {
12 | default:
13 | "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 | destructive:
15 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 | outline:
17 | "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 | secondary:
19 | "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 | ghost: "hover:bg-accent hover:text-accent-foreground",
21 | link: "text-primary underline-offset-4 hover:underline",
22 | },
23 | size: {
24 | default: "h-10 px-4 py-2",
25 | sm: "h-8 rounded-md px-3 text-xs",
26 | lg: "h-10 rounded-md px-8",
27 | icon: "h-9 w-9",
28 | },
29 | },
30 | defaultVariants: {
31 | variant: "default",
32 | size: "default",
33 | },
34 | }
35 | )
36 |
37 | const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
38 | const Comp = asChild ? Slot : "button"
39 | return (
40 | ( )
44 | );
45 | })
46 | Button.displayName = "Button"
47 |
48 | export { Button, buttonVariants }
49 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | darkMode: ["class"],
4 | content: [
5 | "./pages/**/*.{js,ts,jsx,tsx,mdx}",
6 | "./components/**/*.{js,ts,jsx,tsx,mdx}",
7 | "./app/**/*.{js,ts,jsx,tsx,mdx}",
8 | ],
9 | theme: {
10 | extend: {
11 | colors: {
12 | background: 'hsl(var(--background))',
13 | foreground: 'hsl(var(--foreground))',
14 | card: {
15 | DEFAULT: 'hsl(var(--card))',
16 | foreground: 'hsl(var(--card-foreground))'
17 | },
18 | popover: {
19 | DEFAULT: 'hsl(var(--popover))',
20 | foreground: 'hsl(var(--popover-foreground))'
21 | },
22 | primary: {
23 | DEFAULT: 'hsl(var(--primary))',
24 | foreground: 'hsl(var(--primary-foreground))'
25 | },
26 | secondary: {
27 | DEFAULT: 'hsl(var(--secondary))',
28 | foreground: 'hsl(var(--secondary-foreground))'
29 | },
30 | muted: {
31 | DEFAULT: 'hsl(var(--muted))',
32 | foreground: 'hsl(var(--muted-foreground))'
33 | },
34 | accent: {
35 | DEFAULT: 'hsl(var(--accent))',
36 | foreground: 'hsl(var(--accent-foreground))'
37 | },
38 | destructive: {
39 | DEFAULT: 'hsl(var(--destructive))',
40 | foreground: 'hsl(var(--destructive-foreground))'
41 | },
42 | border: 'hsl(var(--border))',
43 | input: 'hsl(var(--input))',
44 | ring: 'hsl(var(--ring))',
45 | chart: {
46 | '1': 'hsl(var(--chart-1))',
47 | '2': 'hsl(var(--chart-2))',
48 | '3': 'hsl(var(--chart-3))',
49 | '4': 'hsl(var(--chart-4))',
50 | '5': 'hsl(var(--chart-5))'
51 | }
52 | },
53 | borderRadius: {
54 | lg: 'var(--radius)',
55 | md: 'calc(var(--radius) - 2px)',
56 | sm: 'calc(var(--radius) - 4px)'
57 | }
58 | }
59 | },
60 | plugins: [require("tailwindcss-animate")],
61 | };
62 |
--------------------------------------------------------------------------------
/components/blogs.jsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image"
2 | import { Card, CardContent } from "@/components/ui/card"
3 | import { Avatar, AvatarImage } from "@/components/ui/avatar"
4 | import { blogs } from "@/lib/blogs"
5 | import Link from "next/link"
6 |
7 | export default function Blogs() {
8 |
9 | return (
10 |
11 |
12 | Feature Your Blogs
13 |
14 |
15 | feature your blogs here and get more readings to your blogs
16 |
17 |
18 | {blogs.map((blog, index) => (
19 |
20 |
21 |
22 |
29 |
30 |
{blog.title}
31 |
32 |
33 |
34 |
35 |
{blog.author}
36 |
• {blog.date}
37 |
38 |
39 |
40 |
41 |
42 | ))}
43 |
44 |
45 | )
46 | }
--------------------------------------------------------------------------------
/components/section.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useState } from "react";
4 |
5 | export default function SecretStats() {
6 | const [contributorCount, setContributorCount] = useState(0);
7 | const [closedPRCount, setClosedPRCount] = useState(0);
8 |
9 | useEffect(() => {
10 | const fetchContributors = async () => {
11 | let contributors = [];
12 | let page = 1;
13 | let perPage = 100; // Set a high per_page value to minimize the number of requests
14 |
15 | while (true) {
16 | try {
17 | const response = await fetch(
18 | `https://api.github.com/repos/AayushPaigwar/Innovate-with-Open-Soucre/contributors?page=${page}&per_page=${perPage}`
19 | );
20 | if (!response.ok) throw new Error("Failed to fetch contributor data");
21 | const data = await response.json();
22 | if (data.length === 0) break; // Exit the loop if no more contributors are found
23 | contributors = contributors.concat(data);
24 | page++;
25 | } catch (error) {
26 | console.error("Error fetching GitHub contributors:", error);
27 | break;
28 | }
29 | }
30 |
31 | setContributorCount(contributors.length);
32 | };
33 |
34 | const fetchClosedPRs = async () => {
35 | let closedPRs = [];
36 | let page = 1;
37 | let perPage = 100; // Set a high per_page value to minimize the number of requests
38 |
39 | while (true) {
40 | try {
41 | const response = await fetch(
42 | `https://api.github.com/repos/AayushPaigwar/Innovate-with-Open-Soucre/pulls?state=all&page=${page}&per_page=${perPage}`
43 | );
44 | if (!response.ok) throw new Error("Failed to fetch PR data");
45 | const data = await response.json();
46 | if (data.length === 0) break; // Exit the loop if no more PRs are found
47 | closedPRs = closedPRs.concat(data);
48 | page++;
49 | } catch (error) {
50 | console.error("Error fetching PR data:", error);
51 | break;
52 | }
53 | }
54 |
55 | setClosedPRCount(closedPRs.length);
56 | };
57 |
58 | fetchContributors();
59 | fetchClosedPRs();
60 | }, []);
61 |
62 | return (
63 |
64 |
65 |
66 | Already {contributorCount}+ contributors & {closedPRCount}+ PRs Merged Successfully!
67 |
68 |
69 |
70 | );
71 | }
--------------------------------------------------------------------------------
/components/Navbar.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useState } from "react";
4 | import { Star, Github, GitPullRequestArrow } from "lucide-react";
5 | import Link from "next/link";
6 | import { Button } from "@/components/ui/button";
7 |
8 | export default function Navbar() {
9 | const [repoData, setRepoData] = useState({ stars: 0, forks: 0 });
10 |
11 | useEffect(() => {
12 | // Replace 'owner' and 'repo' with the actual GitHub owner and repo name
13 | const fetchRepoData = async () => {
14 | try {
15 | const response = await fetch(
16 | "https://api.github.com/repos/AayushPaigwar/Innovate-with-Open-Soucre"
17 | );
18 | if (!response.ok) throw new Error("Failed to fetch data");
19 | const data = await response.json();
20 | setRepoData({
21 | stars: data.stargazers_count,
22 | forks: data.forks_count,
23 | });
24 | } catch (error) {
25 | console.error("Error fetching GitHub repo data:", error);
26 | }
27 | };
28 |
29 | fetchRepoData();
30 | }, []);
31 |
32 | return (
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
46 | How To Contribute
47 |
48 |
52 | Github
53 |
54 |
58 | Contributors
59 |
60 |
64 | Add Blog
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 | {repoData.stars.toLocaleString()}
73 |
74 |
75 |
76 |
77 | Forks: {repoData.forks.toLocaleString()}
78 |
79 |
80 |
81 |
82 |
83 | Contribute
84 |
85 |
86 |
87 |
88 | );
89 | }
90 |
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | body {
6 | font-family: Arial, Helvetica, sans-serif;
7 | }
8 |
9 | /* scroll behavior */
10 | html {
11 | scroll-behavior: smooth;
12 | }
13 |
14 | @layer utilities {
15 | .text-balance {
16 | text-wrap: balance;
17 | }
18 | }
19 |
20 | @layer base {
21 | :root {
22 | --background: 0 0% 100%;
23 | --foreground: 240 10% 3.9%;
24 | --card: 0 0% 100%;
25 | --card-foreground: 240 10% 3.9%;
26 | --popover: 0 0% 100%;
27 | --popover-foreground: 240 10% 3.9%;
28 | --primary: 240 5.9% 10%;
29 | --primary-foreground: 0 0% 98%;
30 | --secondary: 240 4.8% 95.9%;
31 | --secondary-foreground: 240 5.9% 10%;
32 | --muted: 240 4.8% 95.9%;
33 | --muted-foreground: 240 3.8% 46.1%;
34 | --accent: 240 4.8% 95.9%;
35 | --accent-foreground: 240 5.9% 10%;
36 | --destructive: 0 84.2% 60.2%;
37 | --destructive-foreground: 0 0% 98%;
38 | --border: 240 5.9% 90%;
39 | --input: 240 5.9% 90%;
40 | --ring: 240 10% 3.9%;
41 | --chart-1: 12 76% 61%;
42 | --chart-2: 173 58% 39%;
43 | --chart-3: 197 37% 24%;
44 | --chart-4: 43 74% 66%;
45 | --chart-5: 27 87% 67%;
46 | --radius: 0.5rem;
47 | }
48 | .dark {
49 | --background: 240 10% 3.9%;
50 | --foreground: 0 0% 98%;
51 | --card: 240 10% 3.9%;
52 | --card-foreground: 0 0% 98%;
53 | --popover: 240 10% 3.9%;
54 | --popover-foreground: 0 0% 98%;
55 | --primary: 0 0% 98%;
56 | --primary-foreground: 240 5.9% 10%;
57 | --secondary: 240 3.7% 15.9%;
58 | --secondary-foreground: 0 0% 98%;
59 | --muted: 240 3.7% 15.9%;
60 | --muted-foreground: 240 5% 64.9%;
61 | --accent: 240 3.7% 15.9%;
62 | --accent-foreground: 0 0% 98%;
63 | --destructive: 0 62.8% 30.6%;
64 | --destructive-foreground: 0 0% 98%;
65 | --border: 240 3.7% 15.9%;
66 | --input: 240 3.7% 15.9%;
67 | --ring: 240 4.9% 83.9%;
68 | --chart-1: 220 70% 50%;
69 | --chart-2: 160 60% 45%;
70 | --chart-3: 30 80% 55%;
71 | --chart-4: 280 65% 60%;
72 | --chart-5: 340 75% 55%;
73 | }
74 | }
75 |
76 | @layer base {
77 | * {
78 | @apply border-border;
79 | }
80 | body {
81 | @apply bg-background text-foreground;
82 | }
83 | }
84 | @layer utilities {
85 | .scrollbar-hide {
86 | -ms-overflow-style: none;
87 | scrollbar-width: none;
88 | }
89 | .scrollbar-hide::-webkit-scrollbar {
90 | display: none;
91 | }
92 | }
93 | @layer utilities {
94 | .scrollbar-hide {
95 | -ms-overflow-style: none;
96 | scrollbar-width: none;
97 | }
98 | .scrollbar-hide::-webkit-scrollbar {
99 | display: none;
100 | }
101 | .smooth-scroll {
102 | scroll-behavior: smooth;
103 | -webkit-overflow-scrolling: touch;
104 | }
105 | }
106 |
107 | .hide-scrollbar::-webkit-scrollbar {
108 | display: none;
109 | }
110 |
111 | .hide-scrollbar {
112 | -ms-overflow-style: none; /* Internet Explorer 10+ */
113 | scrollbar-width: none; /* Firefox */
114 | }
115 |
116 | @keyframes greenBlink {
117 | 0%,
118 | 100% {
119 | opacity: 0;
120 | }
121 | 10% {
122 | opacity: 0.3;
123 | }
124 | 20% {
125 | opacity: 0;
126 | }
127 | }
128 |
129 | .grid-container {
130 | display: none;
131 | }
132 |
133 | @media (min-width: 640px) {
134 | .grid-container {
135 | display: block;
136 | }
137 | }
138 |
--------------------------------------------------------------------------------
/components/hero.jsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { useState, useEffect } from 'react';
3 | import { Button } from "@/components/ui/button";
4 | import { Github } from "lucide-react";
5 | import Link from "next/link";
6 |
7 | const BackgroundSquare = ({ delay = 0 }) => {
8 | return (
9 |
23 | );
24 | };
25 |
26 | const BackgroundGrid = () => {
27 | const leftPattern = [
28 | [1,1,1,1,1],
29 | [1,1,1],
30 | [1,1],
31 | [1,1,1],
32 | [1,1,1,1,1],
33 | ];
34 |
35 | const rightPattern = [
36 | [1,1,1,1,1],
37 | [1,1,1],
38 | [1,1],
39 | [1,1,1],
40 | [1,1,1,1,1]
41 | ];
42 |
43 | return (
44 | <>
45 |
46 | {/* Left Grid */}
47 |
48 | {leftPattern.map((row, rowIndex) => (
49 |
50 | {row.map((show, colIndex) => (
51 | show ? : null
52 | ))}
53 |
54 | ))}
55 |
56 |
57 | {/* Right Grid */}
58 |
59 | {rightPattern.map((row, rowIndex) => (
60 |
61 | {row.map((show, colIndex) => (
62 | show ? : null
63 | ))}
64 |
65 | ))}
66 |
67 |
68 | >
69 | );
70 | };
71 |
72 | export default function HeroSection() {
73 | return (
74 |
75 |
76 |
77 |
78 | Contribute To
79 |
80 |
81 | Open Source
82 |
83 |
84 |
85 |
86 | Kickstart your open-source journey with beginner-friendly repository
87 | designed for first-time contributors this Hacktoberfest!
88 |
89 |
90 |
91 |
92 |
93 | Hacktoberfest
94 |
95 |
96 |
97 |
98 |
99 |
100 | Contribute
101 |
102 |
103 |
104 |
105 |
106 |
107 | );
108 | }
--------------------------------------------------------------------------------
/components/howtocon.jsx:
--------------------------------------------------------------------------------
1 | import { ArrowUpRight, SquareTerminal, GitBranch } from "lucide-react";
2 |
3 | const FeatureCard = ({ icon: Icon, title, description, children }) => (
4 |
5 |
10 |
{description}
11 | {children}
12 |
13 | );
14 |
15 | const Terminal = () => (
16 |
17 |
22 |
23 |
{`// Contributor`}
24 |
{`{`}
25 |
{`name: "Your Name",`}
26 |
{`role: "Your Role (e.g., Contributor)",`}
27 |
{`github: "https://github.com/your-github-username",`}
28 |
{`image: "https://cdn.pixabay.com/photo/2017/01/31/21/23/avatar-2027365_1280.png" // or your image URL`}
29 |
{`}`}
30 |
{`// Blogs`}
31 |
{`{`}
32 |
{`title: "Blog Title",`}
33 |
{`link: "blog_url"`}
34 |
{`author: "John Doe",`}
35 |
{`date: "Sep 19, 2024",`}
36 |
{`image: "image_url"`}
37 |
{`avater: "avater_url"`}
38 |
{`}`}
39 |
40 |
41 | );
42 |
43 | const VersionHistory = () => (
44 |
45 | {[
46 | {
47 | number: 1,
48 | value: "Fork the Repository: Create your own copy of the repo.",
49 | },
50 | {
51 | number: 2,
52 | value:
53 | "Clone Your Fork: Download your forked repo to your local machine",
54 | },
55 | { number: 3, value: "Make Changes: Implement your updates or fixes." },
56 | {
57 | number: 4,
58 | value:
59 | "Commit Your Changes: Save your changes with a descriptive commit message.",
60 | },
61 | {
62 | number: 5,
63 | value: "Push to GitHub: Upload your branch to your GitHub repository.",
64 | },
65 | {
66 | number: 6,
67 | value:
68 | "Create a Pull Request: Submit your changes for review in the original repository.",
69 | },
70 | ].map((version) => (
71 |
75 |
76 |
77 | {version.number}
78 |
79 | {version.value}
80 |
81 |
82 | ))}
83 |
84 | );
85 |
86 | export default function HowToContribute() {
87 | return (
88 |
89 |
90 |
91 |
96 |
97 |
98 |
103 |
104 |
105 |
106 |
107 |
108 | );
109 | }
110 |
--------------------------------------------------------------------------------
/components/footer.jsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link"
2 | import { Linkedin, Github } from "lucide-react"
3 | import { FaXTwitter } from "react-icons/fa6";
4 |
5 | const FooterColumn = ({ title, links }) => (
6 |
7 |
{title}
8 |
9 | {links.map((link, index) => (
10 |
11 |
12 | {link.label}
13 | {link.icon}
14 |
15 |
16 | {link.label}
17 |
18 |
19 | ))}
20 |
21 |
22 | )
23 |
24 | export default function Footer() {
25 | const footerLinks = {
26 | contact: [
27 | {
28 | label: "Aayush Paigwar",
29 | href: "https://www.linkedin.com/in/aayush-paigwar",
30 | icon:
31 | },
32 | {
33 | label: "Pawan Bhayde",
34 | href: "https://www.linkedin.com/in/pawanbhayde",
35 | icon:
36 | },
37 | {
38 | label: "Atharva Werulkar",
39 | href: "https://www.linkedin.com/in/atharva-werulkar",
40 | icon:
41 | },
42 | ],
43 | }
44 |
45 | return (
46 |
47 |
48 |
49 |
50 |
51 |
Innovate With Open Source
52 |
53 |
54 | Kickstart your open-source journey with beginner-friendly repository designed for first-time contributors this Hacktoberfest!
55 |
56 |
57 |
58 |
59 |
Help Wanted?
60 |
61 |
62 |
63 | LinkedIn
64 |
65 |
66 |
67 | GitHub
68 |
69 |
70 |
71 | Twitter
72 |
73 |
74 |
75 |
76 | Copyright © {new Date().getFullYear()} Innovate With Open Source.
77 |
78 |
79 |
80 |
81 | )
82 | }
83 |
--------------------------------------------------------------------------------
/lib/blogs.js:
--------------------------------------------------------------------------------
1 | export const blogs = [
2 | {
3 | title:
4 | "How to Use Shared Preferences to Keep Users Logged In on Flutter Apps",
5 |
6 | link: "https://aayushpaigwar.hashnode.dev/how-to-use-shared-preferences-to-keep-users-logged-in-on-flutter-apps",
7 | author: "Aayush Paigwar",
8 | date: "Jun 22, 2024",
9 | image:
10 | "https://cdn.hashnode.com/res/hashnode/image/upload/v1719074189355/b9700030-3e70-42ff-9126-9d67b587437b.png?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp",
11 | avatar: "https://github.com/aayushpaigwar.png",
12 | },
13 | {
14 | title:
15 | "Building and Pushing Docker Images from Mac M1 to Azure Container Registry: A Complete Guide",
16 | link: "https://aayushpaigwar.hashnode.dev/building-and-pushing-docker-images-from-mac-m1-to-azure-container-registry-a-complete-guide",
17 | author: "Aayush Paigwar",
18 | date: "Jun 10, 2024",
19 | image:
20 | "https://cdn.hashnode.com/res/hashnode/image/upload/v1717967571678/9ecddf1a-3aaa-4e38-ae67-878ad80b976f.png?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp",
21 | avatar: "https://github.com/aayushpaigwar.png",
22 | },
23 | {
24 | title:
25 | "How I Utilize ChatGPT as a Flutter Developer to Enhance My Workflow",
26 | link: "https://medium.com/@pawanbhayde/how-i-utilize-chatgpt-as-a-flutter-developer-to-enhance-my-workflow-312e70113fad",
27 | author: "Pawan Bhayde",
28 | date: "May 27, 2023",
29 | image:
30 | "https://miro.medium.com/v2/resize:fit:828/format:webp/1*0gH2s8qCpN4b8UM4rdcIJA.png",
31 | avatar: "https://github.com/pawanbhayde.png",
32 | },
33 | {
34 | title: "9 High-Quality Free Resources for Web Development",
35 | link: "https://pawanbhayde.hashnode.dev/9-high-quality-free-resources-for-web-development",
36 | author: "Pawan Bhayde",
37 | date: "Apr 16, 2021",
38 | image:
39 | "https://cdn.hashnode.com/res/hashnode/image/upload/v1618581366351/oecPciTPN.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp",
40 | avatar: "https://github.com/pawanbhayde.png",
41 | },
42 | {
43 | title: "The Art of Reverse Engineering: Practical Guide, Tips, and Tricks",
44 | link: "https://medium.com/@yash.mankar10122003/the-art-of-reverse-engineering-16b466edeca9",
45 | author: "Yash R. Mankar",
46 | date: "June 1, 2024",
47 | image:
48 | "https://miro.medium.com/v2/resize:fit:572/format:webp/1*th0UT-fTbzhFFXhlWNdTIg.png",
49 | avatar: "https://github.com/AraeneaCLI.png",
50 | },
51 | {
52 | title: "Godot and 2D retro GameDev",
53 | link: "https://medium.com/@tusharsatpute68/godot-and-2d-retro-gamedev-701b5d7f8714",
54 | author: "expl00it",
55 | date: "March 20, 2024",
56 | image:
57 | "https://miro.medium.com/v2/resize:fit:720/format:webp/1*KzCEw5OUFmrBkfRw0rsEJQ.jpeg",
58 | avatar: "https://github.com/ExPl0iT-29.png",
59 | },
60 | {
61 | title: "My Hacktoberfest 2024 Experience",
62 | link: "https://medium.com/@allanoguis/hacktoberfest-2024-5a5d174ba554",
63 | author: "Allan Oguis",
64 | date: "October 19, 2024",
65 | image:
66 | "https://miro.medium.com/v2/resize:fit:2000/format:webp/1*ECpnBmu7nk4fmv4KuxpDNw.png",
67 | avatar: "https://github.com/allanoguis.png",
68 | },
69 | {
70 | title: "TweetTube: A Full-Stack Adventure in Video Sharing and Micro-Blogging",
71 | link: "https://tweet-tube.hashnode.dev/tweettube-a-full-stack-adventure-in-video-sharing-and-micro-blogging",
72 | author: "Shubham Arora",
73 | date: "October 21, 2024",
74 | image:
75 | "https://cdn.hashnode.com/res/hashnode/image/upload/v1729455938170/9f113b88-2e39-4c8d-a5f5-3e41d318d78d.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp",
76 | avatar: "https://github.com/Shubham0523.png",
77 | },
78 | {
79 | title: "Why Learning JavaScript First Can Boost Your Coding Career",
80 | link: "https://medium.com/@ghavghaveayush782/why-learning-javascript-first-can-boost-your-coding-career-a86ff7a134df",
81 | author: "Ayush Ghavghave",
82 | date: "November 1, 2024",
83 | image: "https://miro.medium.com/v2/resize:fit:828/format:webp/1*4776ksNFnekGkFojn3Z4vA.gif",
84 | avatar: "https://github.com/ayush88-debug.png",
85 | },
86 | ];
87 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | # 🚀 How to Contribute to Innovate-with-Open-Source
23 |
24 | Thank you for your interest in contributing! Follow the steps below to make your contribution for **Hacktoberfest**. 🎉
25 |
26 | ---
27 |
28 | # Tech Stack 🛠️
29 | - **Next.js**
30 | - **Vercel**
31 | - **Git**
32 | - **GitHub**
33 |
34 | ---
35 |
36 | ## 📑 Steps to Contribute
37 |
38 | ### **What should I contribute?**
39 |
40 | Steps to Contribute
41 |
42 | - Open the `lib/data.js` file
43 | - You will see a snippet of code below.
44 | - Just add that code with YOUR NAME and YOUR GITHUB PROFILE link to the array to make a simple contribution.
45 |
46 | ```javascript
47 | //Male:- https://avatar.iran.liara.run/public/job/operator/male
48 | //Female:- https://avatar.iran.liara.run/public/job/operator/female
49 | {
50 | name: "Your Name",
51 | role: "Your Role (e.g., Contributor)",
52 | github: "https://github.com/your-github-username",
53 | image: "https://avatar.iran.liara.run/public/job/operator/male" // or your image URL
54 | }
55 | ```
56 | #### And that's all ! 🚀
57 |
58 | ## How to Contribute
59 |
60 | #### To make Contribution :
61 | 1. Fork this repository to your GitHub account.
62 | 2. Clone the forked repository to your local machine:
63 | ```bash
64 | git clone https://github.com/your-username/Innovate-with-Open-Source.git
65 | ```
66 | 3. Create a new branch for your contribution:
67 | ```bash
68 | git checkout -b contributor/your-name
69 | ```
70 | 4. Make your changes in the Snippet of Code.
71 | 5. Commit your changes and push them to your forked repository:
72 | ```bash
73 | git add .
74 | git commit -m "Add your meaningful commit message here"
75 | git push origin contributor/your-name
76 | ```
77 | 6. Create a Pull Request (PR) from your forked repository to this main repository.
78 | 7. Your PR will be reviewed and merged if everything is in order.
79 |
80 | ```bash
81 | ├── app
82 | │ ├── fonts
83 | │ ├── favicon.ico
84 | │ ├── globals.css
85 | │ ├── layout.js
86 | │ └── page.js
87 | ├── components
88 | | ├── ui
89 | | | └── button.jsx
90 | | ├── cards.jsx #Contributors card ui
91 | | ├── footer.jsx #Footer of the Website
92 | | ├── hero.jsx #Welcome Page of the Website
93 | | ├── howtocon.jsx #Contribution Steps
94 | | ├── Navbar.jsx #Header of the Website
95 | | └── section.jsx
96 | └── lib
97 | ├── data.js #First Contributors Move here 👋🏻
98 | └──utils.js
99 | ```
100 |
101 | ---
102 |
103 | ## 📝 Contribution Guidelines
104 |
105 | Please follow these guidelines to make sure your contributions are consistent and helpful:
106 |
107 | - Ensure your code adheres to the project’s coding standards and style.
108 | - Add comments to explain complex code or decisions made.
109 | - Test your changes locally to ensure they work as expected.
110 | - Keep pull requests small and focused on a single contribution.
111 |
112 | ---
113 |
114 | ## 🎯 Quick Tips
115 |
116 | - Remember to always pull the latest changes from the main repository before making a new branch.
117 | - Write clear and concise commit messages.
118 | - Be respectful and open to feedback during the PR review process.
119 | - Have fun contributing!
120 |
121 | ---
122 |
123 | Thank you for contributing to **Innovate-with-Open-Source** and being part of Hacktoberfest! Let's build something amazing together. 🌟
124 |
125 | ---
126 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity
10 | and orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | * Demonstrating empathy and kindness toward other people
21 | * Being respectful of differing opinions, viewpoints, and experiences
22 | * Giving and gracefully accepting constructive feedback
23 | * Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | * Focusing on what is best not just for us as individuals, but for the
26 | overall community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | * The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | * Trolling, insulting or derogatory comments, and personal or political attacks
33 | * Public or private harassment
34 | * Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | * Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards of
42 | acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies when
54 | an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail address,
56 | posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at
63 | aayush.paigwar123@gmail.com.
64 | All complaints will be reviewed and investigated promptly and fairly.
65 |
66 | All community leaders are obligated to respect the privacy and security of the
67 | reporter of any incident.
68 |
69 | ## Enforcement Guidelines
70 |
71 | Community leaders will follow these Community Impact Guidelines in determining
72 | the consequences for any action they deem in violation of this Code of Conduct:
73 |
74 | ### 1. Correction
75 |
76 | **Community Impact**: Use of inappropriate language or other behavior deemed
77 | unprofessional or unwelcome in the community.
78 |
79 | **Consequence**: A private, written warning from community leaders, providing
80 | clarity around the nature of the violation and an explanation of why the
81 | behavior was inappropriate. A public apology may be requested.
82 |
83 | ### 2. Warning
84 |
85 | **Community Impact**: A violation through a single incident or series
86 | of actions.
87 |
88 | **Consequence**: A warning with consequences for continued behavior. No
89 | interaction with the people involved, including unsolicited interaction with
90 | those enforcing the Code of Conduct, for a specified period of time. This
91 | includes avoiding interactions in community spaces as well as external channels
92 | like social media. Violating these terms may lead to a temporary or
93 | permanent ban.
94 |
95 | ### 3. Temporary Ban
96 |
97 | **Community Impact**: A serious violation of community standards, including
98 | sustained inappropriate behavior.
99 |
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 |
106 | ### 4. Permanent Ban
107 |
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 |
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 |
115 | ## Attribution
116 |
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Innovate with Open Source
7 |
8 | ⭐️ Join the Open Source Revolution with Our Community ⭐️
9 |
10 |
11 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | ---
46 |
47 | # Tech Stack 🛠️
48 | - **Next.js**
49 | - **Vercel**
50 | - **Git**
51 | - **GitHub**
52 |
53 | ---
54 |
55 |
56 |
57 | # Steps to Contribute
58 | ## Make a Simple Contribution :
59 |
60 | - Open the `lib/data.js` file. | 📌for Adding Blogs open `lib/blogs.js`
61 | - You will see a snippet of code below.
62 | - Just add that code with YOUR NAME and YOUR GITHUB PROFILE link to the array to make a simple contribution.
63 |
64 | ```javascript
65 | //Male:- https://avatar.iran.liara.run/public/job/operator/male
66 | //Female:- https://avatar.iran.liara.run/public/job/operator/female
67 | {
68 | name: "Your Name",
69 | role: "Your Role (e.g., Contributor)",
70 | github: "https://github.com/your-github-username",
71 | image: "https://github.com/your-github-username.png" // or your image URL
72 | }
73 |
74 | // Blogs
75 |
76 | {
77 | title: "Blog Title",
78 | link: "blog_url",
79 | author: "John Doe",
80 | date: "Sep 19, 2024",
81 | image: "image_url",
82 | avater: "avater_url",
83 | }
84 | ```
85 | #### And that's all ! 🚀
86 |
87 | ## How to Contribute
88 |
89 | #### To make Contribution :
90 | 1. Fork this repository to your GitHub account.
91 | 2. Clone the forked repository to your local machine:
92 | ```bash
93 | git clone https://github.com/your-username/Innovate-with-Open-Source.git
94 | ```
95 | 3. Create a new branch for your contribution:
96 | ```bash
97 | git checkout -b contributor/your-name
98 | ```
99 | 4. Make your changes in the Snippet of Code.
100 | 5. Commit your changes and push them to your forked repository:
101 | ```bash
102 | git add .
103 | git commit -m "Add your meaningful commit message here"
104 | git push origin contributor/your-name
105 | ```
106 | 6. Create a Pull Request (PR) from your forked repository to this main repository.
107 | 7. Your PR will be reviewed and merged if everything is in order.
108 |
109 | ```bash
110 | ├── app
111 | │ ├── fonts
112 | │ ├── favicon.ico
113 | │ ├── globals.css
114 | │ ├── layout.js
115 | │ └── page.js
116 | ├── components
117 | | ├── ui
118 | | | └── button.jsx
119 | | ├── cards.jsx #Contributors card ui
120 | | ├── footer.jsx #Footer of the Website
121 | | ├── hero.jsx #Welcome Page of the Website
122 | | ├── howtocon.jsx #Contribution Steps
123 | | ├── Navbar.jsx #Header of the Website
124 | | └── section.jsx
125 | └── lib
126 | ├── data.js #First Contributors Move here 👋🏻
127 | └──utils.js
128 | ```
129 |
130 | ## Contribution Guidelines
131 |
132 | - Ensure your code follows the project's coding standards and conventions.
133 | - Make sure to document your code and add comments where necessary.
134 | - Test your changes to ensure they work as expected.
135 |
136 | ---
137 |
138 | # Contributors for **Innovate with Open Source**🧑🏻💻
139 |
140 |
141 |
142 |
143 |
144 | ---
145 |
146 | # Code of Conduct
147 |
148 | To create a greater sense of inclusion and community for contributors, please adhere to the following Code of Conduct:
149 |
150 | - **Be Respectful**: Treat everyone with respect and kindness, valuing their contributions and opinions.
151 | - **Be Inclusive**: Encourage participation from people of all backgrounds, identities, and experiences.
152 | - **Be Collaborative**: Foster a collaborative environment where constructive feedback is welcomed.
153 | - **Be Professional**: Maintain professionalism in all interactions, avoiding inappropriate language or behavior.
154 |
155 | For detailed guidelines, please refer to the [Code of Conduct document](https://github.com/AayushPaigwar/Innovate-with-Open-Soucre/blob/main/CODE_OF_CONDUCT.md).
156 |
157 | ## Happy Coding!🚀
158 |
159 |
160 | 
161 |
162 |
163 | ---
164 |
165 |
166 |
167 | Made with ❤️ by [Aayush Paigwar](https://github.com/AayushPaigwar)
168 |
169 |
--------------------------------------------------------------------------------
/components/cards.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useState, useRef, useEffect } from "react";
4 | import { contributors } from "@/lib/data";
5 | import { Button } from "@/components/ui/button"; // Assuming you have a Button component from Shadcn
6 | import { Search, X } from "lucide-react";
7 |
8 | const ITEMS_PER_PAGE = 9; // Display 3 cards per page
9 |
10 | const FeatureCard = ({ name, role, image, github }) => (
11 |
19 |
20 |
21 |
22 |
23 |
{
28 | e.target.src = "https://avatar.iran.liara.run/public/24";
29 | }}
30 | />
31 |
32 |
33 |
46 |
47 |
48 | );
49 |
50 | const InfiniteScrollCard = ({ name, image }) => (
51 |
52 |
{
57 | e.target.src = "https://avatar.iran.liara.run/public/24";
58 | }}
59 | />
60 |
{name}
61 |
62 | );
63 |
64 | export default function Cards() {
65 | const [currentPage, setCurrentPage] = useState(1);
66 | const [scrollPosition, setScrollPosition] = useState(0);
67 | const [searchQuery, setSearchQuery] = useState(""); // State for search input
68 | const scrollRef = useRef(null);
69 |
70 | // Filter the contributors based on the search query
71 | const filteredContributors = contributors.filter((contributor) => {
72 | const lowercasedQuery = searchQuery.toLowerCase();
73 | return (
74 | contributor.name.toLowerCase().includes(lowercasedQuery) ||
75 | contributor.role.toLowerCase().includes(lowercasedQuery) ||
76 | contributor.github.toLowerCase().includes(lowercasedQuery)
77 | );
78 | });
79 |
80 | const totalFilteredItems = filteredContributors.length;
81 | const totalPages = Math.ceil(totalFilteredItems / ITEMS_PER_PAGE);
82 | const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
83 | const endIndex = startIndex + ITEMS_PER_PAGE;
84 | const currentContributors = filteredContributors.slice(startIndex, endIndex);
85 |
86 | const handleNextPage = () => {
87 | if (currentPage < totalPages) {
88 | setCurrentPage(currentPage + 1);
89 | }
90 | };
91 |
92 | const handlePreviousPage = () => {
93 | if (currentPage > 1) {
94 | setCurrentPage(currentPage - 1);
95 | }
96 | };
97 |
98 | useEffect(() => {
99 | const scrollContainer = scrollRef.current;
100 | if (scrollContainer) {
101 | const scrollWidth = scrollContainer.scrollWidth / 2; // Divide by 2 because we duplicated the content
102 | const clientWidth = scrollContainer.clientWidth;
103 |
104 | const timer = setInterval(() => {
105 | setScrollPosition((prevPos) => {
106 | if (prevPos >= scrollWidth) {
107 | // If we've scrolled past the first set, instantly jump back to the start of the second set
108 | scrollContainer.scrollLeft = 0;
109 | return 0;
110 | }
111 | return prevPos + 1;
112 | });
113 | }, 50);
114 |
115 | return () => clearInterval(timer);
116 | }
117 | }, []);
118 |
119 | useEffect(() => {
120 | if (scrollRef.current) {
121 | scrollRef.current.scrollLeft = scrollPosition;
122 | }
123 | }, [scrollPosition]);
124 |
125 | return (
126 |
127 |
128 |
Contributors
129 |
130 | {/* Infinite Scroll Section */}
131 |
132 |
137 | {[...contributors, ...contributors].map((contributor, index) => (
138 |
139 | ))}
140 |
141 |
142 |
143 | {/* Contributors Total & Search Bar Section */}
144 |
145 |
146 | Total Contributors: {totalFilteredItems}
147 |
148 |
149 | setSearchQuery(e.target.value)}
153 | placeholder="Search by user name or role.."
154 | className="pl-10 pr-3 py-2 border border-gray-300 rounded-lg w-full sm:w-80"
155 | />
156 |
157 | {searchQuery && (
158 | setSearchQuery("")}
162 | />
163 | )}
164 |
165 |
166 |
167 | {/* Display the current page of contributors */}
168 |
169 | {currentContributors.length === 0 ? (
170 |
171 | No contributors found matching your search.
172 |
173 | ) : (
174 | currentContributors.map((contributor) => (
175 |
182 | ))
183 | )}
184 |
185 |
186 | {/* Pagination controls */}
187 |
188 |
193 | Previous
194 |
195 |
196 | Page {currentPage} of {totalPages}
197 |
198 |
203 | Next
204 |
205 |
206 |
207 |
208 | );
209 | }
210 |
--------------------------------------------------------------------------------
/lib/data.js:
--------------------------------------------------------------------------------
1 | export const contributors = [
2 | {
3 | name: "Aayush Paigwar🧑🏻💻",
4 | role: "Project Maintainer",
5 | github: "https://github.com/aayushpaigwar",
6 | image: "https://github.com/aayushpaigwar.png",
7 | },
8 | {
9 | name: "Pawan Bhayde",
10 | role: "Project Maintainer",
11 | github: "https://github.com/pawanbhayde",
12 | image: "https://github.com/pawanbhayde.png",
13 | },
14 | {
15 | name: "Atharva Werulkar",
16 | role: "Project Maintainer",
17 | github: "https://github.com/Atharva-werulkar",
18 | image: "https://github.com/Atharva-werulkar.png",
19 | },
20 | {
21 | name: "Yash Mankar",
22 | role: "Contributor",
23 | github: "https://github.com/AraeneaCLI",
24 | image: "https://github.com/AraeneaCLI.png",
25 | },
26 | {
27 | name: "Sahil Banswani",
28 | role: "Contributor",
29 | github: "https://github.com/sahil-banswani",
30 | image: "https://github.com/sahil-banswani.png",
31 | },
32 |
33 | {
34 | name: "Satya S. Nayak",
35 | role: "Contributor",
36 | github: "https://github.com/satyasn01",
37 | image: "https://github.com/satyasn01.png",
38 | },
39 | {
40 | name: "Shreyash",
41 | role: "Contributor",
42 | github: "https://github.com/Shreyash2403",
43 | image: "https://github.com/Shreyash2403.png",
44 | },
45 | {
46 | name: "Aadam Shaikh",
47 | role: "Contributor",
48 | github: "https://github.com/AadamShaikh",
49 | image: "https://github.com/AadamShaikh.png",
50 | },
51 | {
52 | name: "Rahul Pradhan",
53 | role: "Contributor",
54 | github: "https://github.com/pradhan3249",
55 | image: "https://github.com/pradhan3249.png",
56 | },
57 | {
58 | name: "Piyush Bagde",
59 | role: "Contributor",
60 | github: "https://github.com/PiyushBagde",
61 | image: "https://github.com/PiyushBagde.png",
62 | },
63 | {
64 | name: "Ashmit Zanzote",
65 | role: "Contributor",
66 | github: "https://github.com/HackerX011",
67 | image: "https://github.com/HackerX011.png",
68 | },
69 | {
70 | name: "Manthan",
71 | role: "Contributor",
72 | github: "https://github.com/manthanwaghmare",
73 | image: "https://github.com/manthanwaghmare.png",
74 | },
75 | {
76 | name: "AKHILESH SIRSIKAR",
77 | role: "Contributor",
78 | github: "https://github.com/Akhi7122004",
79 | image: "https://github.com/Akhi7122004.png",
80 | },
81 | {
82 | name: "Sarang Chafekar",
83 | role: "Contributor",
84 | github: "https://github.com/Sarang095",
85 | image: "https://github.com/Sarang095.png",
86 | },
87 | {
88 | name: "Divya",
89 | role: "Contributor",
90 | github: "https://github.com/Divya-sh47git",
91 | image: "https://github.com/Divya-sh47git.png",
92 | },
93 | {
94 | name: "Abhijeet Moghe",
95 | role: "Contributor",
96 | github: "https://github.com/Abhijeet0605",
97 | image: "https://github.com/Abhijeet0605.png",
98 | },
99 | {
100 | name: "Palash",
101 | role: "Contributor",
102 | github: "https://github.com/palash2704",
103 | image: "https://github.com/palash2704.png",
104 | },
105 | {
106 | name: "Vedant Katre",
107 | role: "Contributor",
108 | github: "https://github.com/vedant5102",
109 | image: "https://github.com/vedant5102.png",
110 | },
111 | {
112 | name: "Aviral Pathak",
113 | role: "Contributor",
114 | github: "https://github.com/aviral-hub",
115 | image: "https://github.com/aviral-hub.png",
116 | },
117 | {
118 | name: "Atharva Gawali",
119 | role: "Contributor",
120 | github: "https://github.com/atharv2313",
121 | image: "https://github.com/atharv2313.png",
122 | },
123 | {
124 | name: "Dipanshu Rawat",
125 | role: "Contributor",
126 | github: "https://github.com/dipanshurdev",
127 | image: "https://github.com/dipanshurdev.png",
128 | },
129 | {
130 | name: "Vidhi Agrawal",
131 | role: "Contributor",
132 | github: "https://github.com/vidhi522",
133 | image: "https://github.com/vidhi522.png",
134 | },
135 | {
136 | name: "Yashika",
137 | role: "Contributor",
138 | github: "https://github.com/Yashikatahaliyani-03",
139 | image: "https://github.com/Yashikatahaliyani-03.png",
140 | },
141 | {
142 | name: "Dang Huu Thinh",
143 | role: "Contributor",
144 | github: "https://github.com/thinh12112001",
145 | image: "https://github.com/thinh12112001.png",
146 | },
147 | {
148 | name: "Himangi Tripathy",
149 | role: "Contributor",
150 | github: "https://github.com/H1mang1",
151 | image: "https://github.com/H1mang1.png",
152 | },
153 | {
154 | name: "Bhavesh Negi",
155 | role: "Contributor",
156 | github: "https://github.com/bhaveshnegi",
157 | image: "https://github.com/bhaveshnegi.png",
158 | },
159 | {
160 | name: "Kavitha Shanmugan",
161 | role: "Contributor",
162 | github: "https://github.com/kavithashanmugan",
163 | image: "https://github.com/kavithashanmugan.png",
164 | },
165 | {
166 | name: "Shubham Jain",
167 | role: "Contributor",
168 | github: "https://github.com/ShubhamJain-23",
169 | image: "https://github.com/ShubhamJain-23.png",
170 | },
171 | {
172 | name: "Abhinav Patra",
173 | role: "Contributor",
174 | github: "https://github.com/Abhinavpatra",
175 | image: "https://github.com/Abhinavpatra.png",
176 | },
177 | {
178 | name: "Deepanshi Gupta",
179 | role: "Contributor",
180 | github: "https://github.com/Deepanshi-Gupta",
181 | image: "https://github.com/Deepanshi-Gupta.png",
182 | },
183 | {
184 | name: "Nikhil Nandanwar",
185 | role: "Contributor",
186 | github: "https://github.com/nikhilnandanwar429",
187 | image: "https://github.com/nikhilnandanwar429.png",
188 | },
189 | {
190 | name: "Shreya Sanjay",
191 | role: "Contributor",
192 | github: "https://github.com/shreyyq",
193 | image: "https://github.com/shreyyq.png",
194 | },
195 | {
196 | name: "Iswar Kumar Sahu",
197 | role: "Contributor",
198 | github: "https://github.com/kumar1397",
199 | image: "https://github.com/kumar1397.png",
200 | },
201 | {
202 | name: "Zubin Bhaskar",
203 | role: "Contributor",
204 | github: "https://github.com/memickeymac03",
205 | image: "https://github.com/memickeymac03.png",
206 | },
207 | {
208 | name: "Akash Keote",
209 | role: "Contributor",
210 | github: "https://github.com/AkashKeote",
211 | image: "https://github.com/AkashKeote.png",
212 | },
213 | {
214 | name: "Mohammed Sohail",
215 | role: "Contributor",
216 | github: "https://github.com/msohailx",
217 | image: "https://github.com/msohailx.png",
218 | },
219 | {
220 | name: "Priyadarshan Ghosh Hazra",
221 | role: "Contributor",
222 | github: "https://github.com/priyadarshan-ghosh",
223 | image: "https://github.com/priyadarshan-ghosh.png",
224 | },
225 | {
226 | name: "Deepanshu Yadav",
227 | role: "Contributor",
228 | github: "https://github.com/DeepanshuYadav-code",
229 | image: "https://github.com/DeepanshuYadav-code.png",
230 | },
231 |
232 | {
233 | name: "Kunal choure",
234 | role: "Contributor",
235 | github: "https://github.com/KUNALCHOURE",
236 | image: "https://github.com/KUNALCHOURE.png",
237 | },
238 | {
239 | name: "T Rahul Prabhu ",
240 | role: "Contributor",
241 | github: "https://github.com/T-Rahul-prabhu-38",
242 | image: "https://github.com/T-Rahul-prabhu-38.png",
243 | },
244 |
245 | {
246 | name: "Nikhilesh Mauje",
247 | role: "Contributor",
248 | github: "https://github.com/Nikhileshmauje",
249 | image: "https://github.com/Nikhileshmauje.png",
250 | },
251 | {
252 | name: "Gamerking177",
253 | role: "Contributor",
254 | github: "https://github.com/Gamerking177",
255 | image: "https://github.com/Gamerking177.png",
256 | },
257 | {
258 | name: "Vijayalaxmi Wakode",
259 | role: "Contributor",
260 | github: "https://github.com/vijayalaxmi777",
261 |
262 | image: "https://github.com/vijayalaxmi777.png",
263 | },
264 | {
265 | name: "Soham Das",
266 | role: "Contributor",
267 | github: "https://github.com/theDevSoham",
268 | image: "https://github.com/theDevSoham.png",
269 | },
270 | {
271 | name: "ketan kumar",
272 | role: "Contributor",
273 | github: "https://github.com/Ketanop321",
274 |
275 | image: "https://github.com/Ketanop321.png",
276 | },
277 |
278 | {
279 | name: "Shariz Hussain",
280 | role: "Contributor",
281 | github: "https://github.com/SharizHussain",
282 | image: "https://github.com/SharizHussain.png",
283 | },
284 | {
285 | name: "Tushar Pamnani",
286 | role: "Contributor",
287 | github: "https://github.com/tusharpamnani",
288 | image: "https://github.com/tusharpamnani.png",
289 | },
290 | {
291 | name: "Gurdeep Singh",
292 | role: "Contributor",
293 | github: "https://github.com/Gurdeep99",
294 | image: "https://github.com/Gurdeep99.png",
295 | },
296 | {
297 | name: "Suprabhat Das",
298 | role: "Contributor",
299 | github: "https://github.com/suprabhatdas",
300 | image: "https://github.com/suprabhatdas.png",
301 | },
302 | {
303 | name: "Sai Bhaskar",
304 | role: "Contributor",
305 | github: "https://github.com/Sai2307l",
306 | image: "https://github.com/Sai2307l.png",
307 | },
308 | {
309 | name: "Kartik Jain",
310 | role: "Contributor",
311 | github: "https://github.com/Kartikk-26",
312 | image: "https://github.com/Kartikk-26.png",
313 | },
314 | {
315 | name: "Abhay Mourya",
316 | role: "Contributor",
317 | github: "https://github.com/abhay557",
318 | image: "https://github.com/abhay557.png",
319 | },
320 | {
321 | name: "Marcelo Amorim",
322 | role: "Contributor",
323 | github: "https://github.com/marceloams",
324 | image: "https://github.com/marceloams.png",
325 | },
326 | {
327 | name: "Wajahat Ali",
328 | role: "Contributor",
329 | github: "https://github.com/wajaht-ali/",
330 | image: "https://github.com/wajaht-ali.png",
331 | },
332 | {
333 | name: "Harshal Ghoradkar",
334 | role: "Contributor",
335 | github: "https://github.com/Harshal279",
336 | image: "https://github.com/Harshal279.png", // or your image URL
337 | },
338 | {
339 | name: "Frandel Wanjawa",
340 | role: "Contributor",
341 | github: "https://github.com/franfreezy",
342 | image: "https://github.com/franfreezy.png",
343 | },
344 | {
345 | name: "Vidhan Dahatkar",
346 | role: "Contributor",
347 | github: "https://github.com/Vidhan12345",
348 | image: "https://github.com/Vidhan12345.png",
349 | },
350 | {
351 | name: "Sreeharsh K",
352 | role: "Contributor",
353 | github: "https://github.com/sreeharshrajan",
354 | image: "https://github.com/sreeharshrajan.png",
355 | },
356 | {
357 | name: "Mohit",
358 | role: "Contributor",
359 | github: "https://github.com/mohit2404",
360 | image: "https://github.com/mohit2404.png",
361 | },
362 | {
363 | name: "Siddhant Chakraborty",
364 | role: "Contributor",
365 | github: "https://github.com/Sid797",
366 | image: "https://github.com/Sid797.png",
367 | },
368 | {
369 | name: "Shivansh",
370 | role: "Contributor",
371 | github: "https://github.com/Shivansh-22866",
372 | image: "https://github.com/Shivansh-22866.png",
373 | },
374 | {
375 | name: "Jaydeep Rawat",
376 | role: "Contributor",
377 | github: "https://github.com/Jaydeeprawat17",
378 | image: "https://github.com/Jaydeeprawat17.png",
379 | },
380 | {
381 | name: "Ajay Achugatla",
382 | role: "Contributor",
383 | github: "https://github.com/AjayAchugatla",
384 | image: "https://github.com/AjayAchugatla.png",
385 | },
386 | {
387 | name: "Khushi Agrawal",
388 | role: "Contributor",
389 | github: "https://github.com/khushiiagrawal",
390 | image: "https://github.com/khushiiagrawal.png",
391 | },
392 | {
393 | name: "Mohamed Hersi",
394 | role: "Contributor",
395 | github: "https://github.com/2div",
396 | image: "https://github.com/2div.png",
397 | },
398 | {
399 | name: "Arpit Srivastava",
400 | role: "Contributor",
401 | github: "https://github.com/arpit529srivastava",
402 | image: "https://github.com/arpit529srivsatava.png",
403 | },
404 | {
405 | name: "Tushar Satpute",
406 | role: "Contributor",
407 | github: "https://github.com/ExPl0iT-29",
408 | image: "https://github.com/ExPl0iT-29.png",
409 | },
410 | {
411 | name: "Mikhail Sakdalan",
412 | role: "Contributor",
413 | github: "https://github.com/yolk23",
414 | image: "https://github.com/yolk23.png",
415 | },
416 | {
417 | name: "Aaskar Rana",
418 | role: "Contributor",
419 | github: "https://github.com/rana8aaskar",
420 | image: "https://github.com/rana8aaskar.png",
421 | },
422 |
423 | {
424 | name: "Hardik Agarwal",
425 | role: "Contributor",
426 | github: "https://github.com/hardik18-hk19",
427 | image: "https://github.com/hardik18-hk19.png",
428 | },
429 |
430 | {
431 | name: "Pritom Banik",
432 | role: "Contributor",
433 | github: "hhttps://github.com/UnpolishedNoob",
434 | image: "https://avatars.githubusercontent.com/u/138396097?v=4",
435 | },
436 |
437 | {
438 | name: "Anjali Vaish",
439 | role: "Contributor",
440 | github: "https://github.com/anjali-vaish",
441 | image: "https://github.com/anjali-vaish.png",
442 | },
443 |
444 | {
445 | name: "Jitin Saxena",
446 | role: "Contributor",
447 | github: "https://github.com/JitinSaxenaa",
448 | image: "https://github.com/JitinSaxenaa.png",
449 | },
450 |
451 | {
452 | name: "Allan Oguis",
453 | role: "Contributor",
454 | github: "https://github.com/allanoguis",
455 | image: "https://github.com/allanoguis.png",
456 | },
457 |
458 | {
459 | name: "Samruddhi Bande",
460 | role: "Contributor",
461 | github: "https://github.com/SamruddhiBande",
462 | image: "https://github.com/SamruddhiBande.png",
463 | },
464 |
465 | {
466 | name: "Imesh Nirmal",
467 | role: "Contributor",
468 | github: "https://github.com/DeathwingIN",
469 | image: "https://github.com/DeathwingIN.png",
470 | },
471 |
472 | {
473 | name: "Cristina EU1",
474 | role: "Contributor",
475 | github: "https://github.com/CristinaEU1",
476 | image: "https://github.com/CristinaEU1.png",
477 | },
478 | {
479 | name: "Shubham Arora",
480 | role: "Contributor",
481 | github: "https://github.com/Shubham0523",
482 | image: "https://github.com/Shubham0523.png",
483 | },
484 |
485 | {
486 | name: "Pasan Jayathilaka",
487 | role: "Contributor",
488 | github: "https://github.com/pasanjaythilaka",
489 | image: "https://github.com/pasanjayathilaka.png",
490 | },
491 | {
492 | name: "Ayush Ghavghave",
493 | role: "Contributor",
494 | github: "https://github.com/ayush88-debug",
495 | image: "https://github.com/ayush88-debug.png",
496 | },
497 | {
498 | name: "Aaron Josh",
499 | role: "Contributor",
500 | github: "https://github.com/shironzi",
501 | image: "https://avatars.githubusercontent.com/u/157195223?v=4",
502 | },
503 | {
504 | name: "Rushikesh Petkar",
505 | role: "Contributor",
506 | github: "https://github.com/petkarrushikesh",
507 | image: "https://avatars.githubusercontent.com/u/130480524",
508 | },
509 | ];
510 |
--------------------------------------------------------------------------------