feature/getStarted

github-automated-repos-page/package.json

@@ -17,6 +17,7 @@
     "react-toastify": "^9.1.1",
     "sass": "^1.57.1",
     "styled-components": "^5.3.6",
+    "typewriter-effect": "^2.19.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

github-automated-repos-page/src/components/Footer/index.jsx

@@ -6,12 +6,12 @@ export function Footer() {
         <div className='footer_Container'>
             <div className='footer_Content'>
                 <div className='footer_Thanks'>
-                <p>For every community belonging to the vastness of the Universe. 🖤 by: <a href="https://digoarthur.vercel.app">@digoarthur<FiExternalLink/></a> </p>
+                <p>For every community belonging to the vastness of the Universe. 🖤 by: <a href="https://digoarthur.vercel.app" target="_blank">@digoarthur<FiExternalLink/></a> </p>
                 </div>
 
                 <div className='footer_Credits'>
                    <p>Based in:</p> 
-                    <a href="#">Api Github <FiExternalLink/></a>
+                    <a href="https://docs.github.com/en/rest/repos/repos?apiVersion=2022-11-28#get-a-repository" target="_blank">Api Github <FiExternalLink/></a>
                 </div>
             </div>
 

github-automated-repos-page/src/components/Footer/style.scss

@@ -13,7 +13,7 @@
         }
     }
 
-    .footer_Content {
+    .footer_Content {     
         width: 60%;
         display: flex;
         flex-wrap: wrap;
@@ -28,4 +28,12 @@
 
         }
     }
+}
+
+@media (max-width: 800px) {
+
+    .footer_Container {
+        height: 150px;
+
+    }
 }

github-automated-repos-page/src/components/Header/index.jsx

@@ -1,53 +1,64 @@
-import React, { useState } from 'react';
-import './style.scss';
-import { FiExternalLink } from 'react-icons/fi';
-import { GoThreeBars } from 'react-icons/go';
-import { GrClose } from 'react-icons/gr';
-import { Link,useLocation } from 'react-router-dom'
+import React, { useState } from "react";
+import "./style.scss";
+import { FiExternalLink } from "react-icons/fi";
+import { GoThreeBars } from "react-icons/go";
+import { GrClose } from "react-icons/gr";
+import { Link, useLocation } from "react-router-dom";
 export function Header() {
-const path = useLocation().pathname
-    const [isOpenNavbar, setIsOpenNavbar] = useState(false)
-    console.log(isOpenNavbar)
-    function _handleNavbar() {
-        setIsOpenNavbar(!isOpenNavbar)
-    }
-    return (
-        <div className="header_Container">
-            <div className="header_Content">
-                <div className="header_Logo">
-                    <img src="https://user-images.githubusercontent.com/59892368/211217236-86d5d9d0-8991-4a65-a29c-60bd65621ced.svg" />
-                </div>
-                <div className={isOpenNavbar ? "navBar active" : "navBar"} >
-                    <a className='close_Button' onClick={_handleNavbar}>
-                        {
-                            isOpenNavbar ? <GrClose size={50} /> : ''
-                        }
-
-                    </a>
-                    <div className='nav_Options '>
-                        <Link className={path =='/'?'nav_Option_Active':''} to="/">Home</Link>
-                        <Link className={path !='/'?'nav_Option_Active':''} to="/documentation/gettingStarted">Documentation</Link>
-                    </div>
-                    <div className="nav_Github">
-                        <a href='#'>
-                            Github
-                            <FiExternalLink />
-                        </a>
-
-                    </div>
-                </div>
-                <div className="navBar_Icon_Mobile">
-                    <a onClick={_handleNavbar}>
-                        {
-                            isOpenNavbar ? '' : <GoThreeBars size={50} />
-                        }
-
-                    </a>
-
-
-
-                </div>
+  const path = useLocation().pathname;
+  const [isOpenNavbar, setIsOpenNavbar] = useState(false);
+  console.log(isOpenNavbar);
+  function _handleNavbar() {
+    setIsOpenNavbar(!isOpenNavbar);
+  }
+  return (
+    <div className="header_Container">
+      <div className="header_Content">
+        <div className="header_Logo">
+          <img src="https://user-images.githubusercontent.com/59892368/211217236-86d5d9d0-8991-4a65-a29c-60bd65621ced.svg" />
+        </div>
+        <div className={isOpenNavbar ? "navBar active" : "navBar"}>
+          <a className="close_Button" onClick={_handleNavbar}>
+            {isOpenNavbar ? <GrClose size={50} /> : ""}
+          </a>
+          <div className="nav_Options ">
+            <Link className={path === "/" ? "nav_Option_Active" : ""} to="/">
+              Home
+            </Link>
+            <Link
+              className={path !== "/" ? "nav_Option_Active" : ""}
+              to="/documentation/gettingStarted"
+            >
+              Documentation
+            </Link>
+          </div>
+          <div className="nav_Networks">
+            <div className="github">
+              <a
+                href="https://github.com/DIGOARTHUR/github-automated-repos"
+                target="_blank"
+              >
+                Github
+                <FiExternalLink className="icon_Networks" />
+              </a>
+            </div>
+            <div className="npm">
+              <a
+                href="https://www.npmjs.com/package/github-automated-repos"
+                target="_blank"
+              >
+                NPM
+                <FiExternalLink className="icon_Networks" />
+              </a>
             </div>
+          </div>
+        </div>
+        <div className="navBar_Icon_Mobile">
+          <a onClick={_handleNavbar}>
+            {isOpenNavbar ? "" : <GoThreeBars size={50} />}
+          </a>
         </div>
-    )
-}
+      </div>
+    </div>
+  );
+}

