├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── components ├── About │ ├── About.css │ └── About.js ├── Contact │ ├── Contact.css │ └── Contact.js ├── Footer │ ├── Footer.css │ └── Footer.js ├── Header │ ├── Header.css │ └── Header.js ├── Home │ ├── Home.css │ └── Home.js ├── Navbar │ ├── Navbar.css │ └── Navbar.js ├── Navigator │ ├── Navigator.css │ └── Navigator.js ├── ProjectContainer │ └── ProjectContainer.css ├── Projects │ ├── Projects.css │ └── Projects.js ├── ScrollToTop │ ├── ScrollToTop.css │ └── ScrollToTop.js └── Skills │ ├── Skills.css │ └── Skills.js ├── contexts └── theme.js ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js └── setupTests.js /README.md: -------------------------------------------------------------------------------- 1 |

Portfolio

2 |

Check Live Demo here Visit

3 | 4 | 5 | 6 | 7 |
8 |

Teach Used

9 | html5 10 | css3 11 | javascript 12 | reactjs 13 | material-ui 14 |
15 | 16 |

Follow the Steps To Start

17 | 18 | ### `npm i` 19 | ### `npm start` 20 | 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chengfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://rishunayak.github.io", 6 | "dependencies": { 7 | "@material-ui/core": "^4.12.3", 8 | "@material-ui/icons": "^4.11.2", 9 | "@splidejs/react-splide": "^0.7.12", 10 | "@testing-library/jest-dom": "^5.14.1", 11 | "@testing-library/react": "^12.0.0", 12 | "@testing-library/user-event": "^13.2.1", 13 | "gh-pages": "^3.2.3", 14 | "prop-types": "^15.7.2", 15 | "react": "^17.0.2", 16 | "react-dom": "^17.0.2", 17 | "react-github-calendar": "^3.3.4", 18 | "react-icons": "^4.6.0", 19 | "react-image-gallery": "^1.2.11", 20 | "react-img-carousel": "^2.2.0", 21 | "react-responsive-carousel": "^3.2.23", 22 | "react-scripts": "^5.0.1", 23 | "react-scrollspy": "^3.4.3", 24 | "react-simple-image-slider": "^2.4.1", 25 | "react-vertical-timeline-component": "^3.5.2", 26 | "typewriter-effect": "^2.19.0", 27 | "web-vitals": "^2.1.0" 28 | }, 29 | "scripts": { 30 | "start": "react-scripts start", 31 | "build": "react-scripts build", 32 | "eject": "react-scripts --openssl-legacy-provider eject", 33 | "lint": "eslint .", 34 | "format": "prettier --write \"**/*.+(js|jsx|json|css|md)\"", 35 | "predeploy": "npm run build", 36 | "deploy": "gh-pages -d build" 37 | }, 38 | "browserslist": { 39 | "production": [ 40 | ">0.2%", 41 | "not dead", 42 | "not op_mini all" 43 | ], 44 | "development": [ 45 | "last 1 chrome version", 46 | "last 1 firefox version", 47 | "last 1 safari version" 48 | ] 49 | }, 50 | "devDependencies": { 51 | "eslint": "^7.32.0", 52 | "eslint-config-airbnb": "18.2.1", 53 | "eslint-config-prettier": "^8.3.0", 54 | "eslint-plugin-import": "^2.24.2", 55 | "eslint-plugin-jsx-a11y": "^6.4.1", 56 | "eslint-plugin-prettier": "^4.0.0", 57 | "eslint-plugin-react": "^7.25.1", 58 | "eslint-plugin-react-hooks": "^4.2.0", 59 | "prettier": "^2.3.2" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rishunayak/react-portfolio/e305c61f4a3d16533b3950d1a1c1056e0682d4bb/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 | 13 | Rishu Kumar Nayak 14 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rishunayak/react-portfolio/e305c61f4a3d16533b3950d1a1c1056e0682d4bb/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rishunayak/react-portfolio/e305c61f4a3d16533b3950d1a1c1056e0682d4bb/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .app { 2 | font-family: 'Poppins', sans-serif; 3 | line-height: 1.5; 4 | color: var(--clr-fg); 5 | background-color: var(--clr-bg); 6 | } 7 | 8 | .light { 9 | --clr-bg: #fcfcfc; 10 | --clr-bg-alt: #fff; 11 | --clr-fg: #555; 12 | --clr-fg-alt: #444; 13 | --clr-primary: #2978b5; 14 | --shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 15 | } 16 | 17 | .dark { 18 | --clr-bg: #23283e; 19 | --clr-bg-alt: #2a2f4c; 20 | --clr-fg: #bdbddd; 21 | --clr-fg-alt: #cdcdff; 22 | --clr-primary: #90a0d9; 23 | --shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, 24 | rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; 25 | } 26 | 27 | main { 28 | max-width: 1100px; 29 | width: 95%; 30 | margin: 0 auto; 31 | } 32 | 33 | .section { 34 | margin-top: 5em; 35 | } 36 | 37 | .section__title { 38 | text-align: center; 39 | margin-bottom: 1em; 40 | text-transform: uppercase; 41 | } 42 | 43 | .center { 44 | display: flex; 45 | align-items: center; 46 | } 47 | 48 | .link { 49 | color: var(--clr-primary); 50 | padding: 0 0 0.3em 0; 51 | position: relative; 52 | } 53 | 54 | .link:hover { 55 | color: var(--clr-primary); 56 | } 57 | 58 | .link::before { 59 | content: ''; 60 | display: inline; 61 | width: 0%; 62 | height: 0.2em; 63 | position: absolute; 64 | bottom: 0; 65 | background-color: var(--clr-primary); 66 | transition: width 0.2s ease-in; 67 | } 68 | 69 | .link:hover::before, 70 | .link:focus::before { 71 | width: 100%; 72 | } 73 | 74 | .link--nav { 75 | color: var(--clr-fg); 76 | font-weight: 500; 77 | } 78 | 79 | .link--icon { 80 | color: var(--clr-fg); 81 | } 82 | 83 | .btn { 84 | display: block; 85 | cursor: pointer; 86 | padding: 0.8em 1.4em; 87 | font-weight: 500; 88 | font-size: 0.9rem; 89 | transition: transform 0.2s ease-in-out; 90 | } 91 | 92 | .btn--outline { 93 | color: var(--clr-primary); 94 | border: 2px solid var(--clr-primary); 95 | position: relative; 96 | overflow: hidden; 97 | z-index: 1; 98 | } 99 | 100 | .btn--outline:hover, 101 | .btn--outline:focus { 102 | color: var(--clr-bg); 103 | } 104 | 105 | .btn--outline:before { 106 | content: ''; 107 | position: absolute; 108 | background-color: var(--clr-primary); 109 | right: 100%; 110 | bottom: 0; 111 | left: 0; 112 | top: 0; 113 | z-index: -1; 114 | transition: right 0.2s ease-in-out; 115 | } 116 | 117 | .btn--outline:hover:before, 118 | .btn--outline:focus:before { 119 | right: 0; 120 | } 121 | 122 | .btn--plain { 123 | text-transform: initial; 124 | background-color: var(--clr-bg-alt); 125 | box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px; 126 | border: 0; 127 | } 128 | 129 | .btn--plain:hover { 130 | transform: translateY(-4px); 131 | } 132 | 133 | .btn--icon { 134 | padding: 0; 135 | } 136 | 137 | .btn--icon:hover, 138 | .btn--icon:focus { 139 | color: var(--clr-primary); 140 | } 141 | 142 | .btn--icon:active { 143 | transform: translateY(-5px); 144 | } 145 | 146 | @media (max-width: 600px) { 147 | .section { 148 | margin-top: 4em; 149 | } 150 | } 151 | 152 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react' 2 | import { ThemeContext } from './contexts/theme' 3 | import Header from './components/Header/Header' 4 | import About from './components/About/About' 5 | import Projects from './components/Projects/Projects' 6 | import Skills from './components/Skills/Skills' 7 | import ScrollToTop from './components/ScrollToTop/ScrollToTop' 8 | import Contact from './components/Contact/Contact' 9 | import Footer from './components/Footer/Footer' 10 | import Home from './components/Home/Home' 11 | 12 | import './App.css' 13 | 14 | 15 | const App = () => { 16 | const [{ themeName }] = useContext(ThemeContext) 17 | 18 | return ( 19 |
20 |
21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 | 34 |
36 | ) 37 | } 38 | 39 | export default App 40 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/About/About.css: -------------------------------------------------------------------------------- 1 | #profile 2 | { 3 | height: 250px; 4 | border-radius: 16px; 5 | } 6 | 7 | 8 | .about { 9 | flex-direction: column; 10 | margin-top: 3em; 11 | 12 | } 13 | 14 | .about__name { 15 | color: var(--clr-primary); 16 | font-weight: bold; 17 | } 18 | 19 | .about__role { 20 | margin-top: 1.2em; 21 | } 22 | 23 | .about__desc { 24 | font-size: 1rem; 25 | max-width: 600px; 26 | 27 | } 28 | 29 | 30 | .about__contact { 31 | margin-top: 2.4em; 32 | } 33 | .about__contact 34 | { 35 | display: flex; 36 | justify-content: space-between; 37 | 38 | gap: 100px; 39 | } 40 | .about__contact>img 41 | { 42 | width: auto; 43 | } 44 | .about .link--icon { 45 | margin-right: 0.8em; 46 | } 47 | 48 | .about .btn--outline { 49 | margin-right: 1em; 50 | } 51 | 52 | 53 | 54 | #interest 55 | { 56 | line-height: 35px; 57 | 58 | } 59 | 60 | 61 | 62 | @media (max-width: 717px) 63 | { 64 | 65 | .about__contact 66 | { 67 | display: block; 68 | } 69 | 70 | .about__contact>div:first-child 71 | { 72 | width: 300px; 73 | margin: auto; 74 | } 75 | 76 | .about__contact>div:last-child 77 | { 78 | margin-top: 20px; 79 | } 80 | 81 | } 82 | 83 | 84 | 85 | 86 | 87 | .mainsection { 88 | width: 100%; 89 | } 90 | 91 | .mainsection > :nth-child(1) { 92 | margin-bottom: 2em; 93 | } 94 | 95 | .vertical-timeline-element-subtitle { 96 | margin-top: 0.5em; 97 | font-size: 0.9em; 98 | } 99 | 100 | .vertical-timeline-element-title { 101 | font-size: 1.1em; 102 | color: var(--clr-primary); 103 | } 104 | 105 | h2 106 | { 107 | text-align: center; 108 | } 109 | 110 | #timeline 111 | { 112 | margin-top: 40px; 113 | margin-bottom: 30px; 114 | } 115 | 116 | h2 117 | { 118 | text-align: center; 119 | } -------------------------------------------------------------------------------- /src/components/About/About.js: -------------------------------------------------------------------------------- 1 | 2 | import SchoolIcon from "@material-ui/icons/School"; 3 | import StarRateIcon from "@material-ui/icons/StarRate"; 4 | import { ThemeContext } from '../../contexts/theme'; 5 | import { useContext } from 'react'; 6 | import { useState } from 'react'; 7 | import { useEffect } from 'react'; 8 | import {BiStar} from "react-icons/bi" 9 | 10 | import { 11 | VerticalTimeline, 12 | VerticalTimelineElement 13 | } from "react-vertical-timeline-component"; 14 | import "react-vertical-timeline-component/style.min.css"; 15 | 16 | 17 | import './About.css' 18 | 19 | 20 | 21 | function About () { 22 | 23 | 24 | const [{ themeName }] = useContext(ThemeContext); 25 | const [linecolor, setlinecolor] = useState( 26 | themeName === "light" ? "#23283e" : "#fcfcfc" 27 | ); 28 | 29 | useEffect(() => { 30 | if (themeName === "dark") { 31 | setlinecolor("#fcfcfc"); 32 | } else { 33 | setlinecolor("#23283e"); 34 | } 35 | }, [themeName]); 36 | 37 | 38 | return ( 39 | 40 |
41 | 42 |

