├── community-website
    ├── .eslintrc.json
    ├── public
    │   ├── favicon.ico
    │   ├── cvcs&dvcs.png
    │   ├── gitVSgithub.png
    │   ├── git-3-tier-architecture.png
    │   ├── vercel.svg
    │   └── earth-asia-solid.svg
    ├── postcss.config.js
    ├── confetti-js.d.ts
    ├── pages
    │   ├── _app.tsx
    │   ├── api
    │   │   └── hello.ts
    │   ├── index.tsx
    │   ├── educational-resources.tsx
    │   ├── community-guidelines.tsx
    │   ├── contributors.tsx
    │   └── learn-git-and-github.tsx
    ├── tailwind.config.js
    ├── next.config.js
    ├── .gitignore
    ├── utils
    │   └── utils.ts
    ├── tsconfig.json
    ├── styles
    │   ├── globals.css
    │   ├── Home.module.css
    │   └── LearnGitAndGitHub.module.css
    ├── package.json
    ├── components
    │   ├── NavBar.tsx
    │   └── DarkModeButton.tsx
    ├── netlify.toml
    └── README.md
├── images
    └── HackToberFest.PNG
├── .github
    ├── holopin.yml
    ├── workflows
    │   └── auto-assign.yml
    └── auto-assign.yml
├── LICENSE
├── README.md
├── COMMUNITY_GUIDELINES.md
└── CONTRIBUTORS.md


/community-website/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/images/HackToberFest.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yfosp/main-website/HEAD/images/HackToberFest.PNG


--------------------------------------------------------------------------------
/community-website/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yfosp/main-website/HEAD/community-website/public/favicon.ico


--------------------------------------------------------------------------------
/community-website/public/cvcs&dvcs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yfosp/main-website/HEAD/community-website/public/cvcs&dvcs.png


--------------------------------------------------------------------------------
/community-website/public/gitVSgithub.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yfosp/main-website/HEAD/community-website/public/gitVSgithub.png


--------------------------------------------------------------------------------
/community-website/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/community-website/public/git-3-tier-architecture.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yfosp/main-website/HEAD/community-website/public/git-3-tier-architecture.png


--------------------------------------------------------------------------------
/community-website/confetti-js.d.ts:
--------------------------------------------------------------------------------
1 | // Fix for 'Could not find a declaration file for confetti-js module' - https://bobbyhadz.com/blog/typescript-could-not-find-a-declaration-file-for-module
2 | declare module 'confetti-js';


--------------------------------------------------------------------------------
/.github/holopin.yml:
--------------------------------------------------------------------------------
1 | organization: yfosp
2 | defaultSticker: cluciwd4c06100fl8nkzx8dle
3 | stickers:
4 |   - id: cluciwd4c06100fl8nkzx8dle
5 |     alias: Your-First-Open-Source-Contribution-Badge
6 |   # - id:
7 |   #   alias:
8 |   # more stickers
9 | 


--------------------------------------------------------------------------------
/community-website/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | import type { AppProps } from 'next/app'
3 | 
4 | function MyApp({ Component, pageProps }: AppProps) {
5 |   return <Component {...pageProps} />
6 | }
7 | 
8 | export default MyApp
9 | 


--------------------------------------------------------------------------------
/community-website/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: 'class',
 4 |   content: [
 5 |     "./pages/**/*.{js,jsx,ts,tsx}",
 6 |     "./components/**/*.{js,jsx,ts,tsx}",
 7 |   ],
 8 |   theme: {
 9 |     extend: {},
10 |   },
11 |   plugins: [],
12 | }


--------------------------------------------------------------------------------
/community-website/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: true,
 4 |   swcMinify: true,
 5 |   images: {
 6 |     domains: ["images.unsplash.com", "tailwindui.com", 'avatars.githubusercontent.com', 'localhost:3000'],
 7 |   },
 8 | }
 9 | 
10 | module.exports = nextConfig
11 | 


--------------------------------------------------------------------------------
/community-website/pages/api/hello.ts:
--------------------------------------------------------------------------------
 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 2 | import type { NextApiRequest, NextApiResponse } from 'next'
 3 | 
 4 | type Data = {
 5 |   name: string
 6 | }
 7 | 
 8 | export default function handler(
 9 |   req: NextApiRequest,
10 |   res: NextApiResponse<Data>
11 | ) {
12 |   res.status(200).json({ name: 'John Doe' })
13 | }
14 | 


--------------------------------------------------------------------------------
/.github/workflows/auto-assign.yml:
--------------------------------------------------------------------------------
 1 | name: Auto Assign
 2 | on:
 3 |   issues:
 4 |     types: [opened]
 5 |   pull_request_target:
 6 |     types: [opened]
 7 |   push:
 8 | jobs:
 9 |   run:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - uses: wow-actions/auto-assign@v1
13 |         with:
14 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
15 |           CONFIG_FILE: .github/auto-assign.yml
16 | 


--------------------------------------------------------------------------------
/community-website/.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 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.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 | 


--------------------------------------------------------------------------------
/community-website/utils/utils.ts:
--------------------------------------------------------------------------------
 1 | export function truncateNames(): void {
 2 |   const subscriptElements = document.getElementsByTagName("sub");
 3 |   const subscriptElementsArray = Array.from(subscriptElements);
 4 |   if (subscriptElementsArray !== null) {
 5 |     subscriptElementsArray.forEach((subscriptElement) => {
 6 |       const wordLength = subscriptElement?.textContent?.length || 0;
 7 |       if (wordLength > 13) {
 8 |         subscriptElement.innerHTML =
 9 |           "<b>" + subscriptElement?.textContent?.substr(0, 10) + "..." + "</b>";
10 |       }
11 |     });
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/community-website/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true
17 |   },
18 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19 |   "exclude": ["node_modules"]
20 | }
21 | 


