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.
Online Resume Builder using Django
To install Django follow these steps .
Starting the Project Folder
To start the project use this command
django-admin startproject core
cd home
To start the app use this command
python manage.py startapp home
Then register the app in settings.py file
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"home",
]
File Structure :
Setting up Necessary files
home/ views.py
The given code in Python handles two web pages: “home” and “gen_resume.” The “home” view renders an HTML template named ‘index.html’ when the user accesses it. The “gen_resume” view is used to generate a resume and handles POST requests containing form data. The view collects data from the POST request and then renders an HTML template named ‘resume.html’ with the collected data passed as context to the template.
Python3
from django.shortcuts import render
def home(request):
return render(request, 'index.html' )
def gen_resume(request):
if request.method = = 'POST' :
name = request.POST.get( 'name' , '')
about = request.POST.get( 'about' , '')
age = request.POST.get( 'age' , '')
email = request.POST.get( 'email' , '')
phone = request.POST.get( 'phone' , '')
skill1 = request.POST.get( 'skill1' , '')
skill2 = request.POST.get( 'skill2' , '')
skill3 = request.POST.get( 'skill3' , '')
skill4 = request.POST.get( 'skill4' , '')
skill5 = request.POST.get( 'skill5' , '')
degree1 = request.POST.get( 'degree1' , '')
college1 = request.POST.get( 'college1' , '')
year1 = request.POST.get( 'year1' , '')
degree2 = request.POST.get( 'degree2' , '')
college2 = request.POST.get( 'college2' , '')
year2 = request.POST.get( 'year2' , '')
college3 = request.POST.get( 'college3' , '')
year3 = request.POST.get( 'year3' , '')
degree3 = request.POST.get( 'degree3' , '')
lang1 = request.POST.get( 'lang1' , '')
lang2 = request.POST.get( 'lang2' , '')
lang3 = request.POST.get( 'lang3' , '')
project1 = request.POST.get( 'project1' , '')
durat1 = request.POST.get( 'duration1' , '')
desc1 = request.POST.get( 'desc1' , '')
project2 = request.POST.get( 'project2' , '')
durat2 = request.POST.get( 'duration2' , '')
desc2 = request.POST.get( 'desc2' , '')
company1 = request.POST.get( 'company1' , '')
post1 = request.POST.get( 'post1' , '')
duration1 = request.POST.get( 'duration1' , '')
lin11 = request.POST.get( 'lin11' , '')
company2 = request.POST.get( 'company2' , '')
post2 = request.POST.get( 'post2' , '')
duration2 = request.POST.get( 'duration2' , '')
lin21 = request.POST.get( 'lin21' , '')
ach1 = request.POST.get( 'ach1' , '')
ach2 = request.POST.get( 'ach2' , '')
ach3 = request.POST.get( 'ach3' , '')
return render(request, 'resume.html' , < 'name' :name,
'about' :about, 'skill5' :skill5,
'age' :age, 'email' :email,
'phone' :phone, 'skill1' :skill1,
'skill2' :skill2, 'skill3' :skill3,
'skill4' :skill4, 'degree1' :degree1,
'college1' :college1, 'year1' :year1,
'college3' :college3, 'year3' :year3,
'degree3' :degree3, 'lang1' :lang1,
'lang2' :lang2, 'lang3' :lang3,
'degree2' :degree2, 'college2' :college2,
'year2' :year2, 'project1' :project1,
'durat1' :durat1, 'desc1' :desc1,
'project2' :project2, 'durat2' :durat2,
'desc2' :desc2, 'company1' :company1,
'post1' :post1, 'duration1' : duration1,
'company2' :company2, 'post2' :post2,
'duration2' : duration2, 'lin11' :lin11,
'lin21' :lin21, 'ach1' :ach1,
'ach2' :ach2, 'ach3' :ach3 >)
return render(request, 'index.html' )
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
font-family: Arial, sans-serif;
.form-container <
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 15px;
.form-group label <
display: block;
font-weight: bold;
.form-group input[type="text"],
.form-group textarea <
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
.form-group textarea <
height: 100px;
/* Apply styles to the skills input elements */
padding: 10px 20px;
display: flex;
padding: 10px 20px;
display: flex;
padding: 5px 20px;
display: flex;
margin: 10px;
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 */
< h1 style = "text-align: center; color:green; font-size:40px; " >GeeksforGeeks h1 >
< form action = "<% url 'resume' %>" method = "post" >%>
< h2 >Personal Information h2 >
< label for = "education1" >Education 1: label >
< label for = "education1" >Education 2: label >
< label for = "education1" >Education 3: label >
< label for = "company1" >Project Title : label >
< label for = "description1" >Description : label >
< label for = "company1" >Project Title : label >
< label for = "description1" >Description : label >
< label for = "experience1" >Experience 1: label >
< label for = "company1" >Company Name : label >
< label for = "description1" >Description : label >
< label for = "experience1" >Experience 2: label >
< label for = "company1" >Company Name : label >
< label for = "description1" >Description : label >
< label for = "experience1" >Achievement : label >
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
box-sizing: border-box;
font-family: montserrat;
background-color: #f5f5f5;
max-width: 800px;
margin: 60px auto;
height: 1100px;
padding: 20px;
box-shadow: 10px 2em 30px rgba(0, 0, 0, 0.3);
text-align: center;
margin-bottom: 5px;
text-transform: uppercase;
font-size: 15px;
font-weight: 500;
display: flex;
flex-wrap: wrap;
padding: 30px;
line-height: 1;
.left ul li <
line-height: 1;
padding: 5px;
color: #584d4d;
margin: 30px 0;
text-decoration: underline;
font-size: 25px;
border-radius: 0 20px 20px 0;
padding: 20px;
margin-bottom: 5px;
.right ul li <
line-height: 1;
margin-left: 43%;
padding: 15px 15px;
font-size: 15px;
font-weight: bold;
background-color: rgb(106, 233, 106);
border-radius: 10px;
< h1 style = "text-align: center; color:green; font-size:40px; " >GeeksforGeeks h1 >
< h2 >Personal Information h2 >
< p >< strong >Phone strong > +91-<> p >
< h2 >Work Experinece h2 >
< p >< strong >Position: strong > <> p >
< p >< strong >Position: strong > <> p >
< h2 >Achievements : h2 >
< button onclick = "generatePDF('mn')" type = "button" class = "btn1" >Download PDF button >
function generatePDF(containerId) <
const container = document.getElementById(containerId);
// Download as PDF
const pdfOptions = <
filename: 'resume.pdf',
html2canvas: < scale: 2 >,
.from(container)
.set(pdfOptions)
.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();
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