├── .github ├── ISSUE_TEMPLATE │ └── bug_report.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── super-linter.yml ├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── robots.txt ├── template1.png └── template2.png └── src ├── App.js ├── App.test.js ├── components ├── About.js ├── Contact.js ├── Footer.js ├── Header.js ├── Main.js ├── Resume.js ├── ResumePage │ ├── Context.js │ ├── element │ │ ├── BuildSteps │ │ │ ├── About.js │ │ │ ├── Education.js │ │ │ ├── Projects.js │ │ │ ├── Skills.js │ │ │ ├── Template.js │ │ │ └── Work.js │ │ ├── Builder.js │ │ ├── Ceo.jpeg │ │ ├── ImageUploadButton │ │ │ ├── ImageUpload.component.jsx │ │ │ └── ImageUpload.styles.css │ │ ├── Main.js │ │ ├── Template1.js │ │ ├── Template2.js │ │ └── Theme │ │ │ ├── ThemeOption.js │ │ │ └── ThemeSelect.js │ └── images │ │ └── hero.svg ├── Study.js └── images │ ├── ContactUs.png │ ├── chip.png │ ├── cv.png │ ├── em1.jpg │ ├── free.png │ ├── fu.jpg │ ├── github.png │ ├── github2.png │ ├── guide.png │ ├── happy.png │ ├── maine.png │ ├── mmm.jpg │ ├── open-sign.png │ ├── programming.png │ ├── shared.png │ ├── source-code.png │ ├── user-guide.png │ └── web-design.png ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js └── setupTests.js /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "" 5 | labels: "" 6 | assignees: "" 7 | --- 8 | 9 | **Describe the bug** 10 | A clear and concise description of what the bug is. 11 | 12 | **To Reproduce** 13 | Steps to reproduce the behavior: 14 | 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | 28 | - OS: [e.g. iOS] 29 | - Browser [e.g. chrome, safari] 30 | - Version [e.g. 22] 31 | 32 | **Smartphone (please complete the following information):** 33 | 34 | - Device: [e.g. iPhone6] 35 | - OS: [e.g. iOS8.1] 36 | - Browser [e.g. stock browser, safari] 37 | - Version [e.g. 22] 38 | 39 | **Additional context** 40 | Add any other context about the problem here. 41 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | Please include a summary of the changes and the related issue. Please also include relevant motivation and context. List any dependencies that are required for this change. 4 | 5 | - [ ] closes #xxxx (Replace xxxx with the GitHub issue number) 6 | - [ ] All code checks passed. 7 | -------------------------------------------------------------------------------- /.github/workflows/super-linter.yml: -------------------------------------------------------------------------------- 1 | # This workflow executes several linters on changed files based on languages used in your code base whenever 2 | # you push a code or open a pull request. 3 | # 4 | # You can adjust the behavior by modifying this file. 5 | # For more information, see: 6 | # https://github.com/github/super-linter 7 | name: Lint Code Base 8 | 9 | on: 10 | push: 11 | branches: ["main"] 12 | pull_request: 13 | branches: ["main"] 14 | jobs: 15 | run-lint: 16 | runs-on: ubuntu-latest 17 | steps: 18 | - name: Checkout code 19 | uses: actions/checkout@v3 20 | with: 21 | # Full git history is needed to get a proper list of changed files within `super-linter` 22 | fetch-depth: 0 23 | 24 | - name: Lint Code Base 25 | uses: github/super-linter@v4 26 | env: 27 | VALIDATE_ALL_CODEBASE: false 28 | DEFAULT_BRANCH: "main" 29 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 30 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Yash 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

⭐ Star our repository and grow our community

2 |

Owner: Maku Gang 🇮🇳

3 |
4 |

5 |

6 |

RESUME GENERATOR

