From ba080cb307148b3fdebe4877b10d6d8fda9e6d9c Mon Sep 17 00:00:00 2001 From: Diego Arthur Date: Wed, 1 Feb 2023 10:19:10 +0100 Subject: [PATCH 1/4] feat: adjustments --- .../src/components/Footer/index.jsx | 4 +- .../src/components/Footer/style.scss | 10 +- .../src/components/Header/index.jsx | 10 +- .../src/components/Header/style.scss | 6 +- github-automated-repos-page/src/global.css | 5 +- .../components/GettingStarted/index.jsx | 157 ++++++++++-------- .../components/GettingStarted/style.scss | 69 +++++--- .../src/pages/Documentation/style.scss | 4 +- .../src/pages/Home/style.scss | 14 +- package.json | 2 +- src/ProjectIcon.tsx | 4 +- src/StackIcon.tsx | 6 +- src/hooks/useGithubAutomatedRepos.ts | 46 ++--- 13 files changed, 200 insertions(+), 137 deletions(-) diff --git a/github-automated-repos-page/src/components/Footer/index.jsx b/github-automated-repos-page/src/components/Footer/index.jsx index b4da104..e411db1 100644 --- a/github-automated-repos-page/src/components/Footer/index.jsx +++ b/github-automated-repos-page/src/components/Footer/index.jsx @@ -6,12 +6,12 @@ export function Footer() {
-

For every community belonging to the vastness of the Universe. 🖤 by: @digoarthur

+

For every community belonging to the vastness of the Universe. 🖤 by: @digoarthur

Based in:

- Api Github + Api Github
diff --git a/github-automated-repos-page/src/components/Footer/style.scss b/github-automated-repos-page/src/components/Footer/style.scss index 9fba46d..db15c5b 100644 --- a/github-automated-repos-page/src/components/Footer/style.scss +++ b/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; + + } } \ No newline at end of file diff --git a/github-automated-repos-page/src/components/Header/index.jsx b/github-automated-repos-page/src/components/Header/index.jsx index a827c5f..91b2fcf 100644 --- a/github-automated-repos-page/src/components/Header/index.jsx +++ b/github-automated-repos-page/src/components/Header/index.jsx @@ -3,9 +3,9 @@ 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 { Link, useLocation } from 'react-router-dom' export function Header() { -const path = useLocation().pathname + const path = useLocation().pathname const [isOpenNavbar, setIsOpenNavbar] = useState(false) console.log(isOpenNavbar) function _handleNavbar() { @@ -25,8 +25,8 @@ const path = useLocation().pathname
- Home - Documentation + Home + Documentation
@@ -44,7 +44,7 @@ const path = useLocation().pathname - +
diff --git a/github-automated-repos-page/src/components/Header/style.scss b/github-automated-repos-page/src/components/Header/style.scss index ddd1d68..3429a0c 100644 --- a/github-automated-repos-page/src/components/Header/style.scss +++ b/github-automated-repos-page/src/components/Header/style.scss @@ -82,9 +82,9 @@ align-items: flex-start; justify-content: flex-start; position: fixed; - right: -300px; - width: 300px; - height: 100vh; + right: -100%; + width: 100%; + height: 100%; background-color: #D9D9D9; box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1); padding: 40px 0 0 10px; diff --git a/github-automated-repos-page/src/global.css b/github-automated-repos-page/src/global.css index 1a15e1e..a567511 100644 --- a/github-automated-repos-page/src/global.css +++ b/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; + } \ No newline at end of file diff --git a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx index ab8113b..b01fcaf 100644 --- a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx +++ b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx @@ -10,7 +10,7 @@ const packageInstall = ` `; const importPackage = ` - import { IconProjects,IconSkill, useGithubAutomatedRepos} from 'github-automated-repos'; + import { useGithubAutomatedRepos, ProjectIcon, StackIcon, IGithubRepos} from 'github-automated-repos'; `; export function GettingStarted() { @@ -20,10 +20,23 @@ export function GettingStarted() {
-

Getting Started

+

Getting Started

+
-
+

Install Package

{packageInstall} @@ -31,24 +44,34 @@ export function GettingStarted() { -
+

Import Package

{importPackage}

The package imports three elements:

-

useGithubAutomatedRepos hook responsável por automatizar os repositórios. Ele retorna um função chamada dataGithubRepos, que recebe dois parâmetros: data (dado que vem da API, e retorna 5 propriedades do hook, veja o código) e a palavra-chave (esta última responsável pela aparição do projeto na página a partir do momento em que é declarada no campo Tópicos em seu repositório).

-

{codeFragments_Hook} +

useGithubAutomatedRepos hook responsável por automatizar os repositórios. Ele retorna um função chamada dataGithubRepos, que recebe dois parâmetros: data (dado que vem da API) e a palavra-chave (esta última responsável pela aparição do projeto na página a partir do momento em que é declarada no campo Tópicos em seu repositório). O dataGithubRepos retorna, de forma otimizada, uma array de objetos contendo 5 propriedades: id, html_url, topics, name, descriptrion

+
    +
  • id: número identificação do repositório. Usado como parâmetro na tag key.
    • +
  • html_url: link referente ao repositório. Usado como o link de acesso.
    • +
  • topics: array que traz informações referente aos ícones de Projeto e Stack. Usado nos dois componentes ProjectIcon e StackIcon.
    • +
  • name: refere-se ao nome dado ao repositório. Usado como título de um card por exemplo.
    • +
  • description: esta é a descrição dada ao seu repositório. Usado como introdução do seu projeto.
    • +
+ {/*

{codeFragments_Hook}*/} -

IconProjects component that renders the project icon, the one that represents the area to which it belongs. Check out the Project Icons tab!

-

{codeFragments_ProjectIcon} +

ProjectIcon component that renders the project icon, the one that represents the area to which it belongs. Check out the Project Icons tab!

+ {/*

{codeFragments_ProjectIcon}*/} -

IconSkill component that renders the icons of the stacks used in your project. Check out the Stack Icons tab!

-

{codeFragments_StackIcons} + +

StackIcon component that renders the icons of the stacks used in your project. Check out the Stack Icons tab!

+ {/*

{codeFragments_StackIcons}*/} + +

IGithubRepos interface para o projeto em Typescript. Usado para tipar o useState que receberá a array.

-
+

Code Example

@@ -98,9 +121,9 @@ const codeFragments_ProjectIcon = ` return ( ... {/*Project Icon*/} - {item.topics.map((projectIcon) => { + {item.topics.map((icon) => { return ( - + {/* Required: key @@ -151,54 +174,60 @@ import { useGithubAutomatedRepos, IconProjects , IconSkill} from 'github-automat ` const codeExampleJSX = ` - import { useEffect, useState } from 'react'; - import { IconProjects, IconSkill, useGithubAutomatedRepos } from 'github-automated-repos'; + import './App.css'; + import { useEffect, useState } from 'react'; + import React from 'react' + import { useGithubAutomatedRepos, ProjectIcon, StackIcon} from 'github-automated-repos'; + function App() { + {/*useGithubAutomatedRepos hook*/ } + const { dataReposGithub } = useGithubAutomatedRepos() + const [repository, setRepository] = useState([]) + + useEffect(() => { + {/*Put here your github Name*/ } + fetch('https://api.github.com/users/githubName/repos') + .then(response => response.json()) + .then(data => setRepository(dataReposGithub(data, 'deploy'))) {/*<-- keyWord*/} + }, []) + + return ( +
+ { + repository.map((item) => { + return ( + - function App() { - const { dataReposGithub } = useGithubAutomatedRepos() - const [repository, setRepository] = useState([]) - useEffect(() => { - {/*Put here your github Name*/ } - fetch('https://api.github.com/users/digoarthur/repos') - .then(response => response.json()) - .then(data => setRepository(dataReposGithub(data, 'deploy'))) - }, []) - return ( - - ); -} -export default App; + {/*Name Project*/} +

{item.name}

+ + {/*Description*/} +

{item.description}

+ + {/*Stacks Icon*/} + {item.topics.map((icon) => { + return ( + + ) + })} + + + + ) + }) + } +
+ ); + + } + export default App; + `; @@ -206,7 +235,7 @@ export default App; const codeExampleTSX = ` import { useEffect, useState } from 'react'; - import { useGithubAutomatedRepos, IconProjects, IconSkill } from 'github-automated-repos'; + import { useGithubAutomatedRepos, ProjectIcon, StackIcon, IGithubRepos} from 'github-automated-repos'; import './App.css'; @@ -214,15 +243,7 @@ const codeExampleTSX = ` const { dataReposGithub } = useGithubAutomatedRepos() - interface Provider { - id: number; - html_url: string; - topics: []; - name: string; - description: string; - } - - const [repository, setRepository] = useState([]) + const [repository, setRepository] = useState([]) useEffect(() => { {/*Put here your github Name*/ } @@ -238,9 +259,9 @@ const codeExampleTSX = ` //Repository Link { //Project Icon - item.topics.map((projectIcon) => { + item.topics.map((icon) => { return ( - + ) }) } @@ -250,10 +271,10 @@ const codeExampleTSX = `

{item.description}

{ //Stacks Icon - item.topics.map((stackIconsItem) => { + item.topics.map((icon) => { return ( - + ) }) diff --git a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss index 0c0bd0d..3b16b57 100644 --- a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss +++ b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss @@ -1,6 +1,13 @@ .gettingStarted_Container { + + ul { + margin-left: 60px; + margin-bottom: 20px; - + li { + margin-top: 10px; + } + } h2 { font-weight: 600; @@ -9,43 +16,59 @@ .gettingStarted_Content { - + + .gettingStarted_Summary { + + + list-style-type: none; + + li { + + + + a { + display:flex; + align-items: center; + justify-content: flex-start; + + height: 25px; + padding: 15px; + + &:hover{ + background-color: #c7c7c7; + } + } + } + + + + + } + .step01_Container {} .step02_Container { + h4 { + margin-bottom: 20px; + } + + p { + margin-bottom: 20px; + } + .code { background-color: #eee; border-radius: 3px; font-family: courier, monospace; padding: 0 3px; font-size: 18px; - font-weight:bold; + font-weight: bold; } - - - ul { - margin-left: 100px; - - li { - margin-top: 10px; - font-weight: bold; - &:nth-child(1) { - color: #5ed49d; - } - - &:nth-child(2) { - color: #5ed49d; - } - &:nth-child(3) { - color: #60d2ff; - } - } - } } .step03_Container { diff --git a/github-automated-repos-page/src/pages/Documentation/style.scss b/github-automated-repos-page/src/pages/Documentation/style.scss index 601cba6..8d88649 100644 --- a/github-automated-repos-page/src/pages/Documentation/style.scss +++ b/github-automated-repos-page/src/pages/Documentation/style.scss @@ -1,5 +1,5 @@ .documentation_Container { - + .documentation_Content { margin-top: 80px; @@ -21,7 +21,7 @@ margin-top: 0px; padding: 20px; margin-left: 0px; - max-width: 100%; + max-width: 100%; } } diff --git a/github-automated-repos-page/src/pages/Home/style.scss b/github-automated-repos-page/src/pages/Home/style.scss index 0c65cb8..8b04c3c 100644 --- a/github-automated-repos-page/src/pages/Home/style.scss +++ b/github-automated-repos-page/src/pages/Home/style.scss @@ -8,11 +8,11 @@ flex-direction: column; justify-content: center; align-items: center; - + .banner_Content { - background: url('https://user-images.githubusercontent.com/59892368/211219963-f5905b57-44b5-4d6e-83ce-8d1476527eab.svg'); + background: url('https://user-images.githubusercontent.com/59892368/215871957-2bf57719-24b2-4c3d-9790-21cd86e072fb.svg'); height: 410px; - width: 100%; + width:100%; background-color: #3A3E45; display: flex; flex-direction: column; @@ -95,14 +95,14 @@ display: flex; justify-content: center; align-items: center; - margin-top: 180px; + margin-top: 50px; .cards_Content { display: flex; flex-wrap: wrap; width: 100%; justify-content: space-around; - gap: 10px; + gap: 50px; .card_example { background-color: #ffffff; @@ -145,9 +145,9 @@ .home_Container { .home_Content { .banner_Content { - background: url('https://user-images.githubusercontent.com/59892368/211219963-f5905b57-44b5-4d6e-83ce-8d1476527eab.svg'); + background: url('https://user-images.githubusercontent.com/59892368/215883314-258557ab-78a3-416f-b817-1d1916dfd50d.svg'); height: 350px; - width: 100%; + background-color: #3A3E45; display: flex; flex-direction: column; diff --git a/package.json b/package.json index 2812602..a837f3b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "github-automated-repos", - "version": "1.0.10", + "version": "1.0.11", "description": "", "main": "index.ts", diff --git a/src/ProjectIcon.tsx b/src/ProjectIcon.tsx index a6890cc..5622a8a 100644 --- a/src/ProjectIcon.tsx +++ b/src/ProjectIcon.tsx @@ -7,11 +7,11 @@ type Props = { } export function ProjectIcon({ iconItem, className }: Props) { - const { iconsProjects } = IconsData() + const { projectIconsData } = IconsData() return (
{ - iconsProjects[iconItem as never] ? () : (<>) + projectIconsData[iconItem as never] ? () : (<>) }
diff --git a/src/StackIcon.tsx b/src/StackIcon.tsx index 0763557..bf4dabb 100644 --- a/src/StackIcon.tsx +++ b/src/StackIcon.tsx @@ -7,11 +7,11 @@ type Props = { } export function StackIcon({ iconItem, className }: Props) { - const { iconStacks, iconsProjects } = IconsData() + const {stackIconsData, projectIconsData } = IconsData() return ( - iconItem == "deploy" || iconsProjects[iconItem as never] ? (<>) : ( + iconItem == "deploy" || projectIconsData[iconItem as never] ? (<>) : ( - + ) ) diff --git a/src/hooks/useGithubAutomatedRepos.ts b/src/hooks/useGithubAutomatedRepos.ts index a3ea4ab..49bd0ba 100644 --- a/src/hooks/useGithubAutomatedRepos.ts +++ b/src/hooks/useGithubAutomatedRepos.ts @@ -27,28 +27,36 @@ export interface IGithubRepos { } -export function useGithubAutomatedRepos(data: [], keyWordDeploy: string) { - let dataFilter = [] - dataFilter = data.filter((item: IGithubRepos) => { - return item.topics.includes(keyWordDeploy as never) - }) - - return dataFilter.map((item: IGithubRepos) => { - return { - id: item.id, - name: item.name, - html_url: item.html_url, - description: item.description, - topics: item.topics - } - }) +export function useGithubAutomatedRepos() { + + function dataReposGithub(data: [], keyWordDeploy: string) { + let dataFilter = [] + dataFilter = data.filter((item: IGithubRepos) => { + return item.topics.includes(keyWordDeploy as never) + }) + + return dataFilter.map((item: IGithubRepos) => { + return { + id: item.id, + name: item.name, + html_url: item.html_url, + description: item.description, + topics: item.topics + } + }) + } + + return { + "dataReposGithub": dataReposGithub, + + } } export function IconsData() { //25px - const iconStacks = { + const stackIconsData = { android: 'https://user-images.githubusercontent.com/59892368/215260539-ffaa9b19-07a8-420d-82c7-1b1e0e79139b.svg', angular: 'https://user-images.githubusercontent.com/59892368/215260538-a2bc2db2-23dd-4600-9a53-be6b3c7fc103.svg', aws: 'https://user-images.githubusercontent.com/59892368/215260536-748d14f8-5242-4d5a-9faf-6d62ed38a87a.svg', @@ -105,7 +113,7 @@ export function IconsData() { //64px - const iconsProjects = { + const projectIconsData = { art: 'https://user-images.githubusercontent.com/59892368/212994060-8d1644c7-96d7-4f3b-8e94-65ff76db0c92.svg', artificialintelligence: 'https://user-images.githubusercontent.com/59892368/212984565-a424b06e-db5e-464a-a5df-ddf7c9bab6ad.svg', dashboard: 'https://user-images.githubusercontent.com/59892368/212991791-588a6c13-795e-47aa-b496-8bdbaa3cac30.svg', @@ -120,8 +128,8 @@ export function IconsData() { return { - "iconStacks": iconStacks, - "iconsProjects": iconsProjects, + "stackIconsData": stackIconsData, + "projectIconsData": projectIconsData, } } From 896c3a26f0c9e4e2cdae314b449ad3b71690e027 Mon Sep 17 00:00:00 2001 From: Diego Arthur Date: Fri, 3 Feb 2023 23:04:00 +0100 Subject: [PATCH 2/4] improvement: adjustments in Import Package (add imgs) --- .../components/GettingStarted/index.jsx | 141 ++++++++++++------ .../components/GettingStarted/style.scss | 8 +- 2 files changed, 104 insertions(+), 45 deletions(-) diff --git a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx index b01fcaf..5b71cf8 100644 --- a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx +++ b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx @@ -1,10 +1,18 @@ import React from "react"; import { Highlighter } from "rc-highlight"; -import './style.scss'; - - -const highlighterStyle = { paddingLeft: '5px', height: '60px', backgroundColor: 'rgb(40, 44, 52)' } -const highlighterStyleFragments = { fontSize: '14px', paddingLeft: '30px', height: '350px', backgroundColor: 'rgb(20, 38, 99)' } +import "./style.scss"; + +const highlighterStyle = { + paddingLeft: "5px", + height: "60px", + backgroundColor: "rgb(40, 44, 52)", +}; +const highlighterStyleFragments = { + fontSize: "14px", + paddingLeft: "30px", + height: "350px", + backgroundColor: "rgb(20, 38, 99)", +}; const packageInstall = ` yarn add github-automated-repos `; @@ -14,91 +22,138 @@ const importPackage = ` `; export function GettingStarted() { - return ( <> -

Getting Started

Install Package

- {packageInstall} + {packageInstall}
- -

Import Package

- {importPackage} + {importPackage}

The package imports three elements:

-

useGithubAutomatedRepos hook responsável por automatizar os repositórios. Ele retorna um função chamada dataGithubRepos, que recebe dois parâmetros: data (dado que vem da API) e a palavra-chave (esta última responsável pela aparição do projeto na página a partir do momento em que é declarada no campo Tópicos em seu repositório). O dataGithubRepos retorna, de forma otimizada, uma array de objetos contendo 5 propriedades: id, html_url, topics, name, descriptrion

+

+ + useGithubAutomatedRepos + {" "} + hook responsável por automatizar os repositórios. Ele retorna um + função chamada dataGithubRepos, que recebe dois + parâmetros: data (dado que vem da API do Github) e a palavra-chave + (esta última responsável pela aparição do projeto na página a + partir do momento em que é declarada no campo Tópicos em seu + repositório). O dataGithubRepos retorna, de forma + otimizada, uma array de objetos contendo 5 propriedades: id, + html_url, topics, name, descriptrion +

    -
  • id: número identificação do repositório. Usado como parâmetro na tag key.
    • -
  • html_url: link referente ao repositório. Usado como o link de acesso.
    • -
  • topics: array que traz informações referente aos ícones de Projeto e Stack. Usado nos dois componentes ProjectIcon e StackIcon.
    • -
  • name: refere-se ao nome dado ao repositório. Usado como título de um card por exemplo.
    • -
  • description: esta é a descrição dada ao seu repositório. Usado como introdução do seu projeto.
    • +
  • + id: número identificação do repositório. Usado como + parâmetro na tag key. Este campo não precisa ser preenchido.{" "} +
    • +
  • + html_url: link do repositório. Usado como o link de + acesso. Este campo não precisa ser preenchido. +
    • + +
  • + topics: array que traz informações referente aos ícones + de Projeto e Stack. Usado nos dois componentes ProjectIcon e + StackIcon. E é neste campo que é repassada a chave configurada + no hook. Refere-se ao campo About / Topics do seu + Github. + +
    • + +
  • + name: este é o nome do repositório. Refere-se ao campo{" "} + Settings / General / Repository name do seu + Github. + +
    • +
  • + description: esta é a descrição dada ao seu repositório. + Refere-se ao campo About / Description do seu + Github. + +
{/*

{codeFragments_Hook}*/} - -

ProjectIcon component that renders the project icon, the one that represents the area to which it belongs. Check out the Project Icons tab!

+

+ + ProjectIcon + {" "} + component that renders the project icon, the one that represents + the area to which it belongs. Check out the Project Icons tab! +

{/*

{codeFragments_ProjectIcon}*/} - -

StackIcon component that renders the icons of the stacks used in your project. Check out the Stack Icons tab!

+

+ + StackIcon + {" "} + component that renders the icons of the stacks used in your + project. Check out the Stack Icons tab! +

{/*

{codeFragments_StackIcons}*/} -

IGithubRepos interface para o projeto em Typescript. Usado para tipar o useState que receberá a array.

+

+ + IGithubRepos + {" "} + interface para o projeto em Typescript. Usado para tipar o + useState que receberá a array. +

-

Code Example

- +

.JSX

- {codeExampleJSX} + {codeExampleJSX}
-
- +

.TSX

- {codeExampleTSX} - + {codeExampleTSX}
- - - ) + ); } -const codeFragments_Hook = - `const { dataReposGithub } = useGithubAutomatedRepos() +const codeFragments_Hook = `const { dataReposGithub } = useGithubAutomatedRepos() const [repository, setRepository] = useState([]) useEffect(() => { {/*Put here your github Name*/} @@ -113,7 +168,7 @@ useEffect(() => { id: number; */} }, []) -` +`; const codeFragments_ProjectIcon = ` { @@ -141,7 +196,7 @@ const codeFragments_ProjectIcon = ` }) } ... -` +`; const codeFragments_StackIcons = ` { @@ -167,11 +222,11 @@ const codeFragments_StackIcons = ` ) }) } -` +`; const codeFragments_04 = ` import { useGithubAutomatedRepos, IconProjects , IconSkill} from 'github-automated-repos'; {/*Import Package*/} -` +`; const codeExampleJSX = ` import './App.css'; @@ -231,8 +286,6 @@ const codeExampleJSX = ` `; - - const codeExampleTSX = ` import { useEffect, useState } from 'react'; import { useGithubAutomatedRepos, ProjectIcon, StackIcon, IGithubRepos} from 'github-automated-repos'; @@ -290,4 +343,4 @@ const codeExampleTSX = ` export default App; -`; \ No newline at end of file +`; diff --git a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss index 3b16b57..8526c9d 100644 --- a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss +++ b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss @@ -68,7 +68,13 @@ } - +ul li{ + img{ + margin-top: 20px; + height: 500px; + border-radius: 10px; + } +} } .step03_Container { From b1dec89b9edf6cbcccae73e1adb92f3111cd5828 Mon Sep 17 00:00:00 2001 From: Diego Arthur Date: Sat, 4 Feb 2023 09:32:46 +0100 Subject: [PATCH 3/4] doc: english translation, link to the words Project and Stack --- .../components/GettingStarted/index.jsx | 71 ++++++++++++------- .../components/GettingStarted/style.scss | 5 +- 2 files changed, 48 insertions(+), 28 deletions(-) diff --git a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx index 5b71cf8..d8ec3d1 100644 --- a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx +++ b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx @@ -55,46 +55,63 @@ export function GettingStarted() { useGithubAutomatedRepos {" "} - hook responsável por automatizar os repositórios. Ele retorna um - função chamada dataGithubRepos, que recebe dois - parâmetros: data (dado que vem da API do Github) e a palavra-chave - (esta última responsável pela aparição do projeto na página a - partir do momento em que é declarada no campo Tópicos em seu - repositório). O dataGithubRepos retorna, de forma - otimizada, uma array de objetos contendo 5 propriedades: id, - html_url, topics, name, descriptrion + hook responsible for automating the repositories. It returns a + function called dataGithubRepos, which takes two + parameters: data (data that comes from the GitHub API) and the + keyword (the latter responsible for the appearance of the project + on the page from the moment it is declared in the Topics field in + your repository). The dataGithubRepos returns, so + optimized, an array of objects containing 5 properties: id, + html_url, topics, name and description.

  • - id: número identificação do repositório. Usado como - parâmetro na tag key. Este campo não precisa ser preenchido.{" "} + id: repository identification number. used as parameter + in the key tag. This field does not need to be filled in.{" "}
  • - html_url: link do repositório. Usado como o link de - acesso. Este campo não precisa ser preenchido. + html_url: repository link. Used as the link of access. + This field does not need to be filled in.
  • - topics: array que traz informações referente aos ícones - de Projeto e Stack. Usado nos dois componentes ProjectIcon e - StackIcon. E é neste campo que é repassada a chave configurada - no hook. Refere-se ao campo About / Topics do seu - Github. + topics: array that brings information about the icons in{" "} + + Project + {" "} + and{" "} + + Stack + + . Used in both ProjectIcon and StackIcon components. It is in + this field that is passed the key configured in the hook. Refers + to the field + About / Topics of your GitHub.
  • - name: este é o nome do repositório. Refere-se ao campo{" "} - Settings / General / Repository name do seu - Github. - + name: This is the name of the repository. Refers to the + field Settings / General / Repository name of your + GitHub. +
    + +
  • - description: esta é a descrição dada ao seu repositório. - Refere-se ao campo About / Description do seu - Github. - + description: This is the description given to your + repository. Refers to the About /Description field{" "} + of your GitHub. +
    + +
{/*

{codeFragments_Hook}*/} @@ -103,8 +120,8 @@ export function GettingStarted() { ProjectIcon {" "} - component that renders the project icon, the one that represents - the area to which it belongs. Check out the Project Icons tab! + component that renders the project icon, the icon that represents + which area the project belongs to.

{/*

{codeFragments_ProjectIcon}*/} diff --git a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss index 8526c9d..94fcfea 100644 --- a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss +++ b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss @@ -69,9 +69,12 @@ ul li{ + a{ + color:blue; + } img{ margin-top: 20px; - height: 500px; + width: 80%; border-radius: 10px; } } From 70d687d02d20fc0dc0629b9734f62233c258867c Mon Sep 17 00:00:00 2001 From: Diego Arthur Date: Sat, 11 Feb 2023 16:19:06 +0100 Subject: [PATCH 4/4] document: improved documentation and interface in general. --- github-automated-repos-page/package.json | 1 + .../src/components/Header/index.jsx | 111 ++--- .../src/components/Header/style.scss | 63 ++- .../components/GettingStarted/index.jsx | 416 ++++++++++-------- .../components/GettingStarted/style.scss | 84 +++- .../src/pages/Documentation/style.scss | 10 +- .../src/pages/Home/index.jsx | 86 ++-- .../src/pages/Home/style.scss | 99 +++-- github-automated-repos-page/yarn.lock | 14 +- 9 files changed, 542 insertions(+), 342 deletions(-) diff --git a/github-automated-repos-page/package.json b/github-automated-repos-page/package.json index e2b0722..f58243b 100644 --- a/github-automated-repos-page/package.json +++ b/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": { diff --git a/github-automated-repos-page/src/components/Header/index.jsx b/github-automated-repos-page/src/components/Header/index.jsx index 91b2fcf..f36e6c0 100644 --- a/github-automated-repos-page/src/components/Header/index.jsx +++ b/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 ( -
-
-
- -
-
- - { - isOpenNavbar ? : '' - } - - -
- Home - Documentation -
- -
- + const path = useLocation().pathname; + const [isOpenNavbar, setIsOpenNavbar] = useState(false); + console.log(isOpenNavbar); + function _handleNavbar() { + setIsOpenNavbar(!isOpenNavbar); + } + return ( +
+
+
+ +
+
+ + {isOpenNavbar ? : ""} + +
+ + Home + + + Documentation + +
+ +
+ - ) -} \ No newline at end of file +
+
+ ); +} diff --git a/github-automated-repos-page/src/components/Header/style.scss b/github-automated-repos-page/src/components/Header/style.scss index 3429a0c..1093348 100644 --- a/github-automated-repos-page/src/components/Header/style.scss +++ b/github-automated-repos-page/src/components/Header/style.scss @@ -1,14 +1,16 @@ .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%; @@ -16,9 +18,6 @@ } a { - - padding: 10px; - &:hover { color: #847e7e; } @@ -33,8 +32,9 @@ } .navBar { - + width: 50%; + .close_Button { display: none; } @@ -42,20 +42,34 @@ 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; + } + + } } } @@ -84,7 +98,7 @@ position: fixed; right: -100%; width: 100%; - height: 100%; + height: 100vh; background-color: #D9D9D9; box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1); padding: 40px 0 0 10px; @@ -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; + } + } } } diff --git a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx index d8ec3d1..c699844 100644 --- a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx +++ b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/index.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { Highlighter } from "rc-highlight"; import "./style.scss"; @@ -7,11 +7,11 @@ const highlighterStyle = { height: "60px", backgroundColor: "rgb(40, 44, 52)", }; -const highlighterStyleFragments = { - fontSize: "14px", - paddingLeft: "30px", - height: "350px", - backgroundColor: "rgb(20, 38, 99)", +const highlighterStyleImport = { + paddingLeft: "5px", + height: "60px", + fontSize: "17px", + backgroundColor: "rgb(40, 44, 52)", }; const packageInstall = ` yarn add github-automated-repos @@ -22,6 +22,7 @@ const importPackage = ` `; export function GettingStarted() { + const [changeCodeExample, setChangeCodeExample] = useState("javascript"); return ( <>
@@ -35,6 +36,12 @@ export function GettingStarted() {
  • Import Package
    • +
  • + + {" "} + Fill in the fields in the github repository + +
  • Example Code
    • @@ -45,83 +52,25 @@ export function GettingStarted() { {packageInstall}
    - + . . .

    Import Package

    - {importPackage} + + {importPackage} +
    -

    The package imports three elements:

    -

    - - useGithubAutomatedRepos - {" "} - hook responsible for automating the repositories. It returns a - function called dataGithubRepos, which takes two - parameters: data (data that comes from the GitHub API) and the - keyword (the latter responsible for the appearance of the project - on the page from the moment it is declared in the Topics field in - your repository). The dataGithubRepos returns, so - optimized, an array of objects containing 5 properties: id, - html_url, topics, name and description. -

    -
      -
    • - id: repository identification number. used as parameter - in the key tag. This field does not need to be filled in.{" "} -
      • -
    • - html_url: repository link. Used as the link of access. - This field does not need to be filled in. -
      • - -
    • - topics: array that brings information about the icons in{" "} - - Project - {" "} - and{" "} - - Stack - - . Used in both ProjectIcon and StackIcon components. It is in - this field that is passed the key configured in the hook. Refers - to the field - About / Topics of your GitHub. - -
      • - -
    • - name: This is the name of the repository. Refers to the - field Settings / General / Repository name of your - GitHub. -
      - -
      -
      • -
    • - description: This is the description given to your - repository. Refers to the About /Description field{" "} - of your GitHub. -
      - -
      -
      • -
    - {/*

    {codeFragments_Hook}*/} +
    + +

    The package imports four elements:

    ProjectIcon {" "} - component that renders the project icon, the icon that represents - which area the project belongs to. + component that renders the icons of the projects that come from + data returned from the dataGithubRepos function as the Topics + property. Check the Project Icons tab!

    {/*

    {codeFragments_ProjectIcon}*/} @@ -129,8 +78,9 @@ export function GettingStarted() { StackIcon {" "} - component that renders the icons of the stacks used in your - project. Check out the Stack Icons tab! + component that renders the icons of the stacks that come from data + returned from the dataGithubRepos function as the Topics property. + Check the Stack Icons tab!

    {/*

    {codeFragments_StackIcons}*/} @@ -138,31 +88,139 @@ export function GettingStarted() { IGithubRepos {" "} - interface para o projeto em Typescript. Usado para tipar o - useState que receberá a array. + interface for the application in Typescript. Used to type the + useState that will receive the array. +

    +

    + + useGithubAutomatedRepos + {" "} + hook responsible for automating the repositories. It returns a + function called{" "} + + dataGithubRepos + + , which takes two parameters: data (data that comes from the + GitHub API) and the keyword (the latter responsible for showing + the project on your website from the moment it is declared in the + Topics field of the your Github repository). The{" "} + dataGithubRepos returns, so optimized, an array of + objects containing 5 properties: id, html_url, topics, name and + description.

    + + {dataReposGithubCode} + + + . . . + +
    +

    Fill in the fields in the github repository

    +
      +
    • + id: repository identification number. used as parameter + in the key tag. This field does not need to be filled in.{" "} +
      • +
    • + html_url: repository link. Used as the link of access. + This field does not need to be filled in. +
      • +
    • + homepage: it's the access link to the built page, page + deploy. About / Website of your GitHub. +
      + +
      +
      • +
    • + topics: array that brings information about the icons + in{" "} + + Project + {" "} + and{" "} + + Stack + + . Used in both ProjectIcon and StackIcon components. It is in + this field that is passed the key configured in the hook. + Refers to the field + About / Topics of your GitHub. + +
      • + +
    • + name: This is the name of the repository. Refers to the + field Settings / General / Repository name of + your GitHub. +
      + +
      +
      • +
    • + description: This is the description given to your + repository. Refers to the{" "} + About /Description field of your GitHub. +
      + +
      +
      • +
    +
    + {/*

    {codeFragments_Hook}*/}
    -
    + . . . + +

    Code Example

    -
    - -

    .JSX

    -
    - {codeExampleJSX} +

    + Don't forget to fill in the keyword fields (determined by you) and + enter your github username. +

    + {githubUsername}
    + {keywordCode} -
    - -

    .TSX

    +
    +
    + +
    - {codeExampleTSX} + + {changeCodeExample === "javascript" ? ( + {codeExampleJSX} + ) : ( + {codeExampleTSX} + )} + +
    @@ -187,68 +245,25 @@ useEffect(() => { }, []) `; -const codeFragments_ProjectIcon = ` -{ - repository.map((item) => { - return ( - ... - {/*Project Icon*/} - {item.topics.map((icon) => { - return ( - - {/* - Required: - key - iconItem - - Optional: - className - - */} - ) - })} - - ... - ) - }) -} -... +const keywordCode = ` ... + {/*Put here your keyword*/} + then(data => setRepository(dataReposGithub(data, '{keyword}'))) + ... `; -const codeFragments_StackIcons = ` -{ - repository.map((item) => { - return ( - ... - {/*Stacks Icon*/} - {item.topics.map((stackIconsItem) => { - return ( - - {/* - Required: - key - iconItem - - Optional: - className - - */} - ) - })} - ... - ) - }) -} +const githubUsername = ` ... + {/*Put here your github Name*/} + fetch('https://api.github.com/users/{githubName}/repos') + ... `; -const codeFragments_04 = ` -import { useGithubAutomatedRepos, IconProjects , IconSkill} from 'github-automated-repos'; {/*Import Package*/} +const dataReposGithubCode = ` + const { dataReposGithub } = useGithubAutomatedRepos() `; const codeExampleJSX = ` import './App.css'; import { useEffect, useState } from 'react'; - import React from 'react' import { useGithubAutomatedRepos, ProjectIcon, StackIcon} from 'github-automated-repos'; function App() { {/*useGithubAutomatedRepos hook*/ } @@ -259,7 +274,7 @@ const codeExampleJSX = ` {/*Put here your github Name*/ } fetch('https://api.github.com/users/githubName/repos') .then(response => response.json()) - .then(data => setRepository(dataReposGithub(data, 'deploy'))) {/*<-- keyWord*/} + .then(data => setRepository(dataReposGithub(data, 'deploy'))); {/*<-- keyWord*/} }, []) return ( @@ -267,7 +282,7 @@ const codeExampleJSX = ` { repository.map((item) => { return ( - +
    {/*Project Icon*/} {item.topics.map((icon) => { @@ -275,13 +290,18 @@ const codeExampleJSX = ` ) })} - - {/*Name Project*/} -

    {item.name}

    - + {/*html Url*/} +     + {/*Name Project*/} +

    {item.name}

    +     {/*Description*/}

    {item.description}

    + {/*Homepage*/} + +

    Homepage

    +     {/*Stacks Icon*/} {item.topics.map((icon) => { return ( @@ -289,7 +309,7 @@ const codeExampleJSX = ` ) })} - +
    ) }) @@ -303,61 +323,67 @@ const codeExampleJSX = ` `; -const codeExampleTSX = ` - import { useEffect, useState } from 'react'; - import { useGithubAutomatedRepos, ProjectIcon, StackIcon, IGithubRepos} from 'github-automated-repos'; - import './App.css'; - - - function App() { - +const codeExampleTSX = ` + import './App.css'; + import { useEffect, useState } from 'react'; + import { useGithubAutomatedRepos, ProjectIcon, StackIcon, IGithubRepos} from 'github-automated-repos'; + function App() { + {/*useGithubAutomatedRepos hook*/ } const { dataReposGithub } = useGithubAutomatedRepos() - const [repository, setRepository] = useState([]) useEffect(() => { - {/*Put here your github Name*/ } - fetch('https://api.github.com/users/digoarthur/repos') - .then(response => response.json()) - .then(data => setRepository(dataReposGithub(data, 'deploy'))) - }, []) + {/*Put here your github Name*/ } + fetch('https://api.github.com/users/githubName/repos') + .then(response => response.json()) + .then(data => setRepository(dataReposGithub(data, 'deploy'))); {/*<-- keyWord*/} + }, []) return ( -
    - {repository.map((item) => { +
    + { + repository.map((item) => { return ( - //Repository Link - - { //Project Icon - item.topics.map((icon) => { - return ( - - ) - }) - } - {/*Name Project*/} -

    {item.name}

    +
    + + {/*Project Icon*/} + {item.topics.map((icon) => { + return ( + + ) + })} + + {/*html Url*/} + + {/*Name Project*/} +

    {item.name}

    +     + {/*Description*/}

    {item.description}

    + + {/*Homepage*/} + +

    Homepage

    +     - { //Stacks Icon - item.topics.map((icon) => { - return ( - - + {/*Stacks Icon*/} + {item.topics.map((icon) => { + return ( + + ) + })} - ) - }) - } +
    - ) - - })} -
    + }) + } +
    ); - } - export default App; + } + export default App; + `; diff --git a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss index 94fcfea..e738e42 100644 --- a/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss +++ b/github-automated-repos-page/src/pages/Documentation/components/GettingStarted/style.scss @@ -1,8 +1,9 @@ .gettingStarted_Container { - + ul { margin-left: 60px; margin-bottom: 20px; + list-style-type: none; li { margin-top: 10px; @@ -12,29 +13,37 @@ h2 { font-weight: 600; margin: 30px 0px 15px 0; + margin-bottom: 30px; } + p { + margin-bottom: 20px; + } .gettingStarted_Content { - .gettingStarted_Summary { + .divison_Container { + font-size: 80px; + display: flex; + justify-content: center; + line-height: 10px; + margin-bottom: 80px; + } + + .gettingStarted_Summary { - list-style-type: none; - li { - - - + a { - display:flex; + display: flex; align-items: center; justify-content: flex-start; height: 25px; padding: 15px; - - &:hover{ + + &:hover { background-color: #c7c7c7; } } @@ -53,9 +62,7 @@ margin-bottom: 20px; } - p { - margin-bottom: 20px; - } + .code { background-color: #eee; @@ -68,19 +75,48 @@ } -ul li{ - a{ - color:blue; - } - img{ - margin-top: 20px; - width: 80%; - border-radius: 10px; - } -} + ul li { + a { + color: blue; + } + + img { + margin-top: 20px; + width: 80%; + border-radius: 10px; + } + } } - .step03_Container { + .step04_Container { + .button_Container_ExampleCode { + display: flex; + gap: 25px; + margin-bottom: 20px; + + .button { + display: flex; + align-items: center; + font-size: 18px; + width: 150px; + padding: 12px; + justify-content: space-between; + border-radius: 10px; + background-color: #fff; + border: 0.2px #c7c7c7 solid; + cursor: pointer; + } + + .javascript_Button { + background-color: #f1dc50a9; + border: 2px #f1dc50a9 solid; + } + + .typescript_Button { + background-color: #3179c64b; + border: 2px #3179c67a solid; + } + } .jsx_Content { margin: 15px 0px; diff --git a/github-automated-repos-page/src/pages/Documentation/style.scss b/github-automated-repos-page/src/pages/Documentation/style.scss index 8d88649..2387d63 100644 --- a/github-automated-repos-page/src/pages/Documentation/style.scss +++ b/github-automated-repos-page/src/pages/Documentation/style.scss @@ -1,11 +1,15 @@ .documentation_Container { - + .documentation_Content { margin-top: 80px; - padding: 20px; + padding: 60px; margin-left: 300px; max-width: 75%; + font-size: 20px; + + + .document_Title { font-weight: 400; font-size: 60px; @@ -22,7 +26,7 @@ padding: 20px; margin-left: 0px; max-width: 100%; - + } } } \ No newline at end of file diff --git a/github-automated-repos-page/src/pages/Home/index.jsx b/github-automated-repos-page/src/pages/Home/index.jsx index 80851a2..44965bd 100644 --- a/github-automated-repos-page/src/pages/Home/index.jsx +++ b/github-automated-repos-page/src/pages/Home/index.jsx @@ -1,63 +1,95 @@ - -import { useEffect } from 'react'; -import './style.scss'; -import { Header } from '../../components/Header'; -import Aos from 'aos'; -import { Link } from 'react-router-dom' +import { useEffect } from "react"; +import "./style.scss"; +import { Header } from "../../components/Header"; +import Aos from "aos"; +import { Link } from "react-router-dom"; import "aos/dist/aos.css"; -import { Footer } from '../../components/Footer'; +import { Footer } from "../../components/Footer"; +import TypeWriter from "typewriter-effect"; +import { FiChevronDown } from "react-icons/fi"; export function Home() { - useEffect(() => { Aos.init({ duration: 2000 }); - }, []) + }, []); return (
    -

    Github Automated Repos

    +

    Github Automated Repos

    Easy and practical way to expose your Github projects.

    -
    -
    - Getting Start +
    + { + typewriter + .changeDelay(30) + .typeString("Control your projects") + .pauseFor(1000) + .deleteAll() + .typeString("Customize and represent through icons") + .pauseFor(1000) + .deleteAll() + .start(); + }} + /> +

    in one place!

    +
    +
    +
    + + Getting Start + + + +
    -
    +

    Control your projects

    - Decide which project will appear on your personal page from a keyword determined by you. + Decide which project will be viewed on your personal page from a + keyword determined by you.

    -

    In one place

    +

    Customize and represent through icons.

    - Manage everything in the same place where you keep your project code. In just one field. + Customize, show what your project is about and what technologies + you used.

    - +
    -

    Customize and represent through icons.

    +

    In one place

    - Customize, show what your project is about and what technologies you used. + Manage everything in the same place where you keep your project + code. In just one field.

    - +
    -
    - - -
    - ) -} \ No newline at end of file + ); +} diff --git a/github-automated-repos-page/src/pages/Home/style.scss b/github-automated-repos-page/src/pages/Home/style.scss index 8b04c3c..f1efeca 100644 --- a/github-automated-repos-page/src/pages/Home/style.scss +++ b/github-automated-repos-page/src/pages/Home/style.scss @@ -1,6 +1,3 @@ - - - .home_Container { .home_Content { @@ -8,11 +5,12 @@ flex-direction: column; justify-content: center; align-items: center; - + .banner_Content { background: url('https://user-images.githubusercontent.com/59892368/215871957-2bf57719-24b2-4c3d-9790-21cd86e072fb.svg'); - height: 410px; - width:100%; + margin-top: 30px; + height: 470px; + width: 100%; background-color: #3A3E45; display: flex; flex-direction: column; @@ -21,23 +19,43 @@ justify-content: center; h1 { - font-size: 40px; + font-size: 55px; } p { font-size: 25px; } + .subBanner_Content_Effect { + display: flex; + flex-direction: column; + justify-content: center; + + width: 600px; + margin-top: 50px; + font-weight: 700; + + align-items: center; + font-size: 28px; + + p { + margin-top: 3.2px; + font-size: 22px; + } + } } .button_Content { - display: flex; justify-content: center; + flex-direction: column; + margin-top: calc(100vh - 53%); + align-items: center; + + .button_effect { - .effect { text-align: center; display: inline-block; position: relative; @@ -47,6 +65,7 @@ border: 2px #D9D9D9 solid; margin-top: 50px; + /* background-color: - add your own background-color */ font: { family: 'Roboto', sans-serif; @@ -60,7 +79,7 @@ overflow: hidden; } - .effect.effect-1 { + .button_effect-2 { transition: all 0.2s linear 0s; &:before { @@ -88,6 +107,22 @@ } } } + + .icon_Down { + animation: go-back 1.5s infinite; + + margin-top: calc(100vh - 700px); + + @keyframes go-back { + 0% { + transform: translateY(30px); + } + + 100% { + transform: translateY(0); + } + } + } } .cards_Container { @@ -95,7 +130,7 @@ display: flex; justify-content: center; align-items: center; - margin-top: 50px; + margin-top: 100px; .cards_Content { display: flex; @@ -111,22 +146,27 @@ height: 100%; width: 100%; - &:nth-child(2){ + &:nth-child(2) { display: flex; flex-direction: column; align-items: flex-end; } - h1{ + + h1 { border-bottom: 2px solid #3A3E45; padding-bottom: 5px; + font-size: 42px; } + p { - font-size: 20px; + + padding-left: 25px; + font-size: 22px; margin: 20px 0px; - + } - img{ + img { width: 100%; height: 100%; } @@ -147,27 +187,36 @@ .banner_Content { background: url('https://user-images.githubusercontent.com/59892368/215883314-258557ab-78a3-416f-b817-1d1916dfd50d.svg'); height: 350px; - - background-color: #3A3E45; - display: flex; - flex-direction: column; - align-items: center; - color: white; - justify-content: center; - + text-align: center; + h1 { + + font-size: 30px; } p { + width: 70%; font-size: 22px; } + .subBanner_Content_Effect { + + display: none; + + } + + } + + .button_Content { + margin-top: 10px; + .icon_Down { + display: none; + } } - .cards_Container { width: 100%; display: flex; diff --git a/github-automated-repos-page/yarn.lock b/github-automated-repos-page/yarn.lock index 8608c2a..132a5c5 100644 --- a/github-automated-repos-page/yarn.lock +++ b/github-automated-repos-page/yarn.lock @@ -4690,7 +4690,7 @@ get-symbol-description@^1.0.0: get-intrinsic "^1.1.1" "github-automated-repos@file:.yalc/github-automated-repos": - version "1.0.4" + version "1.0.10" glob-parent@^5.1.2, glob-parent@~5.1.2: version "5.1.2" @@ -7427,7 +7427,7 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.8.1: +prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -7481,7 +7481,7 @@ quick-lru@^5.1.1: resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz" integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== -raf@^3.4.1: +raf@^3.4.0, raf@^3.4.1: version "3.4.1" resolved "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz" integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== @@ -8755,6 +8755,14 @@ typedarray-to-buffer@^3.1.5: dependencies: is-typedarray "^1.0.0" +typewriter-effect@^2.19.0: + version "2.19.0" + resolved "https://registry.yarnpkg.com/typewriter-effect/-/typewriter-effect-2.19.0.tgz#396fe35e1313279ae6202775bf8dff5db37c5b64" + integrity sha512-rhUX1ukmAXNFWUnMFx8CDU1uLWJQ7pRYzDU7WfHJRq43i6SmWSP9vFiUsOGfXINodUAgZiJ5xnzwLciHxZDGDg== + dependencies: + prop-types "^15.6.2" + raf "^3.4.0" + unbox-primitive@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"