Skip to content

Commit 0117880

Browse files
codebucks27codebucks27
committed
New Updates
1 parent b8ec9fd commit 0117880

File tree

8 files changed

+30146
-270
lines changed

8 files changed

+30146
-270
lines changed

‎package-lock.json

+29,847
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+15-16
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
11
{
2-
"name": "react-portfolio-starter-code-files",
3-
"version": "0.1.0",
2+
"name": "react-portfolio",
3+
"version": "2.0",
44
"private": true,
55
"dependencies": {
6-
"@testing-library/jest-dom": "^5.14.1",
7-
"@testing-library/react": "^11.2.7",
8-
"@testing-library/user-event": "^12.8.3",
9-
"framer-motion": "^4.1.17",
6+
"@testing-library/jest-dom": "^5.16.5",
7+
"@testing-library/react": "^13.4.0",
8+
"@testing-library/user-event": "^14.4.3",
9+
"framer-motion": "^7.6.19",
10+
"locomotive-scroll": "^4.1.4",
1011
"normalize.css": "^8.0.1",
11-
"react": "^17.0.2",
12-
"react-dom": "^17.0.2",
13-
"react-particles-js": "^3.5.3",
14-
"react-router-dom": "^5.2.0",
15-
"styled-components": "^5.3.0",
16-
"tsparticles": "^1.31.1",
17-
"web-vitals": "^1.1.2"
18-
},
19-
"devDependencies": {
20-
"react-scripts": "5.0.1"
12+
"react": "^18.2.0",
13+
"react-dom": "^18.2.0",
14+
"react-router-dom": "^6.4.4",
15+
"react-scripts": "5.0.1",
16+
"react-tsparticles": "^2.6.0",
17+
"styled-components": "^5.3.6",
18+
"tsparticles": "^2.6.0",
19+
"web-vitals": "^3.1.0"
2120
},
2221
"scripts": {
2322
"start": "react-scripts start",

‎public/index.html

+7-4
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,12 @@
1717
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
1818

1919
<!-- Fonts -->
20-
<link rel="preconnect" href="https://fonts.googleapis.com">
21-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22-
<link href="https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600&family=Pacifico&family=Source+Sans+Pro:wght@400;600;700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
20+
<link rel="preconnect" href="https://fonts.googleapis.com" />
21+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
22+
<link
23+
href="https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600&family=Pacifico&family=Source+Sans+Pro:wght@400;600;700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400&display=swap"
24+
rel="stylesheet"
25+
/>
2326

2427
<!--
2528
Notice the use of %PUBLIC_URL% in the tags above.
@@ -30,7 +33,7 @@
3033
work correctly both with client-side routing and a non-root public URL.
3134
Learn how to configure a non-root public URL by running `npm run build`.
3235
-->
33-
<title>React App</title>
36+
<title>CodeBucks | Awesome portfolio built with React JS</title>
3437
</head>
3538
<body>
3639
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.js

+34-34
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,51 @@
1-
import { Route, Switch, useLocation } from "react-router"
2-
import { ThemeProvider } from "styled-components"
3-
import { lightTheme } from "./components/Themes"
4-
import GlobalStyle from "./globalStyles"
5-
1+
import { Routes, Route, useLocation } from "react-router-dom";
2+
import { ThemeProvider } from "styled-components";
3+
import { lightTheme } from "./components/Themes";
4+
import { AnimatePresence } from "framer-motion";
5+
import GlobalStyle from "./globalStyles";
66

77
//Components
8-
import Main from './components/Main';
9-
import AboutPage from './components/AboutPage';
10-
import BlogPage from './components/BlogPage';
11-
import WorkPage from './components/WorkPage';
12-
import MySkillsPage from './components/MySkillsPage';
13-
import { AnimatePresence } from "framer-motion";
8+
import Main from "./components/Main";
9+
import AboutPage from "./components/AboutPage";
10+
import BlogPage from "./components/BlogPage";
11+
import WorkPage from "./components/WorkPage";
12+
import MySkillsPage from "./components/MySkillsPage";
1413
import SoundBar from "./subComponents/SoundBar";
1514

16-
1715
function App() {
18-
1916
const location = useLocation();
20-
return <>
17+
return (
18+
<>
19+
<GlobalStyle />
2120

21+
<ThemeProvider theme={lightTheme}>
22+
<SoundBar />
2223

23-
<GlobalStyle />
24+
{/* For framer-motion animation on page change! */}
25+
{/* Changed prop from exitBefore to mode */}
26+
<AnimatePresence mode="wait">
27+
{/* Changed Switch to Routes */}
2428

25-
<ThemeProvider theme={lightTheme}>
29+
<Routes location={location} key={location.pathname}>
30+
{/* Changed component to element */}
2631

27-
<SoundBar />
32+
<Route path="/" element={<Main />} />
2833

29-
{/* For framer-motion animation on page change! */}
30-
<AnimatePresence exitBeforeEnter>
31-
<Switch location={location} key={location.pathname}>
32-
<Route exact path="/" component={Main}/>
33-
<Route exact path="/about" component={AboutPage}/>
34-
<Route exact path="/blog" component={BlogPage}/>
35-
<Route exact path="/work" component={WorkPage}/>
36-
<Route exact path="/skills" component={MySkillsPage}/>
34+
<Route path="/about" element={<AboutPage />} />
3735

38-
</Switch>
39-
</AnimatePresence>
40-
41-
42-
</ThemeProvider>
36+
<Route path="/blog" element={<BlogPage />} />
4337

38+
<Route path="/work" element={<WorkPage />} />
4439

45-
40+
<Route path="/skills" element={<MySkillsPage />} />
41+
{/* Below is to catch all the other routes and send the user to main component,
42+
you can add custom 404 component or message instead of Main component*/}
43+
<Route path="*" element={<Main />} />
44+
</Routes>
45+
</AnimatePresence>
46+
</ThemeProvider>
4647
</>
47-
48+
);
4849
}
4950

50-
export default App
51-
51+
export default App;

‎src/components/WorkPage.js

+79-97
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,98 @@
1-
import React, { useEffect, useRef } from 'react'
2-
import styled, { ThemeProvider } from 'styled-components'
3-
import {DarkTheme} from './Themes';
4-
import {motion} from 'framer-motion';
1+
import React, { useEffect, useRef } from "react";
2+
import styled, { ThemeProvider } from "styled-components";
3+
import { DarkTheme } from "./Themes";
4+
import { motion } from "framer-motion";
55

6-
import LogoComponent from '../subComponents/LogoComponent';
7-
import SocialIcons from '../subComponents/SocialIcons';
8-
import PowerButton from '../subComponents/PowerButton';
6+
import LogoComponent from "../subComponents/LogoComponent";
7+
import SocialIcons from "../subComponents/SocialIcons";
8+
import PowerButton from "../subComponents/PowerButton";
99

1010
import { Work } from "../data/WorkData";
11-
import Card from '../subComponents/Card';
12-
import { YinYang } from './AllSvgs';
13-
import BigTitlte from '../subComponents/BigTitlte';
11+
import Card from "../subComponents/Card";
12+
import { YinYang } from "./AllSvgs";
13+
import BigTitlte from "../subComponents/BigTitlte";
1414

1515
const Box = styled.div`
16-
background-color: ${props => props.theme.body};
16+
background-color: ${(props) => props.theme.body};
1717
18-
height:400vh;
19-
position: relative;
20-
display: flex;
21-
align-items: center;
22-
23-
24-
`
18+
height: 400vh;
19+
position: relative;
20+
display: flex;
21+
align-items: center;
22+
`;
2523

2624
const Main = styled(motion.ul)`
27-
position: fixed;
28-
top: 12rem;
29-
left:calc(10rem + 15vw);
30-
height: 40vh;
31-
display: flex;
32-
33-
color:white;
34-
`
25+
position: fixed;
26+
top: 12rem;
27+
left: calc(10rem + 15vw);
28+
height: 40vh;
29+
display: flex;
30+
31+
color: white;
32+
`;
3533
const Rotate = styled.span`
36-
display:block;
37-
position: fixed;
38-
right:1rem;
39-
bottom: 1rem;
40-
width: 80px;
41-
height: 80px;
42-
z-index:1;
43-
`
44-
34+
display: block;
35+
position: fixed;
36+
right: 1rem;
37+
bottom: 1rem;
38+
width: 80px;
39+
height: 80px;
40+
z-index: 1;
41+
`;
4542

4643
// Framer-motion Configuration
4744
const container = {
48-
49-
hidden: {opacity:0},
45+
hidden: { opacity: 0 },
5046
show: {
51-
opacity:1,
47+
opacity: 1,
5248

53-
transition:{
49+
transition: {
5450
staggerChildren: 0.5,
5551
duration: 0.5,
56-
}
57-
}
58-
59-
}
52+
},
53+
},
54+
};
6055

6156
const WorkPage = () => {
62-
63-
const ref = useRef(null);
64-
const yinyang = useRef(null);
65-
66-
67-
68-
useEffect(() => {
69-
let element = ref.current;
70-
71-
72-
const rotate = () => {
73-
74-
element.style.transform = `translateX(${-window.pageYOffset}px)`
75-
76-
77-
return (yinyang.current.style.transform =
78-
'rotate(' + -window.pageYOffset + 'deg)')
79-
}
80-
81-
window.addEventListener('scroll', rotate)
82-
return () => {
83-
window.removeEventListener('scroll', rotate);
84-
85-
}
86-
}, [])
87-
88-
89-
return (
90-
<ThemeProvider theme={DarkTheme}>
91-
<Box>
92-
93-
<LogoComponent theme='dark'/>
94-
<SocialIcons theme='dark'/>
95-
<PowerButton />
96-
97-
<Main ref={ref} variants={container} initial='hidden' animate='show' >
98-
{
99-
Work.map( d =>
57+
const ref = useRef(null);
58+
const yinyang = useRef(null);
59+
60+
useEffect(() => {
61+
let element = ref.current;
62+
63+
const rotate = () => {
64+
element.style.transform = `translateX(${-window.pageYOffset}px)`;
65+
66+
return (yinyang.current.style.transform =
67+
"rotate(" + -window.pageYOffset + "deg)");
68+
};
69+
70+
window.addEventListener("scroll", rotate);
71+
return () => {
72+
window.removeEventListener("scroll", rotate);
73+
};
74+
}, []);
75+
76+
return (
77+
<ThemeProvider theme={DarkTheme}>
78+
<Box>
79+
<LogoComponent theme="dark" />
80+
<SocialIcons theme="dark" />
81+
<PowerButton />
82+
83+
<Main ref={ref} variants={container} initial="hidden" animate="show">
84+
{Work.map((d) => (
10085
<Card key={d.id} data={d} />
101-
)
102-
}
103-
</Main>
104-
<Rotate ref={yinyang}>
105-
<YinYang width={80} height={80} fill={DarkTheme.text} />
106-
</Rotate>
107-
108-
<BigTitlte text="WORK" top='10%' right="20%" />
109-
</Box>
110-
111-
</ThemeProvider>
112-
113-
)
114-
}
115-
116-
export default WorkPage
86+
))}
87+
</Main>
88+
<Rotate ref={yinyang}>
89+
<YinYang width={80} height={80} fill={DarkTheme.text} />
90+
</Rotate>
91+
92+
<BigTitlte text="WORK" top="10%" right="20%" />
93+
</Box>
94+
</ThemeProvider>
95+
);
96+
};
97+
98+
export default WorkPage;

‎src/index.js

+20-14
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
// import './index.css';
4-
import App from './App';
1+
import React from 'react'
2+
import App from './App'
53
// import reportWebVitals from './reportWebVitals';
6-
import '../node_modules/normalize.css'
7-
import { BrowserRouter } from 'react-router-dom';
4+
// import '../node_modules/normalize.css'
5+
import "normalize.css"
6+
import { createRoot } from 'react-dom/client';
87

9-
ReactDOM.render(
10-
<React.StrictMode>
8+
import { BrowserRouter } from 'react-router-dom'
119

12-
<BrowserRouter>
10+
11+
// From react 18 we should use createRoot instead of ReactDOM
12+
const container = document.getElementById('root');
13+
const root = createRoot(container); // createRoot(container!) if you use TypeScript
14+
root.render(<BrowserRouter>
1315
<App />
14-
</BrowserRouter>
16+
</BrowserRouter>);
1517

16-
17-
</React.StrictMode>,
18-
document.getElementById('root')
19-
);
18+
// ReactDOM.render(
19+
// <React.StrictMode>
20+
// <BrowserRouter>
21+
// <App />
22+
// </BrowserRouter>
23+
// </React.StrictMode>,
24+
// document.getElementById('root')
25+
// )
2026

2127
// If you want to start measuring performance in your app, pass a function
2228
// to log results (for example: reportWebVitals(console.log))

0 commit comments

Comments
 (0)