From 5e03f7b429a4defb8c974fe6547c104c0782b8b8 Mon Sep 17 00:00:00 2001 From: bravo68web Date: Wed, 30 Mar 2022 20:07:11 +0530 Subject: [PATCH] Added First Skilled --- components/skillCard.jsx | 28 +++--- components/skillCard.styled.js | 29 ++++--- components/skills.jsx | 41 +++++---- package.json | 1 + yarn.lock | 150 ++++++++++++++++++++------------- 5 files changed, 148 insertions(+), 101 deletions(-) diff --git a/components/skillCard.jsx b/components/skillCard.jsx index 75b3a9d..0ed638e 100644 --- a/components/skillCard.jsx +++ b/components/skillCard.jsx @@ -1,19 +1,21 @@ import React from "react"; import SkillCardStyle from "./skillCard.styled"; -function SkillCard() { - return ( - -
-
26th September
-
- @zhr_jafri We used to say that as joke, TIL, they real own rights to that - zehreeli kheer. -
-
-
- - ); +function SkillCard({ title, description, image }) { + return ( + +
+ {image && ( +
+ +
+ )} +
{title}
+
{description}
+
+
+ + ); } export default SkillCard; diff --git a/components/skillCard.styled.js b/components/skillCard.styled.js index f05ce0a..61af6fe 100644 --- a/components/skillCard.styled.js +++ b/components/skillCard.styled.js @@ -1,17 +1,20 @@ import styled from "styled-components"; export default styled.div` - width: 33.33%; - padding: 10px; - .card { - background-color: var(--color1); - padding: 15px; - width: 100%; - height: auto; - border-radius: 5px; - transition: 0.1s; - :hover { - transform: scale(1.1); - } - } + width: 33.33%; + padding: 10px; + .card { + background-color: var(--color1); + padding: 15px; + width: 100%; + height: auto; + border-radius: 5px; + transition: 0.1s; + :hover { + transform: scale(1.1); + } + } + .card-logo { + float: right; + } `; diff --git a/components/skills.jsx b/components/skills.jsx index 44bd1ce..414b6ba 100644 --- a/components/skills.jsx +++ b/components/skills.jsx @@ -1,24 +1,33 @@ import React, { useEffect, useState } from "react"; import Skill from "./skillCard"; import SkillsStyle from "./skills.style"; +import axios from "axios"; function Skills() { - const [skills, setSkills] = useState([]); - useEffect(() => { - setSkills([{}]); - //api fetch here - }, []); - return ( - -
- - - - - -
- - ); + const [skills, setSkills] = useState({}); + useEffect(() => { + axios.get("https://api.github.com/users/bravo68web").then((res) => { + console.log(res.data); + setSkills(res.data); + }); + // setSkills([{}]); + //api fetch here + }, []); + return ( + +
+ + + + + +
+ + ); } export default Skills; diff --git a/package.json b/package.json index f13d68f..4f156ae 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@emotion/styled": "^11.6.0", "@mui/icons-material": "^5.3.0", "@mui/material": "^5.3.0", + "axios": "^0.26.1", "next": "12.0.4", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/yarn.lock b/yarn.lock index 21b507b..048a595 100644 --- a/yarn.lock +++ b/yarn.lock @@ -148,6 +148,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.17.2": + version "7.17.8" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2" + integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.16.0": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6" @@ -237,6 +244,13 @@ dependencies: "@emotion/memoize" "^0.7.4" +"@emotion/is-prop-valid@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95" + integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ== + dependencies: + "@emotion/memoize" "^0.7.4" + "@emotion/memoize@0.7.4": version "0.7.4" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" @@ -356,87 +370,88 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== -"@mui/base@5.0.0-alpha.62": - version "5.0.0-alpha.62" - resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.62.tgz#d86ff07f33d7b49ebb545f29e184750c0270c3f8" - integrity sha512-ItmdSZwHKQbLbAsS3sWguR7OHqYqh2cYWahoVmHb13Kc6bMdmVUTY4x57IlDSU712B0yuA0Q/gPTq7xADKnFow== +"@mui/base@5.0.0-alpha.74": + version "5.0.0-alpha.74" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.74.tgz#15509242e7911446d5957375b1b18cbb72b3a750" + integrity sha512-pw3T1xNXpW8pLo9+BvtyazZb0CSjNJsjbzznlbV/aNkBfjNPXQVI3X1NDm3WSI8y6M96WDIVO7XrHAohOwALSQ== dependencies: - "@babel/runtime" "^7.16.3" - "@emotion/is-prop-valid" "^1.1.1" - "@mui/utils" "^5.2.3" - "@popperjs/core" "^2.4.4" + "@babel/runtime" "^7.17.2" + "@emotion/is-prop-valid" "^1.1.2" + "@mui/types" "^7.1.3" + "@mui/utils" "^5.5.3" + "@popperjs/core" "^2.11.4" clsx "^1.1.1" prop-types "^15.7.2" react-is "^17.0.2" -"@mui/icons-material@^5.2.5": - version "5.2.5" - resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.2.5.tgz#c6575430b565c023232147934c45775630a53f02" - integrity sha512-uQiUz+l0xy+2jExyKyU19MkMAR2F7bQFcsQ5hdqAtsB14Jw2zlmIAD55mV6f0NxKCut7Rx6cA3ZpfzlzAfoK8Q== +"@mui/icons-material@^5.3.0": + version "5.5.1" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.5.1.tgz#848a57972617411370775980cbc6990588d4aafb" + integrity sha512-40f68p5+Yhq3dCn3QYHqQt5RETPyR3AkDw+fma8PtcjqvZ+d+jF84kFmT6NqwA3he7TlwluEtkyAmPzUE4uPdA== dependencies: - "@babel/runtime" "^7.16.3" + "@babel/runtime" "^7.17.2" -"@mui/material@^5.2.6": - version "5.2.6" - resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.2.6.tgz#fda165759281fe7d6f0ec2744a255f283e17b7aa" - integrity sha512-yF2bRqyJMo6bYXT7TPA9IU/XLaXHi47Xvmj8duQa5ha3bCpFMXLfGoZcAUl6ZDjjGEz1nCFS+c1qx219xD/aeQ== +"@mui/material@^5.3.0": + version "5.5.3" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.5.3.tgz#411e53a69da3f9d6664e99f1bdcdaf2760540fdc" + integrity sha512-eADa3kUYbbr1jNjcufn0a7HeU8cSo0agbrkj720hodxVFNIfzq7a2e58Z+PaZqll55kMGBvlYJ7rTcXU399x5A== dependencies: - "@babel/runtime" "^7.16.3" - "@mui/base" "5.0.0-alpha.62" - "@mui/system" "^5.2.6" - "@mui/types" "^7.1.0" - "@mui/utils" "^5.2.3" + "@babel/runtime" "^7.17.2" + "@mui/base" "5.0.0-alpha.74" + "@mui/system" "^5.5.3" + "@mui/types" "^7.1.3" + "@mui/utils" "^5.5.3" "@types/react-transition-group" "^4.4.4" clsx "^1.1.1" - csstype "^3.0.10" + csstype "^3.0.11" hoist-non-react-statics "^3.3.2" prop-types "^15.7.2" react-is "^17.0.2" react-transition-group "^4.4.2" -"@mui/private-theming@^5.2.3": - version "5.2.3" - resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.2.3.tgz#6d4e7d8309adc932b444fdd091caec339c430be4" - integrity sha512-Lc1Cmu8lSsYZiXADi9PBb17Ho82ZbseHQujUFAcp6bCJ5x/d+87JYCIpCBMagPu/isRlFCwbziuXPmz7WOzJPQ== +"@mui/private-theming@^5.5.3": + version "5.5.3" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.5.3.tgz#c232a39dd3c268fdef7e92ccc40d51bda9eec3ab" + integrity sha512-Wf7NurY7lk8SBWelSBY2U02zxLt1773JpIcXTHuEC9/GZdQA4CXCJGl2cVQzheKhee5rZ+8JwGulrRiVl1m+4A== dependencies: - "@babel/runtime" "^7.16.3" - "@mui/utils" "^5.2.3" + "@babel/runtime" "^7.17.2" + "@mui/utils" "^5.5.3" prop-types "^15.7.2" -"@mui/styled-engine@^5.2.6": - version "5.2.6" - resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.2.6.tgz#eac4a98b05b17190c2155b31b0e36338b3fb09f2" - integrity sha512-bqAhli8eGS6v2qxivy2/4K0Ag8o//jsu1G2G6QcieFiT6y7oIF/nd/6Tvw6OSm3roOTifVQWNKwkt1yFWhGS+w== +"@mui/styled-engine@^5.5.2": + version "5.5.2" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.5.2.tgz#1f92dd27d76f0b7df7aa52c7c7a710e59b2275a6" + integrity sha512-jkz5AHHbA43akBo5L3y1X1/X0f+RvXvCp3eXKt+iOf3qnKSAausbtlVz7gBbC4xIWDnP1Jb/6T+t/0/7gObRYA== dependencies: - "@babel/runtime" "^7.16.3" + "@babel/runtime" "^7.17.2" "@emotion/cache" "^11.7.1" prop-types "^15.7.2" -"@mui/system@^5.2.6": - version "5.2.6" - resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.2.6.tgz#153b534223caae254a98162eef06d6ab48ecff34" - integrity sha512-PZ7bmpWOLikWgqn2zWv9/Xa7lxnRBOmfjoMH7c/IVYJs78W3971brXJ3xV9MEWWQcoqiYQeXzUJaNf4rFbKCBA== +"@mui/system@^5.5.3": + version "5.5.3" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.5.3.tgz#c78d4c16009430389ffd3495d694945422d72ca5" + integrity sha512-J9JcySJuEqfEoP334K/2gEWm2vOx73Uqjii3qlFVhWRBOAJ0Pjyk0sN5W/eVRbwhUm95DNgh2V5s8dRK3vzyVw== dependencies: - "@babel/runtime" "^7.16.3" - "@mui/private-theming" "^5.2.3" - "@mui/styled-engine" "^5.2.6" - "@mui/types" "^7.1.0" - "@mui/utils" "^5.2.3" + "@babel/runtime" "^7.17.2" + "@mui/private-theming" "^5.5.3" + "@mui/styled-engine" "^5.5.2" + "@mui/types" "^7.1.3" + "@mui/utils" "^5.5.3" clsx "^1.1.1" - csstype "^3.0.10" + csstype "^3.0.11" prop-types "^15.7.2" -"@mui/types@^7.1.0": - version "7.1.0" - resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.0.tgz#5ed928c5a41cfbf9a4be82ea3bbdc47bcc9610d5" - integrity sha512-Hh7ALdq/GjfIwLvqH3XftuY3bcKhupktTm+S6qRIDGOtPtRuq2L21VWzOK4p7kblirK0XgGVH5BLwa6u8z/6QQ== +"@mui/types@^7.1.3": + version "7.1.3" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.3.tgz#d7636f3046110bcccc63e6acfd100e2ad9ca712a" + integrity sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA== -"@mui/utils@^5.2.3": - version "5.2.3" - resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.2.3.tgz#994f3a500679804483732596fcfa531e59c56445" - integrity sha512-sQujlajIS0zQKcGIS6tZR0L1R+ib26B6UtuEn+cZqwKHsPo3feuS+SkdscYBdcCdMbrZs4gj8WIJHl2z6tbSzQ== +"@mui/utils@^5.5.3": + version "5.5.3" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.5.3.tgz#f6e1f10c0e8f4d0bf750588c2c3a96ad819c5b65" + integrity sha512-t627eVRpl3SlxVya0cIVNs8jPl4KCEiGaTSWY9iKKTcMNaeDbuRML+zv/CFHDPr1zFv+FjJSP02ySB+tZ8xIag== dependencies: - "@babel/runtime" "^7.16.3" + "@babel/runtime" "^7.17.2" "@types/prop-types" "^15.7.4" "@types/react-is" "^16.7.1 || ^17.0.0" prop-types "^15.7.2" @@ -562,10 +577,10 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" -"@popperjs/core@^2.4.4": - version "2.11.0" - resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.0.tgz#6734f8ebc106a0860dff7f92bf90df193f0935d7" - integrity sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ== +"@popperjs/core@^2.11.4": + version "2.11.4" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.4.tgz#d8c7b8db9226d2d7664553a0741ad7d0397ee503" + integrity sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg== "@rushstack/eslint-patch@^1.0.6": version "1.1.0" @@ -825,6 +840,13 @@ axe-core@^4.3.5: resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.5.tgz#78d6911ba317a8262bfee292aeafcc1e04b49cc5" integrity sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA== +axios@^0.26.1: + version "0.26.1" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9" + integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA== + dependencies: + follow-redirects "^1.14.8" + axobject-query@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be" @@ -1244,7 +1266,12 @@ cssnano-simple@3.0.0: dependencies: cssnano-preset-simple "^3.0.0" -csstype@^3.0.10, csstype@^3.0.2: +csstype@^3.0.11: + version "3.0.11" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33" + integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw== + +csstype@^3.0.2: version "3.0.10" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5" integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA== @@ -1587,7 +1614,7 @@ eslint-visitor-keys@^2.0.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303" integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw== -eslint@7: +eslint@^7.32.0: version "7.32.0" resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d" integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA== @@ -1783,6 +1810,11 @@ flatted@^3.1.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.4.tgz#28d9969ea90661b5134259f312ab6aa7929ac5e2" integrity sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw== +follow-redirects@^1.14.8: + version "1.14.9" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7" + integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w== + foreach@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"