2 | Portfolio Website live demo 3 | SunilyadavPortfolio 4 |

6 |

7 |

https://sunilyadavportfolio.netlify.app/

http://www.logicstime.com/

Sunil | Portfolio

29 | {load ? ( 30 | 31 | ) : ( 32 |

33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |

43 | )} 44 |

); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/Assets/Projects/3automation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilyadav8/react-portfolio/9b11774957a82842dafdb8d7b14383750345ffdb/src/Assets/Projects/3automation.jpg -------------------------------------------------------------------------------- /src/Assets/Projects/coast.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilyadav8/react-portfolio/9b11774957a82842dafdb8d7b14383750345ffdb/src/Assets/Projects/coast.jpg -------------------------------------------------------------------------------- /src/Assets/Projects/cosmos.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilyadav8/react-portfolio/9b11774957a82842dafdb8d7b14383750345ffdb/src/Assets/Projects/cosmos.jpg -------------------------------------------------------------------------------- /src/Assets/Projects/dropship.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilyadav8/react-portfolio/9b11774957a82842dafdb8d7b14383750345ffdb/src/Assets/Projects/dropship.jpg -------------------------------------------------------------------------------- /src/Assets/Projects/goodFoodDiscounts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilyadav8/react-portfolio/9b11774957a82842dafdb8d7b14383750345ffdb/src/Assets/Projects/goodFoodDiscounts.png -------------------------------------------------------------------------------- /src/Assets/Projects/guamedia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilyadav8/react-portfolio/9b11774957a82842dafdb8d7b14383750345ffdb/src/Assets/Projects/guamedia.jpg -------------------------------------------------------------------------------- /src/Assets/Projects/hsp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilyadav8/react-portfolio/9b11774957a82842dafdb8d7b14383750345ffdb/src/Assets/Projects/hsp.png -------------------------------------------------------------------------------- /src/Assets/Projects/techspec.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilyadav8/react-portfolio/9b11774957a82842dafdb8d7b14383750345ffdb/src/Assets/Projects/techspec.png -------------------------------------------------------------------------------- /src/Assets/Projects/travelwell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilyadav8/react-portfolio/9b11774957a82842dafdb8d7b14383750345ffdb/src/Assets/Projects/travelwell.png -------------------------------------------------------------------------------- /src/Assets/Sunil_Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilyadav8/react-portfolio/9b11774957a82842dafdb8d7b14383750345ffdb/src/Assets/Sunil_Resume.pdf -------------------------------------------------------------------------------- /src/Assets/developer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilyadav8/react-portfolio/9b11774957a82842dafdb8d7b14383750345ffdb/src/Assets/developer.jpg -------------------------------------------------------------------------------- /src/Assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilyadav8/react-portfolio/9b11774957a82842dafdb8d7b14383750345ffdb/src/Assets/logo.png -------------------------------------------------------------------------------- /src/Assets/sunil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunilyadav8/react-portfolio/9b11774957a82842dafdb8d7b14383750345ffdb/src/Assets/sunil.jpg -------------------------------------------------------------------------------- /src/Constants.js: -------------------------------------------------------------------------------- 1 | import AUTOMATION from "./Assets/Projects/3automation.jpg"; 2 | import COAST from "./Assets/Projects/coast.jpg"; 3 | import DROPSHIP from "./Assets/Projects/dropship.jpg"; 4 | import GOOD_FOOD_DISCOUNTS from "./Assets/Projects/goodFoodDiscounts.png"; 5 | import GUAMEDIA from "./Assets/Projects/guamedia.jpg"; 6 | import HSP from "./Assets/Projects/hsp.png"; 7 | import COSMOS from "./Assets/Projects/cosmos.jpg"; 8 | import TECHSPEC from "./Assets/Projects/techspec.png"; 9 | import TRAVELWELL from "./Assets/Projects/travelwell.png"; 10 | 11 | 12 | export const PROJECTS = [ 13 | { 14 | image: COSMOS, 15 | name: "Micorsoft Azure Cosmos DB", 16 | technologyUsed: "ReactJs, Javascript, Redux, knockout.js, Jest", 17 | description: "Azure Cosmos DB is Microsoft's proprietary globally distributed, multi-model database service 'for managing data at planet-scale' Azure Cosmos DB is a fully managed NoSQL database for modern app development. Single-digit millisecond response times, and automatic and instant scalability, guarantee speed at any scale.", 18 | url: "https://cosmos.azure.com/", 19 | }, 20 | { 21 | image: TRAVELWELL, 22 | name: "travlwell.com", 23 | technologyUsed: "Shopify, React, typescript, polaris, GraphQL", 24 | description: "Custom Luggage Tags and Passport Holders engraved with everywhere you've traveled and everywhere you will travel in the future.", 25 | url: "https://travlwell.com/", 26 | }, 27 | { 28 | image: COAST, 29 | name: "Coast", 30 | technologyUsed: "ReactNative, Javascript, Redux", 31 | description: "Team collaboration mobile app and online services like slack Message people and groups without sharing phone numbers, communicate with managers and staff all in one place. and discuss or assign tasks to get stuff done", 32 | url: "https://play.google.com/store/apps/details?id=com.fomo.android.app", 33 | }, 34 | { 35 | image: AUTOMATION, 36 | name: "3automation.com (RPA)", 37 | technologyUsed: "ReactJs, Typescript, Redux", 38 | description: "The next-gen Robotic Process Automation (#RPA) platform for retail and telecom domains. The ultimate automation platform for your Shopify, Email, E- commerce shop", 39 | url: "https://www.3automation.com/", 40 | }, 41 | { 42 | image: GUAMEDIA, 43 | name: "GuaMedia", 44 | technologyUsed: "ReactNative, Javascript, Redux", 45 | description: "Social media mobile app similar to Twitter for china. Social networking GUOMEDIA is an all-in-one social networking platform where users can build their own user profiles, create their own posts, Livestream broadcast and follow each other", 46 | url: "https://play.google.com/store/apps/details?id=com.tiu.guo.media", 47 | }, 48 | { 49 | image: TECHSPEC, 50 | name: "TechSpec", 51 | technologyUsed: "ReactJs, Typescript, Redux", 52 | description: "TechSpec is e-commerce web app. User can compare his product and purchange. This had a dashboard web app which had the data of orders placed and type of user.", 53 | url: "", 54 | }, 55 | { 56 | image: HSP, 57 | name: "HSP (Health Solution Plus)", 58 | technologyUsed: "ReactJs, Javascript, Redux", 59 | description: "This is a Healthcare sector project which would be developed as replica of a desktop application. My responsibilities in this project are to develop UI, perform searching of medical codes and categories, addition/updation of codes and categories.", 60 | url: "", 61 | }, 62 | { 63 | image: DROPSHIP, 64 | name: "DropShip Shopify App", 65 | technologyUsed: "Shopify, React, typescript, polaris, GraphQL, Nodejs, Koajs", 66 | description: "It is customized clothes shopify app which fetch order from store and give option to customize product and send detail to store owner. Also maintain tracking etc of product.", 67 | url: "", 68 | }, 69 | { 70 | image: GOOD_FOOD_DISCOUNTS, 71 | name: "GoodFoodDiscounts", 72 | technologyUsed: "ReactNative, Javascript, Redux", 73 | description: "Good food discouts app is similar like swiggy. Food and hotel can be searched and can be order. Even has facility to add coupan. You can add food in favourite list.", 74 | url: "", 75 | }, 76 | ]; 77 | 78 | export const SKILLS = [ 79 | { name: "ReactJs", initialRating: 4 }, 80 | { name: "React-Native", initialRating: 4 }, 81 | { name: "JavaScript", initialRating: 4 }, 82 | { name: "Redux", initialRating: 4 }, 83 | { name: "Shopify/Reactjs", initialRating: 4 }, 84 | { name: "Nodejs", initialRating: 3 }, 85 | { name: "Koajs", initialRating: 3 }, 86 | { name: "Html", initialRating: 4 }, 87 | { name: "CSS", initialRating: 4 }, 88 | { name: "Unit-Testing(Jest)", initialRating: 3 }, 89 | { name: "TypeScript", initialRating: 4 }, 90 | { name: "Graphql", initialRating: 4 }, 91 | { name: "Apollo", initialRating: 4 }, 92 | { name: "AntD | ReactStrap | Material UI", initialRating: 4 }, 93 | { name: "Shopify Polaris", initialRating: 4 }, 94 | { name: "Git", initialRating: 4 }, 95 | ]; 96 | 97 | export const TOOLS = ["Visual Studio Code", "Git", "Chrome DevTools", "Npm (Node Package Manager)", "Atom", "Sublime Text", "Linux", "Heroku", "Postman"] 98 | -------------------------------------------------------------------------------- /src/components/About/About.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import Techstack from "./Techstack"; 4 | import Aboutcard from "./AboutCard"; 5 | import developer from "../../Assets/developer.jpg"; 6 | import { SKILLS, TOOLS } from "../../Constants"; 7 | 8 | function About() { 9 | return ( 10 | 11 | 12 | 13 | 21 |

22 | About Me 23 |

24 | 25 | 26 | 27 | about

28 | 29 | 30 | 31 | 32 |

33 | Professional Skillset 34 |

35 | {SKILLS.map((skill, index) => ( 36 | 41 | ))} 42 | 43 | 44 |

45 | Tools I use 46 |

47 | {TOOLS.map((tool, index) => ( 48 |

{tool}

51 | ))} 52 | 53 | 54 | 55 | 56 | ); 57 | } 58 | 59 | export default About; 60 | -------------------------------------------------------------------------------- /src/components/About/AboutCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "react-bootstrap/Card"; 3 | import { ImPointRight } from "react-icons/im"; 4 | function AboutCard() { 5 | return ( 6 | 7 | 8 |

9 |
10 | Hi Everyone, I am Sunil Yadav 11 | from Lucknow, India. 12 |
13 | Software Engineer who loves to transform ideas into reality using 14 | code. 15 |
16 | Motivated designer and developer with experience creating 17 | custom websites with ReactJs, JavaScript, HTML5, CSS3. Shopify app using ReactJs, Javascript, Polaris, Graphql, nodejs, Koajs 18 | and Mobile App using React-native. 19 |
20 | Apart from coding, some other activities that I love to do! 21 |
22 |
23 |
24 | Playing Games 25 |
26 |
27 | Writing Tech Blogs 28 |
29 |
30 | Travelling 31 |
32 |
33 | Watching Movies 34 |
35 |
36 |

37 | 38 | 39 | ); 40 | } 41 | 42 | export default AboutCard; 43 | -------------------------------------------------------------------------------- /src/components/About/Techstack.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Col, Row } from "react-bootstrap"; 3 | import Rating from "react-rating" 4 | 5 | function Techstack(props) { 6 | return ( 7 | <> 8 | 9 | 10 | {props.name} 11 | 12 | 13 | 20 | 21 | 22 | 23 | ); 24 | } 25 | 26 | export default Techstack; 27 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import SocialMedia from "../components/SocialMedia"; 4 | 5 | function Footer() { 6 | let date = new Date(); 7 | let year = date.getFullYear(); 8 | return ( 9 | 10 | 11 | 12 |

Developed by Sunil Yadav

13 | 14 | 15 |

Copyright © {year}

16 | 17 | 18 | 19 | 20 | 21 | 22 | ); 23 | } 24 | 25 | export default Footer; 26 | -------------------------------------------------------------------------------- /src/components/Home/Home.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import myImg from "../../Assets/sunil.jpg"; 4 | import SocialMedia from "../SocialMedia"; 5 | import TypeWriter from "./TypeWriter"; 6 | 7 | function Home() { 8 | return ( 9 |

10 | 11 | 12 | 13 | 14 |

15 | Hi There!{" "} 16 | 17 | 👋🏻 18 | 19 |

20 | 21 |

22 | I'M 23 | Sunil Yadav 24 |

25 | 26 |

27 | I am passionate about using Javascript and Animation Libraries 28 | to create awesome user experiences. With over five years of 29 | experience developing web applications using the latest 30 | front-end and back-end technologies. 31 |

32 | 33 |

34 | 35 |

36 | 37 | 38 | 39 | avatar

40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |

Get in Touch

49 |

50 | {" "} 51 | Whether you want to get in touch, or talk about a project 52 | collaboration. 53 |
54 | Feel free to connect with me 55 |

56 | 57 | 58 | 59 | 60 | 61 |

62 | ); 63 | } 64 | 65 | export default Home; 66 | -------------------------------------------------------------------------------- /src/components/Home/TypeWriter.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Typewriter from "typewriter-effect"; 3 | 4 | function TypeWriter() { 5 | return ( 6 | 19 | ); 20 | } 21 | 22 | export default TypeWriter; 23 | -------------------------------------------------------------------------------- /src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Navbar from "react-bootstrap/Navbar"; 3 | import Nav from "react-bootstrap/Nav"; 4 | import Container from "react-bootstrap/Container"; 5 | import { Link } from "react-router-dom"; 6 | import { ImBlog } from "react-icons/im"; 7 | import { 8 | AiOutlineHome, 9 | AiOutlineFundProjectionScreen, 10 | AiOutlineUser, 11 | } from "react-icons/ai"; 12 | 13 | import { MdDeveloperMode } from "react-icons/md"; 14 | 15 | import { CgFileDocument } from "react-icons/cg"; 16 | 17 | function NavBar() { 18 | const [expand, updateExpanded] = useState(false); 19 | const [navColour, updateNavbar] = useState(false); 20 | 21 | function scrollHandler() { 22 | if (window.scrollY >= 20) { 23 | updateNavbar(true); 24 | } else { 25 | updateNavbar(false); 26 | } 27 | } 28 | 29 | window.addEventListener("scroll", scrollHandler); 30 | 31 | return ( 32 | 38 | 39 | 40 | Logicstime.com 41 | 42 | { 45 | updateExpanded(expand ? false : "expanded"); 46 | }} 47 | > 48 | 49 | 50 | 51 | 52 | 53 |

54 | 55 | updateExpanded(false)}> 56 | Home 57 | 58 | 59 | 60 | 61 | updateExpanded(false)} 65 | > 66 | About 67 | 68 | 69 | 70 | 71 | updateExpanded(false)} 75 | > 76 | {" "} 79 | Projects 80 | 81 | 82 | 83 | 84 | updateExpanded(false)} 88 | > 89 | Resume 90 | 91 | 92 | 93 | 94 | 99 | Blogs 100 | 101 | 102 |

