Scribd
Upload
12 views20 pages

Dolly Final.

This project report outlines the development of a resume builder application designed to help users create professional resumes easily and efficiently. The application features customizable templates, advanced proofreading tools, and a user-friendly interface to cater to various industries and career levels. The goal is to empower job seekers by providing them with the resources needed to craft compelling resumes that stand out in a competitive job market.

Uploaded by

tamebi3678
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views20 pages

Dolly Final.

This project report outlines the development of a resume builder application designed to help users create professional resumes easily and efficiently. The application features customizable templates, advanced proofreading tools, and a user-friendly interface to cater to various industries and career levels. The goal is to empower job seekers by providing them with the resources needed to craft compelling resumes that stand out in a competitive job market.

Uploaded by

tamebi3678
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

ABSTRACT

This project report presents the development of a resume builder application aimed at facilitating individuals in
creating professional resumes efficiently. In today's competitive job market, a well-crafted resume is essential for
standing out to potential employers. However, many individuals encounter challenges in structuring and
formatting their resumes effectively. The resume builder application offers a streamlined process for users to
input their personal, educational, and professional information.
Leveraging modern design principles and intuitive user interface elements, the application guides users through
The primary
each section aimresume,
of their of this project
allowing is them
to develop a user-friendly
to customize layouts,and efficient
fonts, mobile
and styles toapplication that
suit their preferences.
enables users to seamlessly plan and book their trips, including flights, accommodations, and
Additionally, the application incorporates templates tailored for various industries and career levels, ensuring
that users can create
activities, resumes
all within thatplatform.
a single align with their desired roles.

Languages Used:
- HTML
- Css
- Java Script
- PHP
Software Used:
- Visual Studio Code
INTRODUCTION
In the modern job market, crafting an impressive resume is a crucial step towards securing employment
opportunities. A well-structured and professionally formatted resume not only showcases an individual's
qualifications and experiences but also serves as a powerful marketing tool to attract potential employers.
However, the process of creating a standout resume can be daunting and time-consuming, especially for
those unfamiliar with the intricacies of resume writing and design.
To address this challenge, our project endeavors to develop a comprehensive resume builder application.
This application aims to empower individuals with the tools and resources needed to create polished and
compelling resumes effortlessly.
The resume builder application will offer a range of features and functionalities tailored to meet the
diverse needs of job seekers across various industries and career levels. From customizable templates
and formatting options to advanced proofreading and optimization tools, the application will enable
users to craft resumes that effectively highlight their skills, experiences, and achievements.

Moreover, our project places a strong emphasis on accessibility and usability, ensuring that the resume
builder application is accessible to users of all backgrounds and skill levels. Through user testing and
feedback, we aim to refine the application interface and functionality to meet the evolving needs and
preferences of our target audience.
In this project report, we will delve into the development process of the resume builder application,
detailing the design considerations, technical implementation, and testing methodologies employed.
Additionally, we will discuss the potential impact of the application on the job-seeking process and
explore opportunities for future enhancements and iterations.

Overall, our goal is to deliver a robust and user-friendly resume builder application that empowers
individuals to present themselves effectively in the competitive job market. Through innovation and
collaboration, we believe that our project has the potential to make a meaningful difference in the lives
of job seekers worldwide.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>

<nav class = "navbar bg-white">


<div class="container">
<div class = "navbar-content">
<div class = "brand-and-toggler">
<a href = "index.html" class = "navbar-brand">
<img src = "assets/images/curriculum-vitae.png" alt = "" class =
"navbar-brand-icon">
<span class = "navbar-brand-text">build <span>resume.</span>
</a>
<button type = "button" class = "navbar-toggler-btn">
<div class = "bars">
<div class = "bar"></div>
<div class = "bar"></div>
<div class = "bar"></div>
</div>
</button>
</div>
</div>
</div>
</nav>

<header class = "header bg-bright" id = "header">


