Added First Skilled
This commit is contained in:
parent
65058c91d4
commit
5e03f7b429
|
|
@ -1,19 +1,21 @@
|
|||
import React from "react";
|
||||
import SkillCardStyle from "./skillCard.styled";
|
||||
|
||||
function SkillCard() {
|
||||
return (
|
||||
<SkillCardStyle>
|
||||
<div className="card">
|
||||
<div className="date">26th September</div>
|
||||
<div className="content">
|
||||
@zhr_jafri We used to say that as joke, TIL, they real own rights to that
|
||||
zehreeli kheer.
|
||||
</div>
|
||||
<footer className="footer"></footer>
|
||||
</div>
|
||||
</SkillCardStyle>
|
||||
);
|
||||
function SkillCard({ title, description, image }) {
|
||||
return (
|
||||
<SkillCardStyle>
|
||||
<div className="card">
|
||||
{image && (
|
||||
<div className="card-logo">
|
||||
<img src={image} height="30" />
|
||||
</div>
|
||||
)}
|
||||
<div className="date">{title}</div>
|
||||
<div className="content">{description}</div>
|
||||
<footer className="footer"></footer>
|
||||
</div>
|
||||
</SkillCardStyle>
|
||||
);
|
||||
}
|
||||
|
||||
export default SkillCard;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<SkillsStyle>
|
||||
<div className="skills">
|
||||
<Skill />
|
||||
<Skill />
|
||||
<Skill />
|
||||
<Skill />
|
||||
<Skill />
|
||||
</div>
|
||||
</SkillsStyle>
|
||||
);
|
||||
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 (
|
||||
<SkillsStyle>
|
||||
<div className="skills">
|
||||
<Skill
|
||||
title={skills.login}
|
||||
description={skills.bio}
|
||||
image={skills.avatar_url}
|
||||
/>
|
||||
<Skill />
|
||||
<Skill />
|
||||
<Skill />
|
||||
<Skill />
|
||||
</div>
|
||||
</SkillsStyle>
|
||||
);
|
||||
}
|
||||
|
||||
export default Skills;
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
150
yarn.lock
150
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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue