53 | JavaScript is one of the greatest programming language. 54 |
55 |17 | Hello, I am Rizwan Khan 18 |
19 |FullStack Developer using JS.
21 |Rizwan Khan
37 |Software Developer
38 |41 | It is a long established fact that a reader will be distracted by 42 | the readable content of a page when looking at its layout. The point 43 | of using Lorem Ipsum is that it has a more-or-less normal 44 | distribution of letters, as opposed to using 'Content here, content 45 | here', making it look like readable English. Many desktop publishing 46 | packages and web page editors now use Lorem Ipsum as their default 47 | model text 48 |
49 |57 | Have any project in mind?{" "} 58 | Say Hello At 59 |
60 |rizwankhan.august16@gmail.com
61 |14 | {text} 15 |
16 | ); 17 | }; 18 | 19 | export default MediumHeading; 20 | -------------------------------------------------------------------------------- /src/components/UI/Skill/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { CircularProgressbar, buildStyles } from "react-circular-progressbar"; 3 | import "react-circular-progressbar/dist/styles.css"; 4 | import "./style.css"; 5 | 6 | /** 7 | * @author 8 | * @function Skill 9 | **/ 10 | 11 | const Skill = (props) => { 12 | return ( 13 |{props.skillName}
27 |{props.desc}
28 |11 | {text} 12 |
13 | ); 14 | }; 15 | 16 | export default SmallHeading; 17 | -------------------------------------------------------------------------------- /src/components/UI/SocialConnect/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import socialIcons from "../../../assets/social-icons"; 3 | import "./style.css"; 4 | 5 | /** 6 | * @author 7 | * @function SocialConnect 8 | **/ 9 | 10 | const SocialConnect = (props) => { 11 | return ( 12 | 27 | ); 28 | }; 29 | 30 | export default SocialConnect; 31 | -------------------------------------------------------------------------------- /src/components/UI/SocialConnect/style.css: -------------------------------------------------------------------------------- 1 | .socialConnect{ 2 | background: #ffffff; 3 | width: 300px; 4 | height: 40px; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | border-radius: 20px; 9 | } 10 | .socialConnect .socialLink{ 11 | width: 25px; 12 | height: 25px; 13 | border-radius: 50%; 14 | overflow: hidden; 15 | border: 5px solid #ffffff; 16 | margin: 0 2px; 17 | transition: transform .2s ease-out, box-shadow .2s ease-out; 18 | } 19 | .socialConnect .socialLink img{ 20 | max-width: 100%; 21 | max-height: 100%; 22 | } 23 | 24 | .socialConnect .socialLink:hover{ 25 | transform: scale(1.1); 26 | box-shadow: 0 0 10px 0 #777; 27 | } -------------------------------------------------------------------------------- /src/components/UI/Tile.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | /** 4 | * @author 5 | * @function Tile 6 | **/ 7 | 8 | const Tile = ({ title, mediumTitle, desc }) => { 9 | return ( 10 |{title}
16 |17 | {mediumTitle} 18 |
19 |{desc}
20 |
19 |