├── .eslintcache ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── assets │ ├── EducationBackground.svg │ ├── PersonalBackground.svg │ ├── ProjectsBackground.svg │ ├── SkillsBackground.svg │ ├── choose.svg │ ├── container.svg │ ├── image.svg │ ├── print.svg │ ├── reset.svg │ ├── text.svg │ └── user.png ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── componets ├── Artboards │ ├── Artboard.module.css │ ├── Artboard1 │ │ ├── Artboard1.js │ │ └── classes.module.css │ ├── Artboard2 │ │ ├── Artboard2.js │ │ └── classes.module.css │ ├── Artboard3 │ │ ├── Artboard3.js │ │ └── classes.module.css │ └── index.js ├── FormContainer │ ├── FormContainer.js │ ├── FormContainer.module.css │ ├── FormSlide │ │ ├── FormSlide.js │ │ ├── FormSlide.module.css │ │ └── ProgressIndicator │ │ │ ├── ProgressIndicator.js │ │ │ └── ProogressIndicator.module.css │ └── Forms │ │ ├── Education.js │ │ ├── Personal.js │ │ ├── Projects.js │ │ ├── Skills.js │ │ └── index.js ├── ScrollBar │ ├── ScrollBar.js │ └── ScrollBar.module.css ├── SideBar │ ├── Items │ │ ├── Item │ │ │ ├── Item.js │ │ │ └── Item.module.css │ │ ├── Items.js │ │ └── Items.module.css │ ├── SideBar.js │ └── SideBar.module.css ├── TemplatePicker │ ├── TemplatePicker.js │ └── TemplatePicker.module.css └── Workspace │ ├── Workspace.js │ └── Workspace.module.css ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js └── setupTests.js /.eslintcache: -------------------------------------------------------------------------------- 1 | [{"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/index.js":"1","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/reportWebVitals.js":"2","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/App.js":"3","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/SideBar/SideBar.js":"4","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/Workspace/Workspace.js":"5","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/SideBar/Items/Items.js":"6","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/FormContainer.js":"7","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/SideBar/Items/Item/Item.js":"8","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/FormSlide/FormSlide.js":"9","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/FormSlide/ProgressIndicator/ProgressIndicator.js":"10","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/Forms/Personal.js":"11","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/Forms/Projects.js":"12","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/Forms/Skills.js":"13","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/Forms/Education.js":"14","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/Forms/index.js":"15","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/TemplatePicker/TemplatePicker.js":"16","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/Artboards/index.js":"17","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/ScrollBar/ScrollBar.js":"18","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/Artboards/Artboard1/Artboard1.js":"19","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/Artboards/Artboard3/Artboard3.js":"20","/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/Artboards/Artboard2/Artboard2.js":"21"},{"size":500,"mtime":499162500000,"results":"22","hashOfConfig":"23"},{"size":362,"mtime":499162500000,"results":"24","hashOfConfig":"23"},{"size":1108,"mtime":1610460863530,"results":"25","hashOfConfig":"23"},{"size":880,"mtime":1610456447648,"results":"26","hashOfConfig":"23"},{"size":1612,"mtime":1610462556453,"results":"27","hashOfConfig":"23"},{"size":9156,"mtime":1610461834505,"results":"28","hashOfConfig":"23"},{"size":2051,"mtime":1610462857679,"results":"29","hashOfConfig":"23"},{"size":411,"mtime":1610443449941,"results":"30","hashOfConfig":"23"},{"size":716,"mtime":1609603181343,"results":"31","hashOfConfig":"23"},{"size":1129,"mtime":1608285665993,"results":"32","hashOfConfig":"23"},{"size":4062,"mtime":1610453828126,"results":"33","hashOfConfig":"23"},{"size":2849,"mtime":1609603194378,"results":"34","hashOfConfig":"23"},{"size":1793,"mtime":1609603190796,"results":"35","hashOfConfig":"23"},{"size":2178,"mtime":1610448777603,"results":"36","hashOfConfig":"23"},{"size":233,"mtime":1609091387599,"results":"37","hashOfConfig":"23"},{"size":771,"mtime":1610391111835,"results":"38","hashOfConfig":"23"},{"size":235,"mtime":1610438237072,"results":"39","hashOfConfig":"23"},{"size":380,"mtime":1610387008176,"results":"40","hashOfConfig":"23"},{"size":2539,"mtime":1610462704735,"results":"41","hashOfConfig":"23"},{"size":2997,"mtime":1610462145930,"results":"42","hashOfConfig":"23"},{"size":2563,"mtime":1610462069467,"results":"43","hashOfConfig":"23"},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},"nrhiwb",{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"49","messages":"50","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"51","messages":"52","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"53","messages":"54","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"55","messages":"56","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"57","messages":"58","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"59","messages":"60","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"61","messages":"62","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"63","messages":"64","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"65","messages":"66","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"67","messages":"68","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"69","messages":"70","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"71"},{"filePath":"72","messages":"73","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"74","messages":"75","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"76","messages":"77","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"78","messages":"79","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"80","messages":"81","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"82","messages":"83","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"84","messages":"85","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},{"filePath":"86","messages":"87","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"46"},"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/index.js",[],["88","89"],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/reportWebVitals.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/App.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/SideBar/SideBar.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/Workspace/Workspace.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/SideBar/Items/Items.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/FormContainer.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/SideBar/Items/Item/Item.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/FormSlide/FormSlide.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/FormSlide/ProgressIndicator/ProgressIndicator.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/Forms/Personal.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/Forms/Projects.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/Forms/Skills.js",[],["90","91"],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/Forms/Education.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/FormContainer/Forms/index.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/TemplatePicker/TemplatePicker.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/Artboards/index.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/ScrollBar/ScrollBar.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/Artboards/Artboard1/Artboard1.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/Artboards/Artboard3/Artboard3.js",[],"/mnt/74B862C0B862808A/Documents/ReactProjects/resume-builder/src/componets/Artboards/Artboard2/Artboard2.js",[],{"ruleId":"92","replacedBy":"93"},{"ruleId":"94","replacedBy":"95"},{"ruleId":"92","replacedBy":"96"},{"ruleId":"94","replacedBy":"97"},"no-native-reassign",["98"],"no-negated-in-lhs",["99"],["98"],["99"],"no-global-assign","no-unsafe-negation"] -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ResumeBuilder with REACT 2 | 3 | Live on [resumebuilder.nishanttheprogrammer.com](https://resumebuilder.nishanttheprogrammer.com) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "resume-builder", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.6", 7 | "@testing-library/react": "^11.2.2", 8 | "@testing-library/user-event": "^12.6.0", 9 | "react": "^17.0.1", 10 | "react-dom": "^17.0.1", 11 | "react-scripts": "4.0.1", 12 | "react-transition-group": "^4.4.1", 13 | "web-vitals": "^0.2.4" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /public/assets/EducationBackground.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/PersonalBackground.svg: -------------------------------------------------------------------------------- 1 | personal_information -------------------------------------------------------------------------------- /public/assets/ProjectsBackground.svg: -------------------------------------------------------------------------------- 1 | project_completed -------------------------------------------------------------------------------- /public/assets/SkillsBackground.svg: -------------------------------------------------------------------------------- 1 | certificate -------------------------------------------------------------------------------- /public/assets/choose.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 18 | 19 | 20 | 21 | 22 | 29 | 30 | 31 | 32 | 33 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /public/assets/container.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/image.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/print.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/assets/reset.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /public/assets/text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 9 | 14 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /public/assets/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NishantTheProgrammer/ResumeBuilder/dfbf62fb367ee47ae10b09406d5cefb445dd340b/public/assets/user.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NishantTheProgrammer/ResumeBuilder/dfbf62fb367ee47ae10b09406d5cefb445dd340b/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | 28 | Resume Builder 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NishantTheProgrammer/ResumeBuilder/dfbf62fb367ee47ae10b09406d5cefb445dd340b/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NishantTheProgrammer/ResumeBuilder/dfbf62fb367ee47ae10b09406d5cefb445dd340b/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | background-color: var(--background-color); 3 | display: flex; 4 | } 5 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { Component} from 'react'; 2 | import './App.css'; 3 | import SideBar from './componets/SideBar/SideBar'; 4 | import Workspace from './componets/Workspace/Workspace'; 5 | 6 | class App extends Component { 7 | 8 | state = { 9 | isInfoFilled: false, 10 | pickedTemplate: null, 11 | } 12 | 13 | 14 | clickHandler = type => { 15 | switch(type) { 16 | case 'reset': 17 | this.setState({ 18 | isInfoFilled: false, 19 | pickedTemplate: null, 20 | }); 21 | break; 22 | case 'choose': 23 | this.setState({ 24 | pickedTemplate: null, 25 | }); 26 | break; 27 | case 'print': 28 | window.print(); 29 | break; 30 | default: 31 | console.error('Something went wrong'); 32 | } 33 | } 34 | 35 | 36 | render() { 37 | 38 | return ( 39 |
40 | 43 | this.setState({pickedTemplate: picked}) } 46 | onInfoFilled={() => this.setState({isInfoFilled: true})} 47 | /> 48 |
49 | ); 50 | } 51 | } 52 | 53 | export default App; 54 | -------------------------------------------------------------------------------- /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/componets/Artboards/Artboard.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 500px; 3 | width: 400px; 4 | background-color: white; 5 | color: black; 6 | height: 850px; 7 | width: 600px; 8 | transform-origin: top; 9 | overflow: scroll; 10 | } -------------------------------------------------------------------------------- /src/componets/Artboards/Artboard1/Artboard1.js: -------------------------------------------------------------------------------- 1 | import { Fragment } from 'react'; 2 | import generalClasses from '../Artboard.module.css'; 3 | 4 | import classes from "./classes.module.css"; 5 | 6 | const Artboard1 = props => { 7 | return ( 8 |
13 | 14 |
15 |

Personal Info

16 | 17 |
18 | { 19 | props.personal && props.personal.image 20 | ? User 21 | : User 22 | } 23 |
24 |

Name: {props.personal?.name}

25 |

Phone: {props.personal?.phone}

26 |

Email: {props.personal?.email}

27 |

Gender: {props.personal?.gender}

28 |

D.O.B.: {props.personal?.dob}

29 |
30 |
31 |
32 |
33 |

Educational

34 |

{props.education?.degree} - {props.education?.university}{props.education?.startDate} to {props.education?.endDate}

35 |

36 |
37 |
38 |

Projects

39 | { 40 | props.projects?.map(project => ( 41 | 42 |

{project?.title}

 43 |

{project.description}

44 | 45 | )) 46 | } 47 |
48 |
49 |

Skills

50 |
    51 | { props.skills?.map(skill =>

  • {skill}

    • )} 52 |
53 |
54 |
55 | ); 56 | } 57 | export default Artboard1; -------------------------------------------------------------------------------- /src/componets/Artboards/Artboard1/classes.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | background-color: yellow; 3 | } 4 | 5 | .container > div { 6 | border: 2px solid; 7 | padding: 20px; 8 | margin: 1em; 9 | } 10 | .infoType { 11 | text-align: center; 12 | font-size: 2.5rem; 13 | } 14 | 15 | .profilePic { 16 | border-radius: 20rem; 17 | display: block; 18 | height: 10rem; 19 | width: 10rem; 20 | margin: 1.5rem; 21 | } 22 | p { 23 | font-size: 1.5rem; 24 | } 25 | 26 | .skills ul li { 27 | border: .1rem solid black; 28 | padding: .5rem 1rem; 29 | margin: .5rem ; 30 | display: inline-block; 31 | } -------------------------------------------------------------------------------- /src/componets/Artboards/Artboard2/Artboard2.js: -------------------------------------------------------------------------------- 1 | import { Fragment } from 'react'; 2 | import generalClasses from '../Artboard.module.css'; 3 | 4 | import classes from "./classes.module.css"; 5 | 6 | const Artboard1 = props => { 7 | return ( 8 |
13 | 14 |
15 |
16 | { 17 | props.personal && props.personal.image 18 | ? User 19 | : User 20 | } 21 |
22 |

{props.personal?.name}

23 | 26 |
27 |
28 | 32 |
33 |
34 |

Skills

35 |
    36 | { props.skills?.map(skill =>
  • {skill}
    • )} 37 |
38 | 39 |
40 |
41 |

Projects

42 | { 43 | props.projects?.map(project => ( 44 | 45 |

{project?.title}

 46 |

{project?.description}

47 | 48 | )) 49 | } 50 |
51 |
52 |

Education

53 |

{props.education?.degree}

54 |

{props.education?.university}

55 | {props.education?.startDate} to {props.education?.endDate} 56 |
57 |
58 | ); 59 | } 60 | export default Artboard1; -------------------------------------------------------------------------------- /src/componets/Artboards/Artboard2/classes.module.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap'); 2 | 3 | .container { 4 | background-color: white; 5 | } 6 | .container > div { 7 | padding: 20px; 8 | margin: 1em; 9 | } 10 | .container .personal { 11 | padding: 0; 12 | } 13 | .personal header { 14 | display: flex; 15 | padding: 2rem; 16 | } 17 | 18 | .personal header div { 19 | display: flex; 20 | flex-grow: 1; 21 | flex-direction: column; 22 | } 23 | header div textarea { 24 | flex-grow: 1; 25 | resize: none; 26 | border: none; 27 | outline: none; 28 | background: transparent; 29 | } 30 | .personal header img { 31 | height: 10rem; 32 | width: 10rem; 33 | border: .1rem solid gray; 34 | border-radius: 1rem; 35 | margin-right: 2rem; 36 | } 37 | .name { 38 | font-size: 3rem; 39 | font-family: 'Ubuntu', sans-serif; 40 | } 41 | .personal ul { 42 | display: flex; 43 | justify-content: space-around; 44 | background-color: #e3e3e3; 45 | padding: 1rem; 46 | } 47 | .personal ul li{ 48 | list-style: none; 49 | font-size: 1.5rem; 50 | } 51 | .personal ul li a{ 52 | color: gray; 53 | } 54 | .personal ul li a i{ 55 | color: #47ae71; 56 | } 57 | .skills ul li { 58 | background-color: #47ae71; 59 | color: white; 60 | font-size: 1.5rem; 61 | padding: .5rem 1rem; 62 | margin-right: 1rem ; 63 | margin-top: 1rem ; 64 | display: inline-block; 65 | border-radius: .5rem; 66 | } -------------------------------------------------------------------------------- /src/componets/Artboards/Artboard3/Artboard3.js: -------------------------------------------------------------------------------- 1 | import { Fragment } from 'react'; 2 | 3 | import generalClasses from '../Artboard.module.css'; 4 | import classes from "./classes.module.css"; 5 | 6 | const Artboard1 = props => { 7 | return ( 8 |
13 | 14 |
15 |
16 | { 17 | props.personal && props.personal.image 18 | ? User 19 | : User 20 | } 21 |
22 |

