├── index.php ├── assets ├── favicon.ico ├── default-logo.png ├── favicon-16x16.png ├── favicon-32x32.png ├── apple-touch-icon.png ├── android-chrome-192x192.png └── android-chrome-512x512.png ├── LICENSE ├── README.md ├── styles.css ├── index.js └── index.html /index.php: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Resume_Wizard/HEAD/assets/favicon.ico -------------------------------------------------------------------------------- /assets/default-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Resume_Wizard/HEAD/assets/default-logo.png -------------------------------------------------------------------------------- /assets/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Resume_Wizard/HEAD/assets/favicon-16x16.png -------------------------------------------------------------------------------- /assets/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Resume_Wizard/HEAD/assets/favicon-32x32.png -------------------------------------------------------------------------------- /assets/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Resume_Wizard/HEAD/assets/apple-touch-icon.png -------------------------------------------------------------------------------- /assets/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Resume_Wizard/HEAD/assets/android-chrome-192x192.png -------------------------------------------------------------------------------- /assets/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Resume_Wizard/HEAD/assets/android-chrome-512x512.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Alok Sharma 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Resume Wizard 2 | 3 | Resume Wizard is a web application designed to help users create professional and polished resumes effortlessly. With its user-friendly interface and intuitive design, anyone can easily generate a visually appealing resume in minutes. This repository contains the source code for the Resume Wizard website. 4 | ![image](https://github.com/Alok-2002/Resume_Wizard/assets/93814546/4ce37622-ba24-4bcb-afa5-0f1065ff6234) 5 | 6 | 7 | ## Features 8 | 9 | - User-friendly interface: The website provides a seamless and intuitive experience, guiding users through the resume creation process step by step. 10 | - Resume templates: Choose from a variety of professionally designed resume templates that suit different industries and job roles. 11 | - Dynamic form: The website dynamically generates a form based on the selected template, ensuring that users can easily input their information in the appropriate sections. 12 | - Real-time preview: As users fill out the form, a live preview of the resume is displayed, allowing them to see the changes in real time. 13 | - Download and print: Once the resume is complete, users can download it as a PDF file or print it directly from the website. 14 | - Responsive design: The website is fully responsive, providing a seamless experience across different devices and screen sizes. 15 | 16 | ## Technologies Used 17 | 18 | The Resume Wizard website is built using the following technologies: 19 | 20 | - HTML: Markup language used for structuring the web pages. 21 | - CSS: Stylesheets used for the visual styling and layout of the website. 22 | - JavaScript: Programming language used for the interactive elements and dynamic functionality of the website. 23 | - Vercel: The website is deployed on Vercel, a cloud platform for static sites and serverless functions. 24 | 25 | ## Deployment 26 | 27 | The Resume Wizard website is deployed and hosted on Vercel. You can access it using the following URL: [https://resume-grow.vercel.app/](https://resume-grow.vercel.app/) 28 | 29 | ## Getting Started 30 | 31 | To run the Resume Wizard website locally, follow these steps: 32 | 33 | 1. Clone the repository: 34 | 35 | ```bash 36 | git clone https://github.com/alok-2002/resume-wizard.git 37 | ``` 38 | 39 | 2. Navigate to the project directory: 40 | 41 | ```bash 42 | cd resume-wizard 43 | ``` 44 | 45 | 3. Open the `index.html` file in your preferred web browser. 46 | 47 | That's it! You can now explore the Resume Wizard website and start creating your own professional resumes. 48 | 49 | ## Contributing 50 | 51 | If you would like to contribute to the development of Resume Wizard, please follow these guidelines: 52 | 53 | 1. Fork the repository on GitHub. 54 | 2. Create a new branch with a descriptive name for your feature or bug fix. 55 | 3. Make the necessary changes and additions. 56 | 4. Test your changes to ensure everything works correctly. 57 | 5. Commit your changes and push them to your forked repository. 58 | 6. Submit a pull request describing your changes and improvements. 59 | 60 | ## License 61 | 62 | The Resume Wizard project is licensed under the [MIT License](LICENSE). Feel free to use, modify, and distribute the code as per the terms of the license. 63 | 64 | ## Contact 65 | 66 | If you have any questions, suggestions, or feedback, please feel free to reach out to us. You can contact us via email at [sharmaalok02gwl@gmail.com](mailto:sharmaalok02gwl@gmail.com). 67 | 68 | --- 69 | 70 | ### Thank you for your interest in Resume Wizard! We hope you find it useful for creating impressive resumes. 71 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"); 2 | 3 | * { 4 | font-family: "Open Sans"; 5 | } 6 | 7 | /* #resume-form { 8 | display: none; 9 | } */ 10 | 11 | #resume-template { 12 | display: none; 13 | } 14 | 15 | .background { 16 | background-color: #3a9aff; 17 | } 18 | 19 | .img-logo { 20 | margin-top: 20px; 21 | margin-bottom: 10px; 22 | width: 200px; 23 | height: 200px; 24 | border-radius: 50%; 25 | } 26 | p { 27 | color: white; 28 | } 29 | 30 | .name1, 31 | .address1 { 32 | font-size: 20px; 33 | } 34 | .email1, 35 | .phn1 { 36 | font-size: 18px; 37 | } 38 | .personal { 39 | padding-bottom: 10px; 40 | } 41 | 42 | .hr-row { 43 | color: white; 44 | } 45 | a { 46 | color: white; 47 | text-decoration: none; 48 | max-width: fit-content; 49 | } 50 | .social-head { 51 | color: white; 52 | font-weight: bold; 53 | } 54 | .social { 55 | text-align: left; 56 | padding-top: 20px; 57 | } 58 | 59 | .btn-primary { 60 | color: #02040e; 61 | padding: 15px 0; /* Adjust the vertical padding as needed */ 62 | border-radius: 100px; 63 | background-color: #6baef1; 64 | background-image: radial-gradient( 65 | 93% 87% at 87% 89%, 66 | rgba(0, 0, 0, 0.23) 0%, 67 | transparent 86.18% 68 | ), 69 | radial-gradient( 70 | 66% 87% at 26% 20%, 71 | rgba(255, 255, 255, 0.41) 0%, 72 | rgba(255, 255, 255, 0) 69.79%, 73 | rgba(255, 255, 255, 0) 100% 74 | ); 75 | box-shadow: 2px 19px 31px rgba(0, 0, 0, 0.2); 76 | font-weight: bold; 77 | font-size: 16px; 78 | font-family: Arial, sans-serif; 79 | text-transform: uppercase; 80 | border: 0; 81 | user-select: none; 82 | -webkit-user-select: none; 83 | touch-action: manipulation; 84 | cursor: pointer; 85 | width: 150px; 86 | margin-left: -50px; 87 | margin-top: 25px; 88 | transition: background-color 0.3s ease, transform 0.3s ease; 89 | margin-bottom: 10px; 90 | justify-content: center; 91 | align-items: center; 92 | text-align: center; 93 | } 94 | 95 | .btn-primary:first-child { 96 | margin-top: 25px; 97 | } 98 | 99 | .btn-primary:last-child { 100 | margin-top: 50px; 101 | margin-left: 75px; 102 | } 103 | 104 | .btn-primary:hover { 105 | background-color: #1c2938; 106 | transform: scale(1.05); 107 | color: #6baef1; 108 | } 109 | 110 | .text-center { 111 | color: #000; 112 | } 113 | 114 | .txt { 115 | font: 2.5rem sans-serif; 116 | } 117 | 118 | .btn-add { 119 | color: #02040e; 120 | padding: 15px 0; /* Adjust the vertical padding as needed */ 121 | border-radius: 100px; 122 | background-color: #6baef1; 123 | background-image: radial-gradient( 124 | 93% 87% at 87% 89%, 125 | rgba(0, 0, 0, 0.23) 0%, 126 | transparent 86.18% 127 | ), 128 | radial-gradient( 129 | 66% 87% at 26% 20%, 130 | rgba(255, 255, 255, 0.41) 0%, 131 | rgba(255, 255, 255, 0) 69.79%, 132 | rgba(255, 255, 255, 0) 100% 133 | ); 134 | box-shadow: 2px 19px 31px rgba(0, 0, 0, 0.2); 135 | font-weight: bold; 136 | font-size: 16px; 137 | font-family: Arial, sans-serif; 138 | text-transform: uppercase; 139 | border: 0; 140 | user-select: none; 141 | -webkit-user-select: none; 142 | touch-action: manipulation; 143 | cursor: pointer; 144 | width: 150px; 145 | margin-left: -50px; 146 | margin-top: 25px; 147 | transition: background-color 0.3s ease, transform 0.3s ease; 148 | margin-bottom: 10px; 149 | justify-content: center; 150 | align-items: center; 151 | text-align: center; 152 | margin-left: -10px; 153 | } 154 | 155 | .btn-add:hover { 156 | background-color: #1c2938; 157 | transform: scale(1.05); 158 | color: #6baef1; 159 | } 160 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* console.log('hello'); */ 2 | 3 | function addNewField1() { 4 | let newNode = document.createElement('textarea'); 5 | newNode.classList.add('form-control'); 6 | newNode.classList.add('weField'); 7 | newNode.setAttribute('rows', 3); 8 | newNode.classList.add('mt-2') 9 | 10 | let weOb = document.getElementById('we'); 11 | let weAddButtonOb = document.getElementById('weAddButton'); 12 | 13 | weOb.insertBefore(newNode, weAddButtonOb); 14 | } 15 | 16 | function addNewField2() { 17 | let newNode = document.createElement('textarea'); 18 | newNode.classList.add('form-control'); 19 | newNode.classList.add('edField'); 20 | newNode.setAttribute('rows', 3); 21 | newNode.classList.add('mt-2') 22 | 23 | let edOb = document.getElementById('ed'); 24 | let edAddButtonOb = document.getElementById('edAddButton'); 25 | 26 | edOb.insertBefore(newNode, edAddButtonOb); 27 | } 28 | 29 | function addNewField3() { 30 | let newNode = document.createElement('textarea'); 31 | newNode.classList.add('form-control'); 32 | newNode.classList.add('ceField'); 33 | newNode.setAttribute('rows', 3); 34 | newNode.classList.add('mt-2') 35 | 36 | let ceOb = document.getElementById('ce'); 37 | let ceAddButtonOb = document.getElementById('ceAddButton'); 38 | 39 | ceOb.insertBefore(newNode, ceAddButtonOb); 40 | } 41 | 42 | function generateCv() { 43 | 44 | //name field 45 | let nameField = document.getElementById('nameField').value; 46 | let nameT1 = document.getElementById('nameT1'); 47 | 48 | nameT1.innerHTML = nameField; 49 | document.getElementById('nameT2').innerHTML= nameField; 50 | 51 | //contact field 52 | document.getElementById('contactT').innerHTML = document.getElementById('contactField').value; 53 | 54 | //email field 55 | document.getElementById('emailT').innerHTML = document.getElementById('emailField').value; 56 | 57 | //address field 58 | document.getElementById('addT1').innerHTML = document.getElementById('addressField').value; 59 | 60 | //linkedin field 61 | document.getElementById('lkT').innerHTML = document.getElementById('linkedinField').value; 62 | 63 | //github field 64 | document.getElementById('gitT').innerHTML = document.getElementById('gitField').value; 65 | 66 | //fb field 67 | document.getElementById('fbT').innerHTML = document.getElementById('fbField').value; 68 | 69 | //stack field 70 | document.getElementById('stT').innerHTML = document.getElementById('stField').value; 71 | 72 | //objective field 73 | document.getElementById('objectiveT').innerHTML = document.getElementById('objField').value; 74 | 75 | //work exp 76 | let workExps = document.getElementsByClassName('weField'); //getting obj of weField 77 | let str = '' 78 | 79 | for(let e of workExps) { 80 | str = str + `
  • ${e.value}
    • ` 81 | } 82 | document.getElementById('weT').innerHTML = str; 83 | 84 | //education exp 85 | let eduQua = document.getElementsByClassName('edField'); //getting obj of weField 86 | let str1 = '' 87 | 88 | for(let e of eduQua) { 89 | str1 = str1 + `
  • ${e.value}
    • ` 90 | } 91 | document.getElementById('edT').innerHTML = str1; 92 | 93 | 94 | 95 | //cert 96 | let cerT = document.getElementsByClassName('ceField'); //getting obj of weField 97 | let str2 = '' 98 | 99 | for(let e of cerT) { 100 | str2 = str2 + `
  • ${e.value}
    • ` 101 | } 102 | document.getElementById('cerT').innerHTML = str2; 103 | 104 | document.getElementById('resume-form').style.display = 'none'; 105 | document.getElementById('footer').style.display = 'none'; 106 | document.getElementById('resume-template').style.display = 'block'; 107 | 108 | //Image field 109 | let file = document.getElementById('imgField').files[0]; //getting first(index at 0) file 110 | console.log(file); 111 | let reader = new FileReader(); 112 | 113 | reader.readAsDataURL(file); 114 | 115 | console.log(reader.result); 116 | 117 | //set the image to template 118 | reader.onloadend = function () { 119 | document.getElementById('imgT').src = reader.result; 120 | }; 121 | } 122 | //printCv function 123 | //for printing the pdf we have used CDN from here- https://cdnjs.com/libraries/html2pdf.js 124 | 125 | window.onload = function() { 126 | document.getElementById('downloadCV').addEventListener("click", ()=>{ 127 | const resumePDF = this.document.getElementById("resume-template"); 128 | console.log(resumePDF); 129 | console.log(window); 130 | var opt = { 131 | top: 1, 132 | bottom: 0, 133 | filename: 'myfile.pdf', 134 | image: { type: 'jpeg', quality: 1 }, 135 | html2canvas: { scale: 1 }, 136 | jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }, 137 | pagebreak: { mode: 'css', before: '#resume-template' } 138 | }; 139 | html2pdf().from(resumePDF).set(opt).save(); 140 | }) 141 | } 142 | 143 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Resume Wizard 13 | 14 | 15 | 16 | 17 |
    18 |

    Resume Wizard

    19 |

    Create your Free Resume from this tool.

    20 | 21 |
    22 | 23 |
    24 |

    Personal Information

    25 |
    26 |
    27 | 28 |
    29 | 30 |
    31 |
    32 | 33 | 34 |
    35 | 36 |
    37 | 38 | 39 |
    40 |
    41 | 42 | 43 |
    44 |
    45 | 46 | 47 |
    48 |

    Social Links

    49 |
    50 | 51 | 52 |
    53 |
    54 | 55 | 56 |
    57 |
    58 | 59 | 60 |
    61 |
    62 | 63 | 64 |
    65 |
    66 | 67 |
    68 | 69 |

    Professional Information

    70 |
    71 | 72 | 73 |
    74 | 75 | 76 |
    77 | 78 | 79 | 80 |
    81 | 82 | 86 | 87 |
    88 | 93 |
    94 |
    95 | 96 |
    97 | 98 | 102 | 103 |
    104 | 109 |
    110 |
    111 | 112 | 113 | 114 |
    115 | 116 | 120 | 121 |
    122 | 127 |
    128 |
    129 |
    130 |
    131 | 134 |
    135 |
    136 |
    137 | 138 |
    139 |

    Made with ❤️ by Alok Sharma Open Sourced On

    141 |
    142 | 143 | 144 | 145 |
    146 |
    147 |
    148 | 154 |
    155 |

    Alok Sharma

    156 |

    Gwalior, Madhya Pradesh, India

    157 |

    +91 6261486589

    158 |

    sharmaalok02gwl@gmail.com

    159 |
    160 | 176 |
    177 |
    178 |

    Alok Sharma

    179 |
    180 |
    181 |

    Education Qualification

    182 |
    183 |
    184 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati assumenda iure hic voluptatem reiciendis eum, quas facilis earum exercitationem, accusamus iusto, voluptas ducimus suscipit quae modi. Quod accusantium, illum impedit quaerat voluptatem odio facilis reiciendis obcaecati recusandae minima? Alias, perspiciatis. 185 |
    186 |
    187 |
    188 |
    189 |

    Skills

    190 |
    191 |
    192 |
      193 |
    • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, reprehenderit!
      • 194 |
    • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, reprehenderit!
      • 195 |
    • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, reprehenderit!
      • 196 |
    • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, reprehenderit!
      • 197 |
    198 |
    199 |
    200 |
    201 |
    202 |

    Projects

    203 |
    204 |
    205 |
      206 |
    • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, reprehenderit!
      • 207 |
    • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, reprehenderit!
      • 208 |
    • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, reprehenderit!
      • 209 |
    • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, reprehenderit!
      • 210 |
    211 |
    212 |
    213 |
    214 |
    215 |

    Certifications

    216 |
    217 |
    218 |
      219 |
    • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, reprehenderit!
      • 220 |
    • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, reprehenderit!
      • 221 |
    • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, reprehenderit!
      • 222 |
    • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, reprehenderit!
      • 223 |
    224 |
    225 |
    226 |
    227 |
    228 |
    229 | 232 | 235 |
    236 |
    237 | 238 | 239 | 240 | 241 | 242 | --------------------------------------------------------------------------------