github-automated-repos-page/src/components/Header/style.scss

@@ -1,24 +1,23 @@
 .header_Container {
-    height: 50px;
+    height: 74px;
     display: flex;
     justify-content: center;
+    align-items: center;
     background-color: #D9D9D9;
     font-size: 18px;
     position: absolute;
     z-index: 2;
     top: 0;
     width: 100%;
-
+    border-bottom: 2px gray solid;
+
     .header_Content {
         display: flex;
         width: 100%;
         justify-content: center;
     }
 
     a {
-
-        padding: 10px;
-
         &:hover {
             color: #847e7e;
         }
@@ -33,29 +32,44 @@
     }
 
     .navBar {
-       
+
         width: 50%;
+
         .close_Button {
             display: none;
         }
 
         justify-content: space-between;
         display: flex;
         align-items: center;
-
 
-        .nav_Options {
 
+        .nav_Options {
+            font-size: 22px;
             display: flex;
+            gap: 20px;
 
         }
+
         .nav_Option_Active {
             border-bottom: 3px black solid;
         }
 
-        .nav_Github {
+        .nav_Networks {
+
+
+            .github,
+            .npm {
+
+                width: 80px;
 
-            font-size: 14px;
+                a {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                }
+
+            }
         }
     }
 
@@ -82,8 +96,8 @@
                 align-items: flex-start;
                 justify-content: flex-start;
                 position: fixed;
-                right: -300px;
-                width: 300px;
+                right: -100%;
+                width: 100%;
                 height: 100vh;
                 background-color: #D9D9D9;
                 box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
@@ -99,19 +113,38 @@
                 }
 
                 .nav_Options {
-                    font-size: 30px;
+                    font-size: 35px;
                     display: flex;
                     flex-direction: column;
+                    gap: 12px;
                     margin-bottom: 10px;
+                    margin-top: 10px;
                 }
 
-            
+
                 .nav_Option_Active {
                     border-bottom: 0px black solid;
                 }
-                .nav_Github {
 
-                    font-size: 20px;
+                .nav_Networks {
+                    margin-top: 10px;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 5px;
+
+
+                    .github,
+                    .npm {
+                        width: 90px;
+
+                        a {
+                            font-size: 23px
+                        }
+
+                        .icon_Networks {
+                            font-size: 18px;
+                        }
+                    }
                 }
             }
 

github-automated-repos-page/src/global.css

@@ -4,7 +4,9 @@
   --md:900px;
 }
 
-
+html {
+  scroll-behavior: smooth;
+}
 
 body {
   margin: 0;
@@ -38,4 +40,5 @@ code {
 a{
   text-decoration: none;
   color:black;
+
 }