├── .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 |
--------------------------------------------------------------------------------
/public/assets/ProjectsBackground.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/assets/SkillsBackground.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/assets/choose.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
85 |
--------------------------------------------------------------------------------
/public/assets/container.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/assets/image.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/assets/print.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/assets/reset.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
45 |
--------------------------------------------------------------------------------
/public/assets/text.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
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 | ?

21 | :

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 | ?
19 | :
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 | ?
19 | :
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 |
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 |
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 |
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 |
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 |
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 |
--------------------------------------------------------------------------------