103 | 104 | 105 | 106 | ); 107 | } 108 | 109 | export default NavBar; 110 | -------------------------------------------------------------------------------- /src/components/Preloader.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Loader from "react-loader-spinner"; 3 | import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"; 4 | 5 | function Preloader(props) { 6 | return ( 7 |

8 | 14 |

15 | ); 16 | } 17 | 18 | export default Preloader; 19 | -------------------------------------------------------------------------------- /src/components/Projects/ProjectCards.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "react-bootstrap/Card"; 3 | import Button from "react-bootstrap/Button"; 4 | import { BiLinkExternal } from "react-icons/bi"; 5 | 6 | function ProjectCards(props) { 7 | return ( 8 | 9 | 10 | 11 | {props.title} 12 | Technology: {props.technologyUsed} 13 | 14 | {props.description} 15 | 16 | 20 | 21 | 22 | ); 23 | } 24 | export default ProjectCards; 25 | -------------------------------------------------------------------------------- /src/components/Projects/Projects.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col } from "react-bootstrap"; 3 | import ProjectCard from "./ProjectCards"; 4 | import { PROJECTS } from "../../Constants"; 5 | 6 | function Projects() { 7 | return ( 8 | 9 | 10 |

11 | My Recent Works 12 |

13 |

14 | Here are a few projects I've worked on recently. 15 |

16 | 17 | {PROJECTS.map((project, index) => ( 18 | 19 | 27 | 28 | ))} 29 | 30 | 31 | 32 | ); 33 | } 34 | 35 | export default Projects; 36 | -------------------------------------------------------------------------------- /src/components/Resume/ResumeNew.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { Container, Row } from "react-bootstrap"; 3 | import Button from "react-bootstrap/Button"; 4 | // import Particle from "../Particle"; 5 | import pdf from "../../Assets/Sunil_Resume.pdf"; 6 | import { AiOutlineDownload } from "react-icons/ai"; 7 | import { Document, Page, pdfjs } from "react-pdf"; 8 | import "react-pdf/dist/esm/Page/AnnotationLayer.css"; 9 | pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`; 10 | 11 | function ResumeNew() { 12 | const [width, setWidth] = useState(1200); 13 | 14 | useEffect(() => { 15 | setWidth(window.innerWidth); 16 | }, []); 17 | 18 | return ( 19 |

