├── .eslintrc.json ├── assets ├── fork.jpg ├── banner.png ├── locate.jpg ├── open_pr.jpg ├── add_data.jpg ├── create_pr.jpg ├── clone_fork.jpg └── create-fork.jpg ├── public ├── favicon.ico ├── vercel.svg └── next.svg ├── src ├── assets │ └── svg.png ├── pages │ ├── _app.tsx │ ├── _document.tsx │ ├── index.jsx │ ├── submissions.jsx │ ├── explanation.jsx │ └── instructions.jsx ├── components │ ├── Footer.jsx │ ├── Background.jsx │ ├── TextRunner.tsx │ ├── Navbar.jsx │ └── data.json └── styles │ └── globals.css ├── postcss.config.js ├── next.config.js ├── .gitignore ├── tailwind.config.js ├── tsconfig.json ├── package.json ├── README.md └── yarn.lock /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /assets/fork.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srajankumar/pullquest/HEAD/assets/fork.jpg -------------------------------------------------------------------------------- /assets/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srajankumar/pullquest/HEAD/assets/banner.png -------------------------------------------------------------------------------- /assets/locate.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srajankumar/pullquest/HEAD/assets/locate.jpg -------------------------------------------------------------------------------- /assets/open_pr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srajankumar/pullquest/HEAD/assets/open_pr.jpg -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srajankumar/pullquest/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srajankumar/pullquest/HEAD/src/assets/svg.png -------------------------------------------------------------------------------- /assets/add_data.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srajankumar/pullquest/HEAD/assets/add_data.jpg -------------------------------------------------------------------------------- /assets/create_pr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srajankumar/pullquest/HEAD/assets/create_pr.jpg -------------------------------------------------------------------------------- /assets/clone_fork.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srajankumar/pullquest/HEAD/assets/clone_fork.jpg -------------------------------------------------------------------------------- /assets/create-fork.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srajankumar/pullquest/HEAD/assets/create-fork.jpg -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '@/styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | 4 | export default function App({ Component, pageProps }: AppProps) { 5 | return 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Footer = () => { 4 | return ( 5 |
6 | Made on Earth with {"💜"} 7 |
8 | ); 9 | }; 10 | 11 | export default Footer; 12 | -------------------------------------------------------------------------------- /src/components/Background.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import waves from "../assets/svg.png"; 3 | import Image from "next/image"; 4 | 5 | const Background = () => { 6 | return ( 7 |
8 | img 13 |
14 | ); 15 | }; 16 | 17 | export default Background; 18 | -------------------------------------------------------------------------------- /src/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import Navbar from "@/components/Navbar"; 2 | import { Html, Head, Main, NextScript } from "next/document"; 3 | 4 | export default function Document() { 5 | return ( 6 | 7 | 8 | Pull Quest 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /.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 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | './src/pages/**/*.{js,ts,jsx,tsx,mdx}', 5 | './src/components/**/*.{js,ts,jsx,tsx,mdx}', 6 | './src/app/**/*.{js,ts,jsx,tsx,mdx}', 7 | ], 8 | theme: { 9 | extend: { 10 | backgroundImage: { 11 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 12 | 'gradient-conic': 13 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', 14 | }, 15 | }, 16 | }, 17 | plugins: [], 18 | } 19 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 | "paths": { 18 | "@/*": ["./src/*"] 19 | } 20 | }, 21 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/pages/index.jsx"], 22 | "exclude": ["node_modules"] 23 | } 24 | -------------------------------------------------------------------------------- /src/components/TextRunner.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Cursor, useTypewriter } from "react-simple-typewriter"; 4 | 5 | type Props = {}; 6 | 7 | const TextRunner = (props: Props) => { 8 | const [text, count] = useTypewriter({ 9 | words: ["Click here to Begin the Quest"], 10 | loop: true, 11 | delaySpeed: 1500, 12 | deleteSpeed: 50, 13 | }); 14 | return ( 15 |

16 | {text} 17 | 22 |

23 | ); 24 | }; 25 | 26 | export default TextRunner; 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 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 | "@types/node": "18.16.1", 13 | "@types/react": "18.2.0", 14 | "@types/react-dom": "18.2.1", 15 | "autoprefixer": "10.4.14", 16 | "axios": "^1.4.0", 17 | "eslint": "8.39.0", 18 | "eslint-config-next": "13.3.1", 19 | "next": "13.3.1", 20 | "postcss": "8.4.23", 21 | "react": "18.2.0", 22 | "react-dom": "18.2.0", 23 | "react-simple-typewriter": "^5.0.1", 24 | "tailwindcss": "3.3.2", 25 | "typescript": "5.0.4" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/pages/index.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Image from "next/image"; 3 | import waves from "../assets/svg.png"; 4 | import Link from "next/link"; 5 | import TextRunner from "@/components/TextRunner"; 6 | 7 | export default function Home() { 8 | return ( 9 |
10 | img 15 |

16 |
Pull Quest
17 | 18 | 19 | 20 |

21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/submissions.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import data from "../components/data.json"; 3 | import Background from "../components/Background"; 4 | import Footer from "../components/Footer"; 5 | import Link from "next/link"; 6 | 7 | const truncateString = (str, numWords) => { 8 | const words = str.split(" "); 9 | if (words.length <= numWords) { 10 | return str; 11 | } 12 | return words.slice(0, numWords).join(" ") + " ..."; 13 | }; 14 | 15 | const Submissions = () => { 16 | return ( 17 |
18 | 19 |
20 | {Object.values(data).map((item) => ( 21 | 26 |
27 |
28 | dp 33 |
34 |
35 |
36 | {item.name} 37 |
38 |
39 | "{truncateString(item.quote, 6)}" 40 |
41 |
42 |
43 | 44 | ))} 45 |
46 |
47 |
48 | ); 49 | }; 50 | 51 | export default Submissions; 52 | -------------------------------------------------------------------------------- /src/styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | * { 6 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 7 | "Liberation Mono", "Courier New", monospace; 8 | } 9 | 10 | ::-webkit-scrollbar { 11 | width: 10px; 12 | height: 3px; 13 | } 14 | 15 | ::-webkit-scrollbar-track { 16 | background-color: transparent; 17 | } 18 | 19 | ::-webkit-scrollbar-thumb { 20 | --tw-text-opacity: 1; 21 | background-color: rgb(168 85 247 / var(--tw-text-opacity)); 22 | } 23 | 24 | ::-webkit-scrollbar-thumb:hover { 25 | --tw-text-opacity: 1; 26 | background-color: rgb(59 7 100 / var(--tw-text-opacity)); 27 | } 28 | 29 | /* Navbar Mobile */ 30 | 31 | #menuToggle { 32 | display: block; 33 | padding: 2rem; 34 | z-index: 1; 35 | font-weight: bold; 36 | -webkit-user-select: none; 37 | user-select: none; 38 | } 39 | 40 | #menuToggle input { 41 | display: block; 42 | width: 40px; 43 | height: 32px; 44 | position: absolute; 45 | cursor: pointer; 46 | 47 | opacity: 0; 48 | z-index: 2; 49 | 50 | -webkit-touch-callout: none; 51 | } 52 | 53 | /* 54 | * Just a quick hamburger 55 | */ 56 | #menuToggle span { 57 | display: block; 58 | width: 33px; 59 | height: 4px; 60 | margin-bottom: 5px; 61 | position: relative; 62 | 63 | background: black; 64 | border-radius: 3px; 65 | 66 | z-index: 1; 67 | 68 | transform-origin: 4px 0px; 69 | 70 | transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), 71 | background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; 72 | } 73 | 74 | #menuToggle span:first-child { 75 | transform-origin: 0% 0%; 76 | } 77 | 78 | #menuToggle span:nth-last-child(2) { 79 | transform-origin: 0% 100%; 80 | } 81 | 82 | /* 83 | * Transform all the slices of hamburger 84 | * into a crossmark. 85 | */ 86 | #menuToggle input:checked ~ span { 87 | opacity: 1; 88 | transform: rotate(45deg) translate(-2px, -1px); 89 | background: black; 90 | } 91 | 92 | /* 93 | * But let's hide the middle one. 94 | */ 95 | #menuToggle input:checked ~ span:nth-last-child(3) { 96 | opacity: 0; 97 | transform: rotate(0deg) scale(0.2, 0.2); 98 | } 99 | 100 | /* 101 | * Ohyeah and the last one should go the other direction 102 | */ 103 | #menuToggle input:checked ~ span:nth-last-child(2) { 104 | transform: rotate(-45deg) translate(0, -1px); 105 | } 106 | 107 | #menu { 108 | display: flex; 109 | flex-direction: column; 110 | position: absolute; 111 | padding-top: 5rem; 112 | padding-left: 2rem; 113 | z-index: 0; 114 | top: 0; 115 | left: 0; 116 | height: 100vh; 117 | list-style-type: none; 118 | -webkit-font-smoothing: antialiased; 119 | background: #d8d8d8ea; 120 | transform-origin: 0% 0%; 121 | transform: translate(-140%, 0); 122 | 123 | transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); 124 | } 125 | 126 | #menuToggle input:checked ~ ul { 127 | transform: none; 128 | } 129 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Pull Quest](https://github.com/srajankumar/pullquest/blob/main/assets/banner.png) 2 | 3 | Welcome, fellow developer, to an epic journey into the world of open source contributions! In this exhilarating quest, you will embark on your first pull request and leave your mark upon the codebase. Are you ready to unleash your coding prowess? Let's get started! 4 | 5 | ## Fork the Repository 6 | 7 | 1. Head out to srajankumar/pullquest 8 | 2. Look for the "Fork" button, which you'll find in the top-right corner of the repository's page. 9 | 3. Click the "Fork" button. This will create a copy of the repository under your GitHub account. 10 | 11 | ## Set Up Locally 12 | 13 | 1. Go to your forked repository on GitHub. 14 | 2. Click the green "Code" button, and then copy the URL that appears. 15 | 3. Open your Git Bash terminal or command line. 16 | 4. Use the `git clone` command to download the repository to your local machine. 17 | 18 | ```bash 19 | git clone https://github.com/YOUR_USERNAME/pullquest.git 20 | ``` 21 | 22 | Replace `YOUR_USERNAME` with your actual GitHub username in the URL. 23 | 24 | 4. In your terminal or command prompt, use the `cd` command to navigate to the newly created repository folder. 25 | 26 | ```bash 27 | cd pullquest 28 | ``` 29 | 30 | ## Create a New Branch 31 | 32 | 1. Open your terminal or command prompt. 33 | 2. Use the `git branch` command to create a new branch, giving it a meaningful name. 34 | 35 | ```bash 36 | git branch username-profile 37 | ``` 38 | 39 | Replace `username` with your GitHub username. 40 | 41 | 2. Switch to this newly created branch and begin working on it, use the `git checkout` command. 42 | 43 | ```bash 44 | git checkout username-profile 45 | ``` 46 | 47 | Now, you are in the newly created branch and ready to add your unique profile details to the repository. 48 | 49 | ## Add Your Profile 50 | 51 | 1. Navigate to the `src/components` directory within your local repository. 52 | 2. Locate and open the `data.json` file. This file contains the profiles of others who have contributed to the project. 53 | 3. Follow the template below and add your own profile details to the `data.json` file. 54 | 55 | ```json 56 | { 57 | "username": "your_github_username", 58 | "name": "Your Full Name", 59 | "email": "your_email@example.com", 60 | "quote": "Your Inspirational Quote or Message" 61 | } 62 | ``` 63 | 64 | Replace the placeholder values (`your_github_username`, `Your Full Name`, `your_email@example.com`, and `Your Inspirational Quote or Message`) with your actual information. 65 | 66 | 4. Save the `data.json` file. 67 | 68 | ## Commit Your Changes 69 | 70 | 1. Stage all your changes by using the following command: 71 | 72 | ```bash 73 | git add . 74 | ``` 75 | 76 | This prepares all your modified files for the upcoming commit. 77 | 78 | 2. Commit your work with a descriptive message that summarizes your changes: 79 | 80 | ```bash 81 | git commit -m "Embark on an epic adventure: add my profile details" 82 | ``` 83 | 84 | ## Push Your Changes 85 | 86 | Now, it's time to push your committed changes to your forked repository on GitHub: 87 | 88 | ```bash 89 | git push origin username-profile 90 | ``` 91 | 92 | Replace `your-username-profile` with the name of the branch where you added your profile details (e.g., `your-github-username-profile`). 93 | 94 | ## Create a Pull Request 95 | 96 | 1. Open your web browser and go to your forked repository on GitHub. 97 | 2. Ensure you have selected the branch where you made your changes (e.g., `your-username-profile`) from the branch dropdown. 98 | 3. Navigate to the main repository, in this case, `srajankumar/pullquest.` 99 | 4. Click on the **"Pull Requests"** tab at the top of the repository. 100 | 5. Click the **"New Pull Request"** button. 101 | 6. GitHub will automatically detect the changes you made in your branch compared to the main repository's branch. Ensure that the base branch is set to 'srajan/pullquest' or whichever base branch is appropriate. 102 | 7. Give your Pull Request a meaningful title and description, explaining the purpose of your changes. 103 | 8. Finally, click the **"Create Pull Request"** button to submit your Pull Request. 104 | 105 | ## Congratulations! 106 | 107 | Congratulations you have successfully contributed to this repository! 108 | 109 | ## Contributors 110 | 111 | 112 | 113 | 114 | 115 | ### More contributions are always welcome! ;) 116 | -------------------------------------------------------------------------------- /src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import React from "react"; 3 | 4 | const Navbar = () => { 5 | const closeMenu = () => { 6 | document 7 | .getElementById("menuToggle") 8 | .querySelector("input").checked = false; 9 | }; 10 | 11 | return ( 12 |
13 |
14 |
15 | 19 | 25 | 29 | 30 | 31 | 51 | 67 |
68 |
69 |
70 | 129 |
130 |
131 | ); 132 | }; 133 | 134 | export default Navbar; 135 | -------------------------------------------------------------------------------- /src/pages/explanation.jsx: -------------------------------------------------------------------------------- 1 | import Background from "../components/Background"; 2 | import Footer from "../components/Footer"; 3 | 4 | function Explanation() { 5 | return ( 6 | <> 7 | 8 |
9 |
10 | What did I just do? 11 |
12 |
13 |

14 | Step 1: Fork the Repository 15 |

16 |
17 | 18 | Forking a repository means creating a personal copy of someone 19 | else's project on GitHub. It allows you to freely make 20 | changes without affecting the original repository. 21 | 22 |
23 |
24 | 25 | By forking the repository, you'll have your own version of 26 | the project under your GitHub account, which you can modify and 27 | contribute to. 28 | 29 |
30 |
31 |
32 |

33 | Step 2: Clone the Repository 34 |

35 |
36 | 37 | Cloning a repository means creating a local copy of the repository 38 | on your own machine. 39 | 40 |
41 |
42 | 43 | Cloning is necessary because it allows you to work on the project 44 | locally, make changes, and test them before submitting them as a 45 | pull request. 46 | 47 |
48 |
49 |
50 | The 51 | {"'git clone'"} 52 | command fetches the entire repository from GitHub and creates a 53 | local copy on your computer. 54 |
55 |
56 |
57 |
58 |

59 | Step 3: Create a New Branch 60 |

61 | 62 |
63 | 64 | A branch is a parallel version of the codebase within the 65 | repository. It allows you to work on separate features or changes 66 | without affecting the main branch. 67 | 68 |
69 |
70 | 71 | Creating a new branch is important to keep your changes isolated 72 | and organized. 73 | 74 |
75 |
76 | 77 | The 78 | {"'git branch'"} 79 | command creates a new branch, and 80 | {"'git checkout'"} 81 | command allows you to switch to that newly created branch. 82 | 83 |
84 |
85 |
86 |

87 | Step 4: Make Your Changes 88 |

89 |
90 | 91 | This step involves modifying the code or adding new content to the 92 | project according to the task or contribution you want to make. 93 | 94 |
95 |
96 | 97 | In this specific case, you are adding your profile details to the 98 | {"'data.json'"} 99 | file, following the given format. 100 | 101 |
102 |
103 |
104 |

105 | Step 5: Stage and Commit Your Changes 106 |

107 |
108 | 109 | Before committing your changes, you need to stage them. Staging 110 | means selecting the specific changes you want to include in the 111 | next commit. 112 | 113 |
114 |
115 | 116 | The{"'git add'"} 117 | command stages the modified file, 118 | 119 | {"'src/components/data.json'"} 120 | 121 | , to be included in the commit. 122 | 123 |
124 |
125 | 126 | Committing means saving your changes with a descriptive message 127 | indicating what you've done. 128 | 129 |
130 |
131 | 132 | The 133 | {"'git commit'"} 134 | command is used to create a commit with a meaningful message. 135 | 136 |
{" "} 137 |
138 |
139 |

140 | Step 6: Push the Changes 141 |

142 |
143 | 144 | Pushing your changes means uploading your local commits to your 145 | forked repository on GitHub. 146 | 147 |
148 |
149 | 150 | By using the 151 | {"'git push'"} 152 | command, you send your branch with the committed changes to your 153 | GitHub repository. 154 | 155 |
156 |
157 |
158 |

159 | Step 7: Create the Pull Request 160 |

161 |
162 | 163 | A pull request is a way to propose your changes to the original 164 | repository owner for review and potential inclusion in the main 165 | project. 166 | 167 |
168 |
169 | 170 | By creating a pull request, you're asking the repository 171 | owner to consider your changes and merge them into the main 172 | branch. 173 | 174 |
175 |
176 | 177 | The pull request page allows you to review the changes you've 178 | made and provide additional information or comments about your 179 | contribution. 180 | 181 |
182 |
183 | 184 | Once the pull request is created, the repository owner can review 185 | and provide feedback or merge your changes into the main branch. 186 | 187 |
188 |
189 |
190 |

191 | I hope this provides a clear explanation of each step and their 192 | significance in the pull request process! 193 |

194 |
195 |
196 |