7 | A RESPONSIVE AND USEFULL WEB. 8 |
9 |
10 | 11 | [![Private Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.png?v=103)](https://github.com/y4sssh /Resume-Genrator) 12 | [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) 13 | 14 | 15 | # About Resume Generator 16 | 17 | 1. It can help you to generate your own Resume 18 | 19 | 2. Which can help you represent yourself at Companies 20 | 21 | 3. It automatically converts your details into a attractive Resume Template 22 | 23 | 4. It can help you to get a job easily 24 | 25 | 5. The attractiveness of resume is directly proportional to the high chances of getting a good job, the more the resume is attractive is the more chances of a job 26 | 27 | ## Note-: 28 | 29 | It is a Resume Generator which automatically generates a resume car according to your given information. We made this project with help of all our Team Members. All credits goes to its Respective Owners....... 30 | 31 | # Used Languages 32 | 33 | - Html 34 | - Css 35 | - Javascript 36 | - React 37 | 38 | # Installation 39 | 40 | To use this project locally, follow these steps: 41 | 42 | 1. Clone the repository: 43 | 44 | `git clone https://github.com/y4sssh /Resume-Genrator.git` 45 | 46 | 2. Go to the project directory: 47 | 48 | `cd Resume-Genrator` 49 | 50 | 3. Install dependencies: 51 | 52 | `npm install` 53 | 54 | If `npm install` does not work, try using: 55 | 56 | `npm i --legacy-peer-deps` 57 | 58 | 4. Start the development server: 59 | 60 | `npm start` 61 | 62 | 5. Open the app in your browser at: 63 | 64 | `http://localhost:3000/` 65 | 66 | # Web URL 67 | 68 | https://resume-generator-xi.vercel.app/ 69 | 70 | # Credits 71 | 72 | - [Yash Vyavahare](https://github.com/y4sssh ) 73 | - [Khizar Shah](https://github.com/Khizarshah01) 74 | - [Om Ingle](https://github.com/omingle-og) 75 | - [Harsh Baraliya](https://github.com/MrCracker-OP) 76 | - [Shashwat Agrawal](https://github.com/ShashwatAgrawal20) 77 | 78 | ## Thanks to all Contributors 💪 79 | 80 | Thanks a lot for spending your time helping Resume Generator grow. Thanks a lot! Keep rocking 🍻 81 | 82 |

83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 |

94 | 95 | # Support us by Donating 96 | 97 | Pay us using 98 | 99 | 100 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "resume-generator", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@chakra-ui/react": "^1.7.4", 7 | "@emotion/react": "^11.7.1", 8 | "@emotion/styled": "^11.6.0", 9 | "@testing-library/jest-dom": "^5.16.5", 10 | "@testing-library/react": "^13.4.0", 11 | "@testing-library/user-event": "^13.5.0", 12 | "bootstrap": "^5.2.3", 13 | "framer-motion": "^5.6.0", 14 | "html2canvas": "^1.4.0", 15 | "jspdf": "^2.5.0", 16 | "react": "^18.2.0", 17 | "react-bootstrap": "^2.7.2", 18 | "react-color": "^2.19.3", 19 | "react-dom": "^18.2.0", 20 | "react-files": "^2.4.9", 21 | "react-icons": "^4.7.1", 22 | "react-router-dom": "^6.8.1", 23 | "react-scripts": "5.0.1", 24 | "react-share": "^4.4.1", 25 | "react-to-print": "^2.14.3", 26 | "styled-components": "^5.3.6", 27 | "uuid": "^8.3.2", 28 | "uuidv4": "^6.2.12", 29 | "web-vitals": "^2.1.4", 30 | "webfontloader": "^1.6.28" 31 | }, 32 | "scripts": { 33 | "start": "react-scripts start", 34 | "build": "react-scripts build", 35 | "test": "react-scripts test", 36 | "eject": "react-scripts eject" 37 | }, 38 | "eslintConfig": { 39 | "extends": [ 40 | "react-app", 41 | "react-app/jest" 42 | ] 43 | }, 44 | "browserslist": { 45 | "production": [ 46 | ">0.2%", 47 | "not dead", 48 | "not op_mini all" 49 | ], 50 | "development": [ 51 | "last 1 chrome version", 52 | "last 1 firefox version", 53 | "last 1 safari version" 54 | ] 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/y4sssh/Resume-Generator/7c8199be3beaa3d5c302d8100bda3ba5a29d2da3/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | 28 | 29 | Resume Generator 30 | 31 | 32 | 33 |
34 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/y4sssh/Resume-Generator/7c8199be3beaa3d5c302d8100bda3ba5a29d2da3/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/y4sssh/Resume-Generator/7c8199be3beaa3d5c302d8100bda3ba5a29d2da3/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 | -------------------------------------------------------------------------------- /public/template1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/y4sssh/Resume-Generator/7c8199be3beaa3d5c302d8100bda3ba5a29d2da3/public/template1.png -------------------------------------------------------------------------------- /public/template2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/y4sssh/Resume-Generator/7c8199be3beaa3d5c302d8100bda3ba5a29d2da3/public/template2.png -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import Footer from "./components/Footer"; 2 | import Header from "./components/Header"; 3 | import Main from "./components/Main"; 4 | import "bootstrap/dist/css/bootstrap.min.css"; 5 | import Resume from "./components/Resume"; 6 | import Contact from "./components/Contact"; 7 | import About from "./components/About"; 8 | import Study from "./components/Study"; 9 | import { BrowserRouter, Route, Routes } from "react-router-dom"; 10 | 11 | function App() { 12 | return ( 13 | 14 |
15 |
16 | 17 | } /> 18 | } /> 19 | } /> 20 | }/> 21 | } /> 22 | 23 |
25 | 26 | ); 27 | } 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /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.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useMemo } from "react"; 2 | import { Container, Row, Col, Card } from "react-bootstrap"; 3 | import styled from "styled-components"; 4 | 5 | const Demo = styled.div` 6 | font-family: Garamond, serif; 7 | `; 8 | 9 | const StyledCard = styled(Card)` 10 | background-color: #90c2ff; 11 | border-radius: 10px; 12 | margin: 1rem; 13 | text-align: center; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | padding-top: 5px; 18 | border: none; 19 | font-weight: bold; 20 | 21 | &:hover { 22 | box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, 23 | rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; 24 | background-color: #7bb6ff; 25 | border: none; 26 | } 27 | `; 28 | 29 | const Background = styled.div` 30 | background-color: #d2ebf7; 31 | `; 32 | 33 | const About = () => { 34 | const [contributors, setContributors] = useState([]); 35 | 36 | const coreDevelopers = useMemo( 37 | () => [ 38 | { 39 | login: "MrCracker-OP", 40 | html_url: "https://github.com/MrCracker-OP", 41 | image: "https://avatars.githubusercontent.com/u/77793128?v=4", 42 | }, 43 | { 44 | login: "Khizarshah01", 45 | html_url: "https://github.com/khizarshah01", 46 | image: "https://avatars.githubusercontent.com/u/109973520?v=4", 47 | }, 48 | { 49 | login: "omingle-og", 50 | html_url: "https://github.com/omingle-og", 51 | image: "https://avatars.githubusercontent.com/u/161492096?v=4", 52 | }, 53 | { 54 | login: "ShashwatAgrawal20", 55 | html_url: "https://github.com/shashwatagrawal20", 56 | image: "https://avatars.githubusercontent.com/u/72117025?v=4", 57 | }, 58 | { 59 | login: "y4sssh ", 60 | html_url: "https://github.com/y4sssh ", 61 | image: "https://avatars.githubusercontent.com/u/104668751?v=4", 62 | }, 63 | 64 | ], 65 | [] 66 | ); 67 | 68 | useEffect(() => { 69 | fetch( 70 | "https://api.github.com/repos/y4sssh /Resume-Generator/contributors" 71 | ) 72 | .then((response) => response.json()) 73 | .then((data) => { 74 | // Filter out the contributors whose GitHub username matches with any of the core developers' GitHub username 75 | const filteredData = data.filter( 76 | (contributor) => 77 | !coreDevelopers.find( 78 | (developer) => developer.login === contributor.login 79 | ) 80 | ); 81 | setContributors(filteredData); 82 | }) 83 | .catch((error) => console.log(error)); 84 | }, [coreDevelopers]); 85 | 86 | const teamHeader = "Our Team"; 87 | const teamDescription = "Meet the amazing people who make it all possible!"; 88 | 89 | return ( 90 | 91 | 92 | 93 |

{teamHeader}

94 |

{teamDescription}

95 |

Core Contributors

96 |

97 | Thanks to the following core contributors: 98 |

99 | 100 | {coreDevelopers.map((developer) => ( 101 | 102 | 103 | 113 | 114 | 115 | 121 | {developer.login} 122 | 123 | 124 | 125 | Contributor 126 | 127 | 128 | 129 | 130 | ))} 131 | 132 |

GitHub Contributors

133 |

134 | Thanks to the following GitHub contributors: 135 |

136 | 137 | {contributors.map((contributor) => ( 138 | 139 | 140 | 150 | 151 | 152 | 158 | 159 | {contributor.name 160 | ? contributor.name 161 | : contributor.login} 162 | 163 | 164 | 165 | 166 | Contributor 167 | 168 | 169 | 170 | 171 | ))} 172 | 173 | 174 | 175 | 176 | ); 177 | }; 178 | export default About; 179 | -------------------------------------------------------------------------------- /src/components/Contact.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Container, Row, Col, Form, Button } from "react-bootstrap"; 3 | import styled from "styled-components"; 4 | // import ContactUs from './images/ContactUs.png' 5 | 6 | const StyledForm = styled(Form)` 7 | /* background-color: rgba(0,0,1, 0.2); */ 8 | background: white; 9 | /* box-shadow: 5px 5px 15px #D1D9E6, -5px -5px 15px #ffffff; */ 10 | /* backdrop-filter: blur(20px); */ 11 | color: #1a202c; 12 | border-radius: 10px; 13 | /* font-family: Garamond, serif; */ 14 | box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); 15 | height: 100%; 16 | width: 100%; 17 | display: flex; 18 | flex-direction: column; 19 | justify-content: space-evenly; 20 | padding: 0 2rem; 21 | margin-top: 40px; 22 | /* margin-left: 35px; */ 23 | margin-bottom: 35px; 24 | /* box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.22), 1px 0px 0px 0px rgba(0,0,0,0.22), 1px 2px 0px 0px rgba(0,0,0,0.22), 2px 1px 0px 0px rgba(0,0,0,0.22), 2px 3px 0px 0px rgba(0,0,0,0.22), 3px 2px 0px 0px rgba(0,0,0,0.22), 3px 4px 0px 0px rgba(0,0,0,0.22), 4px 3px 0px 0px rgba(0,0,0,0.22), 4px 5px 0px 0px rgba(0,0,0,0.22), 5px 4px 0px 0px rgba(0,0,0,0.22), 5px 6px 0px 0px rgba(0,0,0,0.22), 6px 5px 0px 0px rgba(0,0,0,0.22), 6px 7px 0px 0px rgba(0,0,0,0.22), 7px 6px 0px 0px rgba(0,0,0,0.22), 7px 8px 0px 0px rgba(0,0,0,0.22), 8px 7px 0px 0px rgba(0,0,0,0.22); */ 25 | 26 | input[type="text"], 27 | input[type="email"], 28 | textarea { 29 | border: 2px solid grey; 30 | border-radius: 5px; 31 | padding: 0.5rem; 32 | margin-bottom: 1rem; 33 | margin-top: 0.5rem; 34 | } 35 | 36 | input[type="text"]:first-of-type { 37 | margin-top: 1rem; 38 | } 39 | 40 | @media (max-width: 767px) { 41 | /* styles for screens with a maximum width of 767 pixels */ 42 | height: auto; 43 | width: 100%; 44 | margin: 0; 45 | margin-top: 40px; 46 | margin-bottom: 40px; 47 | 48 | input[type="text"], 49 | input[type="email"], 50 | textarea { 51 | margin-bottom: 0.5rem; 52 | margin-top: 0.5rem; 53 | } 54 | 55 | input[type="text"]:first-of-type { 56 | margin-top: 0.5rem; 57 | } 58 | } 59 | `; 60 | 61 | const StyledButton = styled(Button)` 62 | background-color: grey; 63 | // box-shadow: 1px 2px 14px 0px black; 64 | font-weight: 600; 65 | letter-spacing: 1px; 66 | margin: 1rem 0; 67 | border: none; 68 | 69 | &:hover { 70 | background-color: black; 71 | /* border-color: #023e8a; */ 72 | } 73 | 74 | @media (max-width: 767px) { 75 | /* adjust button styling for mobile screens */ 76 | margin: 1rem auto; 77 | width: 100%; 78 | } 79 | `; 80 | 81 | const StyledSection = styled.section` 82 | /* background-image: url(); */ 83 | background: #d2ebf7; 84 | background-size: cover; 85 | background-position: center center; 86 | min-height: 100vh; 87 | height: 100%; 88 | /* background-color: #00203FFF; */ 89 | `; 90 | 91 | const Contact = () => { 92 | return ( 93 | 94 | 95 | 96 | 97 | 98 |

102 | Get in Touch 103 |

104 | 105 | Name 106 | 107 | 108 | 109 | Email address 110 | 111 | 112 | 113 | Subject 114 | 115 | 116 | 117 | Message 118 | 123 | 124 | 125 | Send Message 126 | 127 | 128 | 129 | 130 | 131 | 132 | ); 133 | }; 134 | 135 | export default Contact; 136 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import { Container, Row, Col } from "react-bootstrap"; 2 | import styled from "styled-components"; 3 | import { Link } from "react-router-dom"; 4 | 5 | const teamMembers = [ 6 | { name: "Harsh Baraliya", github: "https://github.com/MrCracker-OP" }, 7 | { name: "Khizar Shah", github: "https://github.com/Khizarshah01" }, 8 | { name: "Om Ingle", github: "https://github.com/omingle-og" }, 9 | { name: "Shashwat Agrawal", github: "https://github.com/ShashwatAgrawal20" }, 10 | { name: "Yash Vyavahare", github: "https://github.com/y4sssh " }, 11 | 12 | ]; 13 | 14 | const Footer = () => { 15 | const GoldHoverLink = styled.a` 16 | &:hover { 17 | color: #ffc107; 18 | } 19 | `; 20 | return ( 21 | 24 | 25 | 26 | {/* */} 27 | 28 |
29 |
Links
30 | Home 31 | About 32 | Contact 33 | Study 34 |
35 | 36 | 37 | {/* */} 38 | 39 |
40 |
Contact
41 |

Your Address here

42 |

info@gmail.com

43 |

+ 01 234 567 88

44 |

+ 01 234 567 89

45 |
46 | 47 | 48 | {/* */} 49 | 50 |
51 |
Contributors
52 |
    53 | {teamMembers.map((member, index) => ( 54 |
  • 55 | 60 | {member.name} 61 | 62 |
    • 63 | ))} 64 |
65 |
66 | 67 | 68 | {/* */} 69 | 70 |
71 |
Follow us
72 | 73 | {/* */} 74 | 80 | 81 | {/* */} 82 | 88 | 89 | {/* */} 90 | 96 | 97 | {/* */} 98 | 104 | 105 | {/* */} 106 | 112 | 113 |
114 | 115 | 116 | 117 | 118 | {/* */} 119 |
123 | Copyright © {new Date().getFullYear()} Resume Generator 124 |
125 | 126 | 127 | 128 | ) 129 | } 130 | 131 | export default Footer; 132 | -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import Container from "react-bootstrap/Container"; 3 | import Navbar from "react-bootstrap/Navbar"; 4 | import styled from "styled-components"; 5 | import { NavLink, Link } from "react-router-dom"; 6 | import { HiXMark } from "react-icons/hi2"; 7 | import githubLogo from "./images/github.png"; // import the GitHub logo image 8 | 9 | function Header() { 10 | const [open, setOpen] = useState(false); 11 | const handleToggle = () => { 12 | open ? setOpen(false) : setOpen(true); 13 | }; 14 | return ( 15 | 22 | 23 | 24 | Resume Generator 25 | 26 | {!open ? ( 27 | 31 | ) : ( 32 | 36 | 37 | 38 | )} 39 | 40 | 41 | 42 | Home 43 | 44 | 45 | About 46 | 47 | 48 | Contact 49 | 50 | 51 | Study 52 | 53 | 54 | 55 | GitHub logo 56 | 57 | 58 | 59 | 60 | ); 61 | } 62 | 63 | const StyledNavbar = styled(Navbar)` 64 | padding: 1rem 2rem; 65 | box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, 66 | rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; 67 | background-color: #fff; 68 | border-bottom: 1px solid #e4e4e4; 69 | 70 | @media screen and (max-width: 991.98px) { 71 | padding: 1rem; 72 | } 73 | 74 | @media screen and (max-width: 767.98px) { 75 | padding: 0.5rem; 76 | } 77 | `; 78 | 79 | const NavLinks = styled.nav` 80 | display: flex; 81 | align-items: center; 82 | justify-content: center; 83 | padding-right: 100px; 84 | flex: 1; /* make the NavLinks component take up all remaining space */ 85 | 86 | @media screen and (max-width: 991.98px) { 87 | flex-direction: column; 88 | gap: 20px; 89 | padding-right: 0px; 90 | } 91 | `; 92 | 93 | const StyledNavLink = styled(NavLink)` 94 | color: #333; 95 | font-weight: 500; 96 | margin: 0 1rem; 97 | &:hover { 98 | color: #555; 99 | text-decoration: none; 100 | } 101 | &.active { 102 | color: #007bff; 103 | text-decoration: none; 104 | border-bottom: 2px solid #007bff; 105 | } 106 | 107 | @media screen and (max-width: 767.98px) { 108 | margin: 0.5rem; 109 | } 110 | `; 111 | 112 | const GitHubLink = styled.a` 113 | display: flex; 114 | align-items: center; 115 | justify-content: center; 116 | margin-left: auto; /* push the GitHub logo to the left side of the header */ 117 | color: #333; 118 | font-weight: 500; 119 | &:hover { 120 | color: #555; 121 | text-decoration: none; 122 | } 123 | 124 | img { 125 | width: 30px; 126 | height: 30px; 127 | } 128 | 129 | @media screen and (max-width: 991.98px) { 130 | margin-top: 10px; 131 | } 132 | `; 133 | 134 | export default Header; 135 | -------------------------------------------------------------------------------- /src/components/Main.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import { useNavigate } from "react-router-dom"; 4 | import cv from "./images/cv.png"; 5 | import opens from "./images/source-code.png"; 6 | import freindly from "./images/happy.png"; 7 | import free from "./images/free.png"; 8 | import desing from "./images/web-design.png"; 9 | import code from "./images/programming.png"; 10 | import github from "./images/github2.png"; 11 | 12 | const Main1 = styled.div` 13 | background-color: #cff2ff; 14 | color: black; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | flex-direction: column; 19 | text-align: center; 20 | padding-top: 70px; 21 | padding-bottom: 0px; 22 | `; 23 | const Rap = styled.p` 24 | font-size: 16px; 25 | margin-top: 10px; 26 | `; 27 | 28 | const Heading = styled.h1` 29 | font-weight: bold; 30 | font-size: 50px; 31 | margin-top: 10px; 32 | font-family: Garamond, serif; 33 | 34 | @media (max-width: 768px) { 35 | font-size: 30px; 36 | } 37 | `; 38 | 39 | const MainSection = styled.div` 40 | width: 80%; 41 | max-width: 1200px; 42 | display: flex; 43 | flex-direction: column; 44 | align-items: center; 45 | justify-content: center; 46 | text-align: center; 47 | height: 100%; 48 | @media (max-width: 768px) { 49 | width: 100%; 50 | padding: 0 20px; 51 | } 52 | `; 53 | 54 | const Button = styled.button` 55 | padding: 15px 35px; 56 | font-size: 20px; 57 | font-weight: bold; 58 | /* background-color: #10c479; */ 59 | background-color: #021547; 60 | color: white; 61 | border: none; 62 | border-radius: 5px; 63 | cursor: pointer; 64 | margin-top: 60px; 65 | margin-bottom: 40px; 66 | 67 | &:hover { 68 | /* background-color: #30856a; */ 69 | // background-color: #7a9cfd; 70 | // color: black; 71 | box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 72 | } 73 | `; 74 | 75 | const Button1 = styled.button` 76 | padding: 15px 35px; 77 | font-size: 20px; 78 | font-weight: bold; 79 | /* background-color: #10c479; */ 80 | background-color: black; 81 | color: white; 82 | border: none; 83 | border-radius: 5px; 84 | cursor: pointer; 85 | margin-top: 60px; 86 | margin-bottom: 40px; 87 | 88 | &:hover { 89 | /* background-color: #30856a; */ 90 | background-color: #00000087; 91 | color: white; 92 | box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 93 | } 94 | `; 95 | 96 | // font-family: Garamond, serif; 97 | 98 | const Img = styled.img` 99 | width: 700px; 100 | height: 400px; 101 | object-fit: cover; 102 | object-position: 25% 25%; 103 | @media (max-width: 768px) { 104 | width: 100%; 105 | height: auto; 106 | } 107 | `; 108 | 109 | const ImageSection = styled.div` 110 | width: 50%; 111 | display: flex; 112 | justify-content: flex-end; 113 | align-items: center; 114 | @media (max-width: 768px) { 115 | width: 100%; 116 | justify-content: center; 117 | } 118 | `; 119 | 120 | const Main2 = styled.div` 121 | background-color: #eddbc5; 122 | color: black; 123 | display: flex; 124 | flex-direction: row; 125 | padding: 70px; 126 | @media (max-width: 768px) { 127 | padding: 30px; 128 | 129 | /* Hide the image when the screen size is less than or equal to 768px */ 130 | ${ImageSection} { 131 | display: none; 132 | } 133 | } 134 | `; 135 | 136 | const Rancho = styled.h1` 137 | margin-top: 75px; 138 | font-weight: bold; 139 | font-size: 50px; 140 | font-family: Garamond, serif; 141 | text-align-last: center; 142 | @media (max-width: 768px) { 143 | font-size: 30px; 144 | margin-top: 0; 145 | } 146 | `; 147 | 148 | const Pilo = styled.p` 149 | margin-top: 20px; 150 | text-align: left; 151 | flex: 1; 152 | text-align-last: center; 153 | @media (max-width: 768px) { 154 | text-align: center; 155 | margin-top: 10px; 156 | } 157 | `; 158 | 159 | const Main3 = styled.div` 160 | background-color: #f1f1f1; 161 | color: black; 162 | display: flex; 163 | flex-direction: column; 164 | align-items: center; 165 | padding: 70px; 166 | 167 | @media (max-width: 768px) { 168 | padding: 30px; 169 | } 170 | `; 171 | 172 | const Rancho1 = styled.h1` 173 | font-weight: bold; 174 | font-size: 50px; 175 | font-family: Garamond, serif; 176 | text-align: center; 177 | flex: 1; 178 | 179 | @media (max-width: 768px) { 180 | font-size: 30px; 181 | } 182 | `; 183 | 184 | const Pilo1 = styled.p` 185 | text-align: center; 186 | max-width: 800px; 187 | line-height: 1.5; 188 | flex: 1; 189 | 190 | @media (max-width: 768px) { 191 | font-size: 16px; 192 | } 193 | `; 194 | 195 | const ImageSection1 = styled.div` 196 | width: 50%; 197 | display: flex; 198 | justify-content: flex-end; 199 | align-items: center; 200 | 201 | @media (max-width: 768px) { 202 | width: 100%; 203 | justify-content: center; 204 | } 205 | `; 206 | 207 | const Img1 = styled.img` 208 | /* width: 800px; 209 | height: 400px; */ 210 | object-fit: cover; 211 | object-position: 25% 25%; 212 | 213 | @media (max-width: 768px) { 214 | width: 100%; 215 | height: auto; 216 | } 217 | `; 218 | 219 | const Main4Container = styled.div` 220 | /* background-color: #f1f1f1; */ 221 | background-color: #cff2ff; 222 | padding: 40px; 223 | text-align: center; 224 | `; 225 | 226 | const Main4Title = styled.h2` 227 | font-size: 2rem; 228 | margin-bottom: 40px; 229 | font-weight: bold; 230 | font-size: 50px; 231 | font-family: Garamond, serif; 232 | text-align: center; 233 | `; 234 | 235 | const Main4IconsContainer = styled.div` 236 | display: flex; 237 | flex-wrap: wrap; 238 | justify-content: center; 239 | gap: 40px; 240 | `; 241 | 242 | const Main4IconContainer = styled.div` 243 | display: flex; 244 | flex-direction: column; 245 | align-items: center; 246 | `; 247 | 248 | const Main4Icon = styled.img` 249 | width: 80px; 250 | height: 80px; 251 | margin-bottom: 20px; 252 | `; 253 | 254 | const Main4IconTitle = styled.h3` 255 | font-size: 1.2rem; 256 | margin-bottom: 20px; 257 | font-weight: bold; 258 | font-family: Garamond, serif; 259 | `; 260 | 261 | const Main4IconDescription = styled.p` 262 | font-size: 1rem; 263 | line-height: 1.5; 264 | max-width: 250px; 265 | text-align: center; 266 | `; 267 | 268 | 269 | 270 | 271 | const Main = () => { 272 | const navigate = useNavigate(); 273 | 274 | const handleClick = () => { 275 | navigate("/resume"); 276 | }; 277 | 278 | return ( 279 | <> 280 | 281 | ONLINE RESUME BUILDER 282 | 283 | You have the skills, now make your resume reflect them. Be one of the 284 | chosen 2%. 285 | 286 | 287 | 288 | 289 | Resume 293 | 294 | 295 | 296 |
297 | Use the best resume maker as your guide. 298 | 299 | Getting that dream job can seem like an impossible task. We’re here 300 | to change that. Give yourself a real advantage with the best online 301 | resume maker: created by experts, improved by data, trusted by 302 | millions of professionals 303 | 304 |
305 | 306 | Resume1 310 | 311 | 312 | 313 | 314 | Take your job search to the next level with our top-rated resume 315 | builder. 316 | 317 | 318 | Say goodbye to writer's block and endless formatting woes with our 319 | 3-step resume builder. Create a perfect resume in minutes that will 320 | catch employers' attention! 321 | 322 | Create Resume Now 323 | 324 | Resume2 328 | 329 | 330 | 331 | 332 | 333 | Why Use Our Resume Builder? 334 | 335 | 336 | 337 | User-friendly interface 338 | 339 | Our resume builder is designed to be easy and intuitive to use, so you can create a great resume quickly and easily. 340 | 341 | 342 | 343 | 344 | Professional resume templates 345 | 346 | Our builder includes a wide range of professionally designed resume templates to help you create a polished and impressive resume. 347 | 348 | 349 | 350 | 351 | Open-source code 352 | 353 | Our resume builder is built with open-source code, meaning that it is transparent and can be audited by anyone. 354 | 355 | 356 | 357 | 358 | Completely free to use 359 | 360 | Our resume builder is completely free to use. You can create and download as many resumes as you want. 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | Do you want to make your own templates? 369 | + 370 | 371 | Do you write React code? 372 | = 373 | 374 | Contribute 375 | 376 | 377 | ); 378 | }; 379 | 380 | export default Main; 381 | 382 | 383 | const MainSection5 = styled.div` 384 | display: flex; 385 | justify-content: center; 386 | align-items: center; 387 | padding: 70px; 388 | background-color: #f1f1f1; 389 | 390 | @media (max-width: 768px) { 391 | flex-direction: column; 392 | justify-content: center; 393 | align-items: center; 394 | padding: 50px; 395 | } 396 | `; 397 | 398 | const Icon = styled.img` 399 | height: 60px; 400 | width: 60px; 401 | margin-right: 1.5rem; 402 | 403 | @media (max-width: 768px) { 404 | margin-right: 0; 405 | margin-bottom: 1.5rem; 406 | } 407 | `; 408 | 409 | const Text = styled.h2` 410 | font-size: 2.5rem; 411 | font-weight: 500; 412 | margin: 0; 413 | font-family: Garamond, serif; 414 | 415 | @media (max-width: 768px) { 416 | font-size: 2rem; 417 | text-align: center; 418 | } 419 | `; 420 | 421 | const Plus = styled.span` 422 | font-size: 2.5rem; 423 | margin: 0 1.5rem; 424 | padding-right: 25px; 425 | 426 | @media (max-width: 768px) { 427 | display: none; 428 | } 429 | `; 430 | 431 | const Equal = styled.span` 432 | font-size: 2.5rem; 433 | margin: 0 1.5rem; 434 | 435 | @media (max-width: 768px) { 436 | display: none; 437 | } 438 | `; 439 | 440 | const Button5 = styled.button` 441 | padding: 15px 35px; 442 | font-size: 20px; 443 | font-weight: bold; 444 | background-color: black; 445 | color: white; 446 | border: none; 447 | border-radius: 5px; 448 | cursor: pointer; 449 | margin-top: 60px; 450 | margin-bottom: 60px; 451 | 452 | @media (max-width: 768px) { 453 | margin-top: 40px; 454 | margin-bottom: 20px; 455 | } 456 | `; 457 | 458 | // const IconContainer = styled.div` 459 | // display: flex; 460 | // justify-content: center; 461 | // align-items: center; 462 | // margin-bottom: 1.5rem; 463 | 464 | // @media (max-width: 768px) { 465 | // margin-bottom: 0.5rem; 466 | // } 467 | // `; -------------------------------------------------------------------------------- /src/components/Resume.js: -------------------------------------------------------------------------------- 1 | import { ResumeProvider } from "./ResumePage/Context"; 2 | import { useEffect } from "react"; 3 | import Main from "./ResumePage/element/Main"; 4 | import WebFont from "webfontloader"; 5 | const Resume = () => { 6 | useEffect(() => { 7 | WebFont.load({ 8 | google: { 9 | families: ["Pacifico", "Poppins"], 10 | }, 11 | }); 12 | }, []); 13 | return ( 14 | <> 15 | 16 | {/*
*/} 17 |
18 | 19 | 20 | ); 21 | }; 22 | 23 | export default Resume; 24 | -------------------------------------------------------------------------------- /src/components/ResumePage/Context.js: -------------------------------------------------------------------------------- 1 | import { createContext, useContext, useRef, useState } from "react"; 2 | 3 | const ResumeContext = createContext(); 4 | 5 | export const useResume = () => useContext(ResumeContext); 6 | 7 | export const ResumeProvider = ({ children }) => { 8 | const printElem = useRef(); 9 | 10 | const [theme, setTheme] = useState("blue"); 11 | 12 | const [about, setAbout] = useState({ 13 | name: "", 14 | role: "", 15 | email: "", 16 | phone: "", 17 | address: "", 18 | website: "", 19 | github: "", 20 | linkedin: "", 21 | picture: "", 22 | aboutMe: "", 23 | addResumeImage: false 24 | }); 25 | 26 | const [educationList, setEducationList] = useState([ 27 | { 28 | id: "", 29 | degree: "", 30 | school: "", 31 | startYr: 0, 32 | endYr: 0, 33 | grade: "", 34 | }, 35 | ]); 36 | 37 | const [skills, setSkills] = useState([ 38 | { 39 | id: 1, 40 | name: "JavaScript", 41 | }, 42 | { 43 | id: 2, 44 | name: "ReactJS", 45 | }, 46 | { 47 | id: 3, 48 | name: "NodeJS", 49 | }, 50 | { 51 | id: 4, 52 | name: "MongoDB", 53 | }, 54 | { 55 | id: 5, 56 | name: "ExpressJS", 57 | }, 58 | { 59 | id: 6, 60 | name: "PHP", 61 | }, 62 | { 63 | id: 7, 64 | name: ".Net", 65 | }, 66 | { 67 | id: 8, 68 | name: "Java", 69 | }, 70 | { 71 | id: 9, 72 | name: "RestAPI", 73 | }, 74 | { 75 | id: 10, 76 | name: "jQuery", 77 | }, 78 | { 79 | id: 11, 80 | name: "MySQL", 81 | }, 82 | { 83 | id: 12, 84 | name: "Ajax", 85 | }, 86 | { 87 | id: 13, 88 | name: "GitHub", 89 | }, 90 | { 91 | id: 14, 92 | name: "HTML", 93 | }, 94 | { 95 | id: 15, 96 | name: "CSS", 97 | }, 98 | { 99 | id: 16, 100 | name: "TailwindCSS", 101 | }, 102 | { 103 | id: 17, 104 | name: "Bootstrap", 105 | }, 106 | ]); 107 | 108 | const [workList, setWorkList] = useState([ 109 | { 110 | id: "", 111 | position: "", 112 | company: "", 113 | type: "", 114 | startDate: "", 115 | endDate: "", 116 | description: "", 117 | }, 118 | ]); 119 | 120 | const [projects, setProjects] = useState([ 121 | { 122 | id: "", 123 | name: "", 124 | description: "", 125 | url: "", 126 | }, 127 | ]); 128 | 129 | const [template, setTemplate] = useState(""); 130 | 131 | const value = { 132 | about, 133 | setAbout, 134 | educationList, 135 | setEducationList, 136 | skills, 137 | setSkills, 138 | workList, 139 | setWorkList, 140 | projects, 141 | setProjects, 142 | printElem, 143 | theme, 144 | setTheme, 145 | template, 146 | setTemplate, 147 | }; 148 | 149 | return ( 150 | {children} 151 | ); 152 | }; 153 | -------------------------------------------------------------------------------- /src/components/ResumePage/element/BuildSteps/About.js: -------------------------------------------------------------------------------- 1 | import { 2 | FormControl, 3 | FormLabel, 4 | HStack, 5 | Input, 6 | Stack, 7 | Button, 8 | Textarea, 9 | Switch 10 | } from "@chakra-ui/react"; 11 | import { useResume } from "../../Context"; 12 | import ImageUpload from "../ImageUploadButton/ImageUpload.component"; 13 | 14 | const About = () => { 15 | const { about, setAbout } = useResume(); 16 | 17 | const handleChange = (e) => { 18 | const { name, value } = e.target; 19 | setAbout({ ...about, [name]: value }); 20 | }; 21 | 22 | return ( 23 | <> 24 | 25 | {about.picture ? ( 26 | 35 | ) : ( 36 | <> 37 | 38 | 39 | Add Image 40 | 41 | setAbout({...about, ["addResumeImage"]: e.target.checked})}/> 42 | 43 | {about.addResumeImage && } 44 | 45 | )} 46 | 47 | 48 | 49 | Full Name 50 | handleChange(e)} 52 | name="name" 53 | id="name" 54 | type="text" 55 | variant="filled" 56 | placeholder="Full Name" 57 | /> 58 | 59 | 60 | Role 61 | handleChange(e)} 63 | name="role" 64 | id="role" 65 | type="text" 66 | variant="filled" 67 | placeholder="Role" 68 | /> 69 | 70 | 71 | 72 | 73 | 74 | Email 75 | handleChange(e)} 77 | name="email" 78 | id="email" 79 | type="email" 80 | variant="filled" 81 | placeholder="Email" 82 | /> 83 | 84 | 85 | Phone 86 | handleChange(e)} 88 | name="phone" 89 | id="phone" 90 | type="tel" 91 | variant="filled" 92 | placeholder="Phone" 93 | /> 94 | 95 | 96 | 97 | 98 | 99 | Address 100 | handleChange(e)} 102 | name="address" 103 | id="address" 104 | type="text" 105 | variant="filled" 106 | placeholder="Address" 107 | /> 108 | 109 | 110 | Website 111 | handleChange(e)} 113 | name="website" 114 | id="website" 115 | type="url" 116 | variant="filled" 117 | placeholder="https://portfolio.com" 118 | /> 119 | 120 | 121 | 122 | 123 | 124 | Github 125 | handleChange(e)} 127 | name="github" 128 | id="github" 129 | type="url" 130 | variant="filled" 131 | placeholder="https://github.com" 132 | /> 133 | 134 | 135 | LinkedIn 136 | handleChange(e)} 138 | name="linkedin" 139 | id="linkedin" 140 | type="url" 141 | variant="filled" 142 | placeholder="https://linkedin.com" 143 | /> 144 | 145 | 146 | 147 | 148 | 149 | About Me 150 |