{props.personal?.name}

23 | 26 |
27 |
28 |
29 | 30 |
31 |
32 | 36 |
37 |

Skills

38 |
    39 | { props.skills?.map(skill =>
  • {skill}
    • )} 40 |
41 | 42 |
43 |
44 |
45 |
46 |

Projects

47 | { 48 | props.projects?.map(project => ( 49 | 50 |

{project?.title}

 51 |

{project?.description}

52 | 53 | )) 54 | } 55 |
56 |
57 |

Education

58 |

{props.education?.degree}

59 |

{props.education?.university}

60 | {props.education?.startDate} to {props.education?.endDate} 61 |
62 |
63 |
64 |
65 | ); 66 | } 67 | export default Artboard1; -------------------------------------------------------------------------------- /src/componets/Artboards/Artboard3/classes.module.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap'); 2 | 3 | .container { 4 | background-color: white; 5 | } 6 | .container > div { 7 | padding: 20px; 8 | margin: 1em; 9 | } 10 | .container .personal { 11 | padding: 0; 12 | } 13 | .personal header { 14 | display: flex; 15 | padding: 2rem; 16 | } 17 | 18 | .personal header div { 19 | background-color: #3cbcae; 20 | border-radius: 1rem; 21 | display: flex; 22 | flex-grow: 1; 23 | padding: 1rem 2rem; 24 | flex-direction: column; 25 | } 26 | 27 | header div textarea { 28 | flex-grow: 1; 29 | resize: none; 30 | border: none; 31 | outline: none; 32 | background: transparent; 33 | } 34 | 35 | .personal header img { 36 | height: 10rem; 37 | width: 10rem; 38 | border: .1rem solid gray; 39 | border-radius: 5rem; 40 | margin-right: 2rem; 41 | } 42 | .name { 43 | font-size: 3rem; 44 | color: white; 45 | font-family: 'Ubuntu', sans-serif; 46 | } 47 | .personal ul { 48 | display: flex; 49 | justify-content: space-around; 50 | background-color: #e3e3e3; 51 | padding: 1rem; 52 | } 53 | .ul li{ 54 | list-style: none; 55 | font-size: 1rem; 56 | } 57 | .ul li a{ 58 | color: gray; 59 | } 60 | .ul li a i{ 61 | color: #47ae71; 62 | } 63 | .skills ul li { 64 | background-color: #3cbcae; 65 | color: white; 66 | font-size: 1rem; 67 | padding: .5rem 1rem; 68 | margin-top: .5rem ; 69 | border-radius: .5rem; 70 | } -------------------------------------------------------------------------------- /src/componets/Artboards/index.js: -------------------------------------------------------------------------------- 1 | import Artboard1 from "./Artboard1/Artboard1"; 2 | import Artboard2 from "./Artboard2/Artboard2"; 3 | import Artboard3 from "./Artboard3/Artboard3"; 4 | 5 | const Artboards = { 6 | Artboard1, 7 | Artboard2, 8 | Artboard3, 9 | }; 10 | export default Artboards; -------------------------------------------------------------------------------- /src/componets/FormContainer/FormContainer.js: -------------------------------------------------------------------------------- 1 | import { Component } from "react"; 2 | 3 | import classes from './FormContainer.module.css'; 4 | import FormSlide from "./FormSlide/FormSlide"; 5 | 6 | 7 | class FormComponent extends Component { 8 | 9 | formClasses = { 10 | personal: 'fas fa-user-shield', 11 | education: 'fas fa-university', 12 | projects: 'fas fa-tasks', 13 | skills: 'fas fa-laptop-code' 14 | } 15 | 16 | state = { 17 | currentFormNumber: 0 18 | } 19 | 20 | progressHandler = data => { 21 | const dataType = Object.keys(this.formClasses)[this.state.currentFormNumber] 22 | const state = {...this.state}; 23 | state[dataType] = data; 24 | this.setState(state); 25 | this.setState(prev => ({currentFormNumber: prev.currentFormNumber + 1})); 26 | }; 27 | 28 | 29 | componentDidUpdate() { 30 | let percent = 100 / (Object.keys(this.formClasses).length - 1) * this.state.currentFormNumber; 31 | document.documentElement.style.setProperty('--progress-line', `linear-gradient(to right, #0b651a ${percent}%, white ${percent}%)`); 32 | } 33 | 34 | updateFormNumberHandler = newFormNumber => { this.setState({currentFormNumber: newFormNumber}) } 35 | 36 | render() { 37 | 38 | let isCompleted = Object.keys(this.formClasses).length <= this.state.currentFormNumber; 39 | if(isCompleted) { 40 | const state = {...this.state}; 41 | delete state.currentFormNumber; 42 | this.props.completed(state); 43 | } 44 | return ( 45 |
46 | { 47 | isCompleted 48 | ?

We're Done

49 | : 55 | } 56 |
57 | ) 58 | } 59 | } 60 | 61 | export default FormComponent; -------------------------------------------------------------------------------- /src/componets/FormContainer/FormContainer.module.css: -------------------------------------------------------------------------------- 1 | .form { 2 | background-color: #252525; 3 | width: 80%; 4 | height: 80%; 5 | border-radius: 1em; 6 | padding: 2em; 7 | display: flex; 8 | flex-direction: column; 9 | align-items: stretch; 10 | font-family: Arial, Helvetica, sans-serif; 11 | position: relative; 12 | transition: all 1s; 13 | overflow-y: scroll; 14 | } 15 | ::-webkit-scrollbar { 16 | display: none; 17 | } 18 | .form h1 { 19 | font-size: 3em; 20 | text-align: center; 21 | } 22 | 23 | .formCompleted { 24 | background-color: #058f1c; 25 | justify-content: center; 26 | align-items: center; 27 | width: 20em; 28 | height: 20em; 29 | border-radius: 10em; 30 | animation: complete 3s ease-out 2s forwards; 31 | } 32 | 33 | @keyframes complete { 34 | 70% { 35 | width: 25em; 36 | height: 25em;; 37 | opacity: 1; 38 | } 39 | 100% { 40 | opacity: 0; 41 | } 42 | } 43 | .formCompleted p { 44 | font-size: 2em; 45 | animation: completeP 1s ease-out 2s forwards; 46 | opacity: 0; 47 | } 48 | 49 | @keyframes completeP { 50 | 100% { 51 | opacity: 1; 52 | } 53 | } -------------------------------------------------------------------------------- /src/componets/FormContainer/FormSlide/FormSlide.js: -------------------------------------------------------------------------------- 1 | import classes from "./FormSlide.module.css"; 2 | import ProgressIndicator from "./ProgressIndicator/ProgressIndicator"; 3 | import Forms from '../Forms'; 4 | 5 | const FormSlide = props => { 6 | let type = null; 7 | if(Object.keys(props.items).length > props.currentFormNumber ) { 8 | type = Object.keys(props.items)[props.currentFormNumber] 9 | } 10 | else return

Here We done

; 11 | 12 | let FormElement = Forms[type.charAt(0).toUpperCase() + type.slice(1)]; 13 | 14 | return ( 15 |
16 |

{type}

17 | 18 | 19 |
20 | ) 21 | } 22 | 23 | export default FormSlide; -------------------------------------------------------------------------------- /src/componets/FormContainer/FormSlide/FormSlide.module.css: -------------------------------------------------------------------------------- 1 | .form { 2 | flex-grow: 1; 3 | padding: 4em; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | } 8 | 9 | .formItem { 10 | font-size: 2em; 11 | max-width: 25em; 12 | display: flex; 13 | justify-content: space-between; 14 | align-items: center; 15 | position: relative; 16 | margin-top: 1em; 17 | width: 100%; 18 | 19 | outline: none; 20 | border: .15em solid aqua; 21 | border-radius: .5em; 22 | } 23 | 24 | .formItem label { 25 | position: absolute; 26 | color: white; 27 | font-size: 1.2em; 28 | left: 1em; 29 | transition: all .5s ease; 30 | top: 50%; 31 | transform: translateY(-50%); 32 | pointer-events: none; 33 | } 34 | .formItem label span { 35 | margin-left: .5em; 36 | } 37 | 38 | .formItem input, .formItem textarea { 39 | padding: .7em 1em; 40 | font-size: 1.2em; 41 | color: white; 42 | background: transparent; 43 | width: 100%; 44 | border: none; 45 | outline: none; 46 | } 47 | 48 | input[type="date"] { 49 | border-width: .15em; 50 | text-align: center; 51 | } 52 | 53 | input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1);} 54 | 55 | input[type='radio'] { 56 | height: 30px; 57 | width: 30px; 58 | margin: .2em; 59 | background-color: blueviolet; 60 | } 61 | 62 | 63 | 64 | 65 | .formItem input:focus + label, 66 | .formItem input:valid + label, 67 | .formItem textarea:focus + label, 68 | .formItem textarea:valid + label { 69 | top: 0; 70 | font-size: .8em; 71 | padding: .3em .6em; 72 | left: 50%; 73 | transform: translate(-50%, -50%); 74 | border-radius: 20px; 75 | background-color: #252525; 76 | border: .15em solid aqua; 77 | } 78 | input[type=number]::-webkit-inner-spin-button, 79 | input[type=number]::-webkit-outer-spin-button { 80 | -webkit-appearance: none; 81 | -moz-appearance: none; 82 | appearance: none; 83 | margin: 0; 84 | } 85 | 86 | .formItem input:focus + label span, 87 | .formItem input:valid + label span, 88 | .formItem textarea:focus + label span, 89 | .formItem textarea:valid + label span { 90 | display: none; 91 | } 92 | button[type='submit'], .submitButton { 93 | margin-top: .5em; 94 | font-size: 3em; 95 | color: white; 96 | background-color: #058f1c; 97 | border: none; 98 | height: 2.5em; 99 | width: 2.5em; 100 | border-radius: 1.25em; 101 | outline: none; 102 | cursor: pointer; 103 | } 104 | 105 | 106 | .formSlide h1 { 107 | text-transform: capitalize; 108 | } 109 | 110 | .skills { 111 | justify-content: flex-start; 112 | padding: 1em; 113 | flex-wrap: wrap; 114 | } 115 | 116 | .skills span { 117 | padding: .5em 1em; 118 | margin: .5em; 119 | border-radius: .3em; 120 | background-image: linear-gradient(45deg, rgb(29 98 189 / 50%), rgb(58 133 41 / 50%)); 121 | overflow: hidden; 122 | position: relative; 123 | cursor: pointer; 124 | animation: opacity 500ms ease forwards; 125 | } 126 | 127 | @keyframes opacity { 128 | 0% { 129 | opacity: 0; 130 | } 131 | 100% { 132 | opacity: 1; 133 | } 134 | 135 | } 136 | 137 | .skills span::after { 138 | position: absolute; 139 | content: '✕'; 140 | background-image: linear-gradient(45deg, rgb(189 29 44), rgb(133 83 41)); 141 | height: 100%; 142 | width: 100%; 143 | left: 0; 144 | top: 0; 145 | opacity: 0; 146 | display: flex; 147 | justify-content: center; 148 | align-items: center; 149 | transition: opacity .4s ease-in-out; 150 | } 151 | 152 | .skills span:hover:after { 153 | opacity: 1; 154 | } -------------------------------------------------------------------------------- /src/componets/FormContainer/FormSlide/ProgressIndicator/ProgressIndicator.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import classes from './ProogressIndicator.module.css'; 4 | 5 | const ProgressIndicator = props => { 6 | return ( 7 |
8 | { 9 | Object.keys(props.items).map((item, index) => { 10 | let specialClass = ''; 11 | if(index < props.currentFormNumber) { 12 | specialClass = classes['done']; 13 | } 14 | else if( index === props.currentFormNumber) { 15 | specialClass = classes['active']; 16 | } 17 | 18 | return ( 19 |
20 | props.updateFormNumber(index)} 23 | > 24 |

{item}

25 |
26 | ) 27 | }) 28 | } 29 | 30 |
31 | ); 32 | } 33 | export default ProgressIndicator; -------------------------------------------------------------------------------- /src/componets/FormContainer/FormSlide/ProgressIndicator/ProogressIndicator.module.css: -------------------------------------------------------------------------------- 1 | 2 | .progressIndicator { 3 | display: flex; 4 | flex-direction: row; 5 | justify-content: space-between; 6 | position: relative; 7 | z-index: 1; 8 | } 9 | 10 | .progressIndicator::before { 11 | content: ''; 12 | height: .2em; 13 | width: 100%; 14 | background-image: var(--progress-line); 15 | position: absolute; 16 | top: 40%; 17 | z-index: -1; 18 | transition: all 2s; 19 | } 20 | 21 | .item { 22 | display: flex; 23 | flex-direction: column; 24 | align-items: center; 25 | } 26 | 27 | .item i { 28 | font-size: 2.5em; 29 | height: 2em; 30 | width: 2em; 31 | padding: .5em; 32 | background-color: var(--workspace-background-color); 33 | display: flex; 34 | justify-content: center; 35 | border-radius: 1em; 36 | cursor: pointer; 37 | transition: all .5s; 38 | } 39 | 40 | .item p { 41 | font-size: 1.2em; 42 | margin-top: .2em; 43 | color: white; 44 | text-transform: capitalize; 45 | } 46 | 47 | 48 | .item i.active { 49 | background-color: #e0940a; 50 | animation: heartBeat 1s infinite; 51 | } 52 | 53 | @keyframes heartBeat { 54 | from { transform: scale(1); } 55 | to { transform: scale(1.1); } 56 | } 57 | .item i.done { 58 | background-color: #0b651a; 59 | } -------------------------------------------------------------------------------- /src/componets/FormContainer/Forms/Education.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const Education = ({classes, ...props}) => { 4 | const [university, setUniversity] = useState(''); 5 | const [degree, setDegree] = useState(''); 6 | const [startDate, setStartDate] = useState(''); 7 | const [endDate, setEndDate] = useState(''); 8 | 9 | 10 | return ( 11 |
12 | 13 |
14 | setUniversity(e.target.value)} 19 | /> 20 | 21 |
22 |
23 | setDegree(e.target.value)} 28 | /> 29 | 30 |
31 |
32 | setStartDate(e.target.value)} 37 | /> 38 | 39 |
40 |
41 | setEndDate(e.target.value)} 46 | /> 47 | 48 |
49 | 55 |
56 | ) 57 | } 58 | 59 | export default Education; -------------------------------------------------------------------------------- /src/componets/FormContainer/Forms/Personal.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const Personal = ({classes, ...props}) => { 4 | const [name, setName] = useState(''); 5 | const [dob, setDob] = useState(''); 6 | const [gender, setGender] = useState('male'); 7 | const [email, setEmail] = useState(''); 8 | const [phone, setPhone] = useState(''); 9 | const [image, setImage] = useState(null); 10 | 11 | 12 | return ( 13 |
e.preventDefault()}> 14 |
15 |
22 | setImage(URL.createObjectURL(e.target.files[0]))} 28 | /> 29 | 30 |
31 |
32 | setName(e.target.value)} 37 | /> 38 | 39 |
40 | 41 |
42 |
43 | setDob(e.target.value)} 48 | /> 49 | 50 |
51 |
52 |
57 | Male setGender('male')} 62 | /> 63 | Female setGender('female')} 68 | /> 69 |
70 | 71 |
72 | 73 |
74 | setEmail(e.target.value)} 79 | /> 80 | 81 |
82 | 83 |
84 | setPhone(e.target.value)} 89 | /> 90 | 91 |
92 | 100 |
101 | ) 102 | } 103 | 104 | export default Personal; -------------------------------------------------------------------------------- /src/componets/FormContainer/Forms/Projects.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const Projects = ({classes, ...props}) => { 4 | 5 | const [projectData, setProjectData] = useState([]); 6 | 7 | const [title, setTitle] = useState(''); 8 | const [description, setDescription] = useState(''); 9 | const [url, setUrl] = useState(''); 10 | 11 | const addProject = () => { 12 | const items = [...projectData]; 13 | items.push({ 14 | title, 15 | description, 16 | url 17 | }); 18 | 19 | setTitle(''); 20 | setDescription(''); 21 | setUrl(''); 22 | setProjectData(items); 23 | } 24 | 25 | const removeProject = index => { 26 | setProjectData(projectData.filter((_, i) => i !== index)) 27 | } 28 | return ( 29 |
{e.preventDefault();}}> 30 |
31 | setTitle(e.target.value)} 35 | required> 36 | 37 |
38 |
39 | 43 | 44 |
45 |
46 | setUrl(e.target.value)} 49 | required> 50 | 51 |
52 | { 53 | projectData.length !== 0 && ( 54 |
55 | 56 | { 57 | projectData.map((item, index) => ( 58 | removeProject(index)} 61 | >{item.title} 62 | )) 63 | } 64 |
65 | ) 66 | } 67 |
68 | 74 | 75 |
76 |
77 | ) 78 | } 79 | 80 | export default Projects; -------------------------------------------------------------------------------- /src/componets/FormContainer/Forms/Skills.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const Skills = ({classes, ...props}) => { 4 | 5 | const [newSkill, setNewSkill] = useState(''); 6 | const [skillsData, setSkills] = useState([]) 7 | 8 | const addItem = event => { 9 | if(event.key === 'Enter') { 10 | newSkill !== '' && setSkills([...skillsData, event.target.value]); 11 | setNewSkill(''); 12 | } 13 | } 14 | 15 | const removeItem = index => { 16 | setSkills(skillsData.filter((_, i) => i !== index)) 17 | } 18 | 19 | 20 | return ( 21 |
{ e.preventDefault();}}> 22 |
23 | setNewSkill(e.target.value)} 29 | /> 30 | 31 |
32 | { 33 | skillsData.length !== 0 && ( 34 |
35 | 36 | { 37 | skillsData.map((item, index) => ( 38 | removeItem(index)} 41 | >{item} 42 | )) 43 | } 44 |
45 | ) 46 | } 47 | 48 | 53 |
54 | ); 55 | } 56 | export default Skills; -------------------------------------------------------------------------------- /src/componets/FormContainer/Forms/index.js: -------------------------------------------------------------------------------- 1 | import Education from "./Education"; 2 | import Personal from "./Personal"; 3 | import Projects from "./Projects"; 4 | import Skills from "./Skills"; 5 | 6 | const Forms = { 7 | Education, 8 | Personal, 9 | Projects, 10 | Skills 11 | }; 12 | export default Forms; -------------------------------------------------------------------------------- /src/componets/ScrollBar/ScrollBar.js: -------------------------------------------------------------------------------- 1 | import classes from './ScrollBar.module.css'; 2 | 3 | const ScrollBar = props => { 4 | return ( 5 |
6 | 13 |
14 | ); 15 | } 16 | export default ScrollBar; -------------------------------------------------------------------------------- /src/componets/ScrollBar/ScrollBar.module.css: -------------------------------------------------------------------------------- 1 | .scrollBar{ 2 | position: fixed; 3 | right: 2rem; 4 | top: 0; 5 | padding: 1rem 2rem; 6 | border-bottom-left-radius: 2rem; 7 | border-bottom-right-radius: 2rem; 8 | background-color: white; 9 | z-index: 999; 10 | } 11 | .scrollBar input { 12 | cursor: pointer; 13 | outline: none; 14 | } -------------------------------------------------------------------------------- /src/componets/SideBar/Items/Item/Item.js: -------------------------------------------------------------------------------- 1 | 2 | import classes from './Item.module.css'; 3 | 4 | const Item = props => { 5 | return ( 6 |
9 | {props.hamburgerOpen ?

{props.name}

: null} 10 | 11 | 12 |
13 | ) 14 | } 15 | 16 | export default Item; -------------------------------------------------------------------------------- /src/componets/SideBar/Items/Item/Item.module.css: -------------------------------------------------------------------------------- 1 | .item { 2 | background-color: gray; 3 | margin: 1em 2em; 4 | font-size: 2em; 5 | border-radius: .5em; 6 | text-align: center; 7 | padding: .7em 0; 8 | text-transform: capitalize; 9 | cursor: pointer; 10 | transition: background-color 300ms ease; 11 | } 12 | .item:hover { 13 | background-color: rgb(165, 165, 165); 14 | } 15 | 16 | .item.close { 17 | margin: 2em .5em; 18 | display: flex; 19 | justify-content: center; 20 | padding: 0; 21 | } 22 | 23 | .item img { 24 | max-width: 2.8em; 25 | } 26 | .item.close img { 27 | width: 60%; 28 | margin: .3em; 29 | } -------------------------------------------------------------------------------- /src/componets/SideBar/Items/Items.js: -------------------------------------------------------------------------------- 1 | import Item from './Item/Item'; 2 | import classes from './Items.module.css'; 3 | 4 | const Items = props => { 5 | const itemsData = [ 6 | ] 7 | 8 | if(props.isInfoFilled) { 9 | itemsData.push({ name: 'reset' }) 10 | if(props.pickedTemplate !== null) { 11 | itemsData.push({ name: 'choose' }) 12 | itemsData.push({ name: 'print' }) 13 | } 14 | } 15 | 16 | return ( 17 |
18 | { itemsData.map(data => props.clickHandler(data.name)} 21 | hamburgerOpen={props.hamburgerOpen} />) } 22 |
23 | ) 24 | } 25 | 26 | export default Items; -------------------------------------------------------------------------------- /src/componets/SideBar/Items/Items.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NishantTheProgrammer/ResumeBuilder/dfbf62fb367ee47ae10b09406d5cefb445dd340b/src/componets/SideBar/Items/Items.module.css -------------------------------------------------------------------------------- /src/componets/SideBar/SideBar.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import Items from './Items/Items'; 3 | import classes from './SideBar.module.css'; 4 | 5 | const SideBar = props => { 6 | const [open, setOpen] = useState(false); 7 | 8 | 9 | return ( 10 |
12 |
13 | { open &&

Resume Builder

} 14 |
setOpen(!open)} 17 | > 18 |
19 |
20 | 25 |
26 | ) 27 | } 28 | 29 | export default SideBar; -------------------------------------------------------------------------------- /src/componets/SideBar/SideBar.module.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Pacifico&display=swap'); 2 | .sidebar { 3 | height: 100vh; 4 | width: 30em; 5 | background-color: var(--sidebar-background-color); 6 | transition: width .5s ease; 7 | overflow-y: scroll; 8 | flex-shrink: 0; 9 | z-index: 999; 10 | } 11 | .sidebar::-webkit-scrollbar { 12 | display: none; 13 | } 14 | 15 | .sidebar.close { 16 | width: 9em; 17 | } 18 | .sidebar header { 19 | display: flex; 20 | align-items: center; 21 | padding: 2em; 22 | justify-content: flex-end; 23 | } 24 | 25 | 26 | 27 | .sidebar header h1 { 28 | font-weight: bolder; 29 | font-family: 'Pacifico', cursive; 30 | font-size: 2.8rem; 31 | white-space: nowrap; 32 | margin-right: auto; 33 | color: var(--pink); 34 | } 35 | 36 | .sidebar header h1.open { 37 | width: 100%; 38 | } 39 | 40 | 41 | 42 | .hamburger { 43 | background-color: var(--pink); 44 | font-size: 2em; 45 | height: 2.4em; 46 | width: 2.4em; 47 | border-radius: 5em; 48 | display: flex; 49 | align-items: center; 50 | justify-content: center; 51 | cursor: pointer; 52 | transition: all .3s; 53 | flex-shrink: 0; 54 | } 55 | .hamburger:hover { 56 | box-shadow: 0 0 .5em black; 57 | } -------------------------------------------------------------------------------- /src/componets/TemplatePicker/TemplatePicker.js: -------------------------------------------------------------------------------- 1 | import Artboards from '../Artboards'; 2 | import classes from './TemplatePicker.module.css'; 3 | 4 | const TemplatePicker = props => { 5 | 6 | const ArtboardList = []; 7 | Object.keys(Artboards).forEach(key => { 8 | let Artboard = Artboards[key] 9 | ArtboardList.push( 10 |
11 | props.onSetArtboard(key)}/> 12 |
13 | ) 14 | }) 15 | return ( 16 |
17 |

Pick a template

18 |
19 | { ArtboardList } 20 |
21 |
22 | ); 23 | } 24 | export default TemplatePicker; -------------------------------------------------------------------------------- /src/componets/TemplatePicker/TemplatePicker.module.css: -------------------------------------------------------------------------------- 1 | .templatePicker { 2 | display: flex; 3 | flex-direction: column; 4 | height: 100%; 5 | justify-content: space-between; 6 | align-items: center; 7 | } 8 | .templatePicker h1 { 9 | font-size: 3rem; 10 | margin: 5rem; 11 | } 12 | 13 | .templatePicker .list { 14 | background-color: #252525; 15 | border-radius: 2rem; 16 | width: 90%; 17 | flex-grow: 1; 18 | display: flex; 19 | flex-wrap: wrap; 20 | overflow-y: scroll; 21 | } -------------------------------------------------------------------------------- /src/componets/Workspace/Workspace.js: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | import Artboards from '../Artboards'; 3 | import FormContainer from '../FormContainer/FormContainer'; 4 | import ScrollBar from '../ScrollBar/ScrollBar'; 5 | import TemplatePicker from '../TemplatePicker/TemplatePicker'; 6 | import classes from './Workspace.module.css'; 7 | 8 | 9 | class Workspace extends Component { 10 | 11 | state = { 12 | zoom: 100, 13 | } 14 | 15 | 16 | 17 | render() { 18 | const Artboard = this.props.state.pickedTemplate !== null ? Artboards[this.props.state.pickedTemplate] : null; 19 | 20 | 21 | return ( 22 |
23 | { 24 | !this.props.state.isInfoFilled 25 | ? setTimeout(() => { 27 | this.props.onInfoFilled(); 28 | this.setState({ userInfo }) 29 | }, 5000)} /> // after animation done 30 | : (this.props.state.pickedTemplate === null) 31 | ? 32 | : ( 33 | <> 34 | this.setState({zoom: e.target.value})}/> 35 | 36 | 37 | ) 38 | } 39 |
40 | ); 41 | } 42 | } 43 | 44 | export default Workspace -------------------------------------------------------------------------------- /src/componets/Workspace/Workspace.module.css: -------------------------------------------------------------------------------- 1 | .workspace { 2 | flex-grow: 1; 3 | background-color: var(--workspace-background-color); 4 | color: white; 5 | padding: 2em; 6 | position: relative; 7 | } 8 | 9 | .workspace.noElement { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | overflow: scroll; 14 | } 15 | 16 | .workspace.noElement > h1 { 17 | font-size: 2em; 18 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: inherit; 7 | font-style: inherit; 8 | } 9 | 10 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;1,500&display=swap'); 11 | 12 | html { 13 | font-size: 62.5%; 14 | } 15 | 16 | body { 17 | box-sizing: border-box; 18 | background-color: var(--blue); 19 | font-family: 'Poppins', sans-serif; 20 | overflow: hidden; 21 | } 22 | :root { 23 | --workspace-background-color: #1b1a1c; 24 | --sidebar-background-color: #2b2530; 25 | --pink: pink; 26 | --progress-line: linear-gradient(to right, #0b651a 0%, white 0%); 27 | } 28 | @page { 29 | size: A4; 30 | margin: 0; 31 | } 32 | @media print { 33 | * { 34 | visibility: hidden !important; 35 | } 36 | #section-to-print, #section-to-print * { 37 | visibility: visible !important; 38 | } 39 | #section-to-print { 40 | position: absolute; 41 | left: 0; 42 | top: 0; 43 | } 44 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | --------------------------------------------------------------------------------