├── src
├── App.css
├── Assets
│ ├── ICON.png
│ ├── logo.png
│ ├── home-logo.png
│ ├── Resume Theme - 1.png
│ ├── PoweredByDevDisplay.png
│ └── Resume PDF
│ │ └── Theme-1.pdf
├── Context
│ ├── ResumeContext.js
│ └── ResumeState.js
├── Pages
│ ├── BuilderArea.css
│ ├── Error
│ │ └── ErrorPage.jsx
│ ├── BuilderArea.jsx
│ ├── Home
│ │ └── Home.jsx
│ └── About
│ │ └── About.jsx
├── index.js
├── Theme
│ ├── Theme3
│ │ ├── theme3.css
│ │ └── Theme3.jsx
│ ├── Theme1
│ │ ├── theme1.css
│ │ └── Theme1.jsx
│ ├── Theme2
│ │ ├── theme2.css
│ │ └── Theme2.jsx
│ └── Theme4
│ │ └── theme4.jsx
├── index.css
├── Components
│ ├── Intro
│ │ ├── introduction.css
│ │ └── Introduction.jsx
│ ├── UserDataCollect
│ │ ├── userCollectData.css
│ │ └── UserDataCollect.jsx
│ ├── Footer
│ │ └── Footer.jsx
│ └── Navbar
│ │ └── Navbar.jsx
├── db
│ └── ThemeTemplateData.js
└── App.js
├── public
├── _redirects
├── logo.png
├── favicon.ico
├── logo192.png
├── logo512.png
├── robots.txt
├── PoweredByDevDisplay.png
├── manifest.json
└── index.html
├── Branding
├── Mockup.png
├── logo.png
├── About Us.png
├── Home Page Dark.png
├── Home Page Light.png
├── Resume Crafting.png
└── Resume Template.png
├── .vscode
└── settings.json
├── .gitignore
├── LICENSE
├── package.json
├── CONTRIBUTING.md
├── README.md
└── CODE_OF_CONDUCT.md
/src/App.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/public/logo.png
--------------------------------------------------------------------------------
/Branding/Mockup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/Branding/Mockup.png
--------------------------------------------------------------------------------
/Branding/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/Branding/logo.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/public/logo512.png
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/Assets/ICON.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/src/Assets/ICON.png
--------------------------------------------------------------------------------
/src/Assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/src/Assets/logo.png
--------------------------------------------------------------------------------
/Branding/About Us.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/Branding/About Us.png
--------------------------------------------------------------------------------
/src/Assets/home-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/src/Assets/home-logo.png
--------------------------------------------------------------------------------
/Branding/Home Page Dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/Branding/Home Page Dark.png
--------------------------------------------------------------------------------
/Branding/Home Page Light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/Branding/Home Page Light.png
--------------------------------------------------------------------------------
/Branding/Resume Crafting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/Branding/Resume Crafting.png
--------------------------------------------------------------------------------
/Branding/Resume Template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/Branding/Resume Template.png
--------------------------------------------------------------------------------
/public/PoweredByDevDisplay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/public/PoweredByDevDisplay.png
--------------------------------------------------------------------------------
/src/Assets/Resume Theme - 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/src/Assets/Resume Theme - 1.png
--------------------------------------------------------------------------------
/src/Assets/PoweredByDevDisplay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/src/Assets/PoweredByDevDisplay.png
--------------------------------------------------------------------------------
/src/Assets/Resume PDF/Theme-1.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeaashu/Resume-Builder/HEAD/src/Assets/Resume PDF/Theme-1.pdf
--------------------------------------------------------------------------------
/src/Context/ResumeContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 |
3 | const ResumeContext = createContext();
4 |
5 | export default ResumeContext
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "java.autobuild.enabled": false,
3 | "markdown.editor.drop.enabled": false,
4 | "markdown.experimental.editor.pasteLinks.enabled": false
5 | }
--------------------------------------------------------------------------------
/src/Pages/BuilderArea.css:
--------------------------------------------------------------------------------
1 | /* media quires */
2 | @media only screen and (max-width: 1108px) {
3 | #main-box {
4 | flex-direction: column !important;
5 | }
6 | }
7 |
8 | #theme-box-border {
9 | height: fit-content;
10 | min-width: 50%;
11 | }
12 |
13 | #spinner {
14 | position: absolute !important;
15 | top: 50vh;
16 | left: 50vw;
17 | }
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 | import { ChakraProvider } from '@chakra-ui/react'
6 | import { BrowserRouter as Router } from 'react-router-dom'
7 |
8 |
9 | const root = ReactDOM.createRoot(document.getElementById('root'));
10 | root.render(
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
--------------------------------------------------------------------------------
/src/Theme/Theme3/theme3.css:
--------------------------------------------------------------------------------
1 | .info-text {
2 | /* margin: 43px 70px 36px 70px; */
3 | margin-bottom: 30px;
4 | }
5 |
6 | #theme3 {
7 | /* margin: 50px 70px; */
8 | padding: 47px 60px;
9 | }
10 |
11 |
12 | /* media quires */
13 | @media only screen and (max-width: 715px) {
14 | #theme3 {
15 | padding: 47px 19px;
16 | }
17 |
18 | .info-text {
19 | width: 290px;
20 | }
21 |
22 | .summary-text {
23 | width: 100% !important;
24 | }
25 | }
26 |
27 | @media only screen and (max-width: 430px) {
28 | #theme3 {
29 | padding: 14px 10px;
30 | }
31 |
32 | }
--------------------------------------------------------------------------------
/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 |
15 | /* Code for Print Specific Div */
16 |
17 | @media print {
18 | body * {
19 | visibility: hidden;
20 | }
21 |
22 | #form-collect {
23 | display: none;
24 | }
25 |
26 | #navbar {
27 | display: none;
28 | }
29 |
30 | #section-to-print,
31 | #section-to-print * {
32 | visibility: visible;
33 | }
34 | }
35 |
36 | @page {
37 | size: auto;
38 | margin: 0;
39 | }
--------------------------------------------------------------------------------
/src/Theme/Theme1/theme1.css:
--------------------------------------------------------------------------------
1 | /* #theme1 {
2 | width: 90%;
3 | margin: auto;
4 | } */
5 |
6 |
7 | /* Skills Set */
8 | .skill-badge {
9 | background-color: #D2E4E1 !important;
10 | color: black !important;
11 | margin: 5px;
12 | }
13 |
14 | .skillBox {
15 | display: flex;
16 | justify-content: center;
17 | align-items: center;
18 | flex-wrap: wrap;
19 | }
20 |
21 | .basic-set {
22 | /* width: 61%; */
23 | margin: 0rem 5rem;
24 | padding-top: 10px;
25 | }
26 |
27 |
28 | /* Utility */
29 | .subBox {
30 | margin-bottom: 15px;
31 | }
32 |
33 | .sub-details {
34 | padding: 0px 10px;
35 | }
36 |
37 | .sub-title {
38 | font-size: 1.1rem;
39 | font-weight: 600;
40 | }
41 |
42 | /* media quires */
43 | @media only screen and (max-width: 450px) {
44 | .basic-set {
45 | margin: 0rem 1rem;
46 | }
47 | }
--------------------------------------------------------------------------------
/src/Components/Intro/introduction.css:
--------------------------------------------------------------------------------
1 | .Bullet_Points {
2 | display: flex;
3 | margin: 5px 0px;
4 | align-items: center;
5 | }
6 |
7 | .Bullet_Points p {
8 | margin: 0px 5px;
9 | }
10 |
11 |
12 | .templatesList {
13 | font-family: "Poppins";
14 | color: #fff;
15 | text-align: center;
16 | height: 80%;
17 | display: flex;
18 | justify-content: center;
19 | align-items: center;
20 | flex-wrap: wrap;
21 | }
22 |
23 | .template {
24 | font-family: "Poppins";
25 | color: #fff;
26 | text-align: center;
27 | height: 300px;
28 | width: 200px;
29 | overflow: hidden;
30 | border-radius: 13px;
31 | margin: auto;
32 | border: 1px solid black;
33 | margin: 10px;
34 | }
35 |
36 | .template img {
37 | max-width: 100%;
38 | min-height: 100%;
39 | max-height: 100%;
40 | }
--------------------------------------------------------------------------------
/src/Theme/Theme2/theme2.css:
--------------------------------------------------------------------------------
1 | .info-text {
2 | /* margin: 43px 70px 36px 70px; */
3 | margin-bottom: 30px;
4 | }
5 |
6 | #theme2 {
7 | /* margin: 50px 70px; */
8 | padding: 47px 60px;
9 | }
10 |
11 | #resume-avatar {
12 | width: 150px;
13 | height: 150px;
14 | object-fit: cover;
15 | object-position: 50% 25%;
16 | }
17 |
18 | /* media quires */
19 | @media only screen and (max-width: 715px) {
20 | #theme2 {
21 | padding: 47px 19px;
22 | }
23 |
24 | #resume-avatar {
25 | width: auto;
26 | height: 105px;
27 | }
28 |
29 | .info-text {
30 | width: 290px;
31 | }
32 |
33 | .summary-text {
34 | width: 100% !important;
35 | }
36 | }
37 |
38 | @media only screen and (max-width: 430px) {
39 | #theme2 {
40 | padding: 14px 10px;
41 | }
42 |
43 | }
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "Resume Builder",
3 | "name": "Create your Resume in minutes",
4 | "icons": [
5 | {
6 | "src": "logo.png",
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 | "description": "Build and customize professional resumes online with Resume Builder. Choose from a variety of templates and create your perfect resume easily.",
26 | "keywords": "resume builder, professional resumes, online resumes, resume templates",
27 | "author": "Ashutosh Singh"
28 | }
29 |
--------------------------------------------------------------------------------
/src/db/ThemeTemplateData.js:
--------------------------------------------------------------------------------
1 | const ThemeTemplateData = [
2 | {
3 | id: "Theme1",
4 | imageSrc:
5 | "https://user-images.githubusercontent.com/87645745/210406666-ef3e2d63-28ab-4f8c-95d2-af3e6ea60bcf.png",
6 | imageAlt: "Theme1",
7 | },
8 | {
9 | id: "Theme2",
10 | imageSrc:
11 | "https://user-images.githubusercontent.com/87645745/213859618-dedb91b2-79ae-4165-8dd9-07fc3e68e726.jpg",
12 | imageAlt: "Theme2",
13 | },
14 | {
15 | id: "Theme3",
16 | imageSrc: "https://testanalytics-5e6e3.web.app/static/media/3.776a5714.JPG",
17 | imageAlt: "Theme3",
18 | },
19 | {
20 | id: "Theme4",
21 | imageSrc:
22 | "https://www.myperfectresume.com/wp-content/uploads/2023/10/Student-Resume-Example.svg",
23 | imageAlt: "Theme4",
24 | },
25 | {
26 | id: "Theme5",
27 | imageSrc: "https://testanalytics-5e6e3.web.app/static/media/4.af60bc02.jpg",
28 | imageAlt: "Theme5",
29 | },
30 | ];
31 |
32 | export default ThemeTemplateData;
33 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Ashutosh Singh
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 |
--------------------------------------------------------------------------------
/src/Pages/Error/ErrorPage.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Box, Heading, Text, Button } from '@chakra-ui/react';
3 |
4 |
5 | const ErrorPage = () => {
6 | return (
7 | <>
8 |
9 |
15 | 404
16 |
17 |
18 | Template Not Found
19 |
20 |
21 | This Page Resume Template is under build, coming soon....
22 |
23 |
24 | window.location.reload()}
26 | colorScheme="teal"
27 | bgGradient="linear(to-r, teal.400, teal.500, teal.600)"
28 | color="white"
29 | variant="solid">
30 | Select Another Template
31 |
32 |
33 | >
34 | )
35 | }
36 |
37 | export default ErrorPage
38 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "resume-builder",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@chakra-ui/icons": "^2.0.14",
7 | "@chakra-ui/react": "^2.4.4",
8 | "@emotion/react": "^11.10.5",
9 | "@emotion/styled": "^11.10.5",
10 | "@testing-library/jest-dom": "^5.16.5",
11 | "@testing-library/react": "^13.4.0",
12 | "@testing-library/user-event": "^13.5.0",
13 | "firebase": "^9.17.1",
14 | "framer-motion": "^7.10.2",
15 | "react": "^18.2.0",
16 | "react-dom": "^18.2.0",
17 | "react-helmet": "^6.1.0",
18 | "react-icons": "^4.7.1",
19 | "react-router-dom": "^6.6.1",
20 | "react-scripts": "5.0.1",
21 | "react-spinners": "^0.13.7",
22 | "react-to-print": "^2.14.10",
23 | "web-vitals": "^2.1.4"
24 | },
25 | "scripts": {
26 | "start": "react-scripts start",
27 | "build": "react-scripts build",
28 | "test": "react-scripts test",
29 | "eject": "react-scripts eject"
30 | },
31 | "eslintConfig": {
32 | "extends": [
33 | "react-app",
34 | "react-app/jest"
35 | ]
36 | },
37 | "browserslist": {
38 | "production": [
39 | ">0.2%",
40 | "not dead",
41 | "not op_mini all"
42 | ],
43 | "development": [
44 | "last 1 chrome version",
45 | "last 1 firefox version",
46 | "last 1 safari version"
47 | ]
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/Pages/BuilderArea.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { Button } from '@chakra-ui/react';
3 | import UserDataCollect from '../Components/UserDataCollect/UserDataCollect';
4 | import './BuilderArea.css'
5 | import Footer from '../Components/Footer/Footer';
6 | import ResumeContext from '../Context/ResumeContext';
7 | import PropagateLoader from "react-spinners/PropagateLoader";
8 |
9 | const BuilderArea = (props) => {
10 | const { showComponent, setShowComponent, loading, handlePrint } = useContext(ResumeContext)
11 |
12 | const handleSelectNewTemplate = () => {
13 | setShowComponent(!showComponent)
14 | }
15 |
16 | return (
17 | <>
18 | {loading && }
19 |
20 |
21 |
22 |
23 | {props.theme}
24 |
25 |
26 |
27 | Print
28 | Select Another Template
29 |
30 |
31 | >
32 | )
33 | }
34 |
35 | export default BuilderArea
36 |
--------------------------------------------------------------------------------
/src/Pages/Home/Home.jsx:
--------------------------------------------------------------------------------
1 | import { React, useContext } from "react";
2 | import Introduction from "../../Components/Intro/Introduction";
3 | import ResumeContext from "../../Context/ResumeContext";
4 | import BuilderArea from "../BuilderArea";
5 | import Theme1 from "./../../Theme/Theme1/Theme1";
6 | import Theme2 from "../../Theme/Theme2/Theme2";
7 | import Theme3 from "../../Theme/Theme3/Theme3";
8 | import Theme4 from "../../Theme/Theme4/theme4";
9 | import ErrorPage from "../Error/ErrorPage";
10 |
11 | const Home = () => {
12 | const { currentTheme, showComponent, themeData, componentRef } =
13 | useContext(ResumeContext);
14 |
15 | return (
16 | <>
17 | {!showComponent && }
18 | {showComponent && currentTheme === "Theme1" && (
19 | }
21 | />
22 | )}
23 | {showComponent && currentTheme === "Theme2" && (
24 | }
26 | />
27 | )}
28 | {showComponent && currentTheme === "Theme3" && (
29 | }
31 | />
32 | )}
33 | {showComponent && currentTheme === "Theme4" && (
34 | }
36 | />
37 | )}
38 | {showComponent && currentTheme === "Theme5" && }
39 | {}
40 | >
41 | );
42 | };
43 |
44 | export default Home;
45 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Helmet } from 'react-helmet';
3 | import './App.css';
4 | import ResumeState from './Context/ResumeState';
5 | import { Routes, Route } from 'react-router-dom';
6 | import Home from './Pages/Home/Home';
7 | import Navbar from './Components/Navbar/Navbar';
8 | import About from './Pages/About/About';
9 |
10 | function App() {
11 | return (
12 |
13 |
14 |
15 | Resume Builder - Create Professional Resumes Online
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | } />
28 | } />
29 | } />
30 |
31 |
32 |
33 | );
34 | }
35 |
36 | export default App;
37 |
--------------------------------------------------------------------------------
/src/Components/UserDataCollect/userCollectData.css:
--------------------------------------------------------------------------------
1 | #form-collect {
2 | min-width: 33%;
3 | margin: 0px 5px 10px 5px;
4 | }
5 |
6 | #theme-box-border {
7 | box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.61);
8 | -webkit-box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.61);
9 | -moz-box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.61);
10 | }
11 |
12 | /* input,
13 | textarea {
14 | background-color: #f2f2f285 !important;
15 | } */
16 |
17 | /* media quires */
18 | /* @media only screen and (max-width: 1130px) {
19 | #form-collect {
20 | width: 100%;
21 | }
22 | } */
23 |
24 | /* Upload button */
25 | .file {
26 | position: relative;
27 | display: flex;
28 | justify-content: center;
29 | align-items: center;
30 | }
31 |
32 | .file>input[type='file'] {
33 | display: none
34 | }
35 |
36 | .file>label {
37 | font-size: 1rem;
38 | font-weight: 300;
39 | cursor: pointer;
40 | outline: 0;
41 | user-select: none;
42 | border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
43 | border-style: solid;
44 | border-radius: 4px;
45 | border-width: 1px;
46 | background-color: hsl(0, 0%, 100%);
47 | color: hsl(0, 0%, 29%);
48 | padding-left: 16px;
49 | padding-right: 16px;
50 | padding-top: 16px;
51 | padding-bottom: 16px;
52 | display: flex;
53 | justify-content: center;
54 | align-items: center;
55 | width: 100%;
56 | }
57 |
58 | .file>label:hover {
59 | border-color: hsl(0, 0%, 21%);
60 | }
61 |
62 | .file>label:active {
63 | background-color: hsl(0, 0%, 96%);
64 | }
65 |
66 | .file>label>i {
67 | padding-right: 5px;
68 | }
69 |
70 | .file--upload>label {
71 | color: hsl(204, 86%, 53%);
72 | border-color: hsl(204, 86%, 53%);
73 | }
74 |
75 | .file--upload>label:hover {
76 | border-color: hsl(204, 86%, 53%);
77 | background-color: hsl(204, 86%, 96%);
78 | }
79 |
80 | .file--upload>label:active {
81 | background-color: hsl(204, 86%, 91%);
82 | }
83 |
84 | .blah {
85 | height: 59px;
86 | border-radius: 7px;
87 | margin: 0px 10px;
88 | }
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
13 |
14 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | Resume Builder
25 |
26 |
27 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
39 |
40 |
41 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to Resume Builder
2 |
3 | Welcome to Resume Builder! We appreciate your interest in contributing to our project. Whether you want to report a bug, suggest an improvement, or contribute code, please take a moment to read the following guidelines.
4 |
5 | ## Table of Contents
6 |
7 | - [Code of Conduct](#code-of-conduct)
8 | - [Reporting Bugs](#reporting-bugs)
9 | - [Contributing Code](#contributing-code)
10 | - [Commit Guidelines](#commit-guidelines)
11 | - [Pull Requests](#pull-requests)
12 |
13 | ## Code of Conduct
14 |
15 | Before getting started, please review our [Code of Conduct](CODE_OF_CONDUCT.md). We expect all contributors to adhere to this code to ensure a welcoming and respectful environment.
16 |
17 | ## Reporting Bugs
18 |
19 | If you encounter a bug or issue with Resume Builder, please [create a new issue](link-to-issue-tracker) on our issue tracker. Be sure to include:
20 |
21 | - A clear and descriptive title.
22 | - Detailed steps to reproduce the bug.
23 | - Information about your environment (e.g., operating system, browser, or version of the project).
24 |
25 | ## Contributing Code
26 |
27 | We welcome code contributions from the community. To get started:
28 |
29 | 1. Fork the repository to your GitHub account.
30 | 2. Clone your fork to your local machine.
31 | 3. Create a new branch for your changes: `git checkout -b your-feature-name`.
32 | 4. Make your changes and test them thoroughly.
33 | 5. Commit your changes.
34 | 6. Push your changes to your fork: `git push origin your-feature-name`.
35 | 7. Create a pull request against the `main` branch of the main repository.
36 |
37 | ## Getting Started
38 |
39 | If you're new to Resume Builder, you can explore all features and give us feedback at hellow.ashutosh@gmail.com
40 |
41 | ## Commit Guidelines
42 |
43 | To keep our commit history clean and well-organized. Please adhere to these guidelines when making commits.
44 |
45 | ## Pull Requests
46 |
47 | When creating a pull request, make sure it includes:
48 |
49 | - A clear and concise title.
50 | - A description of the changes you've made and the problem it solves.
51 | - Any relevant issue references.
52 |
53 | Our maintainers will review your pull request, provide feedback, and merge it once it's ready.
54 |
55 | Thank you for your contributions!
56 |
57 | Resume Builder Team
58 |
--------------------------------------------------------------------------------
/src/Components/Footer/Footer.jsx:
--------------------------------------------------------------------------------
1 | import { Box, chakra, Container, Stack, Text, Image, useColorModeValue, VisuallyHidden, } from '@chakra-ui/react';
2 | import { FaInstagram, FaTwitter, FaGithub } from 'react-icons/fa';
3 | import logo from './../../Assets/logo.png';
4 |
5 |
6 | const SocialButton = ({ children, label, href }) => {
7 | return (
8 |
23 | {label}
24 | {children}
25 |
26 | );
27 | };
28 |
29 | export default function Footer() {
30 | return (
31 |
34 |
43 |
44 | © 2024 Resume Builder, All rights reserved
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/src/Components/Navbar/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import { Box, Flex, HStack, IconButton, useDisclosure, useColorMode, useColorModeValue, Stack, Button } from '@chakra-ui/react';
2 | import { HamburgerIcon, CloseIcon, MoonIcon, SunIcon } from '@chakra-ui/icons';
3 | import { Link as ReachLink } from 'react-router-dom'
4 | // import logo from './../../Assets/PoweredByDevDisplay.png';
5 | import logo from './../../Assets/logo.png';
6 |
7 |
8 | export default function Navbar() {
9 | const { colorMode, toggleColorMode } = useColorMode();
10 | const { isOpen, onOpen, onClose } = useDisclosure();
11 |
12 | return (
13 | <>
14 |
15 |
16 |
17 |
18 | {/* */}
19 |
20 |
21 |
22 |
26 | Home
27 | About
28 |
29 |
30 | {colorMode === 'light' ? : }
31 |
32 |
33 |
34 | : }
37 | aria-label={'Open Menu'}
38 | display={{ md: 'none' }}
39 | onClick={isOpen ? onClose : onOpen}
40 | />
41 |
42 |
43 |
44 | {isOpen ? (
45 |
46 |
47 | Home
48 | About
49 |
50 |
51 | ) : null}
52 |
53 | >
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/src/Context/ResumeState.js:
--------------------------------------------------------------------------------
1 | import ResumeContext from "./ResumeContext";
2 | import { useState, useRef } from "react";
3 | import { useReactToPrint } from "react-to-print";
4 |
5 | const ResumeState = (props) => {
6 | const componentRef = useRef();
7 | const handlePrint = useReactToPrint({
8 | content: () => componentRef.current,
9 | onBeforePrint: () => {
10 | setLoading(true);
11 | },
12 | onAfterPrint: () => {
13 | setLoading(false);
14 | },
15 | });
16 |
17 | const initialData = {
18 | personalData: {
19 | profileImage:
20 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNI3kQLeYMnpy05PhEiuzS1rtRmNVL7VKvwcE4ACmQSQT1rRmUO5mHLyjH-mGHq0ueUQY&usqp=CAU",
21 | name: "Your Name",
22 | summary:
23 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
24 | profile: "Work Profile",
25 | address: "Address Line",
26 | phone: "Phone Number",
27 | email: "Email Address",
28 | skill: "Your, Skills, are, shown, here",
29 | },
30 | projectData: {
31 | projectTitles: { pTitle1: "Project Title 1" },
32 | projectDesc: { pDescription1: "Project Description 1" },
33 | },
34 | educationData: {
35 | educationTitles: { eTitle1: "Education Title 1" },
36 | educationDesc: { eDescription1: "Education Description 1" },
37 | },
38 | workData: {
39 | workTitles: { wTitle1: "Work Title 1" },
40 | workDesc: { wDescription1: "Work Description 1" },
41 | },
42 | awardData: {
43 | awards:
44 | "Certificate of Appreciation - 2019, Certificate of Appreciation - 2018",
45 | },
46 | };
47 |
48 | const [themeData, setThemeData] = useState(initialData);
49 | const [checkProj, setCheckProj] = useState(false);
50 | const [checkWork, setCheckWork] = useState(false);
51 | const [checkAward, setCheckAward] = useState(false);
52 | const [loading, setLoading] = useState(false);
53 | //Change bellow two state for create any new Theme
54 | const [showComponent, setShowComponent] = useState(false);
55 | const [currentTheme, setCurrentTheme] = useState("Theme1");
56 | const [selectBtn, setSelectBtn] = useState(true);
57 |
58 | return (
59 |
82 | {props.children}
83 |
84 | );
85 | };
86 |
87 | export default ResumeState;
88 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
4 | 
5 | 
6 | [](https://twitter.com/intent/follow?screen_name=warrior_aashuu)
7 |
8 |
9 |
📋 Introducing to Resume Builder 📋
10 |
11 |
Resume Builder
12 |
✦ Create your Resume in minutes! ✦
13 |
14 | ` Resume Builder is a Web App where users can easily create professional and personalized resumes. `
15 |
16 |
17 | View Resume Builder Snapshot
18 |
19 | ###### Home Page
20 |
21 |
22 | ###### Select Template Page
23 |
24 |
25 | ###### Resume Builder Page
26 |
27 |
28 | ###### About Page
29 |
30 |
31 | ###### Light Mode
32 |
33 |
34 |
35 |
36 | ` Features 🌟 `
37 |
38 |
39 | ```
40 | 👌 User-friendly interface for creating and editing resumes
41 | 📜 Templates to choose from for different job industries
42 | 📑 PDF export option for final resume
43 | 📲 Responsive Layout
44 | 🌑 Dark mode for easy viewing
45 | 👩🏻💼 Image upload for profile picture
46 | ```
47 |
48 |
49 | ` Technologies Used 💻 Built With `
50 |
51 | [React](https://reactjs.org/) [Chakra UI](https://chakra-ui.com/) [React Router](https://reactrouter.com/) [React Icons](https://react-icons.github.io/react-icons/) [React HTML to PDF](https://www.npmjs.com/package/react-html-to-pdf) [Bootstrap](https://getbootstrap.com/)        
52 |
53 | ` © License ✔️ `
54 |
55 | [](https://npmjs.org/package/badge-maker) [](https://npmjs.org/package/badge-maker) [](https://opensource.org/licenses/MIT)
56 |
57 | This project is licensed under the NPM or MIT - see the [LICENSE](LICENSE) file for details.
58 |
59 | ` Getting Started 🚀 Setup Procedure ⚙️ `
60 |
61 | 1. Clone this repository to your local machine
62 | ```bash
63 | git clone https://github.com/codeaashu/Resume-Builder.git
64 | ```
65 | 2. Navigate to the project directory
66 | ```bash
67 | cd resume-builder
68 | ```
69 | 3. Install dependencies
70 | ```bash
71 | npm install
72 | ```
73 | 4. Run the app
74 | ```bash
75 | npm run start
76 | ```
77 | 5. Open http://localhost:3000 in your browser to see the application running
78 |
79 |
80 | ` Contributions 🫱🏻🫲🏼 `
81 |
82 | We believe in the power of open-source contribution. so If you have a solid knowledge of React and you're interested in contributing to this project, I’d love to see what you can bring to the table. Feel free to fork the repository, add your resume template, and submit a pull request. Your contribution will be greatly appreciated. & Don't forget to install it on your devices Phone, Tablet, Laptop, PC anywhere you use.
83 |
84 | `Don't forget to give A star to this repository ⭐`
85 |
86 |
87 | `👍🏻 All Set! 💌`
88 |
89 |
90 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity
10 | and orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | * Demonstrating empathy and kindness toward other people
21 | * Being respectful of differing opinions, viewpoints, and experiences
22 | * Giving and gracefully accepting constructive feedback
23 | * Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | * Focusing on what is best not just for us as individuals, but for the
26 | overall community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | * The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | * Trolling, insulting or derogatory comments, and personal or political attacks
33 | * Public or private harassment
34 | * Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | * Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards of
42 | acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies when
54 | an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail address,
56 | posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at
63 | hellow.ashutosh@gmail.com.
64 | All complaints will be reviewed and investigated promptly and fairly.
65 |
66 | All community leaders are obligated to respect the privacy and security of the
67 | reporter of any incident.
68 |
69 | ## Enforcement Guidelines
70 |
71 | Community leaders will follow these Community Impact Guidelines in determining
72 | the consequences for any action they deem in violation of this Code of Conduct:
73 |
74 | ### 1. Correction
75 |
76 | **Community Impact**: Use of inappropriate language or other behavior deemed
77 | unprofessional or unwelcome in the community.
78 |
79 | **Consequence**: A private, written warning from community leaders, providing
80 | clarity around the nature of the violation and an explanation of why the
81 | behavior was inappropriate. A public apology may be requested.
82 |
83 | ### 2. Warning
84 |
85 | **Community Impact**: A violation through a single incident or series
86 | of actions.
87 |
88 | **Consequence**: A warning with consequences for continued behavior. No
89 | interaction with the people involved, including unsolicited interaction with
90 | those enforcing the Code of Conduct, for a specified period of time. This
91 | includes avoiding interactions in community spaces as well as external channels
92 | like social media. Violating these terms may lead to a temporary or
93 | permanent ban.
94 |
95 | ### 3. Temporary Ban
96 |
97 | **Community Impact**: A serious violation of community standards, including
98 | sustained inappropriate behavior.
99 |
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 |
106 | ### 4. Permanent Ban
107 |
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 |
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 |
115 | ## Attribution
116 |
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 |
--------------------------------------------------------------------------------
/src/Components/Intro/Introduction.jsx:
--------------------------------------------------------------------------------
1 | import { Flex, Container, Heading, Stack, Text, Button, Box } from '@chakra-ui/react';
2 | import './introduction.css';
3 | import homeLogo from './../../Assets/home-logo.png'
4 | import { Image } from '@chakra-ui/react'
5 | import { useContext } from 'react';
6 | import ResumeContext from '../../Context/ResumeContext';
7 | import ThemeTemplateData from '../../db/ThemeTemplateData';
8 | import { Helmet } from 'react-helmet';
9 |
10 | export default function Introduction() {
11 | const { selectBtn, setSelectBtn, setCurrentTheme, showComponent, setShowComponent } = useContext(ResumeContext);
12 |
13 | const handleSelectTemplate = () => {
14 | setSelectBtn(!selectBtn)
15 | }
16 |
17 | const showTheme = (e) => {
18 | setShowComponent(!showComponent)
19 | setCurrentTheme(e.target.id)
20 | }
21 |
22 |
23 | return (
24 | <>
25 |
26 | Resume Builder - Create Your Resume in Minutes
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
43 |
44 | {
45 | selectBtn
46 | ?
47 | <>
48 |
52 | Your resume in three{' '}
53 |
54 | easy {' '}
55 |
56 | steps
57 |
58 |
59 |
60 | Resume builder tools that assemble well-formatted resume. Through a resume builder, you can create a professional-looking resume in a few easy steps. This resume builder offer different template options, so you can select the template that best fits your needs and style.
61 |
62 |
63 |
64 |
65 | 1
66 |
67 | Select a template from our collection.
68 |
69 |
70 |
71 | 2
72 |
73 | Build you resume using our easy to use resume builder.
74 |
75 |
76 |
77 | 3
78 |
79 | Download your resume.
80 |
81 |
82 |
83 | >
84 | :
85 |
91 | Select a {' '}
92 |
93 | Template {' '}
94 |
95 | from the list
96 |
97 | }
98 |
99 |
100 | {
101 | selectBtn ?
102 |
103 |
104 |
112 | Select Template
113 |
114 |
115 | :
116 | <>
117 |
118 | {
119 | ThemeTemplateData.map((item, index) => {
120 | return
121 |
122 |
123 | })
124 | }
125 |
126 | >
127 | }
128 |
129 | >
130 |
131 | );
132 | }
133 |
--------------------------------------------------------------------------------
/src/Theme/Theme4/theme4.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | FaPhone,
4 | FaMapMarkerAlt,
5 | FaEnvelope,
6 | FaBriefcase,
7 | } from "react-icons/fa";
8 |
9 | const Theme4 = ({ componentRef, themeData }) => {
10 | const { personalData, educationData, workData, projectData } = themeData;
11 | const { name, email, phone, address, summary, skill, profile } = personalData;
12 |
13 | return (
14 |
25 |
32 |
35 | {name}
36 |
37 |
48 |
49 | {email}
50 |
51 |
62 |
63 | {phone}
64 |
65 |
76 |
77 | {address}
78 |
79 |
90 |
91 | {profile ? profile : "Work Profile"}
92 |
93 |
94 |
95 |
102 |
105 | Professional Summary
106 |
107 |
117 | {summary ? summary : "summary"}
118 |
119 |
120 |
121 |
128 |
131 | Skills
132 |
133 |
144 | {skill.split(",").map((item, index) => (
145 |
146 | {item}
147 |
148 | ))}
149 |
150 |
153 | Education
154 |
155 |
165 | {educationData.educationTitles.eTitle1}
166 |
167 |
177 | {educationData.educationDesc.eDescription1}
178 |
179 |
180 |
181 |
189 |
192 | Professional Experience
193 |
194 | {Object.entries(workData.workTitles).map(([key, value], index) => (
195 |
196 |
203 | {value}
204 |
205 |
216 | {workData.workDesc[`wDescription${index + 1}`]
217 | .split(",")
218 | .map((desc, idx) => (
219 |
223 | {desc}
224 |
225 | ))}
226 |
227 |
228 | ))}
229 |
232 | Projects
233 |
234 | {Object.entries(projectData.projectTitles).map(
235 | ([key, value], index) => (
236 |
237 |
244 | {value}
245 |
246 |
257 | {projectData.projectDesc[`pDescription${index + 1}`]
258 | .split(",")
259 | .map((desc, idx) => (
260 |
264 | {desc}
265 |
266 | ))}
267 |
268 |
269 | )
270 | )}
271 |
272 |
273 | );
274 | };
275 |
276 | export default Theme4;
277 |
--------------------------------------------------------------------------------
/src/Pages/About/About.jsx:
--------------------------------------------------------------------------------
1 | import { Avatar, Box, chakra, Flex, Icon, SimpleGrid, useColorModeValue, } from '@chakra-ui/react';
2 | import { Helmet } from 'react-helmet';
3 | import logo from './../../Assets/ICON.png';
4 |
5 | const testimonials = [
6 | {
7 | name: 'DevDisplay',
8 | role: 'Paradise for Developers',
9 | content:
10 | 'A resume builder website is a web-based tool that allows users to create and customize a professional resume to their desired specifications. These websites typically provide templates for creating a resume.',
11 | avatar: logo,
12 | }
13 | ];
14 |
15 |
16 | function TestimonialCard(props) {
17 | const { name, role, content, avatar } = props;
18 | return (
19 |
53 |
57 |
63 | {content}
64 |
65 |
66 | {name}
67 |
71 | {' '}
72 | - {role}
73 |
74 |
75 |
76 |
83 |
84 | );
85 | }
86 |
87 | export default function About() {
88 | return (
89 | <>
90 |
91 | About Us - Resume Builder
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
108 |
109 |
115 | People love us
116 |
117 |
123 | Resume Builder
124 |
125 |
131 | Build the Resume That Gets You Hired!
132 |
133 |
134 |
139 | {testimonials.map((cardInfo, index) => (
140 |
141 | ))}
142 |
143 |
144 |
145 |
149 |
150 |
151 |
152 | >
153 |
154 | );
155 | }
156 |
--------------------------------------------------------------------------------
/src/Theme/Theme2/Theme2.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { Box, Text, Image, Heading, Badge } from '@chakra-ui/react';
3 | import './theme2.css'
4 | import ResumeContext from '../../Context/ResumeContext';
5 |
6 | const Theme2 = (props) => {
7 | const { componentRef, themeData } = props;
8 | const { name, address, phone, email, profile, profileImage, summary, skill } = themeData.personalData;
9 |
10 | const { checkProj, checkWork, checkAward } = useContext(ResumeContext)
11 | const { projectTitles, projectDesc } = themeData.projectData;
12 | const { educationTitles, educationDesc } = themeData.educationData;
13 | const { workTitles, workDesc } = themeData.workData;
14 | const { awards } = themeData.awardData;
15 |
16 |
17 | return (
18 |
19 |
20 |
21 |
22 |
23 | {name}
24 |
25 |
26 | {profile}
27 |
28 |
29 | {summary}
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | Contact
41 |
42 | Phone
43 | {phone}
44 | Email
45 | {email}
46 | Address
47 | {address}
48 |
49 |
50 |
51 | Skills
52 |
53 | {
54 | skill.split(',').map((item, index) => {
55 | return (
56 |
57 | {item}
58 |
59 | )
60 | })
61 | }
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 | Education
72 | {
73 | Object.entries(educationTitles).map((element, index) => {
74 | return (
75 |
76 | {element[1]}
77 |
78 | {
79 | (Object.entries(educationDesc)[index] === undefined)
80 | ?
81 | null
82 | :
83 | Object.entries(educationDesc)[index][1].split(',').map((element, index) => {
84 | return {element}
85 | })
86 | }
87 |
88 |
89 | )
90 | })
91 | }
92 |
93 |
94 | {
95 | !checkProj &&
96 |
97 | Projects
98 | {
99 | Object.entries(projectTitles).map((element, index) => {
100 | return (
101 |
102 | {element[1]}
103 |
104 | {
105 | (Object.entries(projectDesc)[index] === undefined)
106 | ?
107 | null
108 | :
109 | Object.entries(projectDesc)[index][1].split(',').map((element, index) => {
110 | return {element}
111 | })
112 | }
113 |
114 |
115 | )
116 | })
117 | }
118 |
119 | }
120 | {
121 | !checkWork &&
122 |
123 | Work Experience
124 | {
125 | Object.entries(workTitles).map((element, index) => {
126 | return (
127 |
128 | {element[1]}
129 |
130 | {
131 | (Object.entries(workDesc)[index] === undefined)
132 | ?
133 | null
134 | :
135 | Object.entries(workDesc)[index][1].split(',').map((element, index) => {
136 | return {element}
137 | })
138 | }
139 |
140 |
141 | )
142 | })
143 | }
144 |
145 | }
146 | {
147 | !checkAward &&
148 |
149 | Awards & Achievement
150 |
151 | {
152 | awards.split(',').map((element, index) => {
153 | return {element}
154 | })
155 | }
156 |
157 |
158 | }
159 |
160 |
161 |
162 |
163 |
164 | )
165 | }
166 |
167 | export default Theme2
--------------------------------------------------------------------------------
/src/Theme/Theme3/Theme3.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import {
3 | Box,
4 | Text,
5 | Heading,
6 | Grid,
7 | GridItem,
8 | } from "@chakra-ui/react";
9 | import "./theme3.css";
10 | import ResumeContext from "../../Context/ResumeContext";
11 |
12 | const Theme3 = (props) => {
13 | const { componentRef, themeData } = props;
14 | const { name, address, phone, email, profile, summary, skill } =
15 | themeData.personalData;
16 |
17 | const { checkProj, checkWork, checkAward } = useContext(ResumeContext);
18 | const { projectTitles, projectDesc } = themeData.projectData;
19 | const { educationTitles, educationDesc } = themeData.educationData;
20 | const { workTitles, workDesc } = themeData.workData;
21 | const { awards } = themeData.awardData;
22 |
23 | return (
24 |
25 |
26 |
30 |
31 |
38 | {name}
39 |
40 |
46 | {profile}
47 |
48 |
49 |
50 |
51 | {address}
52 |
53 |
54 | {phone}
55 |
56 |
57 | {email}
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | Summary
69 |
70 |
71 |
72 | {summary}
73 |
74 |
75 |
76 | {!checkWork && <>
77 |
78 |
79 |
80 |
81 | Experience
82 |
83 |
84 |
85 | {Object.entries(workTitles).map((element, index) => {
86 | return (
87 |
88 |
89 | {element[1]}
90 |
91 | {Object.entries(workDesc)[index] === undefined
92 | ? null
93 | : Object.entries(workDesc)
94 | [index][1].split(",")
95 | .map((element, index) => {
96 | return {element}
;
97 | })}
98 |
99 | );
100 | })}
101 |
102 |
103 | > }
104 |
105 |
106 |
107 |
108 |
109 | Education
110 |
111 |
112 |
113 | {Object.entries(educationTitles).map((element, index) => {
114 | return (
115 |
116 |
117 | {element[1]}
118 |
119 | {Object.entries(educationDesc)[index] === undefined
120 | ? null
121 | : Object.entries(educationDesc)
122 | [index][1].split(",")
123 | .map((element, index) => {
124 | return {element}
;
125 | })}
126 |
127 | );
128 | })}
129 |
130 |
131 |
132 |
133 | {!checkProj && (
134 | <>
135 | {" "}
136 |
137 |
138 |
139 | Projects
140 |
141 |
142 |
143 | {Object.entries(projectTitles).map((element, index) => {
144 | return (
145 |
146 |
147 | {element[1]}
148 |
149 |
150 | {Object.entries(projectDesc)[index] === undefined
151 | ? null
152 | : Object.entries(projectDesc)
153 | [index][1].split(",")
154 | .map((element, index) => {
155 | return {element} ;
156 | })}
157 |
158 |
159 | );
160 | })}
161 |
162 |
163 |
164 | >
165 | )}
166 |
167 |
168 |
169 |
170 |
171 | Skills
172 |
173 |
174 |
175 | {skill.split(",").map((item, index) => {
176 | return (
177 |
178 |
179 |
186 |
192 | {item}
193 |
194 |
195 |
196 | );
197 | })}
198 |
199 |
200 |
201 | {!checkAward && <>
202 |
203 |
204 |
205 |
206 | Achievement
207 |
208 |
209 |
210 | {awards.split(",").map((item, index) => {
211 | return (
212 |
213 |
214 |
221 |
227 | {item}
228 |
229 |
230 |
231 |
232 | );
233 | })}
234 |
235 |
236 |
237 | >}
238 |
239 |
240 |
241 |
242 | );
243 | };
244 |
245 | export default Theme3;
246 |
247 |
--------------------------------------------------------------------------------
/src/Theme/Theme1/Theme1.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { Heading, Text, Box, Badge } from '@chakra-ui/react'
3 | import './theme1.css'
4 | import { ImLocation } from 'react-icons/im'
5 | import { GrMail } from 'react-icons/gr'
6 | import { BsFillTelephoneFill } from 'react-icons/bs'
7 | import ResumeContext from '../../Context/ResumeContext'
8 |
9 | const Theme1 = (props) => {
10 | const { checkProj, checkWork, checkAward } = useContext(ResumeContext)
11 | const { themeData, componentRef } = props;
12 | const { name, profile, address, phone, email, skill, summary } = themeData.personalData;
13 | const { projectTitles, projectDesc } = themeData.projectData;
14 | const { educationTitles, educationDesc } = themeData.educationData;
15 | const { workTitles, workDesc } = themeData.workData;
16 | const { awards } = themeData.awardData;
17 | return (
18 | <>
19 |
20 |
21 | {/* Personal Info */}
22 |
23 |
24 | {name}
25 |
26 |
27 | {address} |
28 | {email} |
29 | {phone}
30 |
31 |
32 | {profile}
33 |
34 |
35 | {summary}
36 |
37 |
38 | {/* Skills Part */}
39 |
40 |
41 | TECHNICAL SKILLS
42 |
43 |
44 |
45 |
46 | {
47 | skill.split(',').map((element, index) => {element} )
48 | }
49 |
50 |
51 |
52 |
53 | {/* Project Section */}
54 | {
55 | !checkProj &&
56 |
57 |
58 | PROJECTS
59 |
60 |
61 |
62 | {
63 | Object.entries(projectTitles).map((element, index) => {
64 | return (
65 |
66 | {element[1]}
67 |
68 | {
69 | (Object.entries(projectDesc)[index] === undefined)
70 | ?
71 | null
72 | :
73 | Object.entries(projectDesc)[index][1].split(',').map((element, index) => {
74 | return {element}
75 | })
76 | }
77 |
78 |
79 | )
80 | })
81 | }
82 |
83 |
84 | }
85 |
86 | {/* Education Part */}
87 |
88 |
89 |
90 | EDUCATION
91 |
92 |
93 |
94 | {
95 | Object.entries(educationTitles).map((element, index) => {
96 | return (
97 |
98 | {element[1]}
99 |
100 | {
101 | (Object.entries(educationDesc)[index] === undefined)
102 | ?
103 | null
104 | :
105 | Object.entries(educationDesc)[index][1].split(',').map((element, index) => {
106 | return {element}
107 | })
108 | }
109 |
110 |
111 | )
112 | })
113 | }
114 |
115 |
116 |
117 | {/* WORK EXPERIENCE */}
118 | {
119 | !checkWork &&
120 |
121 |
122 | WORK EXPERIENCE
123 |
124 |
125 |
126 | {
127 | Object.entries(workTitles).map((element, index) => {
128 | return (
129 |
130 | {element[1]}
131 |
132 | {
133 | (Object.entries(workDesc)[index] === undefined)
134 | ?
135 | null
136 | :
137 | Object.entries(workDesc)[index][1].split(',').map((element, index) => {
138 | return {element}
139 | })
140 | }
141 |
142 |
143 | )
144 | })
145 | }
146 |
147 |
148 | }
149 | {/* Award & Achievement */}
150 | {
151 | !checkAward &&
152 |
153 |
154 | AWARDS & ACHIEVEMENTS
155 |
156 |
157 |
158 |
159 | {
160 | awards.split(',').map((element, index) => {
161 | return {element}
162 | })
163 | }
164 |
165 |
166 |
167 | }
168 |
169 |
170 | >
171 | )
172 | }
173 |
174 | export default Theme1
175 |
--------------------------------------------------------------------------------
/src/Components/UserDataCollect/UserDataCollect.jsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from 'react'
2 | import './userCollectData.css'
3 | import { IoMdCloudUpload } from 'react-icons/io'
4 | import { FormControl, Input, Heading, Textarea, Button, Switch } from '@chakra-ui/react'
5 | import ResumeContext from '../../Context/ResumeContext'
6 | const UserDataCollect = () => {
7 |
8 |
9 | const { themeData, checkAward, setCheckAward, setThemeData, checkProj, checkWork, setCheckProj, setCheckWork } = useContext(ResumeContext)
10 |
11 |
12 | const [projectCount, setProjectCount] = useState(0)
13 | const [educationCount, setEducationCount] = useState(0)
14 | const [workCount, setWorkCount] = useState(0)
15 | const [projArrTemplate, setProjArrTemplate] = useState([])
16 | const [educationArrTemplate, setEducationArrTemplate] = useState([])
17 | const [workArrTemplate, setWorkArrTemplate] = useState([])
18 | const [projectData, setProjectData] = useState({ 'projectTitles': { pTitle1: "Project Title " }, 'projectDesc': { pDescription1: "Project Description are Shown here , with Bullet Points" } })
19 | const [educationData, setEducationData] = useState({ 'educationTitles': { eTitle1: "Education Title" }, 'educationDesc': { eDescription1: "Education Description are Shown here , with Bullet Points" } })
20 | const [workData, setWorkData] = useState({ 'workTitles': { wTitle1: "Work Title" }, 'workDesc': { wDescription1: "Work Description are Shown here , with Bullet Points" } })
21 | const [personalData, setPersonalData] = useState({ profileImage: 'https://www.w3schools.com/howto/img_avatar.png', name: "Your Name", summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing eli', profile: "Work Profile", address: "Address Line", phone: "Phone Number", email: "Email Address", skill: 'Your, Skills, are, shown, here', })
22 | const [awardData, setAwardData] = useState({ awards: 'Your Awards are shown here' })
23 | // To Add Personal Data to the State
24 | const handleChangePersonal = (e) => {
25 | const { name, value } = e.target
26 | setPersonalData({ ...personalData, [name]: value })
27 | if (e.target.name === 'profileImage') {
28 | setPersonalData({ ...personalData, profileImage: URL.createObjectURL(e.target.files[0]) })
29 | }
30 | }
31 | // To Add Project Data to the State
32 | const handleChangeProject = (e) => {
33 | const { name, value, id } = e.target
34 | let tempProjectData = projectData
35 | if (name.includes('pName')) {
36 | tempProjectData["projectTitles"][id] = value;
37 | } else {
38 | tempProjectData["projectDesc"][id] = value;
39 | }
40 | setProjectData({ ...projectData, tempProjectData })
41 | setThemeData({ ...themeData, projectData: projectData })
42 | }
43 |
44 | const handleProjectClick = (e) => {
45 | e.preventDefault();
46 | let i = projectCount
47 | ++i;
48 | const template = (
49 | <>
50 |
51 |
52 |
53 |
54 |
55 |
56 | >
57 | )
58 | let arr = projArrTemplate
59 | arr.push(template)
60 | setProjArrTemplate(arr)
61 | setProjectCount(i)
62 | }
63 |
64 | // To Add Education Data to the State
65 | const handleChangeEducation = (e) => {
66 | const { name, value, id } = e.target
67 | let tempEducationData = educationData
68 | if (name.includes('eName')) {
69 | tempEducationData["educationTitles"][id] = value;
70 | } else {
71 | tempEducationData["educationDesc"][id] = value;
72 | }
73 | setEducationData({ ...educationData }, tempEducationData)
74 | }
75 | const handleEducationClick = (e) => {
76 | e.preventDefault();
77 | let i = educationCount
78 | ++i;
79 | const template = (
80 | <>
81 |
82 |
83 |
84 |
85 |
86 |
87 | >
88 | )
89 | let arr = educationArrTemplate
90 | arr.push(template)
91 | setEducationArrTemplate(arr)
92 | setEducationCount(i)
93 | }
94 |
95 | // To Add Work Data to the State
96 | const handleChangeWork = (e) => {
97 | const { name, value, id } = e.target
98 | let tempWorkData = workData
99 | if (name.includes('wName')) {
100 | tempWorkData["workTitles"][id] = value;
101 | } else {
102 | tempWorkData["workDesc"][id] = value;
103 | }
104 | setWorkData({ ...workData }, tempWorkData)
105 | }
106 | const handleWorkClick = (e) => {
107 | e.preventDefault();
108 | let i = workCount
109 | ++i;
110 | const template = (
111 | <>
112 |
113 |
114 |
115 |
116 |
117 |
118 | >
119 | )
120 | let arr = workArrTemplate
121 | arr.push(template)
122 | setWorkArrTemplate(arr)
123 | setWorkCount(i)
124 | }
125 |
126 | // To Add Award & Achievement Data to the State
127 | const handleChangeAwards = (e) => {
128 | const { name, value } = e.target
129 | setAwardData({ ...awardData, [name]: value })
130 | }
131 | useEffect(() => {
132 | setThemeData({ ...themeData, personalData, projectData, educationData, workData, awardData })
133 |
134 | }, [themeData, personalData, setThemeData, projectData, educationData, workData, awardData])
135 |
136 | return (
137 | <>
138 |
245 | >
246 | )
247 | }
248 |
249 | export default UserDataCollect
250 |
--------------------------------------------------------------------------------