├── .github └── FUNDING.yml ├── .gitignore ├── 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 ├── assets ├── Images │ ├── patrick-tomasso-Oaqk7qqNh_c-unsplash.jpg │ ├── profile-img.png │ └── spaceman.png ├── audio │ ├── u-said-it-v13-1167(high bitrate).mp3 │ └── u-said-it-v13-1167.mp3 └── svg │ ├── anchor-solid.svg │ ├── facebook-brands.svg │ ├── github-brands.svg │ ├── laptop-code-solid.svg │ ├── link-solid.svg │ ├── palette-solid.svg │ ├── power-off-solid.svg │ ├── twitter-brands.svg │ ├── yin-yang-solid.svg │ └── youtube-brands.svg ├── components ├── AboutPage.js ├── AllSvgs.js ├── BlogComponent.js ├── BlogPage.js ├── Intro.js ├── Main.js ├── MySkillsPage.js ├── Themes.js └── WorkPage.js ├── config ├── particlesjs-config-light.json └── particlesjs-config.json ├── data ├── AllSvg.txt ├── BlogData.js ├── Text.txt └── WorkData.js ├── globalStyles.js ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js ├── setupTests.js └── subComponents ├── Anchor.js ├── BigTitlte.js ├── Card.js ├── LogoComponent.js ├── ParticleComponent.js ├── PowerButton.js ├── SocialIcons.js └── SoundBar.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [codebucks27] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username 14 | thanks_dev: # Replace with a single thanks.dev username 15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Build a Stunning Portfolio with React JS using Styled-Components and framer-motion for awesome Animations 2 | 3 | ![GitHub stars](https://img.shields.io/github/stars/codebucks27/react-portfolio-final?style=social&logo=ApacheSpark&label=Stars&maxAge=2592000)   4 | ![GitHub forks](https://img.shields.io/github/forks/codebucks27/react-portfolio-final?style=social&logo=KashFlow)   5 | ![Github Followers](https://img.shields.io/github/followers/codebucks27.svg?style=social&label=Follow&maxAge=2592000)  
6 | 7 | This repository contains Final code for The Portfolio Website in ReactJS.
8 | 9 | For the **Demo** and **Final Code** checkout this link👇:
10 | Checkout this Responsive Portfolio in ReactJS
11 | 12 | If you want to learn how to create it please follow below tutorial👇:
13 | https://youtu.be/jcohAIaSy2M
14 | [![YouTube Video Views](https://img.shields.io/youtube/views/jcohAIaSy2M?style=social)](https://youtu.be/jcohAIaSy2M)
15 | 16 | [⚠⚠⚠ If you want full code of this website then you can get it from here👇:
]:: 17 | 18 | You'll get code files which contans code for responsive portfolio website with 19 | all the animations showed in the demo. 20 | Also, I have used React Lazy loading to increase loading speed. 21 | 22 | I have recently updated all the required dependencies for React Portfolio Website. 23 | You might see some differences in implementation such as, 24 | 25 | - In implementing react-router 26 | 27 | - I have removed react-particles-js since it has been deprecated and used react-tsparticles instead, you can see it's implementation in ParticlesComponent.js file. 28 | 29 | - In the index.js file we are no longer using ReactDOM since we can use createRoot in React 18. 30 | 31 | ### Images of The Portfolio Website: 32 | 33 | ![HOME](https://github.com/codebucks27/React-Portfolio-starter-code-files/blob/main/Portfolio%20Images/Home.png) 34 | ![Intro](https://github.com/codebucks27/React-Portfolio-starter-code-files/blob/main/Portfolio%20Images/Intro.png) 35 | ![Blog](https://github.com/codebucks27/React-Portfolio-starter-code-files/blob/main/Portfolio%20Images/Blog.png) 36 | ![Home Mobile](https://github.com/codebucks27/React-Portfolio-starter-code-files/blob/main/Portfolio%20Images/Home-Mobile.png) 37 | ![Intro Mobile](https://github.com/codebucks27/React-Portfolio-starter-code-files/blob/main/Portfolio%20Images/Intro-Mobile.png) 38 | ![Intro Blog](https://github.com/codebucks27/React-Portfolio-starter-code-files/blob/main/Portfolio%20Images/Blog-Mobile.png) 39 | 40 | ### Resources Used in This Project 41 | 42 | Design in : https://www.figma.com/
43 | Svg Icons from :https://fontawesome.com/
44 | Spaceman 3D Image from : https://www.figma.com/community/plugin/769588393361258724/Vectary-3D-Elements
45 | Audio: Music by Jonas from Pixabay
46 | Background Photo by Patrick Tomasso on Unsplash 47 | 48 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 49 | 50 | ## Available Scripts 51 | 52 | In the project directory, you can run: 53 | 54 | ### `npm start` 55 | 56 | Runs the app in the development mode.\ 57 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 58 | 59 | The page will reload if you make edits.\ 60 | You will also see any lint errors in the console. 61 | 62 | ### `npm test` 63 | 64 | Launches the test runner in the interactive watch mode.\ 65 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 66 | 67 | ### `npm run build` 68 | 69 | Builds the app for production to the `build` folder.\ 70 | It correctly bundles React in production mode and optimizes the build for the best performance. 71 | 72 | The build is minified and the filenames include the hashes.\ 73 | Your app is ready to be deployed! 74 | 75 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 76 | 77 | ### `npm run eject` 78 | 79 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 80 | 81 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 82 | 83 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 84 | 85 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 86 | 87 | ## Learn More 88 | 89 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 90 | 91 | To learn React, check out the [React documentation](https://reactjs.org/). 92 | 93 | ### Code Splitting 94 | 95 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 96 | 97 | ### Analyzing the Bundle Size 98 | 99 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 100 | 101 | ### Making a Progressive Web App 102 | 103 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 104 | 105 | ### Advanced Configuration 106 | 107 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 108 | 109 | ### Deployment 110 | 111 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 112 | 113 | ### `npm run build` fails to minify 114 | 115 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 116 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-portfolio", 3 | "version": "2.0", 4 | "private": true, 5 | "dependencies": { 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", 11 | "normalize.css": "^8.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" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject" 26 | }, 27 | "eslintConfig": { 28 | "extends": [ 29 | "react-app", 30 | "react-app/jest" 31 | ] 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/react-portfolio-final/44ed1c43c0a733b86dc0bf15ae0ee398a219ecab/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 26 | 27 | 36 | CodeBucks | Awesome portfolio built with React JS 37 | 38 | 39 | 40 |
41 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/react-portfolio-final/44ed1c43c0a733b86dc0bf15ae0ee398a219ecab/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/react-portfolio-final/44ed1c43c0a733b86dc0bf15ae0ee398a219ecab/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 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 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"; 6 | 7 | //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 SoundBar from "./subComponents/SoundBar"; 14 | 15 | function App() { 16 | const location = useLocation(); 17 | return ( 18 | <> 19 | 20 | 21 | 22 | 23 | 24 | {/* For framer-motion animation on page change! */} 25 | {/* Changed prop from exitBefore to mode */} 26 | 27 | {/* Changed Switch to Routes */} 28 | 29 | 30 | {/* Changed component to element */} 31 | 32 | } /> 33 | 34 | } /> 35 | 36 | } /> 37 | 38 | } /> 39 | 40 | } /> 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 | } /> 44 | 45 | 46 | 47 | 48 | ); 49 | } 50 | 51 | export default App; 52 | -------------------------------------------------------------------------------- /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/assets/Images/patrick-tomasso-Oaqk7qqNh_c-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/react-portfolio-final/44ed1c43c0a733b86dc0bf15ae0ee398a219ecab/src/assets/Images/patrick-tomasso-Oaqk7qqNh_c-unsplash.jpg -------------------------------------------------------------------------------- /src/assets/Images/profile-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/react-portfolio-final/44ed1c43c0a733b86dc0bf15ae0ee398a219ecab/src/assets/Images/profile-img.png -------------------------------------------------------------------------------- /src/assets/Images/spaceman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/react-portfolio-final/44ed1c43c0a733b86dc0bf15ae0ee398a219ecab/src/assets/Images/spaceman.png -------------------------------------------------------------------------------- /src/assets/audio/u-said-it-v13-1167(high bitrate).mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/react-portfolio-final/44ed1c43c0a733b86dc0bf15ae0ee398a219ecab/src/assets/audio/u-said-it-v13-1167(high bitrate).mp3 -------------------------------------------------------------------------------- /src/assets/audio/u-said-it-v13-1167.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebucks27/react-portfolio-final/44ed1c43c0a733b86dc0bf15ae0ee398a219ecab/src/assets/audio/u-said-it-v13-1167.mp3 -------------------------------------------------------------------------------- /src/assets/svg/anchor-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/facebook-brands.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/github-brands.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/laptop-code-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/link-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/palette-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/power-off-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/twitter-brands.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/yin-yang-solid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/youtube-brands.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/AboutPage.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled, { keyframes, ThemeProvider } from 'styled-components' 3 | import {DarkTheme} from './Themes'; 4 | 5 | 6 | import LogoComponent from '../subComponents/LogoComponent'; 7 | import SocialIcons from '../subComponents/SocialIcons'; 8 | import PowerButton from '../subComponents/PowerButton'; 9 | import ParticleComponent from '../subComponents/ParticleComponent'; 10 | import BigTitle from '../subComponents/BigTitlte' 11 | import astronaut from '../assets/Images/spaceman.png' 12 | 13 | const Box = styled.div` 14 | background-color: ${props => props.theme.body}; 15 | width: 100vw; 16 | height:100vh; 17 | position: relative; 18 | overflow: hidden; 19 | ` 20 | const float = keyframes` 21 | 0% { transform: translateY(-10px) } 22 | 50% { transform: translateY(15px) translateX(15px) } 23 | 100% { transform: translateY(-10px) } 24 | 25 | ` 26 | const Spaceman = styled.div` 27 | position: absolute; 28 | top: 10%; 29 | right: 5%; 30 | width: 20vw; 31 | animation: ${float} 4s ease infinite; 32 | img{ 33 | width: 100%; 34 | height: auto; 35 | } 36 | ` 37 | const Main = styled.div` 38 | border: 2px solid ${(props) => props.theme.text}; 39 | color: ${(props) => props.theme.text}; 40 | padding: 2rem; 41 | width: 50vw; 42 | height: 60vh; 43 | z-index: 3; 44 | line-height: 1.5; 45 | display: flex; 46 | justify-content: center; 47 | align-items: center; 48 | font-size: calc(0.6rem + 1vw); 49 | backdrop-filter: blur(4px); 50 | 51 | position: absolute; 52 | left: calc(5rem + 5vw); 53 | top: 10rem; 54 | font-family: 'Ubuntu Mono', monospace; 55 | font-style: italic; 56 | ` 57 | 58 | 59 | 60 | 61 | const AboutPage = () => { 62 | return ( 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | spaceman 73 | 74 |
75 | I'm a front-end developer located in India. I love to create simple yet beautiful websites with great user experience. 76 |

77 | I'm interested in the whole frontend stack Like trying new things and building great projects. I'm an independent freelancer and blogger. I love to write blogs and read books. 78 |

79 | I believe everything is an Art when you put your consciousness in it. You can connect with me via social links. 80 |
81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | ) 90 | } 91 | 92 | export default AboutPage 93 | -------------------------------------------------------------------------------- /src/components/AllSvgs.js: -------------------------------------------------------------------------------- 1 | export const PowerBtn = (props) => { 2 | return ( 3 | 17 | ) 18 | } 19 | 20 | export const Github = (props) => { 21 | return ( 22 | 36 | ) 37 | } 38 | 39 | export const Twitter = (props) => { 40 | return ( 41 | 55 | ) 56 | } 57 | 58 | export const Facebook = (props) => { 59 | return ( 60 | 74 | ) 75 | } 76 | 77 | export const YouTube = (props) => { 78 | return ( 79 | 93 | ) 94 | } 95 | 96 | export const YinYang = (props) => { 97 | return ( 98 | 112 | ) 113 | } 114 | 115 | export const Anchor = (props) => { 116 | return ( 117 | 131 | ) 132 | } 133 | 134 | 135 | 136 | export const Link = (props) => { 137 | return ( 138 | 154 | ) 155 | } 156 | 157 | 158 | 159 | export const Design = (props) => { 160 | return ( 161 | 175 | ) 176 | 177 | } 178 | 179 | export const Develope = (props) => { 180 | return ( 181 | 195 | ) 196 | 197 | } -------------------------------------------------------------------------------- /src/components/BlogComponent.js: -------------------------------------------------------------------------------- 1 | import { motion } from "framer-motion"; 2 | import React from "react"; 3 | // import { NavLink } from 'react-router-dom' 4 | import styled from "styled-components"; 5 | 6 | const Box = styled(motion.a)` 7 | width: calc(10rem + 15vw); 8 | text-decoration: none; 9 | height: 20rem; 10 | padding: 1rem; 11 | color: ${(props) => props.theme.text}; 12 | border: 2px solid ${(props) => props.theme.text}; 13 | backdrop-filter: blur(2px); 14 | box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2); 15 | cursor: pointer; 16 | 17 | display: flex; 18 | flex-direction: column; 19 | z-index: 5; 20 | 21 | &:hover { 22 | color: ${(props) => props.theme.body}; 23 | background-color: ${(props) => props.theme.text}; 24 | transition: all 0.3s ease; 25 | } 26 | `; 27 | 28 | const Image = styled.div` 29 | background-image: ${(props) => `url(${props.img})`}; 30 | width: 100%; 31 | height: 60%; 32 | background-size: cover; 33 | border: 1px solid transparent; 34 | background-position: center center; 35 | 36 | ${Box}:hover & { 37 | border: 1px solid ${(props) => props.theme.body}; 38 | } 39 | `; 40 | const Title = styled.h3` 41 | color: inherit; 42 | padding: 0.5rem 0; 43 | padding-top: 1rem; 44 | font-family: "Karla", sans-serif; 45 | font-weight: 700; 46 | border-bottom: 1px solid ${(props) => props.theme.text}; 47 | 48 | ${Box}:hover & { 49 | border-bottom: 1px solid ${(props) => props.theme.body}; 50 | } 51 | `; 52 | const HashTags = styled.div` 53 | padding: 0.5rem 0; 54 | `; 55 | const Tag = styled.span` 56 | padding-right: 0.5rem; 57 | `; 58 | const Date = styled.span` 59 | padding: 0.5rem 0; 60 | `; 61 | 62 | const Container = styled(motion.div)``; 63 | 64 | // Framer motion configuration 65 | const Item = { 66 | hidden: { 67 | scale: 0, 68 | }, 69 | show: { 70 | scale: 1, 71 | transition: { 72 | type: "spring", 73 | duration: 0.5, 74 | }, 75 | }, 76 | }; 77 | 78 | const BlogComponent = (props) => { 79 | const { name, tags, date, imgSrc, link } = props.blog; 80 | return ( 81 | 82 | 83 | 84 | {name} 85 | 86 | {tags.map((t, id) => { 87 | return #{t}; 88 | })} 89 | 90 | {date} 91 | 92 | 93 | ); 94 | }; 95 | 96 | export default BlogComponent; 97 | -------------------------------------------------------------------------------- /src/components/BlogPage.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import styled from 'styled-components' 3 | import img from "../assets/Images/patrick-tomasso-Oaqk7qqNh_c-unsplash.jpg" 4 | import LogoComponent from '../subComponents/LogoComponent' 5 | import SocialIcons from '../subComponents/SocialIcons' 6 | import PowerButton from '../subComponents/PowerButton' 7 | 8 | import {Blogs} from '../data/BlogData'; 9 | import BlogComponent from './BlogComponent' 10 | import AnchorComponent from '../subComponents/Anchor' 11 | import BigTitle from "../subComponents/BigTitlte" 12 | import { motion } from 'framer-motion' 13 | 14 | 15 | const MainContainer = styled(motion.div)` 16 | background-image: url(${img}); 17 | background-size: cover; 18 | background-repeat: no-repeat; 19 | background-attachment: fixed; 20 | background-position: center; 21 | ` 22 | const Container = styled.div` 23 | background-color: ${props => `rgba(${props.theme.bodyRgba},0.8)`}; 24 | width: 100%; 25 | height:auto; 26 | 27 | position: relative; 28 | padding-bottom: 5rem; 29 | ` 30 | 31 | const Center = styled.div` 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | padding-top: 10rem; 36 | ` 37 | 38 | const Grid = styled.div` 39 | display: grid; 40 | grid-template-columns: repeat(2, minmax(calc(10rem + 15vw), 1fr)); 41 | grid-gap: calc(1rem + 2vw); 42 | ` 43 | 44 | // Framer-motion config 45 | const container = { 46 | 47 | hidden: {opacity:0}, 48 | show: { 49 | opacity:1, 50 | 51 | transition:{ 52 | staggerChildren: 0.5, 53 | duration: 0.5, 54 | } 55 | } 56 | 57 | } 58 | 59 | const BlogPage = () => { 60 | 61 | const [numbers, setNumbers] = useState(0); 62 | 63 | useEffect(() => { 64 | let num = (window.innerHeight - 70)/30; 65 | setNumbers(parseInt(num)); 66 | }, []) 67 | 68 | 69 | return ( 70 | 78 | 79 | 80 | 81 | 82 | 83 |
84 | 85 | 86 | { 87 | Blogs.map(blog => { 88 | return 89 | }) 90 | } 91 | 92 | 93 |
94 | 95 | 96 | 97 | ) 98 | } 99 | 100 | export default BlogPage 101 | -------------------------------------------------------------------------------- /src/components/Intro.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import {motion} from 'framer-motion' 4 | import Me from '../assets/Images/profile-img.png' 5 | 6 | 7 | const Box = styled(motion.div)` 8 | 9 | position: absolute; 10 | left: 50%; 11 | top: 50%; 12 | transform: translate(-50%, -50%); 13 | 14 | 15 | width: 65vw; 16 | height:55vh; 17 | display: flex; 18 | 19 | 20 | background: linear-gradient( 21 | to right, 22 | ${props => props.theme.body} 50%, 23 | ${props => props.theme.text} 50%) bottom, 24 | linear-gradient( 25 | to right, 26 | ${props => props.theme.body} 50%, 27 | ${props => props.theme.text} 50%) top; 28 | background-repeat: no-repeat; 29 | background-size: 100% 2px; 30 | border-left: 2px solid ${props => props.theme.body}; 31 | border-right: 2px solid ${props => props.theme.text}; 32 | 33 | 34 | z-index:1; 35 | 36 | ` 37 | const SubBox = styled.div` 38 | width: 50%; 39 | position: relative; 40 | display: flex; 41 | 42 | .pic{ 43 | position: absolute; 44 | bottom: 0; 45 | left: 50%; 46 | transform: translate(-50%,0%); 47 | width: 100%; 48 | height: auto; 49 | } 50 | ` 51 | 52 | const Text = styled.div` 53 | font-size: calc(1em + 1.5vw); 54 | color: ${props => props.theme.body}; 55 | padding: 2rem; 56 | cursor: pointer; 57 | 58 | display: flex; 59 | flex-direction: column; 60 | justify-content: space-evenly; 61 | 62 | &>*:last-child{ 63 | color: ${props => `rgba(${props.theme.bodyRgba},0.6)` }; 64 | font-size: calc(0.5rem + 1.5vw); 65 | font-weight:300; 66 | 67 | } 68 | 69 | 70 | 71 | ` 72 | 73 | const Intro = () => { 74 | return ( 75 | 80 | 81 | 82 |

Hi,

83 |

I'm CodeBucks.

84 |
I design and Code simple yet beautiful websites.
85 | 86 | 87 | 88 | 93 | Profile Pic 94 | 95 | 96 | 97 | ) 98 | } 99 | 100 | export default Intro 101 | -------------------------------------------------------------------------------- /src/components/Main.js: -------------------------------------------------------------------------------- 1 | import { motion } from 'framer-motion' 2 | import React, { useState } from 'react' 3 | import { NavLink } from 'react-router-dom' 4 | import styled, { keyframes } from 'styled-components' 5 | import LogoComponent from '../subComponents/LogoComponent' 6 | import PowerButton from '../subComponents/PowerButton' 7 | import SocialIcons from '../subComponents/SocialIcons' 8 | import { YinYang } from './AllSvgs' 9 | import Intro from './Intro' 10 | ; 11 | 12 | 13 | const MainContainer = styled.div` 14 | background: ${props => props.theme.body}; 15 | width: 100vw; 16 | height: 100vh; 17 | overflow:hidden; 18 | 19 | position: relative; 20 | 21 | h2,h3,h4,h5,h6{ 22 | font-family:'Karla', sans-serif ; 23 | font-weight:500; 24 | } 25 | ` 26 | 27 | const Container = styled.div` 28 | padding: 2rem; 29 | ` 30 | 31 | const Contact = styled.a` 32 | color: ${props => props.theme.text}; 33 | position: absolute; 34 | top: 2rem; 35 | right: calc(1rem + 2vw); 36 | text-decoration: none; 37 | z-index:1; 38 | ` 39 | const BLOG = styled(NavLink)` 40 | color: ${props => props.theme.text}; 41 | position: absolute; 42 | top: 50%; 43 | right: calc(1rem + 2vw); 44 | transform: rotate(90deg) translate(-50%, -50%); 45 | text-decoration: none; 46 | z-index:1; 47 | ` 48 | const WORK = styled(NavLink)` 49 | color: ${props => props.click ? props.theme.body : props.theme.text}; 50 | 51 | position: absolute; 52 | top: 50%; 53 | left: calc(1rem + 2vw); 54 | transform: translate(-50%, -50%) rotate(-90deg) ; 55 | text-decoration: none; 56 | z-index:1; 57 | ` 58 | 59 | const BottomBar = styled.div` 60 | position: absolute; 61 | bottom: 1rem; 62 | left: 0; 63 | right: 0; 64 | width: 100%; 65 | 66 | display: flex; 67 | justify-content: space-evenly; 68 | ` 69 | 70 | const ABOUT = styled(NavLink)` 71 | color: ${props => props.click ? props.theme.body : props.theme.text}; 72 | text-decoration: none; 73 | z-index:1; 74 | ` 75 | const SKILLS = styled(NavLink)` 76 | color: ${props => props.theme.text}; 77 | text-decoration: none; 78 | z-index:1; 79 | ` 80 | 81 | const rotate = keyframes` 82 | from{ 83 | transform: rotate(0); 84 | } 85 | to{ 86 | transform: rotate(360deg); 87 | } 88 | ` 89 | 90 | const Center = styled.button` 91 | position: absolute; 92 | top: ${props => props.click ? '85%' :'50%' }; 93 | left: ${props => props.click ? '92%' :'50%' }; 94 | transform: translate(-50%,-50%); 95 | border: none; 96 | outline: none; 97 | background-color: transparent; 98 | cursor: pointer; 99 | 100 | display: flex; 101 | flex-direction: column; 102 | justify-content: center; 103 | align-items: center; 104 | transition: all 1s ease; 105 | 106 | &>:first-child{ 107 | animation: ${rotate} infinite 1.5s linear; 108 | } 109 | 110 | &>:last-child{ 111 | display: ${props => props.click ? 'none' :'inline-block' }; 112 | padding-top: 1rem; 113 | } 114 | ` 115 | 116 | const DarkDiv = styled.div` 117 | position: absolute; 118 | top: 0; 119 | background-color: #000; 120 | bottom: 0; 121 | right: 50%; 122 | width: ${props => props.click ? '50%' : '0%'}; 123 | height: ${props => props.click ? '100%' : '0%'}; 124 | z-index:1; 125 | transition: height 0.5s ease, width 1s ease 0.5s; 126 | ` 127 | 128 | 129 | const Main = () => { 130 | 131 | const [click, setClick] = useState(false); 132 | 133 | const handleClick = () => setClick(!click); 134 | 135 | return ( 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 |
144 | handleClick()} width={click ? 120 : 200} height={click ? 120 : 200} fill='currentColor' /> 145 | click here 146 |
147 | 148 | 149 | 162 | Say hi.. 163 | 164 | 165 | 166 | 178 | Blog 179 | 180 | 181 | 182 | 194 | Work 195 | 196 | 197 | 198 | 199 | 211 | About. 212 | 213 | 214 | 215 | 227 | My Skills. 228 | 229 | 230 | 231 | 232 | 233 | 234 | {click ? : null } 235 | 236 | ) 237 | } 238 | 239 | export default Main 240 | -------------------------------------------------------------------------------- /src/components/MySkillsPage.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled, { ThemeProvider } from 'styled-components' 3 | import {lightTheme} from './Themes'; 4 | import { Design, Develope} from './AllSvgs'; 5 | 6 | 7 | import LogoComponent from '../subComponents/LogoComponent'; 8 | import SocialIcons from '../subComponents/SocialIcons'; 9 | import PowerButton from '../subComponents/PowerButton'; 10 | import ParticleComponent from '../subComponents/ParticleComponent'; 11 | import BigTitle from '../subComponents/BigTitlte' 12 | 13 | const Box = styled.div` 14 | background-color: ${props => props.theme.body}; 15 | width: 100vw; 16 | height:100vh; 17 | position: relative; 18 | display: flex; 19 | justify-content: space-evenly; 20 | align-items: center; 21 | 22 | 23 | ` 24 | 25 | const Main = styled.div` 26 | border: 2px solid ${props => props.theme.text}; 27 | color: ${props => props.theme.text}; 28 | background-color: ${props => props.theme.body}; 29 | padding: 2rem; 30 | width: 30vw; 31 | height: 60vh; 32 | z-index:3; 33 | line-height: 1.5; 34 | cursor: pointer; 35 | 36 | font-family: 'Ubuntu Mono',monospace; 37 | display: flex; 38 | flex-direction: column; 39 | justify-content: space-between; 40 | 41 | &:hover{ 42 | color: ${props => props.theme.body}; 43 | background-color: ${props => props.theme.text}; 44 | } 45 | ` 46 | 47 | const Title = styled.h2` 48 | display: flex; 49 | justify-content: center; 50 | align-items: center; 51 | font-size: calc(1em + 1vw); 52 | 53 | ${Main}:hover &{ 54 | &>*{ 55 | fill:${props => props.theme.body}; 56 | } 57 | } 58 | 59 | &>*:first-child{ 60 | margin-right: 1rem; 61 | } 62 | ` 63 | 64 | const Description = styled.div` 65 | color: ${props => props.theme.text}; 66 | font-size: calc(0.6em + 1vw); 67 | padding: 0.5rem 0; 68 | 69 | 70 | ${Main}:hover &{ 71 | 72 | color:${props => props.theme.body}; 73 | 74 | } 75 | 76 | strong{ 77 | margin-bottom: 1rem; 78 | text-transform: uppercase; 79 | } 80 | ul,p{ 81 | margin-left: 2rem; 82 | } 83 | ` 84 | 85 | const MySkillsPage = () => { 86 | return ( 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 |
95 | 96 | <Design width={40} height={40} /> Designer 97 | 98 | 99 | I love to create design which speaks, Keep it clean, minimal and simple. 100 | 101 | 102 | I like to Design 103 |
    104 |
  • 105 | Web Design 106 |
    • 107 |
  • 108 | Mobile Apps 109 |
    • 110 |
111 | 112 | 113 | Tools 114 |
    115 |
  • 116 | Figma 117 |
    • 118 | 119 |
120 | 121 | 122 |
123 |
124 | 125 | <Develope width={40} height={40} /> Frontend Developer 126 | 127 | 128 | I value business or brand for which i'm creating, thus i enjoy bringing new ideas to life. 129 | 130 | 131 | Skills 132 |

133 | Html, Css, Js, React, Redux, Sass, Bootstrap, Tailwind, Firebase etc. 134 |

135 | 136 | 137 | Tools 138 |

139 | VScode, Github, Codepen etc. 140 |

141 | 142 | 143 |
144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | ) 152 | } 153 | 154 | export default MySkillsPage 155 | -------------------------------------------------------------------------------- /src/components/Themes.js: -------------------------------------------------------------------------------- 1 | // Here we will create dark and light theme variables 2 | 3 | export const lightTheme = { 4 | 5 | body:"#FCF6F4", 6 | text:"#000000", 7 | fontFamily:"'Source Sans Pro', sans-serif", 8 | bodyRgba : "252, 246, 244", 9 | textRgba:"0,0,0", 10 | } 11 | 12 | export const DarkTheme = { 13 | 14 | body:"#000000", 15 | text:"#FCF6F4", 16 | fontFamily:"'Source Sans Pro', sans-serif", 17 | textRgba : "252, 246, 244", 18 | bodyRgba:"0,0,0", 19 | } 20 | -------------------------------------------------------------------------------- /src/components/WorkPage.js: -------------------------------------------------------------------------------- 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"; 5 | 6 | import LogoComponent from "../subComponents/LogoComponent"; 7 | import SocialIcons from "../subComponents/SocialIcons"; 8 | import PowerButton from "../subComponents/PowerButton"; 9 | 10 | import { Work } from "../data/WorkData"; 11 | import Card from "../subComponents/Card"; 12 | import { YinYang } from "./AllSvgs"; 13 | import BigTitlte from "../subComponents/BigTitlte"; 14 | 15 | const Box = styled.div` 16 | background-color: ${(props) => props.theme.body}; 17 | 18 | height: 400vh; 19 | position: relative; 20 | display: flex; 21 | align-items: center; 22 | `; 23 | 24 | const Main = styled(motion.ul)` 25 | position: fixed; 26 | top: 12rem; 27 | left: calc(10rem + 15vw); 28 | height: 40vh; 29 | display: flex; 30 | 31 | color: white; 32 | `; 33 | const Rotate = styled.span` 34 | display: block; 35 | position: fixed; 36 | right: 1rem; 37 | bottom: 1rem; 38 | width: 80px; 39 | height: 80px; 40 | z-index: 1; 41 | `; 42 | 43 | // Framer-motion Configuration 44 | const container = { 45 | hidden: { opacity: 0 }, 46 | show: { 47 | opacity: 1, 48 | 49 | transition: { 50 | staggerChildren: 0.5, 51 | duration: 0.5, 52 | }, 53 | }, 54 | }; 55 | 56 | const WorkPage = () => { 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 | 78 | 79 | 80 | 81 | 82 | 83 |
84 | {Work.map((d) => ( 85 | 86 | ))} 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | ); 96 | }; 97 | 98 | export default WorkPage; 99 | -------------------------------------------------------------------------------- /src/config/particlesjs-config-light.json: -------------------------------------------------------------------------------- 1 | { 2 | "particles": { 3 | "number": { 4 | "value": 80, 5 | "density": { 6 | "enable": true, 7 | "value_area": 800 8 | } 9 | }, 10 | "color": { 11 | "value": "#000000" 12 | }, 13 | "shape": { 14 | "type": "circle", 15 | "stroke": { 16 | "width": 0, 17 | "color": "#000000" 18 | }, 19 | "polygon": { 20 | "nb_sides": 5 21 | }, 22 | "image": { 23 | "src": "img/github.svg", 24 | "width": 100, 25 | "height": 100 26 | } 27 | }, 28 | "opacity": { 29 | "value": 0.5, 30 | "random": false, 31 | "anim": { 32 | "enable": false, 33 | "speed": 1, 34 | "opacity_min": 0.1, 35 | "sync": false 36 | } 37 | }, 38 | "size": { 39 | "value": 3, 40 | "random": true, 41 | "anim": { 42 | "enable": false, 43 | "speed": 40, 44 | "size_min": 0.1, 45 | "sync": false 46 | } 47 | }, 48 | "line_linked": { 49 | "enable": true, 50 | "distance": 150, 51 | "color": "#000000", 52 | "opacity": 0.4, 53 | "width": 1 54 | }, 55 | "move": { 56 | "enable": true, 57 | "speed": 6, 58 | "direction": "none", 59 | "random": false, 60 | "straight": false, 61 | "out_mode": "out", 62 | "bounce": false, 63 | "attract": { 64 | "enable": false, 65 | "rotateX": 600, 66 | "rotateY": 1200 67 | } 68 | } 69 | }, 70 | "interactivity": { 71 | "detect_on": "canvas", 72 | "events": { 73 | "onhover": { 74 | "enable": true, 75 | "mode": "repulse" 76 | }, 77 | "onclick": { 78 | "enable": true, 79 | "mode": "push" 80 | }, 81 | "resize": true 82 | }, 83 | "modes": { 84 | "grab": { 85 | "distance": 400, 86 | "line_linked": { 87 | "opacity": 1 88 | } 89 | }, 90 | "bubble": { 91 | "distance": 400, 92 | "size": 40, 93 | "duration": 2, 94 | "opacity": 8, 95 | "speed": 3 96 | }, 97 | "repulse": { 98 | "distance": 200, 99 | "duration": 0.4 100 | }, 101 | "push": { 102 | "particles_nb": 4 103 | }, 104 | "remove": { 105 | "particles_nb": 2 106 | } 107 | } 108 | }, 109 | "retina_detect": true 110 | } -------------------------------------------------------------------------------- /src/config/particlesjs-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "particles": { 3 | "number": { 4 | "value": 100, 5 | "density": { 6 | "enable": true, 7 | "value_area": 800 8 | } 9 | }, 10 | "color": { 11 | "value": "#fcf6f4" 12 | }, 13 | "shape": { 14 | "type": "circle", 15 | "stroke": { 16 | "width": 0, 17 | "color": "#000000" 18 | }, 19 | "polygon": { 20 | "nb_sides": 5 21 | }, 22 | "image": { 23 | "src": "img/github.svg", 24 | "width": 100, 25 | "height": 100 26 | } 27 | }, 28 | "opacity": { 29 | "value": 1, 30 | "random": true, 31 | "anim": { 32 | "enable": true, 33 | "speed": 1, 34 | "opacity_min": 0, 35 | "sync": false 36 | } 37 | }, 38 | "size": { 39 | "value": 3, 40 | "random": true, 41 | "anim": { 42 | "enable": true, 43 | "speed": 3, 44 | "size_min": 0.4, 45 | "sync": false 46 | } 47 | }, 48 | "line_linked": { 49 | "enable": false, 50 | "distance": 150, 51 | "color": "#ffffff", 52 | "opacity": 0.4, 53 | "width": 1 54 | }, 55 | "move": { 56 | "enable": true, 57 | "speed": 3, 58 | "direction": "none", 59 | "random": true, 60 | "straight": false, 61 | "out_mode": "out", 62 | "bounce": false, 63 | "attract": { 64 | "enable": false, 65 | "rotateX": 600, 66 | "rotateY": 600 67 | } 68 | } 69 | }, 70 | "interactivity": { 71 | "detect_on": "canvas", 72 | "events": { 73 | "onhover": { 74 | "enable": false, 75 | "mode": "bubble" 76 | }, 77 | "onclick": { 78 | "enable": true, 79 | "mode": "repulse" 80 | }, 81 | "resize": true 82 | }, 83 | "modes": { 84 | "grab": { 85 | "distance": 400, 86 | "line_linked": { 87 | "opacity": 1 88 | } 89 | }, 90 | "bubble": { 91 | "distance": 250, 92 | "size": 0, 93 | "duration": 2, 94 | "opacity": 0, 95 | "speed": 3 96 | }, 97 | "repulse": { 98 | "distance": 400, 99 | "duration": 0.4 100 | }, 101 | "push": { 102 | "particles_nb": 4 103 | }, 104 | "remove": { 105 | "particles_nb": 2 106 | } 107 | } 108 | }, 109 | "retina_detect": true 110 | } -------------------------------------------------------------------------------- /src/data/AllSvg.txt: -------------------------------------------------------------------------------- 1 | export const PowerBtn = (props) => { 2 | return ( 3 | 17 | ) 18 | } 19 | 20 | export const Github = (props) => { 21 | return ( 22 | 36 | ) 37 | } 38 | 39 | export const Twitter = (props) => { 40 | return ( 41 | 55 | ) 56 | } 57 | 58 | export const Facebook = (props) => { 59 | return ( 60 | 74 | ) 75 | } 76 | 77 | export const YouTube = (props) => { 78 | return ( 79 | 93 | ) 94 | } 95 | 96 | export const YinYang = (props) => { 97 | return ( 98 | 112 | ) 113 | } 114 | 115 | export const Anchor = (props) => { 116 | return ( 117 | 131 | ) 132 | } 133 | 134 | 135 | 136 | export const Link = (props) => { 137 | return ( 138 | 154 | ) 155 | } 156 | 157 | 158 | 159 | export const Design = (props) => { 160 | return ( 161 | 175 | ) 176 | 177 | } 178 | 179 | export const Develope = (props) => { 180 | return ( 181 | 195 | ) 196 | 197 | } -------------------------------------------------------------------------------- /src/data/BlogData.js: -------------------------------------------------------------------------------- 1 | // blog data 2 | 3 | export const Blogs = [ 4 | { 5 | id:1, 6 | name:"Build Website with ReactJS, Styled-components and GSAP for Scrolling Animations", 7 | tags:["react","gsap","styled-components"], 8 | date:"13 May, 2021", 9 | imgSrc:"https://res.cloudinary.com/practicaldev/image/fetch/s--sBeV06Xc--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yrzy75q4dzibqz6rf82.png", 10 | link:"https://dev.to/codebucks/build-website-with-reactjs-styled-components-and-gsap-for-scrolling-animations-2f10" 11 | }, 12 | { 13 | id:2, 14 | name:"How to create React Hamburger Menu using Styled-Components", 15 | tags:["react","styled-components"], 16 | date:"5 July, 2021", 17 | imgSrc:"https://codebucks.hashnode.dev/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1625479747640%2F7KzwP9nmj.png%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=1920&q=75", 18 | link:"https://codebucks.hashnode.dev/react-hamburger-menu" 19 | }, 20 | { 21 | id:3, 22 | name:"React Loading Screen: Try these 3 cool loading screens for your app", 23 | tags:["react","react-lottie","styled-components"], 24 | date:"6 July, 2021", 25 | imgSrc:"https://codebucks.hashnode.dev/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1625552344293%2Fegwis0UIX.png%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=1920&q=75", 26 | link:"https://codebucks.hashnode.dev/react-loading-screens" 27 | }, 28 | { 29 | id:4, 30 | name:"How to build a Fabulous Todo App using React, Redux and Framer-Motion", 31 | tags:["react","redux","framer-motion"], 32 | date:"26 May, 2021", 33 | imgSrc:"https://res.cloudinary.com/practicaldev/image/fetch/s--r5oUDhhT--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/036s7j5b73up7455rdth.png", 34 | link:"https://dev.to/codebucks/build-redux-react-todo-list-app-with-animations-using-framer-motion-1mp1" 35 | }, 36 | { 37 | id:5, 38 | name:"What is Higher Order Component (HOC) in React JS?", 39 | tags:["react","reactJS","web-development"], 40 | date:"3 Feb, 2021", 41 | imgSrc:"https://codebucks.hashnode.dev/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1625295480148%2FlyKj8bpHK.jpeg%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=1920&q=75", 42 | link:"https://codebucks.hashnode.dev/what-is-higher-order-component" 43 | }, 44 | { 45 | id:6, 46 | name:"How to implement Pagination Component in React from scratch", 47 | tags:["react","css"], 48 | date:"5 Jan, 2021", 49 | imgSrc:"https://codebucks.hashnode.dev/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1625240050668%2FGAya9b0XK.png%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=1920&q=75", 50 | link:"https://codebucks.hashnode.dev/pagination-in-react" 51 | 52 | }, 53 | 54 | { 55 | id:7, 56 | name:"What is Redux ? Simply Explained!", 57 | tags:["react","redux","javascript"], 58 | date:"16 May, 2021", 59 | imgSrc:"https://res.cloudinary.com/practicaldev/image/fetch/s--ZY1EK-Eo--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcz1u90oq3prr5fga3fs.png", 60 | link:"https://dev.to/codebucks/what-is-redux-simply-explained-2ch7" 61 | }, 62 | { 63 | id:8, 64 | name:"How to create Sidebar navigation menu in ReactJS with react router and framer-motion", 65 | tags:["react","framer-motion","styled-components"], 66 | date:"26 May, 2021", 67 | imgSrc:"https://res.cloudinary.com/practicaldev/image/fetch/s--rv4I8UwE--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a9h50milhlf1us6mn4a.png", 68 | link:"https://dev.to/codebucks/build-sidebar-navigation-menu-in-reactjs-with-react-router-and-framer-motion-for-cool-page-transition-effects-4bc3" 69 | }, 70 | 71 | ] -------------------------------------------------------------------------------- /src/data/Text.txt: -------------------------------------------------------------------------------- 1 | 2 | All the required Text for this portfolio 3 | Fonts 4 | 5 | ---------------------------------------------- 6 | 7 | 8 | 9 | 10 | 11 | ---------------------------------------------- 12 | 13 | 14 | Skills 15 | ---------------------------------------------- 16 | I love to create design which speaks, Keep it clean, minimal and simple. 17 | I LIKE TO DESIGN 18 | Web Design 19 | Mobile Apps 20 | TOOLS 21 | Figma 22 | 23 | I value business or brand for which i'm creating, thus i enjoy bringing new ideas to life. 24 | SKILLS 25 | Html, Css, Js, React, Redux, Sass, Bootstrap, Tailwind, Firebase etc. 26 | 27 | TOOLS 28 | VScode, Github, Codepen etc. 29 | 30 | ---------------------------------------------- 31 | 32 | About Text 33 | 34 | ---------------------------------------------- 35 | I'm a front-end developer located in India. I love to create simple yet beautiful websites with great user experience. 36 | 37 | I'm interested in the whole frontend stack Like trying new things and building great projects. I'm an independent freelancer and blogger. I love to write blogs and read books. 38 | 39 | I believe everything is an Art when you put your consciousness in it. You can connect with me via social links. 40 | ---------------------------------------------- 41 | 42 | 43 | Theme 44 | ---------------------------------------------- 45 | body:"#FCF6F4", 46 | text:"#000000", 47 | fontFamily:"'Source Sans Pro', sans-serif", 48 | bodyRgba : "252, 246, 244", 49 | textRgba:"0,0,0", 50 | 51 | 52 | ---------------------------------------------- 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /src/data/WorkData.js: -------------------------------------------------------------------------------- 1 | // work data 2 | 3 | export const Work = [ 4 | { 5 | id:1, 6 | name:"Agency Landing Page", 7 | description:"It is build on top of the React JS, with styledComponents and GSAP for smooth scrolling animations.", 8 | tags:["react","gsap","styledComponents"], 9 | 10 | demo:"https://agency-website-eta.vercel.app/", 11 | github:"https://github.com/codebucks27/Agency-website" 12 | }, 13 | { 14 | id:2, 15 | name:"Job listing website", 16 | description:"A Job listing website build in ReactJS. With searching and filtering functionalities.", 17 | tags:["react","sass"], 18 | 19 | demo:"http://react-job-listing-website.codebucks27.vercel.app/", 20 | github:"https://github.com/codebucks27/react-job-listing-website" 21 | 22 | }, 23 | { 24 | id:3, 25 | name:"Dev.to Clone", 26 | description:"A clone of Dev.to build using ReactJS. With realtime fetching of articles from dev.to using API.", 27 | tags:["react","api","sass"], 28 | 29 | demo:"http://devto-clone-codebucks27.vercel.app/", 30 | github:"https://github.com/codebucks27/devto-clone" 31 | }, 32 | { 33 | id:4, 34 | name:"Sidebar Menu", 35 | description:"A cool looking sidebar menu build using ReactJS and styledComponents.It has really smooth animations.", 36 | tags:["react","styledComponents","react-router"], 37 | 38 | demo:"https://react-sidebar.vercel.app/", 39 | github:"https://github.com/codebucks27/react-sidebar" 40 | 41 | },{ 42 | id:5, 43 | name:"Todo App(React + Redux)", 44 | description:"A todo app build using Redux-toolkit and framer-motion for smooth animations.", 45 | tags:["react","redux","framer-motion"], 46 | 47 | demo:"http://react-redux-todo-app-git-main-codebucks27.vercel.app/", 48 | github:"https://github.com/codebucks27/React-Redux-Todo-App" 49 | 50 | }, 51 | { 52 | id:6, 53 | name:"Responsive Navigation Menu", 54 | description:"A reponsive navbar menu component in ReactJS with react-router functionalities. Built from scratch.", 55 | tags:["react","react-router","css"], 56 | 57 | demo:"http://react-responsive-navbar-codebucks27.vercel.app/", 58 | github:"https://github.com/codebucks27/React-responsive-navbar" 59 | 60 | }, 61 | 62 | 63 | ] -------------------------------------------------------------------------------- /src/globalStyles.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from "styled-components"; 2 | 3 | 4 | 5 | 6 | const GlobalStyle = createGlobalStyle` 7 | 8 | *,*::before,*::after,h1,h2,h3,h4,h5,h6{ 9 | margin: 0; 10 | padding: 0; 11 | } 12 | h1,h2,h3,h4,h5,h6{ 13 | display: inline-block; 14 | } 15 | 16 | 17 | body{ 18 | margin: 0; 19 | padding: 0; 20 | overflow-x: hidden; 21 | font-family: 'Source Sans Pro',sans-serif; 22 | } 23 | 24 | ` 25 | 26 | export default GlobalStyle; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import App from './App' 3 | // import reportWebVitals from './reportWebVitals'; 4 | // import '../node_modules/normalize.css' 5 | import "normalize.css" 6 | import { createRoot } from 'react-dom/client'; 7 | 8 | import { BrowserRouter } from 'react-router-dom' 9 | 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( 15 | 16 | ); 17 | 18 | // ReactDOM.render( 19 | // 20 | // 21 | // 22 | // 23 | // , 24 | // document.getElementById('root') 25 | // ) 26 | 27 | // If you want to start measuring performance in your app, pass a function 28 | // to log results (for example: reportWebVitals(console.log)) 29 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 30 | // reportWebVitals(); 31 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/subComponents/Anchor.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react' 2 | import styled from 'styled-components' 3 | import { Anchor, Link } from '../components/AllSvgs' 4 | 5 | const Container = styled.div` 6 | position: relative; 7 | ` 8 | const Slider = styled.div` 9 | position: fixed; 10 | top: 0; 11 | right: 2rem; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | flex-direction: column; 16 | transform: translateY(-100%); 17 | 18 | .chain{ 19 | transform: rotate(135deg); 20 | 21 | } 22 | 23 | ` 24 | 25 | const PreDisplay = styled.div` 26 | position: absolute; 27 | top:0; 28 | right: 2rem; 29 | ` 30 | 31 | 32 | const AnchorComponent = (props) => { 33 | 34 | const ref = useRef(null); 35 | const hiddenRef = useRef(null); 36 | 37 | useEffect(() => { 38 | 39 | const handleScroll = () => { 40 | 41 | let scrollPosition = window.pageYOffset; 42 | let windowSize = window.innerHeight; 43 | let bodyHeight = document.body.offsetHeight; 44 | 45 | let diff = Math.max(bodyHeight - (scrollPosition + windowSize) ) 46 | //diff*100/scrollposition 47 | let diffP = (diff * 100) / (bodyHeight - windowSize); 48 | 49 | ref.current.style.transform = `translateY(${-diffP}%)` 50 | 51 | if(window.pageYOffset > 5){ 52 | hiddenRef.current.style.display = 'none' 53 | }else{ 54 | hiddenRef.current.style.display = 'block' 55 | 56 | } 57 | } 58 | 59 | window.addEventListener('scroll', handleScroll) 60 | 61 | return () => window.removeEventListener('scroll', handleScroll) 62 | 63 | 64 | }, []) 65 | 66 | 67 | 68 | return ( 69 | 70 | 71 | 72 | 73 | 74 | 75 | { 76 | [...Array(props.number)].map((x,id) => { 77 | return 78 | }) 79 | } 80 | 81 | 82 | 83 | ) 84 | } 85 | 86 | export default AnchorComponent 87 | -------------------------------------------------------------------------------- /src/subComponents/BigTitlte.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | 4 | 5 | const Text = styled.h1` 6 | position: fixed; 7 | top: ${props => props.top}; 8 | left: ${props => props.left}; 9 | right: ${props => props.right}; 10 | color:${props => `rgba(${props.theme.textRgba},0.1)`}; 11 | font-size: calc(5rem + 5vw); 12 | z-index:0; 13 | 14 | ` 15 | 16 | 17 | const BigTitlte = (props) => { 18 | return ( 19 | 20 | {props.text} 21 | 22 | ) 23 | } 24 | 25 | export default BigTitlte 26 | -------------------------------------------------------------------------------- /src/subComponents/Card.js: -------------------------------------------------------------------------------- 1 | import { motion } from 'framer-motion'; 2 | import React from 'react' 3 | import { NavLink } from 'react-router-dom'; 4 | import styled from 'styled-components'; 5 | import { Github } from '../components/AllSvgs'; 6 | 7 | 8 | 9 | const Box = styled(motion.li)` 10 | width: 16rem; 11 | height: 40vh; 12 | background-color: ${props => props.theme.text}; 13 | color:${props => props.theme.body}; 14 | padding: 1.5rem 2rem; 15 | margin-right: 8rem; 16 | border-radius: 0 50px 0 50px; 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: space-between; 20 | border: 1px solid ${props => props.theme.body}; 21 | transition: all 0.2s ease; 22 | 23 | &:hover{ 24 | background-color: ${props => props.theme.body}; 25 | color:${props => props.theme.text}; 26 | border: 1px solid ${props => props.theme.text}; 27 | 28 | } 29 | ` 30 | const Title = styled.h2` 31 | font-size: calc(1em + 0.5vw); 32 | ` 33 | 34 | const Description = styled.h2` 35 | font-size: calc(0.8em + 0.3vw); 36 | font-family: 'Karla',sans-serif; 37 | font-weight: 500; 38 | ` 39 | const Tags = styled.div` 40 | border-top: 2px solid ${props =>props.theme.body}; 41 | padding-top: 0.5rem; 42 | display:flex; 43 | flex-wrap:wrap; 44 | ${Box}:hover &{ 45 | border-top: 2px solid ${props =>props.theme.text}; 46 | } 47 | ` 48 | const Tag = styled.span` 49 | margin-right:1rem; 50 | font-size:calc(0.8em + 0.3vw); 51 | ` 52 | 53 | const Footer = styled.footer` 54 | display: flex; 55 | justify-content: space-between; 56 | ` 57 | 58 | const Link = styled.a` 59 | background-color: ${props =>props.theme.body}; 60 | color: ${props =>props.theme.text}; 61 | text-decoration: none; 62 | padding:0.5rem calc(2rem + 2vw); 63 | border-radius: 0 0 0 50px; 64 | font-size:calc(1em + 0.5vw); 65 | 66 | ${Box}:hover &{ 67 | background-color: ${props =>props.theme.text}; 68 | color: ${props =>props.theme.body}; 69 | 70 | } 71 | ` 72 | 73 | const Git = styled.a` 74 | color: inherit; 75 | text-decoration: none; 76 | ${Box}:hover &{ 77 | &>*{ 78 | fill:${props =>props.theme.text}; 79 | } 80 | } 81 | 82 | ` 83 | 84 | // Framer motion configuration 85 | const Item = { 86 | hidden:{ 87 | scale:0 88 | }, 89 | show:{ 90 | scale:1, 91 | transition: { 92 | type: 'spring', 93 | duration: 0.5 94 | } 95 | } 96 | } 97 | 98 | const Card = (props) => { 99 | 100 | const {id, name, description, tags, demo, github} = props.data; 101 | 102 | return ( 103 | 104 | {name} 105 | 106 | {description} 107 | 108 | 109 | { 110 | tags.map((t,id) => { 111 | return #{t} 112 | }) 113 | } 114 | 115 |
116 | 117 | Visit 118 | 119 | 120 | 121 | 122 |
123 | 124 | ) 125 | } 126 | 127 | export default Card 128 | -------------------------------------------------------------------------------- /src/subComponents/LogoComponent.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import { DarkTheme } from '../components/Themes' 4 | 5 | 6 | 7 | 8 | const Logo = styled.h1` 9 | display: inline-block; 10 | color: ${props => props.color === 'dark' ? DarkTheme.text : DarkTheme.body}; 11 | font-family: 'Pacifico',cursive; 12 | 13 | position: fixed; 14 | left: 2rem; 15 | top: 2rem; 16 | z-index:3; 17 | ` 18 | 19 | const LogoComponent = (props) => { 20 | return ( 21 | 22 | CB 23 | 24 | ) 25 | } 26 | 27 | export default LogoComponent 28 | -------------------------------------------------------------------------------- /src/subComponents/ParticleComponent.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import ConfigDark from "../config/particlesjs-config.json"; 3 | import ConfigLight from "../config/particlesjs-config-light.json"; 4 | 5 | // import Particles from "react-particles-js" 6 | import Particles from "react-tsparticles"; 7 | import { loadFull } from "tsparticles"; 8 | 9 | const Box = styled.div` 10 | position: absolute; 11 | top: 0; 12 | right: 0; 13 | left: 0; 14 | bottom: 0; 15 | z-index: 0; 16 | `; 17 | 18 | const ParticlesComponent = (props) => { 19 | // This is new implementation where I have used react-tsparticles instead of react-particles-js 20 | const particlesInit = async (main) => { 21 | await loadFull(main); 22 | }; 23 | 24 | 25 | return ( 26 | 27 | 33 | 34 | ); 35 | }; 36 | 37 | export default ParticlesComponent; 38 | -------------------------------------------------------------------------------- /src/subComponents/PowerButton.js: -------------------------------------------------------------------------------- 1 | // Home button 2 | 3 | import React from 'react' 4 | import { NavLink } from 'react-router-dom' 5 | import styled from 'styled-components' 6 | import { PowerBtn } from '../components/AllSvgs' 7 | 8 | 9 | const Power = styled.button` 10 | position: fixed; 11 | top: 2rem; 12 | left: 50%; 13 | transform: translate(-50%, 0); 14 | 15 | background-color: #FCF6F4; 16 | padding: 0.3rem; 17 | border-radius: 50%; 18 | border: 1px solid #000; 19 | width: 2.5rem; 20 | height: 2.5rem; 21 | 22 | display: flex; 23 | justify-content: center; 24 | align-items:center; 25 | z-index:3; 26 | 27 | cursor: pointer; 28 | 29 | &:hover{ 30 | background-color: rgba(0,255,0,0.4); 31 | box-shadow: 0 0 8px 6px rgba(0,255,0,0.2); 32 | } 33 | 34 | &>*:first-child{ 35 | text-decoration: none; 36 | color: inherit; 37 | } 38 | ` 39 | 40 | const PowerButton = () => { 41 | return ( 42 | 43 | 44 | 45 | 46 | 47 | ) 48 | } 49 | 50 | export default PowerButton 51 | -------------------------------------------------------------------------------- /src/subComponents/SocialIcons.js: -------------------------------------------------------------------------------- 1 | import { motion } from "framer-motion"; 2 | import React from "react"; 3 | // import { NavLink } from 'react-router-dom' 4 | import styled from "styled-components"; 5 | import { Facebook, Github, Twitter, YouTube } from "../components/AllSvgs"; 6 | import { DarkTheme } from "../components/Themes"; 7 | 8 | const Icons = styled.div` 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | 13 | position: fixed; 14 | bottom: 0; 15 | left: 2rem; 16 | 17 | z-index: 3; 18 | 19 | & > *:not(:last-child) { 20 | margin: 0.5rem 0; 21 | } 22 | `; 23 | 24 | const Line = styled(motion.span)` 25 | width: 2px; 26 | height: 8rem; 27 | background-color: ${(props) => 28 | props.color === "dark" ? DarkTheme.text : DarkTheme.body}; 29 | `; 30 | 31 | const SocialIcons = (props) => { 32 | return ( 33 | 34 | 39 | 44 | 49 | 50 | 51 | 56 | 61 | 66 | 67 | 68 | 73 | 78 | 83 | 84 | 85 | 90 | 95 | 100 | 101 | 102 | 103 | 117 | 118 | ); 119 | }; 120 | 121 | export default SocialIcons; 122 | -------------------------------------------------------------------------------- /src/subComponents/SoundBar.js: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState } from 'react' 2 | import styled, { keyframes } from 'styled-components' 3 | 4 | import music from "../assets/audio/u-said-it-v13-1167.mp3" 5 | 6 | const Box = styled.div` 7 | display:flex; 8 | cursor:pointer; 9 | position:fixed; 10 | left:8rem; 11 | top:3rem; 12 | z-index:10; 13 | 14 | &>*:nth-child(1){ 15 | animation-delay: 0.2s; 16 | } 17 | &>*:nth-child(2){ 18 | animation-delay: 0.3s; 19 | } 20 | &>*:nth-child(3){ 21 | animation-delay: 0.4s; 22 | } 23 | &>*:nth-child(4){ 24 | animation-delay: 0.5s; 25 | } 26 | &>*:nth-child(5){ 27 | animation-delay: 0.8s; 28 | } 29 | ` 30 | 31 | const play = keyframes` 32 | 0%{ 33 | transform:scaleY(1); 34 | } 35 | 50%{ 36 | transform:scaleY(2); 37 | } 38 | 100%{ 39 | transform:scaleY(1); 40 | } 41 | ` 42 | const Line = styled.span` 43 | background: ${props => props.theme.text}; 44 | border: 1px solid ${props => props.theme.body}; 45 | 46 | animation:${play} 1s ease infinite; 47 | animation-play-state: ${props => props.click ? "running" : "paused"}; 48 | height: 1rem; 49 | width: 2px; 50 | margin:0 0.1rem 51 | ` 52 | 53 | const SoundBar = () => { 54 | 55 | const ref = useRef(null); 56 | const [click, setClick] = useState(false); 57 | 58 | const handleClick = () => { 59 | setClick(!click); 60 | 61 | if(!click){ 62 | ref.current.play(); 63 | }else{ 64 | ref.current.pause(); 65 | } 66 | } 67 | return ( 68 | handleClick()}> 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 78 | ) 79 | } 80 | 81 | export default SoundBar 82 | --------------------------------------------------------------------------------