--------------------------------------------------------------------------------
/community-website/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | html,
 6 | body {
 7 |   padding: 0;
 8 |   margin: 0;
 9 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
10 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
11 | }
12 | 
13 | a {
14 |   color: inherit;
15 |   text-decoration: none;
16 | }
17 | 
18 | * {
19 |   box-sizing: border-box;
20 | }
21 | 
22 | @media (prefers-color-scheme: dark) {
23 |   html {
24 |     color-scheme: dark;
25 |   }
26 |   body {
27 |     color: white;
28 |     background: black;
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/.github/auto-assign.yml:
--------------------------------------------------------------------------------
 1 | # Set to true to add reviewers to issues/PRs
 2 | addReviewers: true
 3 | 
 4 | # Set to 'author' to add issue's/PR's author as a assignee
 5 | addAssignees: author
 6 | 
 7 | # A list of reviewers to be added to issues/PRs (GitHub user name)
 8 | reviewers:
 9 |   - melvincwng
10 | 
11 | # A number of reviewers added to the issues/PRs
12 | # Set 0 to add all the reviewers (default: 0)
13 | numberOfReviewers: 0
14 | 
15 | # A number of assignees to add to the issues/PRs
16 | # Set to 0 to add all of the assignees
17 | # If unset, it uses numberOfReviewers, hence also setting reviewers as assignees
18 | numberOfAssignees: 0
19 | 
20 | # A list of keywords to be skipped the process if issue/PR's title include it
21 | skipKeywords:
22 |   - wip
23 | 


--------------------------------------------------------------------------------
/community-website/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "community-website",
 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 |     "@headlessui/react": "^1.7.3",
13 |     "@heroicons/react": "^2.0.12",
14 |     "confetti-js": "^0.0.18",
15 |     "next": "12.3.1",
16 |     "react": "18.2.0",
17 |     "react-dom": "18.2.0",
18 |     "react-toggle-dark-mode": "^1.1.0",
19 |     "typed.js": "^2.0.12"
20 |   },
21 |   "devDependencies": {
22 |     "@types/node": "18.8.2",
23 |     "@types/react": "^18.0.28",
24 |     "@types/react-dom": "^18.0.11",
25 |     "autoprefixer": "^10.4.12",
26 |     "eslint": "^8.24.0",
27 |     "eslint-config-next": "12.3.1",
28 |     "postcss": "^8.4.17",
29 |     "tailwindcss": "^3.1.8",
30 |     "typescript": "4.8.4"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/community-website/components/NavBar.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { Disclosure } from '@headlessui/react';
 3 | import DarkModeButton from "./DarkModeButton";
 4 | 
 5 | export default function NavBar() {
 6 |   return (
 7 |     <Disclosure as="nav">
 8 |       {({ open }) => (
 9 |         <>
10 |           <div className="mx-auto px-2 sm:px-6 lg:px-8">
11 |             <div className="relative flex h-16 items-center justify-between">
12 |               <div className="flex flex-1 items-center sm:items-stretch sm:justify-start">
13 |               </div>
14 |               <div>
15 |                 <button
16 |                   type="button"
17 |                   className="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
18 |                 >
19 |                   <DarkModeButton></DarkModeButton>
20 |                 </button>
21 |               </div>
22 |             </div>
23 |           </div>
24 |         </>
25 |       )}
26 |     </Disclosure>
27 |   )
28 | }
29 | 


--------------------------------------------------------------------------------
/community-website/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Your First Open Source Project
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/community-website/netlify.toml:
--------------------------------------------------------------------------------
 1 | # The easiest way to deploy Next.js apps is to use Vercel
 2 | # However, Vercel does not allow code repositories belonging to a GitHub Organization to be deployed in their 'Free' account (need to pay)
 3 | # Hence, alternative choice is to use Netlify
 4 | # Tried multiple configurations in the 'Build & Deploy' settings but to no avail in deploying the Next.js apps on Netlify
 5 | # Eventually, discovered a solution which is to add a netlify.toml config file which essentially handles the build process for us (See below references)
 6 | # And also make sure your 'Build & Deploy' settings are still correct (refer to Netlify's settings for more details)
 7 | # Reference 1: https://bilalsevinc.medium.com/how-to-deploy-next-js-site-to-netlify-without-page-not-found-error-7b46e73a66a3 (Do not use the [[redirects]], as it will cause CSS issues)
 8 | # Reference 2: https://www.npmjs.com/package/@netlify/plugin-nextjs (need to npm install this plugin)
 9 | # Reference 3: https://answers.netlify.com/t/nextjs-netlify-deploy-not-rendering-css/64278/4 (If you use [[redirects]] from reference 1, your Next.js app will have no CSS)
10 | 
11 | [build]
12 |   command = "npm run build"
13 |   publish = ".next"
14 | 
15 | [[plugins]]
16 |   package = "@netlify/plugin-nextjs"


--------------------------------------------------------------------------------
/community-website/components/DarkModeButton.tsx:
--------------------------------------------------------------------------------
 1 | // Dark mode is made possible using a) react-toggle-dark-mode & b) tailwind-CSS
 2 | // Reference: https://github.com/JoseRFelix/react-toggle-dark-mode && https://tailwindcss.com/docs/dark-mode
 3 | 
 4 | import React, { useState, useEffect } from "react";
 5 | import { DarkModeSwitch } from "react-toggle-dark-mode";
 6 | 
 7 | export default function DarkModeButton() {
 8 |   const [darkMode, setDarkMode] = useState(() => {
 9 |     if (typeof window !== "undefined") {
10 |       return (
11 |         localStorage.theme === "dark" ||
12 |         (!("theme" in localStorage) &&
13 |           window.matchMedia("(prefers-color-scheme: dark)").matches)
14 |       );
15 |     }
16 |     return false;
17 |   });
18 | 
19 |   useEffect(() => {
20 |     if (darkMode) {
21 |       document.documentElement.classList.add("dark");
22 |       localStorage.setItem("theme", "dark");
23 |     } else {
24 |       document.documentElement.classList.remove("dark");
25 |       localStorage.setItem("theme", "light");
26 |     }
27 |   }, [darkMode]);
28 | 
29 |   const toggleDarkMode = (checked: boolean) => {
30 |     setDarkMode(checked);
31 |   };
32 | 
33 |   return (
34 |     <DarkModeSwitch
35 |       checked={darkMode}
36 |       onChange={toggleDarkMode}
37 |       size={24}
38 |       sunColor={"white"}
39 |     />
40 |   );
41 | }
42 | 


--------------------------------------------------------------------------------
/community-website/public/earth-asia-solid.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="#a9cce9" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M51.7 295.1l31.7 6.3c7.9 1.6 16-.9 21.7-6.6l15.4-15.4c11.6-11.6 31.1-8.4 38.4 6.2l9.3 18.5c4.8 9.6 14.6 15.7 25.4 15.7c15.2 0 26.1-14.6 21.7-29.2l-6-19.9c-4.6-15.4 6.9-30.9 23-30.9h2.3c13.4 0 25.9-6.7 33.3-17.8l10.7-16.1c5.6-8.5 5.3-19.6-.8-27.7l-16.1-21.5c-10.3-13.7-3.3-33.5 13.4-37.7l17-4.3c7.5-1.9 13.6-7.2 16.5-14.4l16.4-40.9C303.4 52.1 280.2 48 256 48C141.1 48 48 141.1 48 256c0 13.4 1.3 26.5 3.7 39.1zm407.7 4.6c-3-.3-6-.1-9 .8l-15.8 4.4c-6.7 1.9-13.8-.9-17.5-6.7l-2-3.1c-6-9.4-16.4-15.1-27.6-15.1s-21.6 5.7-27.6 15.1l-6.1 9.5c-1.4 2.2-3.4 4.1-5.7 5.3L312 330.1c-18.1 10.1-25.5 32.4-17 51.3l5.5 12.4c8.6 19.2 30.7 28.5 50.5 21.1l2.6-1c10-3.7 21.3-2.2 29.9 4.1l1.5 1.1c37.2-29.5 64.1-71.4 74.4-119.5zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM144.5 348.1c-2.1 8.6 3.1 17.3 11.6 19.4l32 8c8.6 2.1 17.3-3.1 19.4-11.6s-3.1-17.3-11.6-19.4l-32-8c-8.6-2.1-17.3 3.1-19.4 11.6zm92-20c-2.1 8.6 3.1 17.3 11.6 19.4s17.3-3.1 19.4-11.6l8-32c2.1-8.6-3.1-17.3-11.6-19.4s-17.3 3.1-19.4 11.6l-8 32zM343.2 113.7c-7.9-4-17.5-.7-21.5 7.2l-16 32c-4 7.9-.7 17.5 7.2 21.5s17.5 .7 21.5-7.2l16-32c4-7.9 .7-17.5-7.2-21.5z"/></svg>


--------------------------------------------------------------------------------
/community-website/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
16 | 
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
18 | 
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------
/community-website/styles/Home.module.css:
--------------------------------------------------------------------------------
  1 | .container {
  2 |   padding: 0 2rem;
  3 | }
  4 | 
  5 | .main {
  6 |   min-height: 100vh;
  7 |   padding: 0 0 2rem;
  8 |   flex: 1;
  9 |   display: flex;
 10 |   flex-direction: column;
 11 |   justify-content: center;
 12 |   align-items: center;
 13 | }
 14 | 
 15 | .communityMembers,
 16 | .contributors {
 17 |   min-height: 80vh;
 18 |   padding: 0 0 6rem;
 19 |   flex: 1;
 20 |   display: flex;
 21 |   flex-direction: column;
 22 |   align-items: center;
 23 | }
 24 | 
 25 | .communityGuidelines,
 26 | .learnGitAndGitHub {
 27 |   min-height: 80vh;
 28 |   padding: 0 0 2rem;
 29 |   flex: 1;
 30 |   display: flex;
 31 |   flex-direction: column;
 32 |   align-items: center;
 33 | }
 34 | 
 35 | .educationalResources {
 36 |   min-height: 86vh;
 37 |   padding: 0 0 2rem;
 38 |   flex: 1;
 39 |   display: flex;
 40 |   flex-direction: column;
 41 |   align-items: center;
 42 | }
 43 | 
 44 | .educationalResourcesContainer {
 45 |   display: flex;
 46 |   flex-direction: row;
 47 | }
 48 | 
 49 | .footer {
 50 |   display: flex;
 51 |   flex: 1;
 52 |   padding: 2rem 0;
 53 |   border-top: 1px solid #eaeaea;
 54 |   justify-content: center;
 55 |   align-items: center;
 56 |   text-align: center;
 57 | }
 58 | 
 59 | .footer a {
 60 |   display: flex;
 61 |   justify-content: center;
 62 |   align-items: center;
 63 |   flex-grow: 1;
 64 | }
 65 | 
 66 | .title a {
 67 |   color: #0070f3;
 68 |   text-decoration: none;
 69 | }
 70 | 
 71 | .title a:hover,
 72 | .title a:focus,
 73 | .title a:active {
 74 |   text-decoration: underline;
 75 | }
 76 | 
 77 | .title {
 78 |   margin: 0;
 79 |   line-height: 1.15;
 80 |   font-size: 3rem;
 81 |   font-weight: bold;
 82 | }
 83 | 
 84 | .title,
 85 | .description {
 86 |   text-align: center;
 87 | }
 88 | 
 89 | .educationalLinks {
 90 |   color: #0070f3;
 91 | }
 92 | 
 93 | .educationalLinks a:hover,
 94 | .educationalLinks a:focus,
 95 | .educationalLinks a:active {
 96 |   text-decoration: underline;
 97 | }
 98 | 
 99 | .description {
100 |   margin: 4rem 0;
101 |   line-height: 1.5;
102 |   font-size: 1.25rem;
103 | }
104 | 
105 | .code {
106 |   background: #fafafa;
107 |   border-radius: 5px;
108 |   padding: 0.75rem;
109 |   font-size: 1.1rem;
110 |   font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
111 |     Bitstream Vera Sans Mono, Courier New, monospace;
112 | }
113 | 
114 | .grid {
115 |   display: flex;
116 |   align-items: center;
117 |   justify-content: center;
118 |   flex-wrap: wrap;
119 |   max-width: 800px;
120 | }
121 | 
122 | .card {
123 |   margin: 1rem;
124 |   padding: 1.5rem;
125 |   text-align: left;
126 |   color: inherit;
127 |   text-decoration: none;
128 |   border: 1px solid #eaeaea;
129 |   border-radius: 10px;
130 |   transition: color 0.15s ease, border-color 0.15s ease;
131 |   max-width: 300px;
132 | }
133 | 
134 | .card:hover,
135 | .card:focus,
136 | .card:active {
137 |   color: #0070f3;
138 |   border-color: #0070f3;
139 | }
140 | 
141 | .card h2 {
142 |   margin: 0 0 1rem 0;
143 |   font-size: 1.5rem;
144 | }
145 | 
146 | .card p {
147 |   margin: 0;
148 |   font-size: 1.25rem;
149 |   line-height: 1.5;
150 | }
151 | 
152 | .logo {
153 |   height: 1em;
154 |   margin-left: 0.5rem;
155 | }
156 | 
157 | .canvas {
158 |   position: fixed;
159 |   top: 0;
160 |   left: 0;
161 |   z-index: -1;
162 |   width: 100%;
163 |   height: 100%;
164 | }
165 | 
166 | .profileImage {
167 |   max-width: none;
168 | }
169 | 
170 | .tableData {
171 |   width: 16.66%;
172 | }
173 | 
174 | .wrapperDiv {
175 |   overflow-x: auto !important;
176 | }
177 | 
178 | @media (max-width: 600px) {
179 |   .grid {
180 |     width: 100%;
181 |     flex-direction: column;
182 |   }
183 | 
184 |   .wrapperDiv {
185 |     width: 100%;
186 |     overflow-x: auto !important;
187 |   }
188 | }
189 | 
190 | @media (max-width: 480px) {
191 |   .educationalResourcesContainer {
192 |     flex-direction: column;
193 |   }
194 | }
195 | 
196 | @media (prefers-color-scheme: dark) {
197 |   .card,
198 |   .footer {
199 |     border-color: #222;
200 |   }
201 |   .logo img {
202 |     filter: invert(1);
203 |   }
204 | }
205 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 'Your First Open Source Project' Community Website
 2 | 
 3 | A community-driven initiative built & maintained by the community for the community during Hacktoberfest 🔥
 4 | 
 5 | ![HackToberFest image](./images/HackToberFest.PNG)
 6 | 
 7 | <table>
 8 | <tr>
 9 | <td>
10 |   This repository is an initiative that aims to help beginners kickstart their open-source journey and successfully submit their first pull request (PR) for Hacktoberfest. It is also a safe space for everyone regardless of their skill level and we welcome participants from all around the world with different experiences, unique perspectives, and great ideas.
11 | </td>
12 | </tr>
13 | </table>
14 | 
15 | Need info? 
16 | 
17 | Check the [website](https://yfosp.netlify.app/)
18 | | or [Create an issue](https://github.com/yfosp/main-website/issues/new)
19 | | or [Feature request?](https://github.com/yfosp/main-website/issues/new)
20 | | Support us on [GitHub sponsors](https://github.com/sponsors/melvincwng)
21 | 
22 | ## Getting Started 🥳
23 | 
24 | We believe we can build a welcoming and inclusive community if we all:
25 | - Use welcoming and inclusive language
26 | - Attempt collaboration before conflict
27 | - Are respectful of everyone's opinions, perspectives, viewpoints and experiences
28 | - Can give and accept constructive feedback
29 | - Accept responsibility and apologize to those affected by our actions and mistakes
30 | - Focus on what is best for the community
31 | 
32 | ## Contributors 🎉
33 | This project exists thanks to all the people who contribute! ❤️ 💙
34 | 
35 | Shoutout to our [contributors](https://yfosp.netlify.app/contributors) 🎉
36 | 
37 | ## How to contribute? ⭐ 
38 | 
39 | Before making any contributions, please take a look at our [Community Guidelines](https://yfosp.netlify.app/community-guidelines) and take a look at the [existing Issues](https://github.com/yfosp/main-website/issues) or create a [new issue](https://github.com/yfosp/main-website/issues/new)!
40 | 
41 | Wanna make a contribution but don't know how? Please follow the steps below.
42 | 
43 | 1. Install [Visual Studio Code](https://code.visualstudio.com/) and create a Git (not GitHub) account
44 | 
45 |    * Open the terminal in Visual Studio Code
46 |    * Type `git --version` in a directory of your choice - you should see the version of Git that you downloaded. If you see an error, close and reopen VS Code and try again
47 |    * Set your user name with 
48 |    `git config --global user.name "<your-first-name> <your-last-name>"` - replace the `<placeholders>` with the real values
49 |    * Set your email address with 
50 |    `git config --global user.email "<your-email-here>"`- replace the `<placeholder>` with the real values (your email address should match the one with which you signed up for your GitHub account)
51 | 
52 | 2.  Fork this repository. This will create a copy of this repo in your GitHub account:
53 |     * Open [yfosp/main-website](https://github.com/yfosp/main-website) (this repository)
54 |     * Select **Fork** and  * Make a [Fork](https://github.com/yfosp/main-website/fork) --> The URL of your fork is now `https://github.com/<YOUR GITHUB ACCOUNT>/main-website`
55 | 
56 | 3. Clone the repository
57 | 
58 | 4. Make changes 
59 | 
60 | 5. Commit and push your changes to your fork
61 |     * type `git add .` (yes, there is a space (` `) between `add` and the `.`) - this adds all changes to staging area
62 |     * type `git commit -m "YOUR COMMIT MESSAGE"` - this will commit your changes with the messages
63 |     * type `git push` to push the changes to your remote fork
64 |   
65 | 6. Make a Pull Request
66 | 
67 | ## What kind of contributions can I make? 💖
68 | 
69 | - Fixing grammar mistakes or typos
70 | - Editing or suggesting changes
71 | - Contributing to the content and resources of the repo
72 | - Fix bugs/minor issues
73 | - Automate the process of this repo with GitHub actions
74 | 
75 | ## Status 🌐
76 | - The community website is **fully developed** and built using **Next.js & TypeScript**
77 | - Enhancements or bug fixes to this community codebase are still accepted
78 | - Don't forget to **follow me [@melvincwng](https://github.com/melvincwng)**, **star this repo**, and **[join/follow our organization](https://github.com/yfosp)**
79 | 
80 | <h1 align='center'>
81 |   <i>Stay awesome & Happy Hacktoberfest </i>
82 |   🎃🎃🎃
83 |   <i>!</i>
84 | </h1>
85 | 


--------------------------------------------------------------------------------
/COMMUNITY_GUIDELINES.md:
--------------------------------------------------------------------------------
 1 | # Community Guidelines (Code of Conduct)
 2 | 
 3 | Like any other open-source organization, this organization is made up of a diverse group of individuals from around the globe who work on every facet of its goals. This diversity is one of its strengths, but it can also lead to communication issues and unhappiness. To that end, we have a few ground rules that we ask people to adhere to. This code applies equally to founders, mentors and those seeking help and guidance.
 4 | 
 5 | We take pride in being inclusive and treating everyone with respect,
 6 | regardless of gender identity and expression, sexual orientation, disabilities, neurodiversity, physical appearance, body size, ethnicity, nationality, race, age, religion, or similar personal characteristics.
 7 | We love the diverse opinions of our contributors and maintainers; therefore, we expect you to.
 8 | 
 9 | The subsequent subsections go into further detail about our community's guidelines and standards.
10 | 
11 | ## 1. Be more considerate, kind, constructive, and helpful
12 | 
13 | We want to create a community where everyone feels welcome and receives support from people of different backgrounds and identities.
14 | 
15 | Thus, we believe we can achieve this by building a positive, welcoming environment where everyone feels safe to share ideas, thoughts, and feedback.
16 | As you contribute, try to be supportive, respect individual opinions, and report inappropriate posts if needed.
17 | 
18 | Respectful and constructive communication is encouraged and appreciated. We believe that everyone has the right to express their opinions and that constructive criticism is essential to the growth of the project.
19 | 
20 | However, we also believe that everyone has the right to have their opinions heard, and that any form of harassment or personal attacks is completely unacceptable.
21 | 
22 | ## 2. Expected behavior and choice of words matters
23 | 
24 | We are a very diverse community. Thus, it would help if you acted professionally.
25 | Therefore, you are to work in a manner that includes but is not restricted to:
26 | 
27 | 1. Don't use violent threats or language directed against another individual.
28 | 2. Consider collaboration before conflict.
29 | 3. No discriminatory jokes, insults, and language. This includes discriminatory behavior and speech, especially racist, homophobic, sexist, ageist, or demeaning words.
30 | 4. Do not post sexually explicit or violent material.
31 | 5. No unwelcome sexual attention.
32 | 6. Do not advocate for or encourage any of the above behavior.
33 | 7. In general, if someone asks you to stop, then stop.
34 | 8. Participate authentically and actively to contribute to this community's health and longevity.
35 | 
36 | Be mindful of your fellow participants and please report any cases of harassment by alerting community leaders if you notice a dangerous situation, someone in distress, or violations of this Code of Conduct, even if they seem inconsequential.
37 | 
38 | ## 3. Disagreements
39 | 
40 | Disagreements are bound to happen, primarily because of the community's diversity. The strength of the project comes from its diversity. It is, however, important that we resolve disagreements constructively. Another individual having a different perspective or viewpoint on issues doesn't mean they're wrong. Don't forget that it is human to err, and blaming each other doesn't get us anywhere. Instead, focus on helping to resolve issues and learning from mistakes.
41 | 
42 | ## 4. Zero tolerance for harassment & Unacceptable behavior
43 | 
44 | Be respectful of everyone's ideas and perspectives on a problem. Don't directly attack a person. We will not tolerate any posts, comments, or messages to fellow contributors, admins, sponsors, or maintainers that are inappropriate, rude, or aggressive. This includes posts that spread misinformation and are disruptive to the communities.
45 | 
46 | Suppose a community member engages in unacceptable behavior. In that case, the community maintainers may take any action they deem appropriate, including a temporary ban or permanent expulsion from the community without warning (and without refund in the case of a paid event).
47 | 
48 | ## 5. Reporting guidelines
49 | 
50 | If you are subject to or witness unacceptable behavior, or have any other concerns, please notify the organization owner @melvincwng as soon as possible via email at: melvin.ng@outlook.sg.
51 | 
52 | Each complaint will be investigated. We shall use our discretion to decide when and how to respond to reported incidents, with options ranging from taking no action to banning someone permanently from the project and spaces sponsored by the project.
53 | 
54 | However, before taking further action, we will inform the accused of the report and give them a chance to speak about it. But we will act without warning in potentially hazardous circumstances, such as persistent harassment or threats to anyone's safety.
55 | 
56 | Written by [melvincwng](https://github.com/melvincwng) & [Bennykillua](https://github.com/Bennykillua)
57 | 


--------------------------------------------------------------------------------
/community-website/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import type { NextPage } from "next";
  2 | import Head from "next/head";
  3 | import styles from "../styles/Home.module.css";
  4 | import { useRef, useEffect } from "react";
  5 | import Typed from "typed.js";
  6 | import ConfettiGenerator from "confetti-js";
  7 | import NavBar from "../components/NavBar";
  8 | import Link from "next/link";
  9 | 
 10 | const Home: NextPage = () => {
 11 |   const typed = useRef<null | Typed>(null);
 12 | 
 13 |   useEffect(() => {
 14 |     const options = {
 15 |       strings: [
 16 |         "Get started with Your First Open Source Project!",
 17 |         "Submit your first open source contribution now!",
 18 |         "Join our awesome community of 350+ members!",
 19 |       ],
 20 |       typeSpeed: 75,
 21 |       backSpeed: 75,
 22 |     };
 23 | 
 24 |     // #typing-element refers to the <code> rendered below
 25 |     typed.current = new Typed("#typing-element", options);
 26 | 
 27 |     return () => {
 28 |       // Destroy Typed instance during cleanup to prevent memory leaks
 29 |       typed.current?.destroy();
 30 |     };
 31 |   }, []);
 32 | 
 33 |   useEffect(() => {
 34 |     const confettiSettings = { target: "confetti-canvas" };
 35 |     const confetti = new ConfettiGenerator(confettiSettings);
 36 |     confetti.render();
 37 | 
 38 |     return () => confetti.clear();
 39 |   }, []);
 40 | 
 41 |   return (
 42 |     <div className={styles.container}>
 43 |       <Head>
 44 |         <title>Your First Open Source Project</title>
 45 |         <meta name="description" content="YFOSP Community Website" />
 46 |         <link rel="icon" href="/earth-asia-solid.svg" />
 47 |       </Head>
 48 | 
 49 |       <canvas
 50 |         id="confetti-canvas"
 51 |         className={`${styles.canvas} bg-white dark:bg-black`}
 52 |         style={{}}
 53 |       ></canvas>
 54 | 
 55 |       <main className={`${styles.main} text-black dark:text-white`}>
 56 |         <NavBar></NavBar>
 57 | 
 58 |         <h1 className={styles.title}>
 59 |           Welcome to{" "}
 60 |           <a
 61 |             href="https://github.com/yfosp/main-website"
 62 |             target="_blank"
 63 |             rel="noopener noreferrer"
 64 |           >
 65 |             Your First Open Source Project!
 66 |           </a>
 67 |         </h1>
 68 | 
 69 |         <p className={styles.description}>
 70 |           <code
 71 |             className={`${styles.code} dark:bg-black`}
 72 |             id="typing-element"
 73 |           ></code>
 74 |         </p>
 75 | 
 76 |         <div className={styles.grid}>
 77 |           <Link href="./community-members">
 78 |             <a className={styles.card}>
 79 |               <h2>Our Community &rarr;</h2>
 80 |               <p>Find information about our community members here 👬</p>
 81 |             </a>
 82 |           </Link>
 83 | 
 84 |           <Link href="./contributors">
 85 |             <a className={styles.card}>
 86 |               <h2>Our Contributors &rarr;</h2>
 87 |               <p>
 88 |                 Learn about those who created this website using Next.js &
 89 |                 TypeScript 💻
 90 |               </p>
 91 |             </a>
 92 |           </Link>
 93 | 
 94 |           <Link href="./community-guidelines">
 95 |             <a className={styles.card}>
 96 |               <h2>Our Guidelines &rarr;</h2>
 97 |               <p>
 98 |                 The Code of Conduct that everyone has to follow in the
 99 |                 organization 👨‍💻
100 |               </p>
101 |             </a>
102 |           </Link>
103 | 
104 |           <Link href="./educational-resources">
105 |             <a className={styles.card}>
106 |               <h2>Education Resources &rarr;</h2>
107 |               <p>Various educational resources for your learning journey 📖</p>
108 |             </a>
109 |           </Link>
110 | 
111 |           <Link href="./learn-git-and-github">
112 |             <a className={styles.card}>
113 |               <h2>Learn Git & GitHub &rarr;</h2>
114 |               <p>
115 |                 Learn about Git & GitHub - the Fundamentals for Open Source 🌍
116 |               </p>
117 |             </a>
118 |           </Link>
119 | 
120 |           <Link href="https://github.com/yfosp" passHref>
121 |             <a
122 |               className={styles.card}
123 |               target="_blank"
124 |               rel="noopener noreferrer"
125 |             >
126 |               <h2>Find us on GitHub &rarr;</h2>
127 |               <p>Join our wonderful & growing community of 350+ people 💖</p>
128 |             </a>
129 |           </Link>
130 |         </div>
131 |       </main>
132 | 
133 |       <footer className={`${styles.footer} text-black dark:text-white`}>
134 |         <a
135 |           href="https://hacktoberfest.com/"
136 |           target="_blank"
137 |           rel="noopener noreferrer"
138 |         >
139 |           Created by the community for Hacktoberfest with ❤️
140 |         </a>
141 |       </footer>
142 |     </div>
143 |   );
144 | };
145 | 
146 | export default Home;
147 | 


--------------------------------------------------------------------------------
/CONTRIBUTORS.md:
--------------------------------------------------------------------------------
  1 | <h1> Contributors to our Community Website for Hacktoberfest 🌐</h1>
  2 | 
  3 | <!-- CONTRIBUTORS.md START -->
  4 | <!--
  5 |   Each <tr></tr> element contains MAX 6 <td></td> elements.
  6 |   Please begin with a new <tr></tr> element if the previous one is already full.
  7 | -->
  8 | 
  9 | <table>
 10 |   <tbody>
 11 |     <tr>
 12 |       <td align="center">
 13 |           <a href="https://github.com/melvincwng" target="_blank" rel="noopener noreferrer">
 14 |               <img
 15 |                 src="https://avatars.githubusercontent.com/u/77479885?v=4"
 16 |                 width="85"
 17 |                 alt="melvincwng"
 18 |               />
 19 |               <br />
 20 |               <sub><b>melvincwng</b></sub>
 21 |           </a>
 22 |       </td>
 23 |       <td align="center">
 24 |           <a href="https://github.com/pink-bean" target="_blank" rel="noopener noreferrer">
 25 |               <img
 26 |                 src="https://avatars.githubusercontent.com/u/81615152?v=4"
 27 |                 width="85"
 28 |                 alt="pink-bean"
 29 |               />
 30 |               <br />
 31 |               <sub><b>pink-bean</b></sub>
 32 |           </a>
 33 |       </td>
 34 |       <td align="center">
 35 |           <a href="https://github.com/theadityaagnihotri" target="_blank" rel="noopener noreferrer">
 36 |               <img
 37 |                 src="https://avatars.githubusercontent.com/u/95487342?v=4"
 38 |                 width="85"
 39 |                 alt="theadityaagnihotri"
 40 |               />
 41 |               <br />
 42 |               <sub><b>theadityaagnihotri</b></sub>
 43 |           </a>
 44 |       </td>
 45 |       <td align="center">
 46 |         <a href="https://github.com/GabrielWarner" target="_blank" rel="noopener noreferrer">
 47 |           <img
 48 |             src="https://avatars.githubusercontent.com/u/98490756?v=4"
 49 |             width="85"
 50 |             alt="gabrielwarner"
 51 |           />
 52 |           <br />
 53 |           <sub><b>GabrielWarner</b></sub>
 54 |         </a>
 55 |       </td>
 56 |       <td align="center">
 57 |         <a href="https://github.com/Bennykillua" target="_blank" rel="noopener noreferrer">
 58 |           <img
 59 |             src="https://avatars.githubusercontent.com/u/67695793?v=4"
 60 |             width="85"
 61 |             alt="Bennykillua"
 62 |           />
 63 |           <br />
 64 |           <sub><b>Bennykillua</b></sub>
 65 |         </a>
 66 |       </td>
 67 |       <td align="center">
 68 |         <a href="https://github.com/Mesfrum" target="_blank" rel="noopener noreferrer">
 69 |           <img
 70 |             src="https://avatars.githubusercontent.com/u/99741869?v=4"
 71 |             width="85"
 72 |             alt="Mesfrum"
 73 |           />
 74 |           <br />
 75 |           <sub><b>Mesfrum</b></sub>
 76 |         </a>
 77 |       </td>
 78 |     </tr>
 79 |     <tr>
 80 |       <td align="center">
 81 |         <a href="https://github.com/SuryodayYadav" target="_blank" rel="noopener noreferrer">
 82 |           <img
 83 |             src="https://avatars.githubusercontent.com/u/133846974?v=4"
 84 |             width="85"
 85 |             alt="SuryodayYadav"
 86 |           />
 87 |           <br />
 88 |           <sub><b>SuryodayYadav</b></sub>
 89 |         </a>
 90 |       </td>
 91 |       <td align="center">
 92 |         <a href="https://github.com/sushantjha78" target="_blank" rel="noopener noreferrer">
 93 |           <img
 94 |             src="https://avatars.githubusercontent.com/u/64401703?v=4"
 95 |             width="85"
 96 |             alt="sushantjha78"
 97 |           />
 98 |           <br />
 99 |           <sub><b>sushantjha78</b></sub>
100 |         </a>
101 |       </td>
102 |       <td align="center">
103 |         <a href="https://github.com/dollarboysushil" target="_blank" rel="noopener noreferrer">
104 |           <img
105 |             src="https://avatars.githubusercontent.com/u/48991715?v=4"
106 |             width="85"
107 |             alt="dollarboysushil"
108 |           />
109 |           <br />
110 |           <sub><b>dollarboysushil</b></sub>
111 |         </a>
112 |       </td>
113 |       <td align="center">
114 |         <a href="https://github.com/avyuktsoni0731" target="_blank" rel="noopener noreferrer">
115 |           <img
116 |             src="https://avatars.githubusercontent.com/u/95626105?v=4"
117 |             width="85"
118 |             alt="avyuktsoni0731"
119 |           />
120 |           <br />
121 |           <sub><b>avyuktsoni0731</b></sub>
122 |         </a>
123 |       </td>
124 |       <td align="center">
125 |         <a href="https://github.com/aachal28" target="_blank" rel="noopener noreferrer">
126 |           <img
127 |             src="https://avatars.githubusercontent.com/aachal28"
128 |             width="85"
129 |             alt="aachal28"
130 |           />
131 |           <br />
132 |           <sub><b>aachal28</b></sub>
133 |         </a>
134 |       </td>
135 |       <td align="center">
136 |         <a href="https://github.com/divy-03" target="_blank" rel="noopener noreferrer">
137 |           <img
138 |             src="https://avatars.githubusercontent.com/divy-03"
139 |             width="85"
140 |             alt="divy-03"
141 |           />
142 |           <br />
143 |           <sub><b>divy-03</b></sub>
144 |         </a>
145 |       </td>
146 | 
147 |     </tr>
148 |   </tbody>
149 | </table>
150 | 
151 | <!-- CONTRIBUTORS.md END -->
152 | 


--------------------------------------------------------------------------------
/community-website/pages/educational-resources.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable @next/next/no-img-element */
  2 | import type { NextPage } from "next";
  3 | import { useEffect } from "react";
  4 | import Head from "next/head";
  5 | import styles from "../styles/Home.module.css";
  6 | import Link from "next/link";
  7 | import ConfettiGenerator from "confetti-js";
  8 | import NavBar from "../components/NavBar";
  9 | 
 10 | const EducationalResources: NextPage = () => {
 11 |   useEffect(() => {
 12 |     const confettiSettings = { target: "confetti-canvas" };
 13 |     const confetti = new ConfettiGenerator(confettiSettings);
 14 |     confetti.render();
 15 | 
 16 |     return () => confetti.clear();
 17 |   }, []);
 18 | 
 19 |   return (
 20 |     <div className={styles.container}>
 21 |       <Head>
 22 |         <title>Educational Resources</title>
 23 |         <meta name="description" content="YFOSP Educational Resources" />
 24 |         <link rel="icon" href="/earth-asia-solid.svg" />
 25 |       </Head>
 26 | 
 27 |       <canvas
 28 |         id="confetti-canvas"
 29 |         className={`${styles.canvas} bg-white dark:bg-black`}
 30 |       ></canvas>
 31 | 
 32 |       <main
 33 |         className={`${styles.educationalResources} text-black dark:text-white`}
 34 |       >
 35 |         <NavBar></NavBar>
 36 | 
 37 |         <h1 className={styles.title}>
 38 |           <a
 39 |             href="https://github.com/yfosp/aws-resources"
 40 |             target="_blank"
 41 |             rel="noopener noreferrer"
 42 |           >
 43 |             Educational Resources 📚
 44 |           </a>
 45 |         </h1>
 46 | 
 47 |         <p className={styles.description}>
 48 |           <Link href="/">{"< Go Back"}</Link>
 49 |         </p>
 50 | 
 51 |         <div className={styles.educationalResourcesContainer}>
 52 |           <p>
 53 |             <b>AWS Educational Resources</b>
 54 |             <div className={styles.educationalLinks}>
 55 |               <a
 56 |                 href="https://github.com/melvincwng/AWS-Cloud-Practitioner-Essentials-Training"
 57 |                 target="_blank"
 58 |                 rel="noopener noreferrer"
 59 |               >
 60 |                 AWS Cloud Practitioner Essentials
 61 |               </a>
 62 |               <br />
 63 |               <a
 64 |                 href="https://github.com/melvincwng/AWS-Technical-Essentials-Training"
 65 |                 target="_blank"
 66 |                 rel="noopener noreferrer"
 67 |               >
 68 |                 AWS Technical Essentials
 69 |               </a>
 70 |               <br />
 71 |               <a
 72 |                 href="https://github.com/melvincwng/AWS-Developing-On-AWS-Training"
 73 |                 target="_blank"
 74 |                 rel="noopener noreferrer"
 75 |               >
 76 |                 Developing on AWS
 77 |               </a>
 78 |               <br />
 79 |               <a
 80 |                 href="https://github.com/melvincwng/Architecting-on-AWS-Training"
 81 |                 target="_blank"
 82 |                 rel="noopener noreferrer"
 83 |               >
 84 |                 Architecting on AWS
 85 |               </a>
 86 |               <br />
 87 |             </div>
 88 |           </p>
 89 |           &nbsp;
 90 |           &nbsp;
 91 |           &nbsp;
 92 |           &nbsp;
 93 |           &nbsp;
 94 |           &nbsp;
 95 |           <p>
 96 |             <b>Web Development Resources</b>
 97 |             <div className={styles.educationalLinks}>
 98 |               <a
 99 |                 href="https://roadmap.sh/frontend"
100 |                 target="_blank"
101 |                 rel="noopener noreferrer"
102 |               >
103 |                 Frontend Developer Roadmap
104 |               </a>
105 |               <br />
106 |               <a
107 |                 href="https://roadmap.sh/backend"
108 |                 target="_blank"
109 |                 rel="noopener noreferrer"
110 |               >
111 |                 Backend Developer Roadmap
112 |               </a>
113 |               <br />
114 |               <a
115 |                 href="https://roadmap.sh/full-stack"
116 |                 target="_blank"
117 |                 rel="noopener noreferrer"
118 |               >
119 |                 Full Stack Developer Roadmap
120 |               </a>
121 |               <br />
122 |               <a href="https://github.com/aachal28/Awesome-web-development-resources"
123 |               target="_blank"
124 |               rel="noopener noreferrer"
125 |               >
126 |                 Other Resources
127 |               </a>
128 |               <br />
129 |             </div>
130 |           </p>
131 |           &nbsp;
132 |           &nbsp;
133 |           &nbsp;
134 |           &nbsp;
135 |           &nbsp;
136 |           &nbsp;
137 |           <p>
138 |             <b>GitHub Free Resources</b>
139 |             <div className={styles.educationalLinks}>
140 |               <a
141 |                 href="https://education.github.com/pack"
142 |                 target="_blank"
143 |                 rel="noopener noreferrer"
144 |               >
145 |                 GitHub Student Developer Pack
146 |               </a>
147 |               <br />
148 |             </div>
149 |           </p>
150 |         </div>
151 |       </main>
152 | 
153 |       <footer className={`${styles.footer} text-black dark:text-white`}>
154 |         <a
155 |           href="https://hacktoberfest.com/"
156 |           target="_blank"
157 |           rel="noopener noreferrer"
158 |         >
159 |           Created by the community for Hacktoberfest with ❤️
160 |         </a>
161 |       </footer>
162 |     </div>
163 |   );
164 | };
165 | 
166 | export default EducationalResources;
167 | 


--------------------------------------------------------------------------------
/community-website/styles/LearnGitAndGitHub.module.css:
--------------------------------------------------------------------------------
  1 | .presentationContainer {
  2 |   width: 100%;
  3 |   height: 100%;
  4 |   display: flex;
  5 |   align-items: center;
  6 |   justify-content: center;
  7 |   position: relative;
  8 |   padding: 10px;
  9 |   box-sizing: border-box;
 10 | }
 11 | 
 12 | .slide {
 13 |   width: 100%;
 14 |   max-width: 1000px;
 15 |   min-height: 80vh;
 16 |   background: rgba(255, 255, 255, 0.95);
 17 |   border-radius: 20px;
 18 |   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 19 |   padding: 40px 20px;
 20 |   display: none;
 21 |   flex-direction: column;
 22 |   justify-content: center;
 23 |   color: #333;
 24 |   backdrop-filter: blur(10px);
 25 |   border: 1px solid rgba(255, 255, 255, 0.2);
 26 |   overflow-x: hidden;
 27 |   text-align: center;
 28 | }
 29 | 
 30 | .slide.active {
 31 |   display: flex;
 32 | }
 33 | 
 34 | .slide h1 {
 35 |   font-size: clamp(1.5rem, 5vw, 4em);
 36 |   margin-bottom: 30px;
 37 |   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 38 |   -webkit-background-clip: text;
 39 |   -webkit-text-fill-color: transparent;
 40 |   text-align: center;
 41 | }
 42 | 
 43 | .slide h2 {
 44 |   font-size: clamp(1.2rem, 4vw, 2.5em);
 45 |   margin-bottom: 25px;
 46 |   color: #4a5568;
 47 |   border-bottom: 3px solid #667eea;
 48 |   padding-bottom: 10px;
 49 | }
 50 | 
 51 | .slide h3 {
 52 |   font-size: clamp(1rem, 3vw, 1.8em);
 53 |   margin: 20px 0 15px 0;
 54 |   color: #667eea;
 55 | }
 56 | 
 57 | .slide p,
 58 | .slide li {
 59 |   font-size: clamp(0.9rem, 2.5vw, 1.2em);
 60 |   line-height: 1.5;
 61 |   margin-bottom: 15px;
 62 | }
 63 | 
 64 | .slide ul {
 65 |   margin-left: 20px;
 66 |   margin-bottom: 20px;
 67 | }
 68 | 
 69 | .code-block {
 70 |   background: #2d3748;
 71 |   color: #e2e8f0;
 72 |   padding: 15px;
 73 |   border-radius: 10px;
 74 |   font-family: "Courier New", monospace;
 75 |   margin: 15px 0;
 76 |   border-left: 4px solid #667eea;
 77 |   overflow-x: auto;
 78 | }
 79 | 
 80 | .feature-grid,
 81 | .comparison-table,
 82 | .cvs-vs-dvs {
 83 |   display: grid;
 84 |   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 85 |   gap: 20px;
 86 |   margin: 20px 0;
 87 | }
 88 | 
 89 | .feature-card,
 90 | .comparison-card,
 91 | .server-box,
 92 | .client-box,
 93 | .flow-step,
 94 | .git-area {
 95 |   box-sizing: border-box;
 96 |   min-width: 150px;
 97 |   flex: 1;
 98 | }
 99 | 
100 | .navigation {
101 |   bottom: 10px;
102 |   left: 0;
103 |   width: 100%;
104 |   display: flex;
105 |   justify-content: center;
106 |   gap: 10px;
107 |   padding: 5px 10px;
108 |   z-index: 1000;
109 |   flex-wrap: wrap;
110 |   backdrop-filter: blur(10px);
111 |   margin-top: 30px;
112 | }
113 | 
114 | .slideIndicators {
115 |   display: flex;
116 |   justify-content: center;
117 |   align-items: center;
118 |   gap: 8px;
119 |   margin-top: 24px;
120 |   flex-wrap: wrap;
121 |   padding: 0 20px;
122 | }
123 | 
124 | .slideIndicator {
125 |   width: 24px;
126 |   height: 24px;
127 |   border-radius: 12px;
128 |   background: white;
129 |   cursor: pointer;
130 |   transition: all 0.3s ease;
131 |   border: 1px solid #e2e8f0;
132 |   padding: 0;
133 |   display: flex;
134 |   align-items: center;
135 |   justify-content: center;
136 |   font-size: 12px;
137 |   font-weight: 500;
138 |   color: #4a5568;
139 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
140 | }
141 | 
142 | .slideIndicator:hover {
143 |   transform: translateY(-2px);
144 |   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
145 |   border-color: #cbd5e0;
146 | }
147 | 
148 | .slideIndicator.active {
149 |   background: #2d3748;
150 |   color: white;
151 |   border-color: #2d3748;
152 |   transform: translateY(-1px);
153 |   box-shadow: 0 4px 6px rgba(45, 55, 72, 0.3);
154 | }
155 | 
156 | .navBtn {
157 |   background: rgba(255, 255, 255, 0.2);
158 |   border: 2px solid black;
159 |   color: black;
160 |   padding: 10px 20px;
161 |   border-radius: 50px;
162 |   cursor: pointer;
163 |   font-size: clamp(0.8rem, 2vw, 1rem);
164 |   transition: all 0.3s ease;
165 | }
166 | 
167 | .navBtn:hover {
168 |   background: rgba(255, 255, 255, 0.3);
169 |   transform: translateY(-2px);
170 | }
171 | 
172 | .navBtn:disabled {
173 |   opacity: 0.5;
174 |   cursor: not-allowed;
175 | }
176 | 
177 | .slide-counter {
178 |   position: fixed;
179 |   top: 10px;
180 |   right: 10px;
181 |   background: rgba(255, 255, 255, 0.2);
182 |   padding: 5px 15px;
183 |   border-radius: 25px;
184 |   backdrop-filter: blur(10px);
185 |   font-size: clamp(0.8rem, 2vw, 1rem);
186 | }
187 | 
188 | /* Responsive text alignment and spacing */
189 | .title-slide {
190 |   text-align: center;
191 |   justify-content: center;
192 | }
193 | 
194 | .title-slide h1 {
195 |   font-size: clamp(2rem, 6vw, 4em);
196 | }
197 | 
198 | .title-slide p {
199 |   font-size: clamp(1rem, 3vw, 1.5em);
200 |   opacity: 0.8;
201 | }
202 | 
203 | /* Diagrams and workflow */
204 | .diagram-container,
205 | .git-flow-horizontal,
206 | .branch-diagram,
207 | .github-flow-diagram {
208 |   width: 100%;
209 |   display: flex;
210 |   flex-wrap: wrap;
211 |   justify-content: center;
212 |   gap: 15px;
213 | }
214 | 
215 | .git-area,
216 | .commit-node,
217 | .branch-name,
218 | .flow-step,
219 | .step-number {
220 |   flex: 1 1 auto;
221 | }
222 | 
223 | /* =======================
224 |    Code & Commands
225 |    ======================= */
226 | .codeBlock,
227 | .command {
228 |   background: #2d3748;
229 |   color: #e2e8f0;
230 |   padding: 15px 20px;
231 |   border-radius: 10px;
232 |   font-family: "Courier New", monospace;
233 |   border-left: 4px solid #667eea;
234 |   overflow-x: auto;
235 | }
236 | 
237 | .command-list {
238 |   display: grid;
239 |   grid-template-columns: 1fr 2fr;
240 |   gap: 15px;
241 |   align-items: center;
242 |   margin: 10px 0;
243 | }
244 | 
245 | .command {
246 |   color: #ffd700;
247 |   font-size: 0.9em;
248 |   padding: 8px 12px;
249 |   border-radius: 6px;
250 | }
251 | 
252 | /* Media queries for small devices */
253 | @media (max-width: 768px) {
254 |   .slide {
255 |     padding: 20px 15px;
256 |   }
257 | 
258 |   .feature-grid,
259 |   .comparison-table,
260 |   .cvs-vs-dvs,
261 |   .diagram-container,
262 |   .git-flow-horizontal,
263 |   .branch-diagram,
264 |   .github-flow-diagram {
265 |     flex-direction: column;
266 |     gap: 10px;
267 |   }
268 | 
269 |   .slide h1,
270 |   .slide h2,
271 |   .slide h3,
272 |   .slide p,
273 |   .slide li {
274 |     text-align: center;
275 |   }
276 | 
277 |   .navigation {
278 |     flex-direction: column;
279 |     gap: 8px;
280 |     padding-bottom: 15px;
281 |   }
282 | 
283 |   .slide-counter {
284 |     top: 5px;
285 |     right: 5px;
286 |     padding: 5px 10px;
287 |   }
288 | }
289 | 
290 | :global(.dark) .slide {
291 |   background: rgba(30, 30, 30, 0.95);
292 |   box-shadow: 0 20px 60px rgba(255, 255, 255, 0.1);
293 |   color: #f1f1f1;
294 |   border: 1px solid rgba(255, 255, 255, 0.1);
295 | }
296 | 
297 | :global(.dark) .slide h2 {
298 |   color: #cbd5e0;
299 | }
300 | 
301 | :global(.dark) .navBtn {
302 |   background: rgba(0, 0, 0, 0.2);
303 |   border: 2px solid white;
304 |   color: white;
305 | }
306 | 
307 | :global(.dark) .navBtn:hover {
308 |   background: rgba(0, 0, 0, 0.3);
309 | }
310 | 
311 | :global(.dark) .slide-counter {
312 |   background: rgba(0, 0, 0, 0.2);
313 | }


--------------------------------------------------------------------------------
/community-website/pages/community-guidelines.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable @next/next/no-img-element */
  2 | import type { NextPage } from "next";
  3 | import { useEffect } from "react";
  4 | import Head from "next/head";
  5 | import styles from "../styles/Home.module.css";
  6 | import Link from "next/link";
  7 | import ConfettiGenerator from "confetti-js";
  8 | import NavBar from "../components/NavBar";
  9 | 
 10 | const CommunityGuidelines: NextPage = () => {
 11 |   useEffect(() => {
 12 |     const confettiSettings = { target: "confetti-canvas" };
 13 |     const confetti = new ConfettiGenerator(confettiSettings);
 14 |     confetti.render();
 15 | 
 16 |     return () => confetti.clear();
 17 |   }, []);
 18 | 
 19 |   return (
 20 |     <div className={styles.container}>
 21 |       <Head>
 22 |         <title>Community Guidelines</title>
 23 |         <meta name="description" content="YFOSP Guidelines" />
 24 |         <link rel="icon" href="/earth-asia-solid.svg" />
 25 |       </Head>
 26 | 
 27 |       <canvas
 28 |         id="confetti-canvas"
 29 |         className={`${styles.canvas} bg-white dark:bg-black`}
 30 |       ></canvas>
 31 | 
 32 |       <main
 33 |         className={`${styles.communityGuidelines} text-black dark:text-white`}
 34 |       >
 35 |         <NavBar></NavBar>
 36 | 
 37 |         <h1 className={styles.title}>
 38 |           <a
 39 |             href="https://github.com/yfosp/main-website/blob/main/COMMUNITY_GUIDELINES.md"
 40 |             target="_blank"
 41 |             rel="noopener noreferrer"
 42 |           >
 43 |             Community Guidelines 📜
 44 |           </a>
 45 |         </h1>
 46 | 
 47 |         <p className={styles.description}>
 48 |           <Link href="/">{"< Go Back"}</Link>
 49 |         </p>
 50 | 
 51 |         <div>
 52 |           <p>
 53 |             Like any other open-source organization, this organization is made
 54 |             up of a diverse group of individuals from around the globe who work
 55 |             on every facet of its goals. This diversity is one of its strengths,
 56 |             but it can also lead to communication issues and unhappiness. To
 57 |             that end, we have a few ground rules that we ask people to adhere
 58 |             to. This code applies equally to founders, mentors and those seeking
 59 |             help and guidance.
 60 |           </p>
 61 |           <br />
 62 |           <p>
 63 |             We take pride in being inclusive and treating everyone with respect,
 64 |             regardless of gender identity and expression, sexual orientation,
 65 |             disabilities, neurodiversity, physical appearance, body size,
 66 |             ethnicity, nationality, race, age, religion, or similar personal
 67 |             characteristics. We love the diverse opinions of our contributors
 68 |             and maintainers; therefore, we expect you to.
 69 |           </p>
 70 |           <br />
 71 |           The subsequent subsections go into further detail about our
 72 |           community&apos;s guidelines and standards.
 73 |           <br />
 74 |           <br />
 75 |           <ol>
 76 |             <li>
 77 |               <b>1. Be more considerate, kind, constructive, and helpful</b>
 78 |               <p>
 79 |                 We want to create a community where everyone feels welcome and
 80 |                 receives support from people of different backgrounds and
 81 |                 identities. Thus, we believe we can achieve this by building a
 82 |                 positive, welcoming environment where everyone feels safe to
 83 |                 share ideas, thoughts, and feedback. As you contribute, try to
 84 |                 be supportive, respect individual opinions, and report
 85 |                 inappropriate posts if needed. Respectful and constructive
 86 |                 communication is encouraged and appreciated. We believe that
 87 |                 everyone has the right to express their opinions and that
 88 |                 constructive criticism is essential to the growth of the
 89 |                 project. However, we also believe that everyone has the right to
 90 |                 have their opinions heard, and that any form of harassment or
 91 |                 personal attacks is completely unacceptable.
 92 |               </p>
 93 |             </li>
 94 |             <br />
 95 |             <li>
 96 |               <b>2. Expected behavior and choice of words matters</b>
 97 |               <p>
 98 |                 We are a very diverse community. Thus, it would help if you
 99 |                 acted professionally. Therefore, you are to work in a manner
100 |                 that includes but is not restricted to:
101 |               </p>
102 |               <ul>
103 |                 <li>
104 |                   &emsp; - Don&apos;t use violent threats or language directed
105 |                   against another individual.
106 |                 </li>
107 |                 <li>&emsp; - Consider collaboration before conflict.</li>
108 |                 <li>
109 |                   &emsp; - No discriminatory jokes, insults, and language. This
110 |                   includes discriminatory behavior and speech, especially
111 |                   racist, homophobic, sexist, ageist, or demeaning
112 |                   words.
113 |                 </li>
114 |                 <li>
115 |                   &emsp; - Do not post sexually explicit or violent material.
116 |                 </li>
117 |                 <li>&emsp; - No unwelcome sexual attention.</li>
118 |                 <li>
119 |                   &emsp; - Do not advocate for or encourage any of the above
120 |                   behavior.
121 |                 </li>
122 |                 <li>
123 |                   &emsp; - In general, if someone asks you to stop, then stop.
124 |                 </li>
125 |                 <li>
126 |                   &emsp; - Participate authentically and actively to contribute
127 |                   to this community&apos;s health and longevity.
128 |                 </li>
129 |               </ul>
130 |               <p>
131 |                 Be mindful of your fellow participants and please report any
132 |                 cases of harassment by alerting community leaders if you notice
133 |                 a dangerous situation, someone in distress, or violations of
134 |                 this Code of Conduct, even if they seem inconsequential.
135 |               </p>
136 |             </li>
137 |             <br />
138 |             <li>
139 |               <b>3. Disagreements</b>
140 |               <p>
141 |                 Disagreements are bound to happen, primarily because of the
142 |                 community&apos;s diversity. The strength of the project comes
143 |                 from its diversity. It is, however, important that we resolve
144 |                 disagreements constructively. Another individual having a
145 |                 different perspective or viewpoint on issues doesn&apos;t mean
146 |                 they&apos;re wrong. Don&apos;t forget that it is human to err,
147 |                 and blaming each other doesn&apos;t get us anywhere. Instead,
148 |                 focus on helping to resolve issues and learning from mistakes.
149 |               </p>
150 |             </li>
151 |             <br />
152 |             <li>
153 |               <b>4. Zero tolerance for harassment and unacceptable behavior</b>
154 |               <p>
155 |                 Be respectful of everyone&apos;s ideas and perspectives on a
156 |                 problem. Don&apos;t directly attack a person. We will not
157 |                 tolerate any posts, comments, or messages to fellow
158 |                 contributors, admins, sponsors, or maintainers that are
159 |                 inappropriate, rude, or aggressive. This includes posts that
160 |                 spread misinformation and are disruptive to the communities.
161 |               </p>
162 |               <br />
163 |               <p>
164 |                 Suppose a community member engages in unacceptable behavior. In
165 |                 that case, the community maintainers may take any action they
166 |                 deem appropriate, including a temporary ban or permanent
167 |                 expulsion from the community without warning (and without refund
168 |                 in the case of a paid event).
169 |               </p>
170 |             </li>
171 |             <br />
172 |             <li>
173 |               <b>5. Reporting Guidelines</b>
174 |               <p>
175 |                 If you are subject to or witness unacceptable behavior, or have
176 |                 any other concerns, please notify the organization owner
177 |                 @melvincwng as soon as possible via email at:
178 |                 melvin.ng@outlook.sg.
179 |               </p>
180 |               <br />
181 |               <p>
182 |                 Each complaint will be investigated. We shall use our discretion
183 |                 to decide when and how to respond to reported incidents, with
184 |                 options ranging from taking no action to banning someone
185 |                 permanently from the project and spaces sponsored by the
186 |                 project.
187 |               </p>
188 |               <br />
189 |               <p>
190 |                 However, before taking further action, we will inform the
191 |                 accused of the report and give them a chance to speak about it.
192 |                 But we will act without warning in potentially hazardous
193 |                 circumstances, such as persistent harassment or threats to
194 |                 anyone&apos;s safety.
195 |               </p>
196 |               <br />
197 |               <p>
198 |                 Written by:{" "}
199 |                 <a
200 |                   href="https://github.com/melvincwng"
201 |                   target="_blank"
202 |                   rel="noopener noreferrer"
203 |                   style={{ color: "#0070F3" }}
204 |                 >
205 |                   melvincwng
206 |                 </a>{" "}
207 |                 &{" "}
208 |                 <a
209 |                   href="https://github.com/Bennykillua"
210 |                   target="_blank"
211 |                   rel="noopener noreferrer"
212 |                   style={{ color: "#0070F3" }}
213 |                 >
214 |                   Bennykillua
215 |                 </a>
216 |               </p>
217 |             </li>
218 |           </ol>
219 |         </div>
220 |       </main>
221 | 
222 |       <footer className={`${styles.footer} text-black dark:text-white`}>
223 |         <a
224 |           href="https://hacktoberfest.com/"
225 |           target="_blank"
226 |           rel="noopener noreferrer"
227 |         >
228 |           Created by the community for Hacktoberfest with ❤️
229 |         </a>
230 |       </footer>
231 |     </div>
232 |   );
233 | };
234 | 
235 | export default CommunityGuidelines;
236 | 


--------------------------------------------------------------------------------
/community-website/pages/contributors.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable @next/next/no-img-element */
  2 | import type { NextPage } from "next";
  3 | import { useEffect } from "react";
  4 | import Head from "next/head";
  5 | import styles from "../styles/Home.module.css";
  6 | import Link from "next/link";
  7 | import ConfettiGenerator from "confetti-js";
  8 | import NavBar from "../components/NavBar";
  9 | import { truncateNames } from "../utils/utils";
 10 | 
 11 | const Contributors: NextPage = () => {
 12 |   useEffect(() => {
 13 |     truncateNames();
 14 | 
 15 |     const confettiSettings = { target: "confetti-canvas" };
 16 |     const confetti = new ConfettiGenerator(confettiSettings);
 17 |     confetti.render();
 18 | 
 19 |     return () => confetti.clear();
 20 |   }, []);
 21 | 
 22 |   return (
 23 |     <div className={styles.container}>
 24 |       <Head>
 25 |         <title>Contributors</title>
 26 |         <meta name="description" content="YFOSP Contributors" />
 27 |         <link rel="icon" href="/earth-asia-solid.svg" />
 28 |       </Head>
 29 | 
 30 |       <canvas
 31 |         id="confetti-canvas"
 32 |         className={`${styles.canvas} bg-white dark:bg-black`}
 33 |       ></canvas>
 34 | 
 35 |       <main className={`${styles.contributors} text-black dark:text-white`}>
 36 |         <NavBar></NavBar>
 37 | 
 38 |         <h1 className={styles.title}>
 39 |           <a
 40 |             href="https://github.com/yfosp/main-website/blob/main/CONTRIBUTORS.md"
 41 |             target="_blank"
 42 |             rel="noopener noreferrer"
 43 |           >
 44 |             Our Amazing Contributors ⭐
 45 |           </a>
 46 |         </h1>
 47 | 
 48 |         <p className={styles.description}>
 49 |           <Link href="/">{"< Go Back"}</Link>
 50 |         </p>
 51 | 
 52 |         <div className={styles.wrapperDiv}>
 53 |           <table>
 54 |             <tbody>
 55 |               <tr>
 56 |                 <td align="center" className={styles.tableData}>
 57 |                   <a
 58 |                     href="https://github.com/melvincwng"
 59 |                     target="_blank"
 60 |                     rel="noopener noreferrer"
 61 |                   >
 62 |                     <img
 63 |                       src="https://avatars.githubusercontent.com/u/77479885?v=4"
 64 |                       width="85"
 65 |                       height="85"
 66 |                       alt="melvincwng"
 67 |                       className={styles.profileImage}
 68 |                     />
 69 |                     <br />
 70 |                     <sub>
 71 |                       <b>melvincwng</b>
 72 |                     </sub>
 73 |                   </a>
 74 |                 </td>
 75 |                 <td align="center" className={styles.tableData}>
 76 |                   <a
 77 |                     href="https://github.com/pink-bean"
 78 |                     target="_blank"
 79 |                     rel="noopener noreferrer"
 80 |                   >
 81 |                     <img
 82 |                       src="https://avatars.githubusercontent.com/u/81615152?v=4"
 83 |                       width="85"
 84 |                       height="85"
 85 |                       alt="pink-bean"
 86 |                       className={styles.profileImage}
 87 |                     />
 88 |                     <br />
 89 |                     <sub>
 90 |                       <b>pink-bean</b>
 91 |                     </sub>
 92 |                   </a>
 93 |                 </td>
 94 |                 <td align="center" className={styles.tableData}>
 95 |                   <a
 96 |                     href="https://github.com/theadityaagnihotri"
 97 |                     target="_blank"
 98 |                     rel="noopener noreferrer"
 99 |                   >
100 |                     <img
101 |                       src="https://avatars.githubusercontent.com/u/95487342?v=4"
102 |                       width="85"
103 |                       height="85"
104 |                       alt="theadityaagnihotri"
105 |                       className={styles.profileImage}
106 |                     />
107 |                     <br />
108 |                     <sub>
109 |                       <b>theadityaagnihotri</b>
110 |                     </sub>
111 |                   </a>
112 |                 </td>
113 |                 <td align="center" className={styles.tableData}>
114 |                   <a
115 |                     href="https://github.com/GabrielWarner"
116 |                     target="_blank"
117 |                     rel="noopener noreferrer"
118 |                   >
119 |                     <img
120 |                       src="https://avatars.githubusercontent.com/u/98490756?v=4"
121 |                       width="85"
122 |                       height="85"
123 |                       alt="gabrielwarner"
124 |                       className={styles.profileImage}
125 |                     />
126 |                     <br />
127 |                     <sub>
128 |                       <b>GabrielWarner</b>
129 |                     </sub>
130 |                   </a>
131 |                 </td>
132 |                 <td align="center" className={styles.tableData}>
133 |                   <a
134 |                     href="https://github.com/Bennykillua"
135 |                     target="_blank"
136 |                     rel="noopener noreferrer"
137 |                   >
138 |                     <img
139 |                       src="https://avatars.githubusercontent.com/u/67695793?v=4"
140 |                       width="85"
141 |                       height="85"
142 |                       alt="Bennykillua"
143 |                       className={styles.profileImage}
144 |                     />
145 |                     <br />
146 |                     <sub>
147 |                       <b>Bennykillua</b>
148 |                     </sub>
149 |                   </a>
150 |                 </td>
151 |                 <td align="center" className={styles.tableData}>
152 |                   <a
153 |                     href="https://github.com/Mesfrum"
154 |                     target="_blank"
155 |                     rel="noopener noreferrer"
156 |                   >
157 |                     <img
158 |                       src="https://avatars.githubusercontent.com/u/99741869?v=4"
159 |                       width="85"
160 |                       height="85"
161 |                       alt="Mesfrum"
162 |                       className={styles.profileImage}
163 |                     />
164 |                     <br />
165 |                     <sub>
166 |                       <b>Mesfrum</b>
167 |                     </sub>
168 |                   </a>
169 |                 </td>
170 |               </tr>
171 |               <tr>
172 |                 <td align="center" className={styles.tableData}>
173 |                   <a
174 |                     href="https://github.com/SuryodayYadav"
175 |                     target="_blank"
176 |                     rel="noopener noreferrer"
177 |                   >
178 |                     <img
179 |                       src="https://avatars.githubusercontent.com/u/133846974?v=4"
180 |                       width="85"
181 |                       height="85"
182 |                       alt="SuryodayYadav"
183 |                       className={styles.profileImage}
184 |                     />
185 |                     <br />
186 |                     <sub>
187 |                       <b>SuryodayYadav</b>
188 |                     </sub>
189 |                   </a>
190 |                 </td>
191 |                 <td align="center" className={styles.tableData}>
192 |                   <a
193 |                     href="https://github.com/sushantjha78"
194 |                     target="_blank"
195 |                     rel="noopener noreferrer"
196 |                   >
197 |                     <img
198 |                       src="https://avatars.githubusercontent.com/u/64401703?v=4"
199 |                       width="85"
200 |                       height="85"
201 |                       alt="sushantjha78"
202 |                       className={styles.profileImage}
203 |                     />
204 |                     <br />
205 |                     <sub>
206 |                       <b>sushantjha78</b>
207 |                     </sub>
208 |                   </a>
209 |                 </td>
210 |                 <td align="center" className={styles.tableData}>
211 |                   <a
212 |                     href="https://github.com/dollarboysushil"
213 |                     target="_blank"
214 |                     rel="noopener noreferrer"
215 |                   >
216 |                     <img
217 |                       src="https://avatars.githubusercontent.com/u/48991715?v=4"
218 |                       width="85"
219 |                       height="85"
220 |                       alt="dollarboysushil"
221 |                       className={styles.profileImage}
222 |                     />
223 |                     <br />
224 |                     <sub>
225 |                       <b>dollarboysushil</b>
226 |                     </sub>
227 |                   </a>
228 |                 </td>
229 |                 <td align="center" className={styles.tableData}>
230 |                   <a
231 |                     href="https://github.com/avyuktsoni0731"
232 |                     target="_blank"
233 |                     rel="noopener noreferrer"
234 |                   >
235 |                     <img
236 |                       src="https://avatars.githubusercontent.com/u/95626105?v=4"
237 |                       width="85"
238 |                       height="85"
239 |                       alt="avyuktsoni0731"
240 |                       className={styles.profileImage}
241 |                     />
242 |                     <br />
243 |                     <sub>
244 |                       <b>avyuktsoni0731</b>
245 |                     </sub>
246 |                   </a>
247 |                 </td>
248 |                 <td align="center" className={styles.tableData}>
249 |                   <a
250 |                     href="https://github.com/aachal28"
251 |                     target="_blank"
252 |                     rel="noopener noreferrer"
253 |                   >
254 |                     <img
255 |                       src="https://avatars.githubusercontent.com/aachal28"
256 |                       width="85"
257 |                       height="85"
258 |                       alt="aachal28"
259 |                       className={styles.profileImage}
260 |                     />
261 |                     <br />
262 |                     <sub>
263 |                       <b>aachal28</b>
264 |                     </sub>
265 |                   </a>
266 |                 </td>
267 |                 <td align="center" className={styles.tableData}>
268 |                   <a
269 |                     href="https://github.com/divy-03"
270 |                     target="_blank"
271 |                     rel="noopener noreferrer"
272 |                   >
273 |                     <img
274 |                       src="https://avatars.githubusercontent.com/divy-03"
275 |                       width="85"
276 |                       height="85"
277 |                       alt="divy-03"
278 |                       className={styles.profileImage}
279 |                     />
280 |                     <br />
281 |                     <sub>
282 |                       <b>divy-03</b>
283 |                     </sub>
284 |                   </a>
285 |                 </td>
286 |               </tr>
287 |             </tbody>
288 |           </table>
289 |         </div>
290 |       </main>
291 | 
292 |       <footer className={`${styles.footer} text-black dark:text-white`}>
293 |         <a
294 |           href="https://hacktoberfest.com/"
295 |           target="_blank"
296 |           rel="noopener noreferrer"
297 |         >
298 |           Created by the community for Hacktoberfest with ❤️
299 |         </a>
300 |       </footer>
301 |     </div>
302 |   );
303 | };
304 | 
305 | export default Contributors;
306 | 


--------------------------------------------------------------------------------
/community-website/pages/learn-git-and-github.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable @next/next/no-img-element */
  2 | import type { NextPage } from "next";
  3 | import { useEffect, useRef, useReducer } from "react";
  4 | import Head from "next/head";
  5 | import Link from "next/link";
  6 | import ConfettiGenerator from "confetti-js";
  7 | import NavBar from "../components/NavBar";
  8 | 
  9 | import styles from "../styles/Home.module.css";
 10 | import specificStyles from "../styles/LearnGitAndGitHub.module.css";
 11 | 
 12 | const LearnGitAndGitHub: NextPage = () => {
 13 |   const currentSlide = useRef(0);
 14 |   const slidesRef = useRef<NodeListOf<Element>>();
 15 |   const renderSlideIndicators = () => {
 16 |     if (!slidesRef.current) return null;
 17 |     const totalSlides = slidesRef.current.length;
 18 | 
 19 |     return (
 20 |       <div className={specificStyles.slideIndicators}>
 21 |         {Array.from({ length: totalSlides }, (_, index) => (
 22 |           <button
 23 |             key={index}
 24 |             className={`${specificStyles.slideIndicator} ${
 25 |               index === currentSlide.current ? specificStyles.active : ""
 26 |             }`}
 27 |             onClick={() => showSlide(index)}
 28 |             aria-label={`Go to slide ${index + 1}`}
 29 |             title={`Go to slide ${index + 1}`}
 30 |           >
 31 |             <span>{index + 1}</span>
 32 |           </button>
 33 |         ))}
 34 |       </div>
 35 |     );
 36 |   };
 37 | 
 38 |   const renderButtonsComponent = () => {
 39 |     if (!slidesRef.current) return null;
 40 |     const totalSlides = slidesRef.current.length;
 41 |     const isLastSlide = currentSlide.current === totalSlides - 1;
 42 | 
 43 |     return (
 44 |       <>
 45 |         <div
 46 |           className={`${specificStyles.navigation} ${
 47 |             isLastSlide ? specificStyles.singleButton : ""
 48 |           }`}
 49 |         >
 50 |           <button
 51 |             className={specificStyles.navBtn}
 52 |             id="prev-btn"
 53 |             onClick={previousSlide}
 54 |           >
 55 |             <span style={{ position: 'relative', zIndex: 1 }}>← Previous</span>
 56 |           </button>
 57 |           {!isLastSlide && (
 58 |             <button
 59 |               className={specificStyles.navBtn}
 60 |               id="next-btn"
 61 |               onClick={nextSlide}
 62 |             >
 63 |               <span style={{ position: 'relative', zIndex: 1 }}>Next →</span>
 64 |             </button>
 65 |           )}
 66 |         </div>
 67 |         {renderSlideIndicators()}
 68 |       </>
 69 |     );
 70 |   };
 71 | 
 72 |   // Show slide
 73 |   const [, forceUpdate] = useReducer((x: number) => x + 1, 0);
 74 | 
 75 |   const showSlide = (n: number) => {
 76 |     if (!slidesRef.current) return;
 77 |     const slides = slidesRef.current;
 78 |     const totalSlides = slides.length;
 79 | 
 80 |     slides[currentSlide.current].classList.remove(specificStyles.active);
 81 | 
 82 |     // Ensure slide number stays within bounds without wrapping
 83 |     currentSlide.current = Math.min(Math.max(0, n), totalSlides - 1);
 84 | 
 85 |     slides[currentSlide.current].classList.add(specificStyles.active);
 86 | 
 87 |     const slideNumberEl = document.getElementById("slide-number");
 88 |     const prevBtn = document.getElementById("prev-btn") as HTMLButtonElement;
 89 | 
 90 |     if (slideNumberEl)
 91 |       slideNumberEl.textContent = String(currentSlide.current + 1);
 92 |     if (prevBtn) prevBtn.disabled = currentSlide.current === 0;
 93 | 
 94 |     // Force re-render to update navigation buttons
 95 |     forceUpdate();
 96 |   };
 97 | 
 98 |   const nextSlide = () => showSlide(currentSlide.current + 1);
 99 |   const previousSlide = () => showSlide(currentSlide.current - 1);
100 | 
101 |   useEffect(() => {
102 |     // Initialize slides
103 |     slidesRef.current = document.querySelectorAll(`.${specificStyles.slide}`);
104 |     const totalSlidesEl = document.getElementById("total-slides");
105 |     if (slidesRef.current && totalSlidesEl)
106 |       totalSlidesEl.textContent = String(slidesRef.current.length);
107 | 
108 |     showSlide(0);
109 | 
110 |     // Keyboard navigation
111 |     const handleKeyDown = (e: KeyboardEvent) => {
112 |       if (e.key === "ArrowRight" || e.key === " ") {
113 |         e.preventDefault();
114 |         if (currentSlide.current < (slidesRef.current?.length || 0) - 1) {
115 |           nextSlide();
116 |         }
117 |       } else if (e.key === "ArrowLeft") {
118 |         e.preventDefault();
119 |         previousSlide();
120 |       }
121 |     };
122 |     document.addEventListener("keydown", handleKeyDown);
123 | 
124 |     // Confetti
125 |     const confetti = new ConfettiGenerator({ target: "confetti-canvas" });
126 |     confetti.render();
127 | 
128 |     return () => {
129 |       confetti.clear();
130 |       document.removeEventListener("keydown", handleKeyDown);
131 |     };
132 |   }, []);
133 | 
134 |   return (
135 |     <div className={styles.container}>
136 |       <Head>
137 |         <title>Project Management using Git and GitHub</title>
138 |         <meta name="description" content="YFOSP Learn Git & GitHub" />
139 |         <link rel="icon" href="/earth-asia-solid.svg" />
140 |       </Head>
141 | 
142 |       <canvas
143 |         id="confetti-canvas"
144 |         className={`${styles.canvas} bg-white dark:bg-black`}
145 |       />
146 | 
147 |       <main
148 |         className={`${styles.learnGitAndGitHub} text-black dark:text-white`}
149 |       >
150 |         <NavBar />
151 | 
152 |         <h1 className={styles.title}>
153 |           <a
154 |             href="https://education.github.com/git-cheat-sheet-education.pdf"
155 |             target="_blank"
156 |             rel="noopener noreferrer"
157 |           >
158 |             Project Management using Git and GitHub 🌍
159 |           </a>
160 |         </h1>
161 | 
162 |         <p className={styles.description}>
163 |           <Link href="/">{"< Go Back"}</Link>
164 |         </p>
165 | 
166 |         <div className={specificStyles.slideCounter}>
167 |           <span style={{ fontWeight: "bold" }}>Slide </span>
168 |           <span id="slide-number" style={{ fontWeight: "bold" }}>
169 |             1
170 |           </span>
171 |           <span style={{ fontWeight: "bold" }}> / </span>
172 |           <span id="total-slides" style={{ fontWeight: "bold" }}>
173 |             15
174 |           </span>
175 |         </div>
176 | 
177 |         <div className={specificStyles.presentationContainer}>
178 |           {/* Slide 1 */}
179 |           <div
180 |             className={`${specificStyles.slide} ${specificStyles.active} ${specificStyles.titleSlide}`}
181 |           >
182 |             <h1>Project Management using Git and GitHub</h1>
183 |             <p>Version Control Systems for Modern Development</p>
184 |             <p style={{ marginTop: 40, fontSize: "1.2em" }}>
185 |               A Complete Guide to Git, GitHub, and Project Management
186 |             </p>
187 |             {renderButtonsComponent()}
188 |           </div>
189 | 
190 |           {/* Slide 2 */}
191 |           <div className={specificStyles.slide}>
192 |             <h2>What is Version Control?</h2>
193 |             <p>
194 |               Version Control Systems (VCS) track changes to files and
195 |               coordinate work among multiple people.
196 |             </p>
197 |             <h3>Key Benefits:</h3>
198 |             <ul>
199 |               <li>
200 |                 <strong>Track Changes:</strong> See what changed, when, and who
201 |                 made the change
202 |               </li>
203 |               <li>
204 |                 <strong>Backup & Recovery:</strong> Never lose your work with
205 |                 complete history
206 |               </li>
207 |               <li>
208 |                 <strong>Collaboration:</strong> Multiple developers can work on
209 |                 the same project
210 |               </li>
211 |               <li>
212 |                 <strong>Branching:</strong> Work on features independently
213 |                 without affecting main code
214 |               </li>
215 |               <li>
216 |                 <strong>Rollback:</strong> Easily revert to previous working
217 |                 versions
218 |               </li>
219 |             </ul>
220 |             {renderButtonsComponent()}
221 |           </div>
222 | 
223 |           {/* Slide 3 */}
224 |           <div className={specificStyles.slide}>
225 |             <h2>Centralized vs Distributed Version Control</h2>
226 |             <div className={specificStyles.cvsVsDvs}>
227 |               <img
228 |                 src="/cvcs&dvcs.png"
229 |                 alt="Centralized vs Distributed Version Control"
230 |                 style={{
231 |                   maxWidth: "100%",
232 |                   height: "auto",
233 |                   borderRadius: 8,
234 |                   boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
235 |                   marginBottom: 24,
236 |                 }}
237 |               />
238 |             </div>
239 |             {renderButtonsComponent()}
240 |           </div>
241 | 
242 |           {/* Slide 4 */}
243 |           <div className={specificStyles.slide}>
244 |             <h2>What is Git?</h2>
245 |             <p>
246 |               Git is a free, open-source distributed version control system
247 |               designed to handle everything from small to very large projects
248 |               with speed and efficiency.
249 |             </p>
250 |             <div className={specificStyles.featureGrid}>
251 |               <div className={specificStyles.featureCard}>
252 |                 <h3>Fast & Efficient</h3>
253 |                 <p>Optimized for performance with intelligent compression</p>
254 |               </div>
255 |               <div className={specificStyles.featureCard}>
256 |                 <h3>Distributed</h3>
257 |                 <p>Every working directory is a full-fledged repository</p>
258 |               </div>
259 |               <div className={specificStyles.featureCard}>
260 |                 <h3>Data Integrity</h3>
261 |                 <p>Everything is checksummed using SHA-1 and SHA-256 hash</p>
262 |               </div>
263 |               <div className={specificStyles.featureCard}>
264 |                 <h3>Branching</h3>
265 |                 <p>Cheap local branching and easy merging</p>
266 |               </div>
267 |             </div>
268 |             {renderButtonsComponent()}
269 |           </div>
270 | 
271 |           {/* Slide 5 */}
272 |           <div className={specificStyles.slide}>
273 |             <h2>What is GitHub?</h2>
274 |             <p>
275 |               GitHub is a cloud-based hosting service for Git repositories,
276 |               providing a web-based interface and additional collaboration
277 |               features.
278 |             </p>
279 |             <h3>Key Features:</h3>
280 |             <ul>
281 |               <li>
282 |                 <strong>Repository Hosting:</strong> Store and manage Git
283 |                 repositories in the cloud
284 |               </li>
285 |               <li>
286 |                 <strong>Collaboration Tools:</strong> Issues, pull requests,
287 |                 code reviews
288 |               </li>
289 |               <li>
290 |                 <strong>Project Management:</strong> Projects, milestones, and
291 |                 task tracking
292 |               </li>
293 |               <li>
294 |                 <strong>CI/CD:</strong> GitHub Actions for automated workflows
295 |               </li>
296 |               <li>
297 |                 <strong>Documentation:</strong> Wiki, README files, and GitHub
298 |                 Pages
299 |               </li>
300 |               <li>
301 |                 <strong>Social Coding:</strong> Follow developers, star
302 |                 repositories, contribute to open source
303 |               </li>
304 |             </ul>
305 |             {renderButtonsComponent()}
306 |           </div>
307 | 
308 |           {/* Slide 6 */}
309 |           <div className={specificStyles.slide}>
310 |             <h2>Git Setup and Installation</h2>
311 |             <h3>1. Install Git</h3>
312 |             <div className={specificStyles.codeBlock}>
313 |               # Windows: Download from git-scm.com <br />
314 |               # macOS: brew install git <br />
315 |               # Ubuntu/Debian: sudo apt install git <br /># CentOS/RHEL: sudo
316 |               yum install git
317 |             </div>
318 |             <h3>2. Configure Git</h3>
319 |             <div className={specificStyles.codeBlock}>
320 |               git config --global user.name &quot;Your Name&quot; <br />
321 |               git config --global user.email &quot;your.email@example.com&quot;{" "}
322 |               <br />
323 |               git config --global init.defaultBranch main
324 |             </div>
325 |             <h3>3. Verify Installation</h3>
326 |             <div className={specificStyles.codeBlock}>
327 |               git --version <br />
328 |               git config --list
329 |             </div>
330 |             {renderButtonsComponent()}
331 |           </div>
332 | 
333 |           {/* Slide 7 */}
334 |           <div className={specificStyles.slide}>
335 |             <h2>GitHub Setup</h2>
336 |             <h3>1. Create GitHub Account</h3>
337 |             <p>
338 |               Visit <strong>github.com</strong> and sign up for a free account
339 |             </p>
340 |             <h3>2. Set up SSH Key (Recommended)</h3>
341 |             <div className={specificStyles.codeBlock}>
342 |               # Generate SSH key <br />
343 |               ssh-keygen -t ed25519 -C &quot;your.email@example.com&quot; <br />
344 |               # Add SSH key to ssh-agent <br />
345 |               eval &quot;$(ssh-agent -s)&quot; <br />
346 |               ssh-add ~/.ssh/id_ed25519 <br />
347 |               # Copy public key to GitHub <br />
348 |               cat ~/.ssh/id_ed25519.pub
349 |             </div>
350 |             <h3>3. Alternative: Personal Access Token</h3>
351 |             <p>
352 |               Go to GitHub Settings → Developer settings → Personal access
353 |               tokens → Generate new token
354 |             </p>
355 |             {renderButtonsComponent()}
356 |           </div>
357 | 
358 |           {/* Slide 8 */}
359 |           <div className={specificStyles.slide}>
360 |             <h2>Essential Git Commands - Basics</h2>
361 |             <div className={specificStyles.commandList}>
362 |               <div className={specificStyles.command}>git init</div>
363 |               <div>Initialize a new Git repository</div>
364 |               <div className={specificStyles.command}>
365 |                 git clone &lt;url&gt;
366 |               </div>
367 |               <div>Clone a remote repository</div>
368 |               <div className={specificStyles.command}>git status</div>
369 |               <div>Check repository status</div>
370 |               <div className={specificStyles.command}>git add &lt;file&gt;</div>
371 |               <div>Stage changes for commit</div>
372 |               <div className={specificStyles.command}>git add .</div>
373 |               <div>Stage all changes</div>
374 |               <div className={specificStyles.command}>
375 |                 git commit -m &quot;message&quot;
376 |               </div>
377 |               <div>Commit staged changes</div>
378 |               <div className={specificStyles.command}>git log</div>
379 |               <div>View commit history</div>
380 |               <div className={specificStyles.command}>git diff</div>
381 |               <div>Show unstaged changes</div>
382 |             </div>
383 |             {renderButtonsComponent()}
384 |           </div>
385 | 
386 |           {/* Slide 9 */}
387 |           <div className={specificStyles.slide}>
388 |             <h2>Essential Git Commands - Branching</h2>
389 |             <div className={specificStyles.commandList}>
390 |               <div className={specificStyles.command}>git branch</div>
391 |               <div>List all branches</div>
392 |               <div className={specificStyles.command}>
393 |                 git branch &lt;name&gt;
394 |               </div>
395 |               <div>Create a new branch</div>
396 |               <div className={specificStyles.command}>
397 |                 git checkout &lt;branch&gt;
398 |               </div>
399 |               <div>Switch to a branch</div>
400 |               <div className={specificStyles.command}>
401 |                 git checkout -b &lt;name&gt;
402 |               </div>
403 |               <div>Create and switch to new branch</div>
404 |               <div className={specificStyles.command}>
405 |                 git merge &lt;branch&gt;
406 |               </div>
407 |               <div>Merge branch into current branch</div>
408 |               <div className={specificStyles.command}>
409 |                 git branch -d &lt;name&gt;
410 |               </div>
411 |               <div>Delete a branch</div>
412 |               <div className={specificStyles.command}>git stash</div>
413 |               <div>Temporarily save changes</div>
414 |               <div className={specificStyles.command}>git stash pop</div>
415 |               <div>Apply and remove stashed changes</div>
416 |             </div>
417 |             {renderButtonsComponent()}
418 |           </div>
419 | 
420 |           {/* Slide 10 */}
421 |           <div className={specificStyles.slide}>
422 |             <h2>Essential Git Commands - Remote</h2>
423 |             <div className={specificStyles.commandList}>
424 |               <div className={specificStyles.command}>git remote -v</div>
425 |               <div>Show remote repositories</div>
426 |               <div className={specificStyles.command}>
427 |                 git remote add origin &lt;url&gt;
428 |               </div>
429 |               <div>Add a remote repository</div>
430 |               <div className={specificStyles.command}>git push origin main</div>
431 |               <div>Push commits to remote</div>
432 |               <div className={specificStyles.command}>git pull origin main</div>
433 |               <div>Pull changes from remote</div>
434 |               <div className={specificStyles.command}>git fetch</div>
435 |               <div>Download remote changes (no merge)</div>
436 |               <div className={specificStyles.command}>
437 |                 git push -u origin &lt;branch&gt;
438 |               </div>
439 |               <div>Push and set upstream branch</div>
440 |               <div className={specificStyles.command}>
441 |                 git clone &lt;url&gt;
442 |               </div>
443 |               <div>Clone remote repository</div>
444 |               <div className={specificStyles.command}>
445 |                 git remote remove &lt;name&gt;
446 |               </div>
447 |               <div>Remove a remote repository</div>
448 |             </div>
449 |             {renderButtonsComponent()}
450 |           </div>
451 | 
452 |           {/* Slide 11 */}
453 |           <div className={specificStyles.slide}>
454 |             <h2>Git Three-Stage Architecture</h2>
455 |             <div className={specificStyles.diagramContainer}>
456 |               <img
457 |                 src="/git-3-tier-architecture.png"
458 |                 alt="Git Three-Stage Architecture Diagram"
459 |                 style={{
460 |                   maxWidth: "100%",
461 |                   height: "auto",
462 |                   borderRadius: 8,
463 |                   boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
464 |                 }}
465 |               />
466 |             </div>
467 |             <div className={specificStyles.codeBlock}>
468 |               # Example workflow <br />
469 |               echo &quot;Hello World&quot; {">"} hello.txt <br />
470 |               git add hello.txt <br />
471 |               git commit -m &quot;Add hello file&quot; <br />
472 |               git push origin main
473 |             </div>
474 |             {renderButtonsComponent()}
475 |           </div>
476 | 
477 |           {/* Slide 12 */}
478 |           <div className={specificStyles.slide}>
479 |             <h2>GitHub Project Management Features</h2>
480 |             <div className={specificStyles.featureGrid}>
481 |               <div className={specificStyles.featureCard}>
482 |                 <h3>Issues</h3>
483 |                 <p>
484 |                   Track bugs, feature requests, and tasks with labels,
485 |                   assignees, and milestones
486 |                 </p>
487 |               </div>
488 |               <div className={specificStyles.featureCard}>
489 |                 <h3>Pull Requests</h3>
490 |                 <p>
491 |                   Code review process, discuss changes, and collaborate before
492 |                   merging
493 |                 </p>
494 |               </div>
495 |               <div className={specificStyles.featureCard}>
496 |                 <h3>Projects</h3>
497 |                 <p>
498 |                   Kanban-style boards to organize and prioritize work across
499 |                   repositories
500 |                 </p>
501 |               </div>
502 |               <div className={specificStyles.featureCard}>
503 |                 <h3>Milestones</h3>
504 |                 <p>
505 |                   Group issues and pull requests into release cycles or project
506 |                   phases
507 |                 </p>
508 |               </div>
509 |             </div>
510 |             <h3>Additional Features:</h3>
511 |             <ul>
512 |               <li>
513 |                 <strong>Wiki:</strong> Documentation and knowledge base
514 |               </li>
515 |               <li>
516 |                 <strong>Actions:</strong> CI/CD workflows and automation
517 |               </li>
518 |               <li>
519 |                 <strong>Releases:</strong> Package and distribute software
520 |                 versions
521 |               </li>
522 |             </ul>
523 |             {renderButtonsComponent()}
524 |           </div>
525 | 
526 |           {/* Slide 13 */}
527 |           <div className={specificStyles.slide}>
528 |             <h2>Git vs GitHub</h2>
529 |             <img
530 |               src="/gitVsgithub.png"
531 |               alt="Git vs GitHub"
532 |               style={{
533 |                 maxWidth: "100%",
534 |                 height: "auto",
535 |                 borderRadius: 8,
536 |                 boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
537 |                 margin: "24px 0",
538 |               }}
539 |             />
540 |             {renderButtonsComponent()}
541 |           </div>
542 | 
543 |           {/* Slide 14 */}
544 |           <div className={specificStyles.slide}>
545 |             <h2>Git & GitHub Best Practices</h2>
546 |             <h3>Commit Best Practices:</h3>
547 |             <ul>
548 |               <li>
549 |                 <strong>Clear Messages:</strong> Use present tense, imperative
550 |                 mood
551 |               </li>
552 |               <li>
553 |                 <strong>Atomic Commits:</strong> One logical change per commit
554 |               </li>
555 |               <li>
556 |                 <strong>Regular Commits:</strong> Commit early and often
557 |               </li>
558 |             </ul>
559 |             <h3>Project Management Best Practices:</h3>
560 |             <ul>
561 |               <li>
562 |                 <strong>Use Issues:</strong> Track all work items and
563 |                 discussions
564 |               </li>
565 |               <li>
566 |                 <strong>Link Issues:</strong> Reference issues in commits and
567 |                 PRs
568 |               </li>
569 |               <li>
570 |                 <strong>Code Reviews:</strong> Always use pull requests for main
571 |                 branch
572 |               </li>
573 |               <li>
574 |                 <strong>Documentation:</strong> Keep README and docs updated
575 |               </li>
576 |               <li>
577 |                 <strong>Branching:</strong> Use descriptive branch names
578 |               </li>
579 |               <li>
580 |                 <strong>Tags:</strong> Mark important releases and versions
581 |               </li>
582 |             </ul>
583 |             {renderButtonsComponent()}
584 |           </div>
585 | 
586 |           {/* Slide 15 */}
587 |           <div className={specificStyles.slide}>
588 |             <h2>Summary</h2>
589 |             <h3>What We&apos;ve Covered:</h3>
590 |             <ul>
591 |               <li>
592 |                 <strong>Version Control Systems:</strong> CVS vs DVS concepts
593 |               </li>
594 |               <li>
595 |                 <strong>Git Fundamentals:</strong> Installation, configuration,
596 |                 and core concepts
597 |               </li>
598 |               <li>
599 |                 <strong>GitHub Platform:</strong> Cloud-based collaboration and
600 |                 project management
601 |               </li>
602 |               <li>
603 |                 <strong>Essential Commands:</strong> Complete toolkit for daily
604 |                 Git operations
605 |               </li>
606 |               <li>
607 |                 <strong>Project Management:</strong> Issues, pull requests, and
608 |                 workflow strategies
609 |               </li>
610 |               <li>
611 |                 <strong>Best Practices:</strong> Professional development
612 |                 workflows
613 |               </li>
614 |             </ul>
615 |             <h3>Next Steps:</h3>
616 |             <ul>
617 |               <li>Practice with a sample project</li>
618 |               <li>{`Explore GitHub's advanced features`}</li>
619 |               <li>Implement a branching strategy</li>
620 |               <li>Set up automated workflows with GitHub Actions</li>
621 |             </ul>
622 |             {renderButtonsComponent()}
623 |           </div>
624 |         </div>
625 |       </main>
626 | 
627 |       <footer className={`${styles.footer} text-black dark:text-white`}>
628 |         <a
629 |           href="https://hacktoberfest.com/"
630 |           target="_blank"
631 |           rel="noopener noreferrer"
632 |         >
633 |           Created by the community for Hacktoberfest with ❤️
634 |         </a>
635 |       </footer>
636 |     </div>
637 |   );
638 | };
639 | 
640 | export default LearnGitAndGitHub;
641 | 


--------------------------------------------------------------------------------