20 | 21 | 22 | 23 | 786 ? 1.7 : 0.6} /> 24 | 25 | 26 | 27 | 28 | 32 | 33 | 34 |

35 | ); 36 | } 37 | 38 | export default ResumeNew; 39 | -------------------------------------------------------------------------------- /src/components/ScrollToTop.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | import { useLocation } from "react-router-dom"; 3 | 4 | function ScrollToTop() { 5 | const { pathname } = useLocation(); 6 | useEffect(() => { 7 | window.scrollTo(0, 0); 8 | }, [pathname]); 9 | return null; 10 | } 11 | 12 | export default ScrollToTop; 13 | -------------------------------------------------------------------------------- /src/components/SocialMedia.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | AiFillGithub, 4 | AiFillInstagram, 5 | } from "react-icons/ai"; 6 | import { MdEmail } from "react-icons/md"; 7 | import { FaLinkedinIn } from "react-icons/fa"; 8 | 9 | function SocialMedia() { 10 | return ( 11 |

13 | 19 | 20 | 21 |
23 | 29 | 30 | 31 |
33 | 39 | 40 | 41 |
43 | 49 | 50 | 51 |

53 | ); 54 | } 55 | export default SocialMedia; 56 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap"); 2 | body { 3 | margin: 0; 4 | font-family: "Raleway", serif !important; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | /* background-image: linear-gradient(to left, rgb(27 20 41), rgb(20 15 35)); */ 8 | } 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | // import reportWebVitals from "./reportWebVitals"; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById("root") 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | // reportWebVitals(); 18 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | --imp-text-color: #414141; 3 | } 4 | 5 | .purple { 6 | color: var(--imp-text-color) !important; 7 | font-weight: bold; 8 | } 9 | 10 | /* --------- */ 11 | /* Preloader */ 12 | /* --------- */ 13 | #preloader { 14 | position: fixed; 15 | top: 30%; 16 | left: 40%; 17 | width: 100%; 18 | height: 100%; 19 | z-index: 999999; 20 | background-color: #ffffff; 21 | background-repeat: no-repeat; 22 | background-position: center; 23 | } 24 | 25 | @media (max-width: 767px) { 26 | #preloader { 27 | position: fixed; 28 | top: 30%; 29 | left: 20%; 30 | width: 100%; 31 | height: 100%; 32 | z-index: 999999; 33 | background-color: #ffffff; 34 | background-repeat: no-repeat; 35 | background-position: center; 36 | } 37 | } 38 | 39 | #preloader-none { 40 | opacity: 0; 41 | } 42 | 43 | #no-scroll { 44 | overflow: hidden; 45 | height: 100vh; 46 | } 47 | 48 | /* --------- */ 49 | /*Scrollbar */ 50 | /* --------- */ 51 | 52 | ::-webkit-scrollbar { 53 | width: 7px; 54 | } 55 | 56 | /* Track */ 57 | ::-webkit-scrollbar-track { 58 | background: #2d1950; 59 | } 60 | 61 | /* Handle */ 62 | ::-webkit-scrollbar-thumb { 63 | background: rgba(178, 121, 216, 0.959); 64 | border-radius: 12px; 65 | } 66 | 67 | /* Handle on hover */ 68 | ::-webkit-scrollbar-thumb:hover { 69 | background: rgba(222, 130, 235, 0.911); 70 | border-radius: 12px; 71 | } 72 | 73 | /* --------- */ 74 | /* Navbar Section */ 75 | /* --------- */ 76 | .sticky { 77 | background-color: #212038d8 !important; 78 | transition: all 0.3s ease-out 0s !important; 79 | box-shadow: 0px 10px 10px 0px rgba(9, 5, 29, 0.171) !important; 80 | backdrop-filter: blur(15px) !important; 81 | } 82 | 83 | .navbar { 84 | position: fixed !important; 85 | transition: all 0.3s ease-out 0s !important; 86 | padding: 0.3rem 2rem !important; 87 | font-size: 1.2rem !important; 88 | background-color: #343e47; 89 | } 90 | 91 | .navbar-toggler { 92 | padding: 0.25rem 1.5rem !important; 93 | position: relative !important; 94 | background-color: transparent !important; 95 | border-color: transparent !important; 96 | } 97 | 98 | .navbar-toggler span { 99 | display: block !important; 100 | background-color: #ffffff !important; 101 | height: 4px !important; 102 | width: 27px !important; 103 | margin-top: 5px !important; 104 | margin-bottom: 5px !important; 105 | transform: rotate(0deg) !important; 106 | left: 0 !important; 107 | opacity: 1 !important; 108 | } 109 | 110 | .navbar-toggler:focus, 111 | .navbar-toggler:active { 112 | outline: 0 !important; 113 | } 114 | 115 | .navbar-toggler span:nth-child(1), 116 | .navbar-toggler span:nth-child(3) { 117 | transition: transform 0.35s ease-in-out !important; 118 | transition: transform 0.35s ease-in-out !important; 119 | } 120 | 121 | .navbar-toggler:not(.collapsed) span:nth-child(1) { 122 | position: absolute !important; 123 | left: 12px !important; 124 | top: 10px !important; 125 | transform: rotate(135deg) !important; 126 | opacity: 0.9 !important; 127 | } 128 | 129 | .navbar-toggler:not(.collapsed) span:nth-child(2) { 130 | height: 12px !important; 131 | visibility: hidden !important; 132 | background-color: transparent !important; 133 | } 134 | 135 | .navbar-toggler:not(.collapsed) span:nth-child(3) { 136 | position: absolute !important; 137 | left: 12px !important; 138 | top: 10px !important; 139 | transform: rotate(-135deg) !important; 140 | opacity: 0.9 !important; 141 | } 142 | 143 | @media (max-width: 767px) { 144 | .navbar { 145 | padding: 1rem 2rem !important; 146 | font-size: 1.4rem !important; 147 | background-color: #343e47 !important; 148 | } 149 | .navbar-nav .nav-item a::after { 150 | display: none !important; 151 | } 152 | } 153 | .navbar-brand { 154 | color: rgb(250, 250, 250) !important; 155 | } 156 | 157 | .logo { 158 | height: 2.4em !important; 159 | width: 3.5em !important; 160 | } 161 | 162 | .navbar-nav .nav-link { 163 | color: white !important; 164 | padding-right: 1rem !important; 165 | padding-left: 1rem !important; 166 | } 167 | 168 | .nav-link { 169 | padding: 0.8rem 1rem !important; 170 | } 171 | 172 | @media (max-width: 767px) { 173 | .nav-link { 174 | padding: 0.7rem 1rem !important; 175 | } 176 | } 177 | 178 | .navbar-nav .nav-item { 179 | position: relative; 180 | margin-left: 20px; 181 | } 182 | 183 | .navbar-nav .nav-item a { 184 | font-weight: 400; 185 | transition: all 0.3s ease-out 0s; 186 | position: relative; 187 | z-index: 1; 188 | } 189 | 190 | .navbar-nav .nav-item a::after { 191 | content: ""; 192 | position: relative; 193 | display: block; 194 | height: 5px; 195 | width: 0; 196 | border-radius: 16px; 197 | background: #ffffff; 198 | bottom: 1px; 199 | left: 0; 200 | z-index: -1; 201 | transition: all 0.3s ease-out 0s; 202 | } 203 | 204 | .navbar-nav .nav-item a:hover::after { 205 | width: 100%; 206 | } 207 | 208 | /* --------- */ 209 | /* Home section */ 210 | /* --------- */ 211 | .wave { 212 | animation-name: wave-animation; /* Refers to the name of your @keyframes element below */ 213 | animation-duration: 2.1s; /* Change to speed up or slow down */ 214 | animation-iteration-count: infinite; /* Never stop waving :) */ 215 | transform-origin: 70% 70%; /* Pivot around the bottom-left palm */ 216 | display: inline-block; 217 | } 218 | 219 | @keyframes wave-animation { 220 | 0% { 221 | transform: rotate(0deg); 222 | } 223 | 10% { 224 | transform: rotate(14deg); 225 | } /* The following five values can be played with to make the waving more or less extreme */ 226 | 20% { 227 | transform: rotate(-8deg); 228 | } 229 | 30% { 230 | transform: rotate(14deg); 231 | } 232 | 40% { 233 | transform: rotate(-4deg); 234 | } 235 | 50% { 236 | transform: rotate(10deg); 237 | } 238 | 60% { 239 | transform: rotate(0deg); 240 | } /* Reset for the last half to pause */ 241 | 100% { 242 | transform: rotate(0deg); 243 | } 244 | } 245 | #tsparticles { 246 | position: fixed !important; 247 | background-repeat: no-repeat !important; 248 | background-size: cover !important; 249 | width: 100%; 250 | height: 100%; 251 | } 252 | 253 | .home-header { 254 | padding-top: 80px !important; 255 | } 256 | 257 | .home-section { 258 | position: relative; 259 | z-index: -1; 260 | background-position: top center; 261 | background-repeat: no-repeat; 262 | padding-bottom: 30px !important; 263 | padding-top: 30px !important; 264 | } 265 | 266 | .home-content { 267 | padding: 3rem 0 0rem !important; 268 | color: #414141; 269 | text-align: left; 270 | } 271 | 272 | .heading-description { 273 | margin-left: 20px !important; 274 | } 275 | .heading-type { 276 | padding-left: 15px; 277 | text-align: "left"; 278 | } 279 | 280 | .heading { 281 | font-size: 2.4em !important; 282 | padding-left: 20px !important; 283 | } 284 | 285 | .heading-name { 286 | font-size: 2.5em !important; 287 | padding-left: 20px !important; 288 | } 289 | 290 | .main-name { 291 | color: #414141; 292 | } 293 | 294 | .Typewriter__wrapper { 295 | font-size: 2.2em !important; 296 | color: #414141 !important; 297 | font-weight: 600 !important; 298 | } 299 | .Typewriter__cursor { 300 | font-size: 2.4em !important; 301 | color: #414141 !important; 302 | } 303 | 304 | @media (max-width: 767px) { 305 | .Typewriter__wrapper { 306 | font-size: 1.4em !important; 307 | font-weight: 600 !important; 308 | position: absolute !important; 309 | } 310 | .Typewriter__cursor { 311 | display: none !important; 312 | } 313 | } 314 | 315 | .myAvtar { 316 | justify-content: center !important; 317 | padding-top: 9em !important; 318 | } 319 | 320 | @media (max-width: 767px) { 321 | .myAvtar { 322 | padding-top: 2em !important; 323 | padding-bottom: 2em !important; 324 | } 325 | } 326 | 327 | .home-about-section { 328 | position: relative; 329 | padding-bottom: 70px !important; 330 | } 331 | 332 | .home-about-description { 333 | color: #414141 !important; 334 | padding-top: 100px !important; 335 | padding-bottom: 20px !important; 336 | text-align: center; 337 | } 338 | 339 | .home-about-body { 340 | padding-top: 50px; 341 | font-size: 1.2em !important; 342 | text-align: left; 343 | } 344 | 345 | .home-about-social { 346 | text-align: center !important; 347 | padding-top: 25px; 348 | color: #414141 !important; 349 | } 350 | 351 | .home-about-social-links { 352 | justify-content: center !important; 353 | padding-top: 15px !important; 354 | display: inline-block !important; 355 | position: relative !important; 356 | padding-inline-start: 0 !important; 357 | } 358 | 359 | .home-social-icons { 360 | position: relative !important; 361 | display: inline-block !important; 362 | width: 60px !important; 363 | height: 60px !important; 364 | text-align: center !important; 365 | font-size: 1.2em !important; 366 | line-height: 2em !important; 367 | background: #343e47 !important; 368 | border-radius: 50% !important; 369 | transition: 0.5s !important; 370 | border: 1px solid #343e47; 371 | } 372 | 373 | .home-social-icons::before { 374 | content: ""; 375 | position: absolute; 376 | top: 0; 377 | left: 0; 378 | width: 100%; 379 | height: 100%; 380 | border-radius: 50%; 381 | background: #5b585c; 382 | transition: 0.5s; 383 | transform: scale(0.9); 384 | z-index: -1; 385 | } 386 | 387 | .home-social-icons:hover::before { 388 | transform: scale(1.1); 389 | box-shadow: 0 0 15px #414141; 390 | } 391 | 392 | .home-social-icons:hover { 393 | color: #414141; 394 | box-shadow: 0 0 5px #414141; 395 | text-shadow: 0 0 2px #414141; 396 | } 397 | 398 | .social-icons { 399 | display: inline-block !important; 400 | padding-left: 15px; 401 | height: 60px; 402 | } 403 | 404 | .icon-colour { 405 | color: #ffffff !important; 406 | } 407 | 408 | .social-icon { 409 | margin-top: 10px; 410 | } 411 | 412 | /* --------- */ 413 | /* Footer */ 414 | /* --------- */ 415 | .footer { 416 | background-color: #343e47; 417 | bottom: 0 !important; 418 | } 419 | .footer-copywright { 420 | text-align: center !important; 421 | margin-top: 20px; 422 | } 423 | 424 | .footer-body { 425 | text-align: center !important; 426 | } 427 | 428 | @media (max-width: 767px) { 429 | .footer-copywright { 430 | text-align: center !important; 431 | } 432 | 433 | .footer-body { 434 | text-align: center !important; 435 | } 436 | } 437 | 438 | .footer h3 { 439 | font-size: 1em; 440 | color: white !important; 441 | margin-top: 0.5em !important; 442 | margin-bottom: 0.5em !important; 443 | } 444 | .footer-icons { 445 | margin-top: 0.5em !important; 446 | margin-bottom: 0.5em !important; 447 | padding: 0 !important; 448 | } 449 | 450 | .blockquote-footer { 451 | color: #414141 !important; 452 | font-weight: bold; 453 | } 454 | /* --------- */ 455 | /* Projects */ 456 | /* --------- */ 457 | .project-section { 458 | position: relative !important; 459 | padding-top: 150px !important; 460 | padding-bottom: 30px !important; 461 | background-image: var(--section-background-color) !important; 462 | } 463 | 464 | .project-card { 465 | padding-top: 50px !important; 466 | padding-bottom: 50px !important; 467 | padding-left: 25px !important; 468 | padding-right: 25px !important; 469 | height: auto !important; 470 | } 471 | 472 | .project-card-view { 473 | box-shadow: 0 4px 5px 3px #343e47 !important; 474 | color: #414141 !important; 475 | background-color: transparent !important; 476 | opacity: 0.9 !important; 477 | transition: all 0.5s ease 0s !important; 478 | height: 100% !important; 479 | } 480 | .project-card-view:hover { 481 | transform: scale(1.02) !important; 482 | overflow: hidden !important; 483 | box-shadow: 0 4px 4px 5px #343e47 !important; 484 | } 485 | 486 | .blog-card { 487 | padding-top: 50px !important; 488 | padding-bottom: 50px !important; 489 | padding-left: 25px !important; 490 | padding-right: 25px !important; 491 | height: auto !important; 492 | } 493 | 494 | .blog-card-view { 495 | background-color: transparent !important; 496 | box-shadow: 0 3px 3px 2px rgba(145, 77, 161, 0.459) !important; 497 | color: white !important; 498 | transition: all 0.5s ease 0s !important; 499 | height: 100% !important; 500 | } 501 | 502 | .blog-link { 503 | color: white !important; 504 | text-decoration: none !important; 505 | } 506 | 507 | .blog-link:hover { 508 | cursor: pointer !important; 509 | } 510 | 511 | .blog-card-view:hover { 512 | transform: scale(1.02) !important; 513 | overflow: hidden !important; 514 | box-shadow: 0 3px 3px 5px rgba(155, 88, 173, 0.65) !important; 515 | } 516 | 517 | .card-img-top { 518 | padding: 20px !important; 519 | opacity: 0.8 !important; 520 | border-radius: 10px !important; 521 | } 522 | 523 | .blog-img { 524 | padding: 0px !important; 525 | opacity: 0.8 !important; 526 | border-radius: 0px !important; 527 | } 528 | 529 | .btn-primary { 530 | color: #fff !important; 531 | background-color: #623686 !important; 532 | border-color: #623686 !important; 533 | } 534 | 535 | .btn-primary:hover { 536 | color: #fff !important; 537 | background-color: #6d20c5d7 !important; 538 | border-color: #6d20c5d7 !important; 539 | } 540 | .btn:focus { 541 | outline: none !important; 542 | box-shadow: none !important; 543 | } 544 | .project-heading { 545 | color: #414141 !important; 546 | font-size: 2.3em !important; 547 | font-weight: 500 !important; 548 | padding-top: 10px !important; 549 | padding-bottom: 15px; 550 | } 551 | 552 | /* --------- */ 553 | /* About */ 554 | /* --------- */ 555 | 556 | .about-section { 557 | position: relative !important; 558 | padding-top: 100px !important; 559 | padding-bottom: 30px !important; 560 | background-image: var(--section-background-color) !important; 561 | color: #414141 !important; 562 | } 563 | 564 | .tech-icons { 565 | font-size: 4.5em !important; 566 | margin: 15px !important; 567 | padding: 10px !important; 568 | opacity: 0.93 !important; 569 | border: 1.7px solid #414141 !important; 570 | vertical-align: middle !important; 571 | text-align: center !important; 572 | border-radius: 5px !important; 573 | display: table !important; 574 | box-shadow: 4px 5px 4px 3px rgba(99, 96, 102, 0.137) !important; 575 | overflow: hidden !important; 576 | transition: all 0.4s ease 0s !important; 577 | } 578 | 579 | @media (max-width: 767px) { 580 | .tech-icons { 581 | margin: 10px !important; 582 | } 583 | } 584 | 585 | .tech-icons:hover { 586 | transform: scale(1.05) !important; 587 | overflow: hidden !important; 588 | border: 2.2px solid #5a5959 !important; 589 | } 590 | .tech-icon-images { 591 | padding: 20px !important; 592 | line-height: 1.6 !important; 593 | } 594 | 595 | .quote-card-view { 596 | border: none !important; 597 | color: #414141 !important; 598 | background-color: transparent !important; 599 | } 600 | 601 | .about-activity { 602 | list-style: none !important; 603 | text-align: left !important; 604 | padding-left: 1px !important; 605 | } 606 | 607 | @media (max-width: 767px) { 608 | .about-img { 609 | padding-top: 0 !important; 610 | } 611 | } 612 | /* --------- */ 613 | /* Resume */ 614 | /* --------- */ 615 | 616 | .resume-section { 617 | position: relative !important; 618 | padding-top: 110px !important; 619 | padding-bottom: 30px !important; 620 | background-image: var(--section-background-color) !important; 621 | color: #414141 !important; 622 | } 623 | 624 | .resume { 625 | padding-top: 50px; 626 | padding-bottom: 50px; 627 | justify-content: center; 628 | } 629 | 630 | .resume-left { 631 | padding-right: 80px !important; 632 | } 633 | 634 | .resume-right { 635 | padding-left: 80px !important; 636 | } 637 | 638 | @media (max-width: 767px) { 639 | .resume-left { 640 | padding-right: 15px !important; 641 | padding-left: 15px !important; 642 | } 643 | 644 | .resume-right { 645 | padding-right: 15px !important; 646 | padding-left: 15px !important; 647 | } 648 | } 649 | .resume .resume-title { 650 | font-size: 2em; 651 | font-weight: 700; 652 | padding-top: 30px; 653 | padding-bottom: 30px; 654 | } 655 | 656 | .resume .resume-item { 657 | padding: 0 0 10px 25px; 658 | margin-top: -2px; 659 | border-left: 2px solid #8a49a8; 660 | position: relative; 661 | } 662 | 663 | .resume .resume-item .resume-title { 664 | line-height: 18px; 665 | font-size: 0.9em; 666 | background: #5234795d; 667 | padding: 8px 15px; 668 | display: inline-block; 669 | font-weight: 600; 670 | margin-bottom: 10px; 671 | } 672 | 673 | .resume .resume-item ul { 674 | padding-left: 20px; 675 | text-align: justify; 676 | } 677 | 678 | .resume .resume-item ul li { 679 | padding-bottom: 10px; 680 | list-style: none; 681 | } 682 | 683 | .resume .resume-item:last-child { 684 | padding-bottom: 0; 685 | } 686 | 687 | .resume .resume-item::before { 688 | content: ""; 689 | position: absolute; 690 | width: 16px; 691 | height: 16px; 692 | border-radius: 50px; 693 | left: -9px; 694 | top: 0; 695 | background: #fff; 696 | border: 2px solid #8a49a8; 697 | } 698 | 699 | .like-item { 700 | padding-top: 10px !important; 701 | font-size: 1.1em !important; 702 | font-family: sans-serif !important; 703 | } 704 | 705 | .like-btn { 706 | background-color: #934cce5e !important; 707 | border-color: #934cce5e !important; 708 | padding: 0.25rem 0.98rem !important; 709 | border-radius: 5px !important; 710 | line-height: 1.4 !important; 711 | transition: 0.3s ease !important; 712 | } 713 | 714 | .like-btn:hover { 715 | transform: translateY(-2px) !important; 716 | background-color: #a24dd386 !important; 717 | border-color: #a24dd386 !important; 718 | } 719 | 720 | .animate-like { 721 | animation-name: likeAnimation; 722 | animation-fill-mode: forwards; 723 | animation-duration: 0.85s; 724 | } 725 | @keyframes likeAnimation { 726 | 0% { 727 | transform: scale(1.5); 728 | } 729 | 100% { 730 | transform: scale(1); 731 | } 732 | } 733 | 734 | .fork-btn { 735 | font-size: 1.1em !important; 736 | padding-top: 10px !important; 737 | } 738 | 739 | .fork-btn-inner { 740 | line-height: 1.4em !important; 741 | background-color: #934cce5e !important; 742 | padding: 0.25rem 1.1rem !important; 743 | vertical-align: middle !important; 744 | text-align: center !important; 745 | } 746 | 747 | .fork-btn-inner:hover { 748 | transform: translateY(-2px) !important; 749 | background-color: #a24dd386 !important; 750 | border-color: #a24dd386 !important; 751 | } 752 | .fork-btn-inner::after { 753 | display: none !important; 754 | } 755 | .rating { 756 | background-color: #623686; 757 | } 758 | .skill-name { 759 | text-align: left; 760 | margin-left: 10%; 761 | } 762 | .rating { 763 | width: 170px; 764 | background-color: white; 765 | } 766 | .tool-name { 767 | text-align: left; 768 | margin-left: 10%; 769 | } 770 | .skill-wrapper { 771 | border-right: 1px solid #414141; 772 | box-shadow: 0 4px 5px 3px rgba(59, 56, 59, 0.459) !important; 773 | background-color: transparent !important; 774 | opacity: 0.9 !important; 775 | transition: all 0.5s ease 0s !important; 776 | } 777 | .download-button { 778 | background-color: #343e47 !important; 779 | } 780 | 781 | .download-button:hover { 782 | background-color: #000000 !important; 783 | } 784 | .image-style { 785 | height: 85%; 786 | width: 90%; 787 | } 788 | .project-title { 789 | font-weight: bold; 790 | } 791 | .profile-pic { 792 | border-radius: 50%; 793 | height: 70%; 794 | width: 65%; 795 | margin-top: 12%; 796 | margin-left: 25%; 797 | } 798 | 799 | @media (max-width: 767px) { 800 | .profile-pic { 801 | border-radius: 50%; 802 | height: 80%; 803 | width: 50%; 804 | margin-top: 12%; 805 | margin-left: 25%; 806 | } 807 | } 808 | 809 | .skill-tools-wrapper { 810 | flex-direction: row; 811 | } 812 | 813 | @media (max-width: 767px) { 814 | .skill-tools-wrapper{ 815 | flex-direction: column; 816 | } 817 | } --------------------------------------------------------------------------------