Creating GUI
templates/index.html
This HTML code creates a structured form for gathering personal information, skills, educational history, and work experience, and it is styled using CSS for a visually appealing user interface.
HTML
<!DOCTYPE html> < html > < head > < style > body { font-family: Arial, sans-serif; } .form-container { width: 60%; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .form-group { margin-bottom: 15px; } .form-group label { display: block; font-weight: bold; } .form-group input[type="text"], .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } .form-group textarea { height: 100px; } /* Apply styles to the skills input elements */ .om { width: 100%; padding: 10px 20px; display: flex; gap: 10px; } .ed { width: 100%; padding: 10px 20px; display: flex; gap: 4%; } .com { width: 80%; padding: 5px 20px; display: flex; gap: 7%; } .op { margin: 10px; } .btn1 { margin-left: 43%; padding: 15px 15px; font-size: 15px; font-weight: bold; background-color: rgb(35, 144, 208); border-radius: 10px; } /* You can add more styles as needed */ </ style > </ head > < body > < h1 style = "text-align: center; color:green; font-size:40px; " >w3wiki</ h1 > < form action = "{% url 'resume' %}" method = "post" > {% csrf_token %} <!-- ===================PERSONAL INFORMATION====================== --> < div class = "form-container" > < h2 >Personal Information</ h2 > < div class = "form-group" > < label for = "name" >Name:</ label > < input type = "text" id = "name" name = "name" > </ div > < div class = "form-group" > < label for = "name" >About:</ label > < input type = "text" id = "name" name = "about" > </ div > < div class = "form-group" > < label for = "age" >Age:</ label > < input type = "text" id = "age" name = "age" > </ div > < div class = "form-group" > < label for = "email" >Email:</ label > < input type = "text" id = "email" name = "email" > </ div > < div class = "form-group" > < label for = "phone" >Phone:</ label > < input type = "text" id = "phone" name = "phone" > </ div > < div class = "form-group " > < label for = "skills" >Skills:</ label > < div class = "om" > < input type = "text" id = "skills" name = "skill1" > < input type = "text" id = "skills" name = "skill2" > < input type = "text" id = "skills" name = "skill3" > < input type = "text" id = "skills" name = "skill4" > < input type = "text" id = "skills" name = "skill5" > </ div > </ div > <!-- =====================EDUCATION SECTION ================== --> <!-- -----EDUCATION 1----- --> < div class = "form-group" > < label for = "education1" >Education 1:</ label > </ div > < div class = "ed" > < div class = "form-group" > < label for = "degree1" >Degree :</ label > < input type = "text" id = "degree1" name = "degree1" > </ div > < div class = "form-group" > < label for = "college1" >College :</ label > < input type = "text" id = "college1" name = "college1" > </ div > < div class = "form-group" > < label for = "year1" >Year :</ label > < input type = "text" id = "year1" name = "year1" > </ div > </ div > <!-- -----EDUCATION 2----- --> < div class = "form-group" > < label for = "education1" >Education 2:</ label > </ div > < div class = "ed" > < div class = "form-group" > < label for = "degree1" >Degree:</ label > < input type = "text" id = "degree1" name = "degree2" > </ div > < div class = "form-group" > < label for = "college1" >College:</ label > < input type = "text" id = "college1" name = "college2" > </ div > < div class = "form-group" > < label for = "year1" >Year:</ label > < input type = "text" id = "year1" name = "year2" > </ div > </ div > <!-- -----EDUCATION 3----- --> < div class = "form-group" > < label for = "education1" >Education 3:</ label > </ div > < div class = "ed" > < div class = "form-group" > < label for = "degree1" >Degree:</ label > < input type = "text" id = "degree1" name = "degree3" > </ div > < div class = "form-group" > < label for = "college1" >College:</ label > < input type = "text" id = "college1" name = "college3" > </ div > < div class = "form-group" > < label for = "year1" >Year:</ label > < input type = "text" id = "year1" name = "year3" > </ div > </ div > <!-- ================LANGUAGAES======================= --> < div class = "form-group " > < label for = "skills" >Languages :</ label > < div class = "om" > < input type = "text" id = "skills" name = "lang1" > < input type = "text" id = "skills" name = "lang2" > < input type = "text" id = "skills" name = "lang3" > </ div > </ div > <!-- =====================PROJECT SECTION=================== --> <!-- PROJECT 1 --> < div class = "form-group" > < label for = "experience1" >Project 1 :</ label > </ div > < div class = "com" > < div class = "form-group " > < label for = "company1" >Project Title :</ label > < input type = "text" id = "company1" name = "project1" > </ div > < div class = "form-group" > < label for = "post1" >Duration :</ label > < input type = "text" id = "post1" name = "durat1" > </ div > </ div > < div class = "form-group" > < label for = "description1" >Description :</ label > < input type = "text" id = "duration1" name = "desc1" > </ div > <!-- PROJECT 2 --> < div class = "form-group" > < label for = "experience1" >Project 2 :</ label > </ div > < div class = "com" > < div class = "form-group " > < label for = "company1" >Project Title :</ label > < input type = "text" id = "company1" name = "project2" > </ div > < div class = "form-group" > < label for = "post1" >Duration :</ label > < input type = "text" id = "post1" name = "durat2" > </ div > </ div > < div class = "form-group" > < label for = "description1" >Description :</ label > < input type = "text" id = "duration1" name = "desc2" > </ div > <!-- =======================EXPERICNECE SECTION===================== --> < div class = "form-group" > < label for = "experience1" >Experience 1:</ label > </ div > < div class = "com" > < div class = "form-group " > < label for = "company1" >Company Name :</ label > < input type = "text" id = "company1" name = "company1" > </ div > < div class = "form-group" > < label for = "post1" >Post :</ label > < input type = "text" id = "post1" name = "post1" > </ div > < div class = "form-group" > < label for = "duration1" >Duration :</ label > < input type = "text" id = "duration1" name = "duration1" > </ div > </ div > < div class = "form-group " > < label for = "description1" >Description :</ label > < div class = "op" > < input type = "text" id = "duration1" name = "lin11" > </ div > </ div > < div class = "form-group" > < label for = "experience1" >Experience 2:</ label > </ div > < div class = "com" > < div class = "form-group " > < label for = "company1" >Company Name :</ label > < input type = "text" id = "company1" name = "company2" > </ div > < div class = "form-group" > < label for = "post1" >Post :</ label > < input type = "text" id = "post1" name = "post2" > </ div > < div class = "form-group" > < label for = "duration1" >Duration :</ label > < input type = "text" id = "duration1" name = "duration2" > </ div > </ div > < div class = "form-group" > < label for = "description1" >Description :</ label > < input type = "text" id = "duration1" name = "lin21" > </ div > <!-- ==========================ACHIEVEMENT================= --> < div class = "form-group" > < label for = "experience1" >Achievement :</ label > </ div > < div class = "form-group " > < label for = "company1" >First :</ label > < input type = "text" id = "company1" name = "ach1" > </ div > < div class = "form-group" > < label for = "post1" >Second :</ label > < input type = "text" id = "post1" name = "ach2" > </ div > < div class = "form-group" > < label for = "duration1" >Third :</ label > < input type = "text" id = "duration1" name = "ach3" > </ div > < button type = "submit" class = " btn1 " >Submit</ button > </ div > </ form > </ body > </ html > |
templates/resume.html
This HTML code is a structured template for creating a personal resume or CV. Additionally, there’s a JavaScript code snippet at the bottom that defines the myfun
function. This function is responsible for generating and printing the resume when the button is clicked.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Document</ title > </ head > < style > * { box-sizing: border-box; margin: 0; padding: 0; font-family: montserrat; } .container { background-color: #f5f5f5; max-width: 800px; margin: 60px auto; height: 1100px; padding: 20px; box-shadow: 10px 2em 30px rgba(0, 0, 0, 0.3); } .header { text-align: center; } .header h1 { margin-bottom: 5px; } .header h3 { text-transform: uppercase; font-size: 15px; font-weight: 500; } .main { display: flex; flex-wrap: wrap; } .left { flex: 1; padding: 30px; } .left p { line-height: 1; } .left ul li { line-height: 1; } h2 { padding: 5px; color: #584d4d; margin: 30px 0; text-decoration: underline; font-size: 25px; border-radius: 0 20px 20px 0; } .right { flex: 1; padding: 20px; } .right h3 { margin-bottom: 5px; } .right ul li { line-height: 1; } .btn1 { margin-left: 43%; padding: 15px 15px; font-size: 15px; font-weight: bold; background-color: rgb(106, 233, 106); border-radius: 10px; } </ style > < body > < h1 style = "text-align: center; color:green; font-size:40px; " >w3wiki</ h1 > < div id = "mn" class = "container" > < div class = "header" > < br >< br > < h1 >{{name}}</ h1 > < h3 >{{about}}</ h3 > </ div > < div class = "main" > < div class = "left" > < h2 >Personal Information</ h2 > < p >< strong >Name :</ strong >{{name}}</ p > < p >< strong >Age :</ strong >{{age}} </ p > < p >< strong >Email</ strong > {{email}}</ p > < p >< strong >Phone</ strong > +91-{{phone}}</ p > < h2 >Skills</ h2 > < ul > < li >{{skill1}}</ li > < li >{{skill2}}</ li > < li >{{skill3}}</ li > < li >{{skill4}}</ li > < li >{{skill5}}</ li > </ ul > < h2 >Education</ h2 > < h3 >{{degree1}} </ h3 > < p >{{college1}}</ p > < p >{{year1}}</ p > < br > < h3 >{{degree2}} </ h3 > < p >{{college2}}</ p > < p > Year : {{year2}}</ p > < h3 >{{degre3}} </ h3 > < p >{{college3}}</ p > < p > Year : {{year3}}</ p > < h2 >Languages</ h2 > < ul > < li >{{lang1}}</ li > < li >{{lang2}}</ li > < li >{{lang3}}</ li > </ ul > </ div > < div class = "right" > < h2 >Projects</ h2 > < h3 >{{project1}}</ h3 > < p >< strong >Duration :</ strong > {{durat1}}</ p > < ul > < li >{{desc1}}</ li > </ ul > < br > < h3 >{{project2}}</ h3 > < p >< strong >Duration :</ strong > {{durat2}}</ p > < ul > < li >{{desc2}}</ li > </ ul > < h2 >Work Experinece</ h2 > < h3 >{{company1}}</ h3 > < p >< strong >Position:</ strong > {{post1}}</ p > < p >< strong >Duration :</ strong > {{duration1}}</ p > < ul > < li >{{lin11}}</ li > </ ul > < br >< br > < h3 >{{company2}}</ h3 > < p >< strong >Position: </ strong >{{post2}}</ p > < p >< strong >Duration</ strong > {{duration2}}</ p > < ul > < li >{{lin21}}</ li > </ ul > < h2 >Achievements :</ h2 > < ul > < li >{{ach1}}</ li > < li >{{ach2}}</ li > < li >{{ach3}}</ li > </ ul > </ div > </ div > </ div > < button onclick = "generatePDF('mn')" type = "button" class = "btn1" >Download PDF</ button > < script src = "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js" ></ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.0/mammoth.browser.min.js" ></ script > < script type = "text/javascript" > function generatePDF(containerId) { const container = document.getElementById(containerId); // Download as PDF const pdfOptions = { margin: 10, filename: 'resume.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' } }; html2pdf() .from(container) .set(pdfOptions) .outputPdf() .then(function (pdf) { const pdfBlob = new Blob([pdf], { type: 'application/pdf' }); const pdfUrl = URL.createObjectURL(pdfBlob); const pdfLink = document.createElement('a'); pdfLink.href = pdfUrl; pdfLink.download = 'resume.pdf'; pdfLink.click(); }); } </ script > </ body > </ html > |
urls.py
The provided code is configuring URL patterns for a Django web application. It includes mappings for two URLs: the root URL, which is associated with the ‘home’ view rendering the website’s homepage, and a ‘/resume/’ URL, which maps to the ‘gen_resume’ view for generating a resume. These URL patterns make up the application’s routing, allowing users to access specific views based on the URLs they visit. The ‘name’ parameter provides a way to reference these patterns throughout the application.
Python3
from django.contrib import admin from django.urls import path from home.views import * urlpatterns = [ path(' ', home, name = ' home'), path( 'resume/' , gen_resume, name = 'resume' ), path( "admin/" , admin.site.urls), ] |
Deployement of the Project
Run these commands to apply the migrations:
python3 manage.py makemigrations
python3 manage.py migrate
Run the server with the help of following command:
python3 manage.py runserver
Output
Online Resume Builder using Django
In this article, we will create an online resume builder web app. We will start by filling out a form with our personal information. Once the form is completed, we can generate a resume. Additionally, we will ensure the PDF generation quality to make the final result closely resemble the original resume in a professional and proper format. To use this service, you only need to input your information and submit the form.
Contact Us