ABOUT ME

43 | 44 | 45 | 46 |
47 | 48 | 49 |
50 | 51 | rishu 52 | 53 |
54 | 55 |
56 |

57 | Hi Everyone, I am Rishu Kumar Nayak from Maharajganj, Uttar Pradesh. 58 | I have completed my graduation in Bachelor of Computer Application from Babu Banarasi Das University, Lucknow. 59 |

60 |
61 |
62 |

Some of my interests apart form Coding :

63 | 64 | Listing Music 65 |
66 | Playing Badminton 67 |
68 | Watching Cricket 69 |
70 | Watching Movies 71 |
72 |
73 | 74 |
75 | 76 | 77 | 78 | 79 | 80 | 81 |

MY EDUCATION

82 | 83 | 84 | 85 | } contentStyle={{ 86 | boxShadow: `var(--shadow)`, 87 | backgroundColor: `var(--clr-bg)`, 88 | textAlign: "center", 89 | color: `var(--clr-fg-alt)` 90 | }} 91 | contentArrowStyle={{ borderRight: "16px solid rgb(33, 150, 243)" }} 92 | iconStyle={{ 93 | backgroundColor: `var(--clr-bg)`, 94 | color: `var(--clr-primary)` 95 | }} 96 | > 97 | 98 |

102 | Masai School (Remote) 103 |

104 |

105 | Joined the Military style Bootcamp to learn Full Stack Web Development 106 | and Data Structures. Also learned many soft skills in the process. 107 |

108 | 109 | 110 | 111 | 112 | } contentStyle={{ 113 | boxShadow: `var(--shadow)`, 114 | backgroundColor: `var(--clr-bg)`, 115 | textAlign: "center", 116 | color: `var(--clr-fg-alt)` 117 | }} 118 | contentArrowStyle={{ borderRight: "16px solid rgb(33, 150, 243)" }} 119 | iconStyle={{ 120 | backgroundColor: `var(--clr-bg)`, 121 | color: `var(--clr-primary)` 122 | }} 123 | > 124 | 125 |

129 | Bachelor of Computer Application (BCA) 130 |

131 |

132 | Babu Banarasi Das University, Lucknow 133 |

134 | 135 | 136 | 137 | 138 | } 140 | iconStyle={{ 141 | backgroundColor: `var(--clr-bg)`, 142 | color: `var(--clr-primary)` 143 | }} 144 | > 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 |
154 | ) 155 | } 156 | 157 | export default About 158 | -------------------------------------------------------------------------------- /src/components/Contact/Contact.css: -------------------------------------------------------------------------------- 1 | .contact { 2 | flex-direction: column; 3 | 4 | } 5 | .about_contact 6 | { 7 | color: var(--clr-primary); 8 | } 9 | #cont 10 | { 11 | width: 80%; 12 | display: flex; 13 | justify-content: space-between; 14 | 15 | } 16 | 17 | #cont>a 18 | { 19 | color: var(--clr-primary); 20 | } -------------------------------------------------------------------------------- /src/components/Contact/Contact.js: -------------------------------------------------------------------------------- 1 | 2 | import './Contact.css' 3 | import {FaLinkedin,FaPhone} from "react-icons/fa" 4 | import {BsGithub} from "react-icons/bs" 5 | import {MdEmail} from "react-icons/md" 6 | 7 | function Contact () { 8 | 9 | 10 | return ( 11 |
12 |

GET IN TOUCH

13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 | ) 26 | } 27 | 28 | export default Contact 29 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding: 3em 0; 3 | margin-top: 4em; 4 | text-align: center; 5 | } 6 | 7 | .footer__link { 8 | font-size: 0.9rem; 9 | font-weight: 600; 10 | color: var(--clr-fg); 11 | } 12 | 13 | @media (max-width: 600px) { 14 | .footer { 15 | padding: 2em; 16 | margin-top: 3em; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import './Footer.css' 2 | 3 | const Footer = () => ( 4 | 12 | ) 13 | 14 | export default Footer 15 | -------------------------------------------------------------------------------- /src/components/Header/Header.css: -------------------------------------------------------------------------------- 1 | .header { 2 | height: 8em; 3 | max-width: 1100px; 4 | width: 95%; 5 | margin: 0 auto; 6 | justify-content: space-between; 7 | } 8 | 9 | @media (max-width: 600px) { 10 | .header { 11 | height: 6em; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/Header/Header.js: -------------------------------------------------------------------------------- 1 | 2 | import Navbar from '../Navbar/Navbar' 3 | import './Header.css' 4 | 5 | function Header () { 6 | 7 | 8 | return ( 9 |
10 |

11 | 12 | 13 | Expl◉re Me! 14 | 15 | 16 |

17 | 18 |
19 | ) 20 | } 21 | 22 | export default Header 23 | -------------------------------------------------------------------------------- /src/components/Home/Home.css: -------------------------------------------------------------------------------- 1 | .home { 2 | 3 | flex-direction: column; 4 | margin-top: 3em; 5 | } 6 | 7 | 8 | .typer 9 | { 10 | margin-top: 1em; 11 | margin-bottom: 1em; 12 | } 13 | 14 | #resumeButton,#social 15 | { 16 | margin-top: 2em; 17 | } 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/components/Home/Home.js: -------------------------------------------------------------------------------- 1 | import "./Home.css" 2 | import Typewriter from "typewriter-effect"; 3 | import { Email, Phone } from '@material-ui/icons' 4 | import GitHubIcon from '@material-ui/icons/GitHub' 5 | import LinkedInIcon from '@material-ui/icons/LinkedIn' 6 | 7 | function Home() 8 | { 9 | 10 | return( 11 | 12 |
13 |

14 | Hi, I am Rishu Kumar Nayak 15 |

16 | 17 |

18 | 20 |

21 | 22 | 23 |

Adaptable and responsible web developer capable of writing production ready code using HTML, CSS, JavaScript, 24 | React.Js on the front-end and NodeJs, Express.Js, and MongoDB on the back-end to build single-page applications.

25 | 26 | 27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 | 38 | 39 | 40 | Resume 41 | 42 | 43 |
) 44 | } 45 | 46 | export default Home -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.css: -------------------------------------------------------------------------------- 1 | .nav__list { 2 | margin-right: 1.5em; 3 | display: flex; 4 | } 5 | .nav__list-item { 6 | margin-left: 1.5em; 7 | } 8 | 9 | .app .nav__hamburger { 10 | display: none; 11 | } 12 | 13 | .nav__theme { 14 | margin-top: 0.4em; 15 | } 16 | 17 | @media (max-width: 600px) { 18 | .nav__list { 19 | display: none; 20 | flex-direction: column; 21 | justify-content: center; 22 | align-items: center; 23 | position: fixed; 24 | inset: 0; 25 | width: 100%; 26 | height: 100%; 27 | z-index: 2; 28 | } 29 | 30 | .nav__list-item { 31 | margin: 0.5em 0; 32 | } 33 | 34 | .app .nav__hamburger { 35 | display: flex; 36 | z-index: 2; 37 | margin-left: 0.8em; 38 | } 39 | #sortmenu 40 | { 41 | margin-top: 0px; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | import { useContext, useState } from 'react' 2 | import Brightness2Icon from '@material-ui/icons/Brightness2' 3 | import WbSunnyRoundedIcon from '@material-ui/icons/WbSunnyRounded' 4 | import MenuIcon from '@material-ui/icons/Menu' 5 | import CloseIcon from '@material-ui/icons/Close' 6 | import { ThemeContext } from '../../contexts/theme' 7 | import Navigator from '../Navigator/Navigator' 8 | import './Navbar.css' 9 | 10 | const Navbar = () => { 11 | const [{ themeName, toggleTheme }] = useContext(ThemeContext) 12 | const [showNavList, setShowNavList] = useState(false) 13 | 14 | const toggleNavList = () => setShowNavList(!showNavList) 15 | 16 | return ( 17 | 108 | ) 109 | } 110 | 111 | export default Navbar 112 | -------------------------------------------------------------------------------- /src/components/Navigator/Navigator.css: -------------------------------------------------------------------------------- 1 | a>button 2 | { 3 | border: 1px solid var(--clr-primary); 4 | border-radius: 50%; 5 | height: 12px; 6 | width: 12px; 7 | background-color: white; 8 | margin-top: 20px; 9 | } 10 | 11 | 12 | #nav 13 | { 14 | display: flex; 15 | flex-direction: row; 16 | bottom: 32.5%; 17 | left: 98%; 18 | position: fixed; 19 | transform: translate(-50%, -50%); 20 | overflow: hidden; 21 | border-radius: 20px 0px 0px 20px; 22 | padding: 10px 20px; 23 | z-index: 3; 24 | background-color: transparent; 25 | } 26 | 27 | .active>button 28 | { 29 | background-color: #2a2f4c; 30 | border: 1px solid #90a0d9; 31 | 32 | } 33 | 34 | button 35 | { 36 | display: flex; 37 | margin-top: 10px; 38 | } 39 | 40 | @media (max-width: 900px) 41 | { 42 | 43 | #nav 44 | { 45 | 46 | bottom: -1.5%; 47 | left: 50%; 48 | 49 | 50 | border-bottom: 0px; 51 | overflow: hidden; 52 | border-radius: 20px 20px 0px 0px; 53 | padding: 0px 30px ; 54 | z-index: 3; 55 | transform: translate(-50%, -50%); 56 | 57 | } 58 | button 59 | { 60 | display: inline-block; 61 | margin-left: 10px; 62 | 63 | 64 | } 65 | 66 | 67 | } -------------------------------------------------------------------------------- /src/components/Navigator/Navigator.js: -------------------------------------------------------------------------------- 1 | 2 | import "./Navigator.css" 3 | import { useState } from 'react' 4 | import Scrollspy from "react-scrollspy" 5 | 6 | function Navigator() 7 | { 8 | 9 | 10 | 11 | const [showNavList, setShowNavList] = useState(false) 12 | 13 | const toggleNavList = () => setShowNavList(!showNavList) 14 | 15 | 16 | return() 27 | 28 | } 29 | 30 | export default Navigator -------------------------------------------------------------------------------- /src/components/ProjectContainer/ProjectContainer.css: -------------------------------------------------------------------------------- 1 | .project { 2 | padding: 2em; 3 | margin: 0 auto; 4 | text-align: center; 5 | box-shadow: var(--shadow); 6 | transition: transform 0.2s linear; 7 | } 8 | 9 | .project:hover { 10 | transform: translateY(-7px); 11 | } 12 | 13 | .project__description { 14 | margin-top: 1em; 15 | } 16 | 17 | .project__stack { 18 | display: flex; 19 | flex-wrap: wrap; 20 | justify-content: center; 21 | margin: 1.2em 0; 22 | } 23 | 24 | .project__stack-item { 25 | margin: 0.5em; 26 | font-weight: 500; 27 | font-size: 0.8rem; 28 | color: var(--clr-fg-alt); 29 | } 30 | 31 | .project .link--icon { 32 | margin-left: 0.5em; 33 | } 34 | -------------------------------------------------------------------------------- /src/components/Projects/Projects.css: -------------------------------------------------------------------------------- 1 | .projects__grid { 2 | max-width: 1100px; 3 | margin: 0 auto; 4 | display: grid; 5 | grid-template-columns: repeat(auto-fit, minmax(18em, 1fr)); 6 | grid-gap: 2em; 7 | } 8 | 9 | .about_project 10 | { 11 | color: var(--clr-primary); 12 | } 13 | 14 | 15 | #project 16 | { 17 | display: flex; 18 | justify-content: space-between; 19 | border-radius: 16px; 20 | align-items: center; 21 | margin-bottom: 50px; 22 | } 23 | 24 | #project>div:first-child 25 | { 26 | width: 60%; 27 | } 28 | 29 | #project>div:last-child 30 | { 31 | width: 35%; 32 | } 33 | 34 | 35 | img 36 | { 37 | width: 100%; 38 | border-radius: 26px; 39 | 40 | } 41 | 42 | #stacks 43 | { 44 | display: flex; 45 | gap: 20px; 46 | color: var(--clr-primary); 47 | } 48 | 49 | @media (max-width: 945px) { 50 | 51 | #project 52 | { 53 | flex-direction: column; 54 | } 55 | 56 | 57 | #project>div:first-child 58 | { 59 | width: 100%; 60 | } 61 | 62 | #project>div:last-child 63 | { 64 | width: 100%; 65 | margin-top: 20px; 66 | } 67 | 68 | 69 | } 70 | 71 | 72 | #b 73 | { 74 | display: flex; 75 | justify-content: center; 76 | gap: 20px; 77 | } 78 | 79 | -------------------------------------------------------------------------------- /src/components/Projects/Projects.js: -------------------------------------------------------------------------------- 1 | import {FaReact} from "react-icons/fa" 2 | import {SiCss3,SiHtml5} from "react-icons/si" 3 | import {TbApi} from "react-icons/tb" 4 | import {IoLogoJavascript} from "react-icons/io" 5 | 6 | import { Splide, SplideSlide } from '@splidejs/react-splide'; 7 | import '@splidejs/react-splide/css'; 8 | 9 | 10 | import '../ProjectContainer/ProjectContainer.css' 11 | import './Projects.css' 12 | 13 | 14 | function Projects() 15 | { 16 | 17 | 18 | 19 | return ( 20 |
21 |

Projects

22 | 23 | {/* <-------------------------------------------------1 start-------------------------------------------> */} 24 | 25 |
26 | 27 |
28 | 29 | 30 | Image 1 31 | 32 | 33 | Image 2 34 | 35 | 36 | 37 | Image 2 38 | 39 | 40 | 41 |
42 | 43 |
44 | 45 |

Movie App

46 | 47 |

48 | In the Movie App, you can search for any movie with all its details such as rating, release date, actors etc. 49 |

50 | 51 | 52 |
    53 | 54 |
  • 55 | 56 | 57 | 58 | 59 |
    • 60 | 61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 |
69 | 70 | Watch Live 71 | 72 | 73 | 74 | 75 | View Code 76 | 77 | 78 |
79 | 80 | 81 |
82 | 83 | 84 |
85 | 86 | {/* <-------------------------------------------------1 end-------------------------------------------> */} 87 | 88 | 89 | 90 | 91 | {/* <-------------------------------------------------2 start-------------------------------------------> */} 92 | 93 |
94 | 95 |
96 | 97 | 98 | Image 1 99 | 100 | 101 | Image 2 102 | 103 | 104 | 105 | Image 2 106 | 107 | 108 | 109 | Image 2 110 | 111 | 112 | 113 | 114 |
115 | 116 |
117 | 118 |

Bella Vita Organic Clone

119 | 120 |

121 | Bella Vita Organic is an Ecommerce Website for natural products for beauty, skincare, and perfumes.A collaborative project team leader built by a team of 3 executed in 5 days. 122 |

123 | 124 | 125 |
    126 | 127 |
  • 128 | 129 | 130 | 131 | 132 |
    • 133 | 134 |
135 | 136 | 137 |
138 | 139 | Watch Live 140 | 141 | 142 | 143 | 144 | View Code 145 | 146 | 147 |
148 | 149 | 150 |
151 | 152 | 153 |
154 | 155 | {/* <-------------------------------------------------2 end-------------------------------------------> */} 156 | 157 | 158 | 159 | {/* <-------------------------------------------------3 start-------------------------------------------> */} 160 | 161 |
162 | 163 |
164 | 165 | 166 | Image 1 167 | 168 | 169 | Image 2 170 | 171 | 172 | 173 | Image 2 174 | 175 | 176 | 177 |
178 | 179 |
180 | 181 |

Deccan Herald Clone

182 | 183 |

184 | Deccan Herald is an Indian English language daily newspaper published from the Indian state of Karnataka. Solo project executed in 5 days. 185 |

186 | 187 | 188 |
    189 | 190 |
  • 191 | 192 | 193 | 194 | 195 | 196 |
    • 197 | 198 |
199 | 200 | 201 |
202 | 203 | Watch Live 204 | 205 | 206 | 207 | 208 | View Code 209 | 210 | 211 |
212 | 213 | 214 |
215 | 216 | 217 |
218 | 219 | {/* <-------------------------------------------------3 end-------------------------------------------> */} 220 | 221 | 222 | 223 |
224 | ) 225 | } 226 | 227 | export default Projects 228 | -------------------------------------------------------------------------------- /src/components/ScrollToTop/ScrollToTop.css: -------------------------------------------------------------------------------- 1 | .scroll-top { 2 | position: fixed; 3 | bottom: 2em; 4 | right: 4em; 5 | background-color: transparent; 6 | z-index: 3; 7 | } 8 | 9 | @media (max-width: 900px) { 10 | .scroll-top { 11 | bottom: 0em; 12 | right: 1em; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/ScrollToTop/ScrollToTop.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect, useState } from 'react' 2 | import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward' 3 | import './ScrollToTop.css' 4 | import Brightness2Icon from '@material-ui/icons/Brightness2' 5 | import WbSunnyRoundedIcon from '@material-ui/icons/WbSunnyRounded' 6 | import { ThemeContext } from '../../contexts/theme' 7 | 8 | const ScrollToTop = () => { 9 | const [{ themeName, toggleTheme }] = useContext(ThemeContext) 10 | 11 | const [isVisible, setIsVisible] = useState(false) 12 | 13 | useEffect(() => { 14 | const toggleVisibility = () => 15 | window.pageYOffset > 300 ? setIsVisible(true) : setIsVisible(false) 16 | 17 | window.addEventListener('scroll', toggleVisibility) 18 | return () => window.removeEventListener('scroll', toggleVisibility) 19 | }, []) 20 | 21 | return isVisible ? ( 22 |
23 | 24 | 25 | 33 | 34 |
35 | ) : null 36 | } 37 | 38 | export default ScrollToTop 39 | -------------------------------------------------------------------------------- /src/components/Skills/Skills.css: -------------------------------------------------------------------------------- 1 | .skills__list { 2 | max-width: 450px; 3 | width: 95%; 4 | margin: 0 auto; 5 | display: flex; 6 | flex-wrap: wrap; 7 | justify-content: center; 8 | 9 | } 10 | .about_skills 11 | { 12 | color: var(--clr-primary); 13 | } 14 | 15 | .skills__list-item { 16 | margin: 0.5em; 17 | 18 | } 19 | #color 20 | { 21 | color: var(--clr-primary); 22 | } 23 | .btn 24 | { 25 | border-radius: 16px; 26 | } 27 | 28 | 29 | #container 30 | { 31 | display: grid; 32 | gap: 40px; 33 | grid-template-columns: repeat(6,auto); 34 | } 35 | 36 | h5 37 | { 38 | text-align: center; 39 | } 40 | 41 | @media (max-width: 999px) { 42 | 43 | #container 44 | { 45 | grid-template-columns: repeat(4,auto); 46 | } 47 | 48 | 49 | } 50 | 51 | @media (max-width: 706px) { 52 | 53 | #container 54 | { 55 | grid-template-columns: repeat(3,auto); 56 | } 57 | 58 | 59 | } 60 | 61 | @media (max-width: 506px) { 62 | 63 | #container 64 | { 65 | grid-template-columns: repeat(2,auto); 66 | } 67 | 68 | 69 | } 70 | 71 | 72 | 73 | #gitstatus 74 | { 75 | margin-top: 40px; 76 | } 77 | 78 | 79 | -------------------------------------------------------------------------------- /src/components/Skills/Skills.js: -------------------------------------------------------------------------------- 1 | 2 | import {FaHtml5,FaCss3Alt,FaReact,FaNodeJs,FaGithub} from "react-icons/fa" 3 | import {TbBrandJavascript} from "react-icons/tb" 4 | import {SiMongodb,SiRedux,SiExpress,SiChakraui,SiNetlify,SiVercel} from "react-icons/si" 5 | import Githubcalendar from "react-github-calendar"; 6 | 7 | import './Skills.css' 8 | 9 | function Skills () { 10 | 11 | return ( 12 |
13 |

Skills

14 | 15 | 16 |
17 |
  • 18 | 19 |
    HTML5
    20 |
    • 21 | 22 |
  • 23 | 24 |
    CSS3
    25 |
    • 26 | 27 |
  • 28 | 29 |
    React
    30 |
    • 31 | 32 | 33 | 34 |
  • 35 | 36 |
    JavaScript
    37 |
    • 38 | 39 | 40 |
  • 41 | 42 |
    MongoDB
    43 |
    • 44 | 45 |
  • 46 | 47 |
    Redux
    48 |
    • 49 | 50 |
  • 51 | 52 |
    Express
    53 |
    • 54 | 55 | 56 |
  • 57 | 58 |
    NodeJs
    59 |
    • 60 | 61 |
  • 62 | 63 |
    Chakra UI
    64 |
    • 65 | 66 | 67 |
  • 68 | 69 |
    GitHub
    70 |
    • 71 | 72 | 73 |
  • 74 | 75 |
    Netlify
    76 |
    • 77 | 78 |
  • 79 | 80 |
    Vercel
    81 |
    • 82 | 83 | 84 | 85 | 86 | 87 |
    88 | 89 |
    90 |

    Days I Coded

    91 | 92 | 100 |
    101 |
    102 | ) 103 | } 104 | 105 | export default Skills 106 | -------------------------------------------------------------------------------- /src/contexts/theme.js: -------------------------------------------------------------------------------- 1 | import { createContext, useEffect, useState } from 'react' 2 | import PropTypes from 'prop-types' 3 | 4 | const ThemeContext = createContext() 5 | 6 | const ThemeProvider = ({ children }) => { 7 | const [themeName, setThemeName] = useState('light') 8 | 9 | useEffect(() => { 10 | const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); 11 | setThemeName(darkMediaQuery.matches ? 'dark' : 'light') 12 | darkMediaQuery.addEventListener('change', (e) => { 13 | setThemeName(e.matches ? 'dark' : 'light') 14 | }); 15 | }, []) 16 | 17 | const toggleTheme = () => { 18 | const name = themeName === 'dark' ? 'light' : 'dark' 19 | localStorage.setItem('themeName', name) 20 | setThemeName(name) 21 | } 22 | 23 | return ( 24 | 25 | {children} 26 | 27 | ) 28 | } 29 | 30 | ThemeProvider.propTypes = { 31 | children: PropTypes.node.isRequired, 32 | } 33 | 34 | export { ThemeProvider, ThemeContext } 35 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | border: 0; 5 | outline: 0; 6 | background-color: inherit; 7 | color: inherit; 8 | font-family: inherit; 9 | font-size: inherit; 10 | box-shadow: none; 11 | box-sizing: border-box; 12 | } 13 | 14 | html { 15 | scroll-behavior: smooth; 16 | } 17 | 18 | h1, 19 | h2, 20 | h3, 21 | h4 { 22 | line-height: 1.2; 23 | color: var(--clr-fg-alt); 24 | } 25 | 26 | h1 { 27 | font-size: 4rem; 28 | } 29 | 30 | h2 { 31 | font-size: 2rem; 32 | } 33 | 34 | h3 { 35 | font-size: 1.5rem; 36 | } 37 | 38 | h4 { 39 | font-size: 1.3rem; 40 | } 41 | 42 | ul { 43 | list-style-type: none; 44 | } 45 | 46 | a { 47 | text-decoration: none; 48 | } 49 | 50 | button { 51 | cursor: pointer; 52 | } 53 | 54 | @media (max-width: 900px) { 55 | h1 { 56 | font-size: 2.6rem; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { render } from 'react-dom' 2 | import App from './App' 3 | import { ThemeProvider } from './contexts/theme' 4 | import './index.css' 5 | 6 | render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ) 12 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------