<div class = "container">
<div class = "header-content text-center">
<h6 class = "text-uppercase text-blue-dark fs-14 fw-6 ls-1">online resume
builder</h6>
<h1 class = "lg-title">Only 2% of resumes make it pas the first round. Be in
the top 2%</h1>
<p class = "text-dark fs-18">Use professional field-tested resume templates
that follow that exact 'resume rules' employers look for. Easy to use and done
within minutes - try now for free!</p>
<a href = "resume.html" class = "btn btn-primary text-uppercase">create my
resume</a>
<img src = "assets/images/dublin-resume-templates.avif">
</div>
</div>
</header>
<div class="section-one">
<div class="container">
<div class = "section-one-content">
<div class="section-one-l">
<img src =
"assets/images/visual-0c7080adf17f1f207276f613447c924f667dab34b7ac415cd7ef653172def
d0b.svg">
</div>
<div class = "section-one-r text-center">
<h2 class = "lg-title">Use the best resume maker as your guide!</h2>
<p class = "text">Getting that dream job can seem like an impossible
task. We're here to change that. Give yourself a real advantage with the best
online resume maker: created by experts, imporved by data, trusted by millions of
professionals.</p>
<div class = "btn-group">
<a href = "resume.html" class = "btn btn-primary text-uppercase">create
my resume</a>
<a href = "#" class = "btn btn-secondary text-uppercase">watch
video</a>
</div>
</div>
</div>
</div>
</div>

<div class = "section-two bg-bright">


<div class="container">
<div class="section-two-content">
<div class = "section-items">
<div class = "section-item">
<div class = "section-item-icon">
<img src =
"assets/images/feature-1-edf4481d69166ac81917d1e40e6597c8d61aa970ad44367ce78049bf83
0fbda5.svg" alt = "">
</div>
<h5 class = "section-item-title">Make a resume that wins interviews!</h5>
<p class = "text">Use our resume maker with its advanced creation tools to
tell professional story that engages recruiters, hiring managers and even CEOs.</p>
</div>

<div class = "section-item">


<div class = "section-item-icon">
<img src =
"assets/images/feature-2-a7a471bd973c02a55d1b3f8aff578cd3c9a4c5ac4fc74423d94ecc04ae
f3492b.svg" alt = "">
</div>
<h5 class = "section-item-title">Resume writing made easy!</h5>
<p class = "text">Resume writing has never been this effortless.
Pre-generated text, visual designs and more - all already integrated into the
resume maker. Just fill in your details.</p>
</div>

<div class = "section-item">


<div class = "section-item-icon">
<img src =
"assets/images/feature-3-4e87a82f83e260488c36f8105e26f439fdc3ee5009372bb5e12d9421f3
2eabdd.svg" alt = "">
</div>
<h5 class = "section-item-title">A recruiter-tested CV maker tool</h5>
<p class = "text">Our resume builder and its pre-generated content are
tested by recruiters and IT experts. We help your CV become truly competitive in
the hiring process.</p>
</div>
</div>
</div>
</div>
</div>

<footer class = "footer bg-dark">


<div class="container">
<div class = "footer-content text-center">
<p class="fs-15">&copy;Copyright 2022. All Rights Reserved -
<span>build.resume</span></p>
</div>
</div>
</footer>

</body>
</html>

@import
url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;
800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;
1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
--clr-blue: #1A91F0;
--clr-blue-mid: #1170CD;
--clr-blue-dark: #1A1C6A;
--clr-white: #fff;
--clr-bright: #EFF2F9;
--clr-dark: #1e2532;
--clr-black: #000;
--clr-grey: #656e83;
--clr-green: #084C41;
--font-poppins: 'Poppins', sans-serif;
--font-manrope: 'Manrope', sans-serif;;
--transition: all 300ms ease-in-out;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

html{
font-size: 10px;
}

body{
font-size: 1.6rem;
font-family: var(--font-poppins);
}

button{
border: none;
background-color: transparent;
outline: 0;
cursor: pointer;
font-family: inherit;
}

img{
width: 100%;
display: block;
}

a{
text-decoration: none;
}

/* fonts */
.font-poppins{font-family: var(--font-poppins);}
.font-manrope{font-family: var(--font-manrope);}

/* text colors */
.text-blue{color: var(--clr-blue);}
.text-blue-mid{color: var(--clr-blue-mid);}
.text-blue-dark{color: var(--clr-blue-dark);}
.text-bright{color: var(--clr-bright);}
.text-dark{color: var(--clr-dark);}
.text-grey{color: var(--clr-grey);}
.text-white{color: var(--clr-white);}

