Added content

osdc · Sep 15, 2024 · 2cb7092 · 2cb7092
1 parent 0b8974e
commit 2cb7092
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 9 deletions.
diff --git a/frontend/src/components/tutorial/Tutorial.tsx b/frontend/src/components/tutorial/Tutorial.tsx
@@ -8,7 +8,7 @@ const Tutorial = () => {
   const imageSection = dataArray[moduleNo].module[tipNo].imageData.src;
   const listModules = dataArray.map((x) => (
     <button
-      className="fr text-2xl m-5 text-gray-600"
+      className="fr text-4xl m-5 text-gray-600"
       onClick={() => {
         setModuleNo(x.index);
         setTipNo(0);
@@ -27,16 +27,17 @@ const Tutorial = () => {
     <>
       <div className="flex flex-col items-center justify-center h-screen bg-[#3B8481]">
         <div className="flex flex-row h-[70%] w-full">
-          <div className="oak flex w-3/4 flex-row m-5 justify-end">
+          <div className="oak flex w-[70%] flex-row m-5 justify-end">
             <div className="h-full flex flex-col items-center justify-center w-1/2">
               <img src={imageSection} alt="Not Found" className="max-h-[50%]" />
             </div>
             <img src={Oak} alt="Not Found" />
           </div>
           <div className="list flex flex-col items-center justify-center w-[25%]">
-            <div className="border-black border-2 h-full m-10 w-full mr-4 bg-[#756C80] rounded-md">
-              <div className="bg-white m-2 rounded-md w-auto h-full mb-6 flex flex-col ">
+            <div className="border-black border-2 h-auto m-10 w-full mr-4 bg-[#756C80] rounded-md">
+              <div className="bg-white m-2 rounded-md w-auto h-auto mb-6 flex flex-col items-start">
                 {listModules}
+                <button></button>
               </div>
             </div>
           </div>
@@ -47,9 +48,11 @@ const Tutorial = () => {
             className="w-3/4 h-[80%] bg-no-repeat bg-center bg-contain text-4xl flex flex-col jusitfy-center items-center"
             style={{ backgroundImage: `url(${TipBox})` }}
           >
-            <div className="w-3/4 flex flex-col justify-center items-center h-full">
+            <div className="w-3/4 flex flex-col justify-center items-start h-full">
               {" "}
-              <p className="fr">{dataArray[moduleNo].module[tipNo].tip}</p>
+              <p className="fr text-2xl ">
+                {dataArray[moduleNo].module[tipNo].tip}
+              </p>
             </div>
           </div>
           <div className="list w-[25%] h-full flex flex-row  ">

diff --git a/frontend/src/components/tutorial/data.ts b/frontend/src/components/tutorial/data.ts
@@ -4,7 +4,7 @@ export const dataArray: {
   module: { tip: string; imageData: { src: string | null; large: boolean } }[];
 }[] = [
   {
-    name: "Introduction To Open Source",
+    name: "Introduction",
     index: 0,
     module: [
       {
@@ -38,7 +38,7 @@ export const dataArray: {
     ],
   },
   {
-    name: "Version Control",
+    name: "VersionControl",
     index: 1,
     module: [
       {
@@ -68,7 +68,7 @@ export const dataArray: {
     ],
   },
   {
-    name: "Working with the terminal",
+    name: "TheTerminal",
     index: 2,
     module: [
       {
@@ -223,4 +223,112 @@ export const dataArray: {
       },
     ],
   },
+  {
+    name: "GitHub",
+    index: 4,
+    module: [
+      {
+        tip: "Alright, now that you’ve got the local stuff down, let’s explore GitHub—where collaboration happens!",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "First, let's talk about forking. Forking is like making your own copy of someone else’s project.",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Head over to the project you want to contribute to on GitHub and click that 'Fork' button at the top.",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Congrats, you've just created your own version of the project under your account!",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Now, we need to get it onto your local machine. Time to clone!",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Go back to your terminal and type 'git clone <repo-link>' using the link from your forked project.",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Boom! You've just cloned the project to your local machine. It’s ready for you to tinker with.",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Make changes, add features, fix bugs—anything you want!",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Once you're happy with your changes, let’s commit them locally, just like before. 'git commit -m “Describe your changes here”.'",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Push your changes to *your* forked repo with 'git push origin <branch-name>'.",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Ready to contribute to the main project? Let’s create a Pull Request (PR).",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Go to your forked repo on GitHub. You’ll see a button to 'Compare & pull request.' Click it!",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Give a nice, clear description of what changes you made and why.",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "When you're ready, submit the pull request!",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Now the project maintainer can review your work and, if everything looks good, merge it into the main project.",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Keep an eye on the PR for any feedback or changes you might need to make.",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "You’re well on your way to becoming a pro contributor!",
+        imageData: { src: null, large: false },
+      },
+    ],
+  },
+  {
+    name: "Capstone",
+    index: 5,
+    module: [
+      {
+        tip: "Let us put your skills to the test!",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Head over to GitHub, fork this repository.",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Now make a different branch.",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Go to backend/Entries.",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "And add a file there.",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Now add, commit, and push your changes.",
+        imageData: { src: null, large: false },
+      },
+      {
+        tip: "Go back to the website and now contribute to the main site.",
+        imageData: { src: null, large: false },
+      },
+    ],
+  },
 ];