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 :
File Structure

Note: Developing a resume builder is an excellent way to practice Django. For those looking to expand their knowledge, the Django Web Development Course covers advanced techniques that can help refine your skills.

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.

Python

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

<!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; ">GeeksforGeeks</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; ">GeeksforGeeks</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.

Python

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