/* backgrounds */
.bg-blue{background-color: var(--clr-blue);}
.bg-blue-mid{background-color: var(--clr-blue-mid);}
.bg-blue-dark{background-color: var(--clr-blue-dark);}
.bg-bright{background-color: var(--clr-bright);}
.bg-dark{background-color: var(--clr-dark);}
.bg-grey{background-color: var(--clr-grey);}
.bg-white{background-color: var(--clr-white);}
.bg-black{background-color: var(--clr-black);}
.bg-green{background-color: var(--clr-green);}

.text-center{ text-align: center;}


.text-left{text-align: left;}
.text-right{text-align: right;}
.text-uppercase{text-transform: uppercase;}
.text-lowercase{text-transform: lowercase;}
.text-capitalize{text-transform: capitalize;}
.text{
color: var(--clr-dark);
opacity: 0.9;
margin: 2rem 0;
line-height: 1.6;
}

.fw-2{font-weight: 200;}
.fw-3{font-weight: 300;}
.fw-4{font-weight: 400;}
.fw-5{font-weight: 500;}
.fw-6{font-weight: 600;}
.fw-7{font-weight: 700;}
.fw-8{font-weight: 800;}

.fs-13{font-size: 13px;}
.fs-14{font-size: 14px;}
.fs-15{font-size: 15px;}
.fs-16{font-size: 16px;}
.fs-17{font-size: 17px;}
.fs-18{font-size: 18px;}
.fs-19{font-size: 19px;}
.fs-20{font-size: 20px;}
.fs-21{font-size: 21px;}
.fs-22{font-size: 22px;}
.fs-23{font-size: 23px;}
.fs-24{font-size: 24px;}
.fs-25{font-size: 25px;}

.ls-1{letter-spacing: 1px;}
.ls-2{letter-spacing: 2px;}

.container{
max-width: 1200px;
margin: 0 auto;
padding: 0 1.6rem;
}
/* bars button */
.bars{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 16.5px;
width: 25px;
}
.bars .bar{
width: 100%;
height: 2px;
background-color: var(--clr-blue);
transition: var(--transition);
}

.bars:hover .bar{
background-color: var(--clr-dark);
}

/* buttons */
.btn{
font-size: 14.5px;
font-weight: 600;
padding: 1.4rem 1.6rem;
border-radius: 4px;
display: inline-block;
}

.btn-primary{
background-color: var(--clr-blue);
color: var(--clr-white);
border: 1px solid var(--clr-blue);
transition: var(--transition);
}

.btn-primary:hover{
background-color: transparent;
color: var(--clr-dark);
border-color: var(--clr-grey);
}

.btn-secondary{
background-color: transparent;
color: var(--clr-dark);
border: 1px solid var(--clr-grey);
transition: var(--transition);
}

.btn-secondary:hover{
background-color: var(--clr-blue);
color: var(--clr-white);
border-color: var(--clr-blue);
}

.btn-group button:first-child, .btn-group a:first-child{


margin-right: 1rem!important;
}

/* navbar part */
.navbar{
height: 80px;
display: flex;
align-items: center;
box-shadow: rgba(0, 0, 0, 0.08) 0px 3px 8px;
}

.navbar .container{
width: 100%;
}

