feat: Complete Github Section

- Add Mona-Sans Font and font faces
- Add Images for background
- Add variables to tailwind.config.js for Github section

Author: amirallami-code

src/fonts/monasans/MonaSans-Bold.ttf

@@ -489,9 +489,9 @@
               <li>
                 <a href="#certificates" class="menu-item">Certificates</a>
               </li>
-              <!-- <li>
+              <li>
                 <a href="#github" class="menu-item">Github</a>
-              </li> -->
+              </li>
               <li>
                 <a href="#touch" class="menu-item">Stay in touch</a>
               </li>
@@ -752,12 +752,88 @@ <h1 class="title h-full min-h-[3.7em] sm:min-h-[2.5em] leading-tight">
         </div>
         <div class="divider divider-bottom"></div>
       </section>
+
+      <!-- Github -->
+      <section
+        id="github"
+        class="section bg-gitWhite dark:bg-gitBlack lg:pb-32 mt-20"
+      >
+        <div class="divider divider-top"></div>
+        <div
+          class="github-content flex w-full h-[28rem] md:h-[30rem] lg:h-auto items-center justify-center flex-wrap gap-4"
+        >
+          <div
+            class="github-context container flex flex-col max-w-lg lg:max-w-auto items-center justify-center gap-4 text-gitBlack dark:text-gitWhite z-10 -mb-[35%] lg:mb-0"
+          >
+            <h2 class="title w-full text-left">My Github</h2>
+            <div
+              class="github-information bg-gitWhite dark:bg-gitBlack font-monasans-med flex flex-row gap-3 rounded-2xl p-3 shadow-md dark:shadow-none dark:border-2 border-gitDarkGray"
+            >
+              <img
+                src="images/github/profile.jpeg"
+                alt="Github Profile"
+                class="max-w-12 max-h-12 rounded-full"
+              />
+              <div class="github-self flex flex-col gap-2">
+                <div
+                  class="github-self__titles flex flex-row flex-wrap items-center justify-start gap-2"
+                >
+                  <p class="font-monasans-bold">
+                    <a href="https://github.com/amirallami-code">
+                      Amirhossein Allami
+                    </a>
+                  </p>
+                  <p class="text-gitGray text-sm">@amirallami-code</p>
+                </div>
+                <div class="github-self__desc">
+                  Front-end enthusiast by day, algorithm adventurer by night.
+                </div>
+                <div
+                  class="github-self__stats flex flex-wrap text-gitGray text-sm gap-2"
+                >
+                  <p>
+                    <span class="github-self__repos font-monasans-bold">7</span>
+                    repository
+                  </p>
+                  <p>
+                    <span class="github-self__followers font-monasans-bold"
+                      >410</span
+                    >
+                    followers
+                  </p>
+                  <p>
+                    <span class="github-self__stars font-monasans-bold"
+                      >101</span
+                    >
+                    stars earned
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="github-repos"></div>
+          </div>
+          <div
+            class="github-graphic flex items-center justify-center overflow-hidden"
+          >
+            <img
+              class="github-desktop hidden lg:block max-w-xl"
+              src="images/github/desktop.png"
+              alt="Github Section's Background"
+            />
+            <img
+              class="github-mobile lg:hidden w-full"
+              src="images/github/mobile.png"
+              alt="Github Section's Background"
+            />
+          </div>
+        </div>
+      </section>
     </main>
     <footer class="footer">
       <!-- Stay in touch -->
       <section
         id="touch"
-        class="section bg-priWhite dark:bg-dark-backGround flex mt-40 pb-20"
+        class="section bg-priWhite dark:bg-dark-backGround flex pb-20"
       >
         <div class="divider divider-top"></div>
         <div

src/fonts/monasans/MonaSans-Medium.ttf

@@ -2,6 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Mona Sans font faces */
+@font-face {
+  font-family: monasans-bold;
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("fonts/monasans/MonaSans-Bold.ttf") format("truetype");
+}
+@font-face {
+  font-family: monasans-med;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("fonts/monasans/MonaSans-Medium.ttf") format("truetype");
+}
 /* Fira code font face */
 @font-face {
   font-family: firacode;