├── 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 |
10 |
11 |
12 |
13 |
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 | You need to enable JavaScript to run this app.
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 |
35 |
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 |
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 |
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 |
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 |
18 |
85 |
86 |
92 | {themeName === 'dark' ? : }
93 |
94 |
95 |
104 |
105 |
106 |
107 |
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(
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
)
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 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
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 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | {/* <-------------------------------------------------1 end-------------------------------------------> */}
87 |
88 |
89 |
90 |
91 | {/* <-------------------------------------------------2 start-------------------------------------------> */}
92 |
93 |
94 |
95 |
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 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 | {/* <-------------------------------------------------2 end-------------------------------------------> */}
156 |
157 |
158 |
159 | {/* <-------------------------------------------------3 start-------------------------------------------> */}
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
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 |
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 |
31 | {themeName === 'dark' ? : }
32 |
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 |
--------------------------------------------------------------------------------