.navbar-brand{
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 1.8rem;
}
.navbar-brand-text{
color: var(--clr-dark);
font-weight: 600;
}
.navbar-brand-text span{
color: var(--clr-blue);
}
.navbar-brand-icon{
width: 25px;
margin-right: 6px;
opacity: 0.8;
}
.brand-and-toggler{
display: flex;
align-items: center;
justify-content: space-between;
}
.header{
min-height: calc(100vh - 80px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.header-content{
max-width: 740px;
margin-right: auto;
margin-left: auto;
}
.header-content img{
max-width: 760px;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
margin-top: 3.2rem;
}
.lg-title{
margin: 1.4rem 0;
font-size: 37px;
line-height: 1.4;
color: var(--clr-dark);
}
.header-content p{
margin-bottom: 2.6rem;
line-height: 1.6;
}

/* section one */
.section-one{
padding: 64px 0;
min-height: 80vh;
display: flex;
align-items: center;
}
.section-one-l img{
max-width: 545px;
margin-right: auto;
margin-left: auto;
}
.section-one-r{
margin-top: 4rem;
}

.section-one .btn-group{
margin-top: 2rem;
}
.section-one-r{
max-width: 545px;
margin-right: auto;
margin-left: auto;
}
.section-one-r .btn-group{
margin-top: 3rem;
}
/* section two */
.section-two{
padding: 64px 0;
}
.section-two .section-items{
display: grid;
gap: 2rem;
}

.section-two .section-item{
max-width: 350px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
.section-two .section-item-icon{
margin: 1rem 0;
}
.section-two .section-item-icon img{
width: 80px;
margin-right: auto;
margin-left: auto;
}
.section-two .section-item-title{
color: var(--clr-blue-dark);
font-size: 1.8rem;
font-weight: 600;
}
.section-two .text{
margin: 0.9rem 0;
}

/* footer */
.footer{
padding: 3rem 0;
}
.footer-content p{
color: var(--clr-grey);
}
.footer-content p span{
color: var(--clr-white);
}

/* media queries */
@media screen and (min-width: 768px){
.section-two .section-items{
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 992px){
.section-one-content{
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 3rem;
}
.section-one-r{
text-align: left;
}
.section-two .section-items{
grid-template-columns: repeat(3, 1fr);
}
.section-two .section-item{
text-align: left;
}
.section-two .section-item-icon img{
margin-left: 0;
}
}

/* resume page */
#about-sc{
padding: 64px 0;
}

.cv-form-row-title{
background-color: var(--clr-dark);
padding: 0.8rem 1.6rem;
margin-bottom: 2rem;
}

.cv-form-row-title h3{
color: var(--clr-white);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 1.7rem;
}
.cv-form-blk{
margin: 3rem 0;
}
.cv-form-row{
padding: 3rem 2rem 0 2rem;
border: 1px solid rgba(0, 0, 0, 0.08);
margin-bottom: 1rem;
position: relative;
}
textarea{
resize: none;
}
.form-elem{
margin-bottom: 3rem;
position: relative;
}
.form-label{
display: block;
font-weight: 600;
font-size: 14px;
color: var(--clr-dark);
margin-bottom: 0.5rem;
}
.form-control{
border-radius: none;
border: 1px solid rgba(0, 0, 0, 0.1);
font-size: 14px;
padding: 0.8rem 1.6rem;
font-family: inherit;
width: 100%;
outline: 0;
transition: var(--transition);
}

.form-control:focus{
border-color: rgba(0, 0, 0, 0.3);
}
.form-text{
color: #ca0b00;
font-size: 12px;
position: absolute;
letter-spacing: 0.5px;
top: calc(100% + 2px);
left: 0;
width: 100%;
}
.cols-3, .cols-2{
display: grid;
}
.repeater-add-btn{
width: 25px;
height: 25px;
background-color: var(--clr-blue-mid);
font-size: 1.6rem;
color: var(--clr-white);
margin: 1rem 0;
}
.repeater-remove-btn{
position: absolute;
top: 10px;
right: 10px;
z-index: 999;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #ca0b00;
color: var(--clr-white);
font-size: 1.6rem;
}

/* preview section */
.preview-cnt{
border-radius: 5px;
display: grid;
grid-template-columns: 32% auto;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
overflow: hidden;
}

.preview-cnt-l{
padding: 3rem 3rem 2rem 3rem;
}
.preview-cnt-r{
padding: 3rem 3rem 3rem 4rem;
}
.preview-cnt-l .preview-blk:nth-child(1){
text-align: center;
}
.preview-image{
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
margin-right: auto;
margin-left: auto;
}
.preview-image img{
width: 100%;
height: 100%;
object-fit: cover;
}
.preview-item-name{
font-size: 2.4rem;
font-weight: 600;
margin: 1.8rem 0;
position: relative;
}
.preview-item-name::after{
position: absolute;
content: "";
bottom: -10px;
width: 50px;
height: 1.5px;
background-color: rgba(255, 255, 255, 0.5);
left: 50%;
transform: translateX(-50%);
}
.preview-blk{
padding: 1rem 0;
margin-bottom: 1rem;
}
.preview-blk-title h3{
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
padding-bottom: 0.5rem;
}
.preview-blk-title{
margin-bottom: 1rem;
}
.preview-blk-list .preview-item{
font-size: 1.5rem;
margin-bottom: 0.2rem;
opacity: 0.95;
}
.preview-cnt-r .preview-blk-title{
color: var(--clr-dark);
}
.preview-cnt-r .preview-blk-list .preview-item{
margin-top: 1.8rem;
}

.achievements-items.preview-blk-list .preview-item span:first-child,


.educations-items.preview-blk-list .preview-item span:first-child,
.experiences-items.preview-blk-list .preview-item span:first-child{
display: block;
font-weight: 600;
margin-bottom: 1rem;
background-color: rgba(0, 0, 0, 0.03);
}

.educations-items.preview-blk-list .preview-item span:nth-child(2),


.experiences-items.preview-blk-list .preview-item span:nth-child(2){
font-weight: 600;
margin-right: 1rem;
}

.educations-items.preview-blk-list .preview-item span:nth-child(3),


.experiences-items.preview-blk-list .preview-item span:nth-child(3){
font-style: italic;
margin-right: 1rem;
}

.educations-items.preview-blk-list .preview-item span:nth-child(4),


.educations-items.preview-blk-list .preview-item span:nth-child(5),
.experiences-items.preview-blk-list .preview-item span:nth-child(4),
.experiences-items.preview-blk-list .preview-item span:nth-child(5){
margin-right: 1rem;
background-color: var(--clr-green);
color: var(--clr-white);
padding: 0 1rem;
border-radius: 0.6rem;
}

.educations-items.preview-blk-list .preview-item span:nth-child(6),


.experiences-items.preview-blk-list .preview-item span:nth-child(6){
font-size: 13.5px;
display: block;
opacity: 0.8;
margin-top: 1rem;
}
.projects-items.preview-blk-list .preview-item span{
display: block;
}

@media screen and (min-width: 768px){


.cols-3{
grid-template-columns: repeat(3, 1fr);
column-gap: 2rem;
}
.cols-2{
grid-template-columns: repeat(2, 1fr);
column-gap: 2rem;
}
}

@media screen and (min-width: 992px){


.cv-form-row{
padding: 3rem 3rem 0rem 3rem;
}
.cols-3{
grid-template-columns: repeat(3, 1fr);
}
}

.print-btn-sc{
margin: 2rem 0 6rem 0;
}
/* print section */
@media print{
body *{
visibility: hidden;
}

.non_print_area{
display: none;
}

.print_area, .print_area *{
visibility: visible;
}

.print_area{
width: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
}

<section class = "print-btn-sc">


<div class = "container">
<button type = "button" class = "print-btn btn btn-primary"
onclick="printCV()">Print CV</button>
</div>
</section
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.6.4.js"
integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
crossorigin="anonymous"></script>
<!-- jquery repeater cdn -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.j
s"
integrity="sha512-bZAXvpVfp1+9AUHQzekEZaXclsgSlAeEnMJ6LfFAvjqYUVZfcuVXeQoN5LhD7Uw0J
y4NCY9q3kbdEXbwhZUmUQ==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<!-- custom js -->
<script src = "assets/js/script.js"></script>
<!-- app js -->
<script src="assets/js/app.js"></script>
</body>
</html>
OUTPUT
CONCLUSION

In conclusion, the development of the resume builder application represents a significant milestone in addressing
the challenges faced by job seekers in crafting compelling resumes. Throughout the project, our team has worked
tirelessly to create a user-friendly and feature-rich application that empowers individuals to present themselves
effectively in the competitive job market.
The resume builder application offers a range of innovative features and functionalities designed to streamline the
resume creation process. From customizable templates and formatting options to advanced proofreading and
optimization tools, the application provides users with the tools they need to create polished and professional
resumes tailored to their unique skills and experiences.
Moreover, our project has prioritized accessibility and usability, ensuring that the resume builder application is
accessible to users of all backgrounds and skill levels. Through rigorous testing and feedback iterations, we have
refined the application interface and functionality to provide a seamless and intuitive user experience.
Overall, the resume builder application stands as a testament to the power of innovation and collaboration in
addressing real-world challenges. By empowering individuals with the tools and resources they need to succeed in
the job market, our project has the potential to make a meaningful difference in the lives of job seekers worldwide.
As we continue to refine and iterate upon the application, we remain committed to our mission of facilitating
career advancement and professional success for all.

You might also like