Download as pdf or txt
Download as pdf or txt
You are on page 1of 50

CV READY

A Mini Project Report


Submitted in Partial Fulfilment for the Award of
BACHELOR OF TECHNOLOGY IN

COMPUTER SCIENCE & ENGINEERING

By
Joshi Anikrutha (16RA1A0513)

Diddiga Harivamshi(16RA1A0512)

Kommuri Pratap Reddy Institute of Technology


Adjacent to NTPC Power Grid, Near Singapore Town Ship, Ghanpur,
Ghatkesar, Telangana 506345
Nov, 2018
Acknowledgement

The satisfaction that accompanies the successful completion of this project would be
in complete without the mention of the people who made it possible, without whose
constant guidance and encouragement would have made efforts go in vain. I consider
myself privileged to express gratitude and respect towards all those who guided us
through the completion of this project.

I convey thanks to my project guide Mr.R.Krishna Nayak, Asst.Prof. of Computer


Science and Engineering Department for providing encouragement, constant support
and guidance which was of a great help to complete this project successfully.

Last but not the least, we wish to thank our parents for financing our studies in this
college as well as for constantly encouraging us to learn engineering. Their personal
sacrifice in providing this opportunity to learn engineering is gratefully
acknowledged.
Abstract

Nowadays students are not having enough knowledge about making their own
Curriculum Vitae and confusing about the proper format of their CV and
companies will not choose the person because of their improper format of CV.
Companies through CV without proper format into the dustbins and rejects the
application of job opportunity because of their improper CV.
Keeping that in mind, we are developing a web application called “CV
READY” which makes students to create their CV in an easy way. All they need
to do is that just input the details of the fields they want to include in their CV in
our application. Our application generates several formats of Curriculum Vitae,
user need to choose one format among them and his/her CV gets generated and
can save into their local memory in PDF format. By this, every student can make
their CV in an easy way and free of cost.
We provide users with several formats and will include the CV
sharing through mail and other sharing media. From this project, we hope to make
a student to make his/her CV in an easy and comfortable way. The main aim of
this project is that CV should not be reason for rejection of one’s job application.
List of Figures

Page.no
1. Introduction
Figure 1. DFD Modelling of Problem .................................................2
2. Function Oriented Design for procedural approach
Figure 2. DFD of Application............................................................. 5
3. GUI Design
Figure 3. Screenshot of Home Page ...................................................... 6
Figure 4. Screenshot of About Page ...................................................... 7
Figure 5. Screenshot of Contact Page................................................... 7
Figure 6. Screenshot of Form ............................................................... 8
Figure 7.Screenshot of Results ............................................................. 8
Table of Contents
Page.no
1. INTRODUCTION ..................................................................................... 1
1.1. Purpose ............................................................................................ 1
1.2. System Overview ............................................................................1
1.3. Problem Statement ..........................................................................1
1.4. DFD Modelling of Problem ............................................................2
1.5. Goal & Vision .................................................................................2
2. REQUIREMENTS SPECIFICATIONS ...................................................3
2.1. User Characteristics ........................................................................ 3
2.2. Functional Requirements ................................................................ 3
2.3. Dependencies.................................................................................. 3
2.4. Performance Requirements .............................................................4
2.5. Hardware Requirements .................................................................. 4
3. DESIGN .....................................................................................................5
3.1. Function Oriented Design for procedural approach ........................ 5
3.2. GUI Design for front-end ............................................................... 6
4. CODING ................................................................................................... 10
5. TESTING .................................................................................................. 41
5.1. Test Plan ......................................................................................... 41
5.2. Test Results .................................................................................... 41
6. END-USER INSTRUCTIONS..................................................................42
7. FUTURE WORK...................................................................................... 43
8. SUMMARY .............................................................................................. 44
9. REFERENCE ............................................................................................ 45
1. Introduction
This section gives a scope description and overview of everything included in
this Project Report. Also, the purpose for this document is described and
system overview along with goal and vision are listed.

1.1. Purpose
The purpose of this document is to give a detailed description of
Curriculum Vitae Project. It will illustrate the purpose and complete
declaration for the development of CV’s of a company. It will also
explain system constraints, interface and interactions with Wikipedia
API. This document is primarily intended to anyone who wants to get
an overview of how our project works its outcomes and possible usages
in future.

1.2. System Overview


Our web application “CV READY” makes students to create their CV
in an easy way. All they need to do is that just input the details of the
fields which user want to include in their CV. our application
automatically generates several professional formats of CV, user needs
to choose one among them and his/her CV gets generated and can save
into their local memory in PDF format.
1.3. Problem Statement

Nowadays students are facing lot of problems in preparation of their


CV’s and confusing about the proper formats of CV. In many cases
CV’s are becoming the main reason for rejection of jobs. To reduce
this problem, we are coming with a web based application called “CV
READY” which enables the user to create their CV’s in a professional
format.

1|Page
1.4. DFD Modelling of Problem
As apparent from the DFD model of problem given on next page, CV
Ready takes the users details in a form. As per the user details, it
generates the CV of the user. User can print it using the print option
provided.

Website FORM GENERATED CV


CVREADY

USE
RRR
R Save it locally

Figure 1. DFD of a Problem

1.5. Goal & Vision


This system aims for creating CV’s in a professional formats and CV
should not become the rejection of one’s job application

2|Page
2. Requirements Specification

2.1. User Characteristics


Users of the system that want to generate their CV of standard format
can use this system.

The web application users interact with this application through a web
browser. This web portal of this application presents a form for a user
and form has several fields: user needs to fill all the required fields
which can be included in CV. On submit the form, application takes
input values, generates the CV on next page.

2.2. Functional Requirements


Actor: User
Input: Feed details as Input
Description: Given that user has access to the system through
the internet. User can provide the text input directly to process
and analyze the result.
Given input generates CV of the default format which is present
in the website in the next page.
2.3. Dependencies

CV is a web portal for a user interaction for front end. There are
many modern frameworks and languages for developing for
frontend. There we used following for developing
1.HTML: HTML stands for Hypertext Markup Language and CSS
stands for Cascading Style Sheets are the crucial technologies for
creating web pages. HTML supplies the structure of the page, and CSS
the layout, for diversity of devices. Together with scripting and
graphics, HTML and CSS are the fundamental of building Web
Applications and Web pages.
HTML provides designers and developers the following facilities,
● To design forms for directing transactions with remote services,
for use in making reservation, searching for information,
ordering products, and others
● Retrieving online information through hypertext links.
● To include video and sound clips, spread sheets, and other
applications straight in their documents
● Designer can publish online documents with text, headings,
tables, photos and others.

3|Page
2. CSS: CSS describes the Web pages presentation, involving
layout, colors, and fonts. It enables the designer to adjust the
presentation to various types of devices, like a small screens, large
screens, or printers.
CSS is separate from HTML, and their separation makes it
easy to preserve and maintain sites, share style sheets across pages,
and accommodate pages to various environment.

2.4. Performance Requirements


Since the system generates the CV from the form in the given format
the CV generates very fast as it uses a CSS template for CV format. The
main required thing for the generation of CV is internet. So internet is
the main parameter here.

2.5. Hardware Requirements


To access a web portal of this application, its only need a
PC/Laptop/Mobile with an integrated and updated web browser.

Desktop browsers: Safari, Chrome, Firefox, Opera, IE9+.


Mobile browsers: Android, Chrome Mobile, iOS Safari.

On the server side, a PC/Web Server which meets these specifications:

1. At least 2 GB RAM and 150 GB Free Space

2. Minimum 15-inch screen size

3. Core duo processor

4|Page
5

3. Design

3.1. Function Oriented Design for procedural approach

USER

Takes information as
input

FORM
PHP file for CV
Generates CV

Retrieves format from


CSS

CV CSS file for format

Figure 2. DFD of Application

5|Page
6

3.2. GUI Design for Front-end

Figure 3-1. Screenshot of Home page.

Figure 3-2. Screenshot of Home page.

6|Page
7

Figure 4. Screenshot of About page.

Figure 5. Screenshot of Contact page.

7|Page
8

Figure 6-1. Screenshot of Form.

Figure 6-2. Screenshot of Form.

8|Page
9

Figure 7. Screenshot of Results

9|Page
10

4. Coding

Home Page Coding:

HTML:

<!DOCTYPE html>
<html lang="zxx">

<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<title>CV Ready | Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="keywords" content="Accrue a Responsive web template, Bootstrap Web
Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG,
SonyEricsson, Motorola web design" />
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);

10 | P a g e
11

}
</script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" media="all">
<link rel="stylesheet" href="css/owl.theme.css" type="text/css" media="all">
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href="css/fontawesome-all.css" rel="stylesheet">
<link
href="//fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,50
0,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=latin-ext"
rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
</head>
<body>
<!--/banner-->
<div class="banner" id="home">
<!-- header -->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light top-header">
<h1 class="logo">
<a class="navbar-brand" href="index.html">
<i class="fab fa-accusoft"></i>
<span>CV Ready</span>
</a>
</h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link ml-lg-0" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
11 | P a g e
12

</li>
<li class="search">
<a class="play-icon popup-with-zoom-anim" href="#small-dialog">
<i class="fas fa-search"></i>
</a>
<div id="small-dialog" class="mfp-hide">
<div class="search-top">
<div class="search-inn">
<form action="#" method="post" class="disply-flex">
<input class="form-control" type="search" name="search" value="Type something..."
onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
<button class="btn2">
<i class="fas fa-search"></i>
</button>
</form>
</div>
<p>CV Ready</p>
</div>
</div>
</li>
</ul>
</div>
</nav>
</header>
<!-- //header -->
<!-- banner-text -->
<div class="slider-content">
<div class="wrapper-slider text-left">
<!-- Slideshow 1 -->
<div class="rslides_container">
<ul class="rslides" id="slider1">
<li>
<div class="banner-info">
<h3>Create Your CV</h3>
<p>Easy and standard CV generator, click on the button to create your CV</p>
</div>
</li>
</ul>
</div>
</div>
<div class="ban-form text-left">
<h5>CV Ready</h5>
<a href="form.html" class="button">Create Now</a>
</div>
<div class="clearfix"></div>
12 | P a g e
13

</div>
</div>
<!-- //banner -->
<!--/bottom-banner-w3layouts-->
<section class="bottom-banner">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 about-img">
</div>
<div class="col-lg-6 about-info text-left">
<div class="ab-info-text">
<h3 class="tittle-wthree text-left">
<span>Some Info</span>About Us</h3>
<div class="service-in text-left mt-5">
<div class="card">
<div class="card-body">
<i class="far fa-clock"></i>
<h5 class="card-title">Easy and Fast</h5>
<p class="card-text">Create your CV just by filling the form and it generates very fastly
</p>
</div>
</div>
</div>

</div>

</div>
</div>
</div>
</section>
<!--//bottom-banner-w3layouts-->
<!--/choose-->
<section class="bottom-banner-w3layouts bg-light py-md-5 py-3">
<div class="container">
<div class="row choose-main py-md-5 py-3">
<div class="col-lg-6 feature text-right">
<h3>
<span>Some Info</span>Why choose us</h3>
<p>We provide standard formats of curriculum vitae, which are accepted by most of the
companies and
our website is very easy to access. </p>
<div class="read inner mt-4">
<!--<a href="single.html" class="btn btn-sm animated-button victoria-two">Read
More</a>-->
</div>
13 | P a g e
14

</div>
<div class="col-lg-6 feature fea-slider text-right">
<img src="images/2.jpg" class="img-fluid rounded" alt="">
</div>
</div>
</div>
</section>
<!--footer -->
<footer>
<div class="container">
<div class="row footer-top">
<div class="col-lg-3 footer-grid-w3ls">
<div class="footer-title">
<h3>About Us</h3>
</div>
<div class="footer-text">
<p>we provide different standard formats of CV and it includes the CV sharing through
mail and other sharing media and it also reduces the confusion about the sequence of details
that you are going to include in your CV.</p>
<div class="social-icon footer text-left mt-4">
<div class="icon-social">
<a href="#" class="button-footr">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="button-footr">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="button-footr">
<i class="fab fa-dribbble"></i>
</a>

</div>
</div>
</div>
</div>
<div class="col-lg-3 footer-grid-w3ls">
<div class="footer-title">
<h3>Get in touch</h3>
</div>
<div class="contact-info">
<h4>Location :</h4>
<p>Ghatkesar,Hyderabad.</p>
<div class="phone">
<h4>Contact :</h4>
<p>Phone : +917671083299</p>
14 | P a g e
15

<p>Email :
<a href="mailto:info@cvready.com">info@cvready.com</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 footer-grid-w3ls">
<div class="footer-title">
<h3>Useful Links</h3>
</div>
<ul class="links">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>

<li>
<a href="contact.html">Contact Us</a>
</li>
</ul>
</div>
<div class="col-lg-3 footer-grid-w3ls">
<div class="footer-title">
<h3>Subscribe</h3>
</div>
<div class="footer-text">
<p>By subscribing to our mailing list you will always get latest news and updates from
us.</p>
<form action="#" method="post">
<input class="form-control" type="email" name="Email" placeholder="Enter your email..."
required="">
<button class="btn1">
<i class="far fa-envelope" aria-hidden="true"></i>
</button>
<div class="clearfix"> </div>
</form>
</div>
</div>
</div>
<div class="copyright mt-4">
<p class="copy-right text-center ">&copy; 2018 Accrue. All Rights Reserved.
<!--<a href="http://w3layouts.com/"> W3layouts </a>-->
</p>
15 | P a g e
16

</div>
</div>
</footer>
<!-- //footer -->
<a href="#home" class="scroll" id="toTop" style="display: block;">
<span id="toTopHover" style="opacity: 1;"> </span>
</a>
<!-- //Custom-JavaScript-File-Links -->
<!-- js -->
<script src="js/jquery-2.2.3.min.js"></script>
<!--slider-->
<script src="js/responsiveslides.min.js"></script>
<script>
$(function () {

// Slideshow 1
$("#slider1").responsiveSlides({
auto: false,
pager: true,
nav: false,
speed: 500,
namespace: "centered-btns"
});

});
</script>
<!--//slider-->
<!--pop-up-box-->
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.magnific-popup.js"></script>
<!--//pop-up-box-->
<script>
$(document).ready(function () {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});

16 | P a g e
17

});
</script>
<!--//search-bar-->

<!-- carousel -->


<script src="js/owl.carousel.js"></script>
<script>
$(document).ready(function () {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 1,
nav: false
},
900: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: true,
loop: false,
margin: 20

}
}
})
})
</script>
<!-- //carousel -->

<!-- //js -->


<script src="js/bootstrap.js"></script>
<!--/ start-smoth-scrolling -->
<script src="js/move-top.js"></script>
<script src="js/easing.js"></script>
<script>
jQuery(document).ready(function ($) {
17 | P a g e
18

$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 900);
});
});
</script>
<script>
$(document).ready(function () {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/

$().UItoTop({
easingType: 'easeOutQuart'
});

});
</script>
<!--// end-smoth-scrolling -->
<!-- jQuery-Photo-filter-lightbox-Gallery-plugin -->
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.quicksand.js"></script>
<script src="js/script.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<!-- //jQuery-Photo-filter-lightbox-Gallery-plugin -->

</body>

</html>

CSS:

html,
body {
margin: 0;
font-size: 100%;
font-family: 'Varela Round', sans-serif;
18 | P a g e
19

background: #fff;
}

body a {
text-decoration: none;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
font-family: 'Varela Round', sans-serif;
}

body img {
width: 100%;
}

a:hover {
text-decoration: none;
}

input[type="button"],
input[type="submit"],
input[type="text"],
input[type="email"],
input[type="search"] {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
font-family: 'Varela Round', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-family: 'Raleway', sans-serif;
letter-spacing: 1px;
}

19 | P a g e
20

p{
margin: 0;
font-size: 0.9em;
color: #8c9398;
line-height: 2em;
letter-spacing: 1px;
}

ul {
margin: 0;
padding: 0;
}

/*--/header --*/

.top-bar_sub .btn-primary {
color: #000;
background-color: #00bce400;
border: 2px solid #00bce4;
font-size: 15px;
letter-spacing: 1px;
}
.top-bar_sub .btn-primary:hover {
color: #fff;
background-color: #00bce4;
border: 2px solid #00bce4;
}

.btn-primary:focus,
.btn-primary.focus,
.btn:focus,
.btn.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
box-shadow: none;
}

span.sub {
font-size: 10px;
vertical-align: top;
background: #fff;
color: #555;
padding: 4px 12px;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.14);
20 | P a g e
21

.top-header {
background: none !important;
}

h1.logo a.navbar-brand {
font-size: 1em;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.36);
color: #fff;
margin: 0;
font-weight: 700;
text-transform: uppercase;
text-align: center;
font-family: 'Raleway', sans-serif;
}

.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
color: rgb(255, 255, 255);
}
a.navbar-brand i {
color: #fff;
}

h1.logo span {
display: block;
font-size: 0.3em;
text-align: center;
letter-spacing: 4px;
font-family: 'Raleway', sans-serif;
}

nav.navbar.navbar-expand-lg.navbar-light {
padding: 2em 3em;
}

.navbar-light .navbar-nav .nav-link,


.dropdown-item {
color: #fff;
font-size: 12px;
letter-spacing: 2px;
margin: 0em 0.5em;
padding: 10px 25px;
border: 2px solid transparent;
21 | P a g e
22

text-shadow: 1px 1px 2px #000000;


font-family: 'Varela Round', sans-serif;
text-transform: uppercase;
border-radius: 4px;
}

.dropdown-item {
margin: 0 !important;
color: #777;
text-transform: capitalize;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.12);
letter-spacing: 1px;
border-bottom: 1px solid #f3f4f5;
}

.dropdown-menu {
background-color: rgb(255, 255, 255);
}
.dropdown-item.active,
.dropdown-item:active {
color: #000;
text-decoration: none;
background-color: #ffffff;
}

.dropdown-item:hover,
.dropdown-item:focus {
color: #16181b;
text-decoration: none;
background-color: #eef0f3;
}

.navbar-light .navbar-nav .show>.nav-link,


.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
color: #ffffff;
text-shadow: 1px 1px 2px #000000;
border: 2px solid #ffffffad;
}

.dropdown-menu {
padding: 0;
}
22 | P a g e
23

/*-- /search --*/

.search i {
color: #fff;
margin: 0.8em 1em;
}

/*-- //header --*/

/*-- /banner --*/


.banner-form {
width: 90%;
margin: 0 auto;
}

.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
}

.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}

.rslides li:first-child {
position: relative;
display: block;
float: left;
}

.rslides img {
display: block;
height: auto;
width: 100%;
border: 0;
}

23 | P a g e
24
.
.rslides {
margin: 0 auto;
}

.rslides_container {
position: relative;
width: 100%;
}

.centered-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 68%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url(../images/arrows.png) no-repeat left 50%;
margin-top: -45px;
}

.centered-btns_nav:active {
opacity: 1.0;
}

.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}

.transparent-btns_nav {

z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 0;
left: 0;
display: block;
background: #fff;
/* Fix for IE6-9 */
24 | P a g e
25

opacity: 0;
filter: alpha(opacity=1);
width: 48%;
text-indent: -9999px;
overflow: hidden;
height: 91%;
}

.transparent-btns_nav.next {
left: auto;
right: 0;
}

.large-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
opacity: 0.6;
text-indent: -9999px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
background: url(../images/arrows.png) no-repeat left 50%;
width: 38px;
}

.large-btns_nav:active {
opacity: 1.0;
}

.large-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;

.centered-btns_nav:focus,
.transparent-btns_nav:focus,
.large-btns_nav:focus {
outline: none;
}
25 | P a g e
26

.centered-btns_tabs,
.transparent-btns_tabs,
.large-btns_tabs {
text-align: center;
position: absolute;
left: 0%;
bottom: -8%;
z-index: 9;
}

.centered-btns_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li {
display: inline;
float: none;
float: left;
margin-right: 15px;
}

.centered-btns_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #fff;
display: inline-block;
_display: block;
width: 12px;
height: 12px;
}

.centered-btns_here a,

.transparent-btns_here a,
.large-btns_here a {
background: rgb(235, 41, 65);
}

.banner {
background: url(../images/banner1.jpg) no-repeat 0px 0px;
26 | P a g e
27

background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
min-height: 800px;
position: relative;
}
.banner-info h3 {
font-size: 5em;
color: #fff;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
}

.banner-info p {
letter-spacing: 2px;
line-height: 1.9em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
font-size: 1.6em;
font-weight: 100;
margin: 1em 0;
color: #fff;
font-family: 'Raleway', sans-serif;
}

/*---*/

.slider-content {
margin: 9% auto 0;
width: 80%;
}

.ban-form {
background: #fff;
padding: 3em;
float: right;
width: 40%;

.ban-form h5 {
color: #636669;
font-size: 1.2em;
letter-spacing: 1px;
27 | P a g e
28

font-weight: 300;
}

.wrapper-slider {
float: left;
width: 55%;
padding: 1em;
}

.ban-form input[type="text"],
.ban-form input[type="email"],
.ban-form input[type="password"] {
width: 100%;
color: #555;
outline: none;
font-size: 0.9em;
padding: 0.9em 1em;
border: 1px solid #e6eae8;
-webkit-appearance: none;
margin-bottom: 0.8em;
letter-spacing: 1px;
background: #f3f4f5;
}

.ban-form input[type=submit] {
color: #FFFFFF;
padding: .8em 1em;
font-size: 1em;
cursor: pointer;
border: 2px solid #EB2941;
outline: none;
background: #EB2941;
width: 100%;
letter-spacing: 2px;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}

.ban-form input[type=submit]:hover {
background: #99D9F3;
28 | P a g e
29

border: 2px solid #99D9F3;


}

/*--*/

/* Global Button Styles */

a.animated-button:link,
a.animated-button:visited {
position: relative;
padding: 12px 30px;
color: #fff;
font-size: 13px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
z-index: 9;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

a.animated-button:link:after,
a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
29 | P a g e
30

a.animated-button:link:hover,
a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}

a.animated-button:link:hover:after,
a.animated-button:visited:hover:after {
height: 450%;
}

/* Victoria Buttons */

a.animated-button.victoria-two {
border: 2px solid #EB2941;
}

a.animated-button.victoria-two:after {
background: #EB2941;
-moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
transform: translateX(-50%) translateY(-50%) rotate(25deg);
}

/*--//banner --*/

/*--team-- */

.team-grid {
width: 100%;
cursor: pointer;
overflow: hidden;
position: relative;
margin-bottom: 2em;
}

.team-img {
position: relative;
}

30 | P a g e
31

.team-img:after {
bottom: 0;
left: 0;
width: 100%;
height: 50%;
content: " ";
position: absolute;
background: rgba(0, 0, 0, 0);
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.team-img img {
display: block;
margin: 0 auto;
text-align: center;
}

.team-info {
left: auto;
bottom: 0;
width: 100%;
padding: 0 20px;
position: absolute;
opacity: 0;
color: #fff;
-webkit-transform: translate3d(0, 10%, 0);
transform: translate3d(0, 10%, 0);
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}

.team-info h4 {
font-size: 22px;
font-weight: 600;
margin: 0 0 10px;
color: #fff;
31 | P a g e
32

.team-info span {
display: block;
font-size: 0.9em;
color: #fff;
letter-spacing: 2px;
}

.team-grid:hover .team-img:after {
background: #EB2941;
transition-duration: 300ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);

.team-grid:hover .team-info {
-webkit-transform: translate3d(0, -5%, 0);
transform: translate3d(0, -5%, 0);
-webkit-transform: translate3d(0, -10%, 0);
transform: translate3d(0, -10%, 0);
}

.team-grid:hover .team-info {
opacity: 1;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}

ul.social-icons li {
list-style-type: none;
}

ul.social-icons li a i {
color: #fff;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
32 | P a g e
33

-ms-transition: all 0.4s;


-o-transition: all 0.4s;
transition: all 0.4s;
border: 1px solid #eee;
width: 35px;
height: 35px;
line-height: 35px;
font-size: 12px;
}

.team-grid i.fab.fa-facebook-f:hover {
background: #3b5998;
border: 1px solid #3b5998;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;

transition: all 0.4s;


}

.team-grid i.fab.fa-twitter:hover {
background: #1da1f2;
border: 1px solid #1da1f2;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}

.team-grid i.fab.fa-google-plus-g:hover {
background: #dd4b39;
border: 1px solid #dd4b39;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}

33 | P a g e
34

Main Code CSS:

div
{
border-radius: 5px;
}
#header
{
position: fixed;
z-index: 1;
height:40px;
width: 98%;
background-color: #668284;
margin-bottom: 10px
}

#name {
float:left;
margin-left: 20px;

padding-bottom: 10px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}

#email{
float:right;
margin-right: 20px;
padding-bottom: 10px;
font-size: 16px;

font-family: Verdana, sans-serif;


color: #ffffff;
}

#contact
{
margin-left:45%;

34 | P a g e
35

padding-bottom: 10px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}

a:hover {
font-weight: bold;
}

.right
{
float: left;
margin-top: 50px;
padding-left:5px;
/*margin-right: -10px;
margin-left: 14%;*/
height: auto;
width: 99%;
background-color: #E3EDD8;
}

/*.left
{
float: left;
margin-top: 50px;
/*margin-right: -90px;
height: relative;
width: 10%;
background-color: #4160E8;
}*/

#footer
{
height:40px;
clear:both;
position: relative;
background-color: #C1E3E1;
}

h3
{
text-decoration: underline;
}

35 | P a g e
36

#job-responsibilities
{
padding: 1px;
}
.job-title
{
font-weight: bold;
}
table
{
border: 1px dashed black;
}
td
{
padding: 2px;
border: 1px solid #E88741;
}

#course-name
{
font-weight:bold;
}

#company-name
{
height:2px;
text-decoration:underline;
}
#job-title
{
height: 5px;
}
.job-duration
{
float:right;
}
#heading
{
font-weight:bold;
}

36 | P a g e
37

Main Code PHP:

<?php

if(!isset($_POST['name'])||!isset($_POST['email'])||!isset($_POST['hl1'])||!isset($_POST['hl
2'])||!isset($_POST['hl3'])||!isset($_POST['hl4']))
header("Location: index.html");
else{
$name=$_POST['name'];
$email=$_POST['email'];
$hl1 = $_POST['hl1'];
$hl2 = $_POST['hl2'];
$hl3 = $_POST['hl3'];
$hl4 = $_POST['hl4'];
$cname = $_POST['cname'];
$jtitle = $_POST['jtitle'];
$jres = $_POST['jres'];
}
?>

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="CSS Template.css">

<title></title>
</head>
<body>
<div id="header">
<p id="name"><?php
echo $name;

?>
</p>

<a href="mailto:.$email." target="_blank"><p id="email"><?php

echo $email;
?></p></a>
</div>
<div class="left">
37 | P a g e
38

</div>
<div class="right">
<h3>CV Highlights</h3>
<p>
<ul>
<li><?php
echo $hl1;
?></li>
<li><?php
echo $hl2;
?></li>
<li><?php
echo $hl3;
?></li>
<li><?php
echo $hl4;
?></li>
</p>
<h3>Professional Experience</h3>
<h4 id="company-name"><?php
echo $cname;
?></h4>
<p id="job-title"><strong><?php
echo $jtitle;
?></strong></p>
<p id="job-responsibilities"><?

echo $jres;
?></p>
</div>
<button onclick="myFunction()">Print this page</button>

<script>
function myFunction() {
window.print();
}
</script>
<div id="footer"></div>
</body>
</html>

38 | P a g e
39

5. Testing
5.1. Test Plan
Unit Testing: Unit testing is a software development process in which
the smallest testable parts of an application, called units, are individually
and independently scrutinized for proper operation. Unit testing is often
automated but it can also be done manually. A unit test is an automated
piece of code that invokes a unit of work in the system and then checks
a single assumption about the behavior of that unit of work.

In this application, a manually written unit test script method is used for
testing function those perform unit amount of work and provides
functionality.

5.2. Test Results

39 | P a g e
40

40 | P a g e
41

6. End-user Instructions
CV Ready provides web Url to users for generating the CV.

1. User need to open cvready.tk website.

2. After opening the website click on create now button in homepage to get started.

3. It redirects to the form page where user need to input his information in the
corresponding fields.

4. After entering the fields click on submit button.

5. Now it generates the CV which can be directly printed using the print option
available there.

41 | P a g e
42

7. Future Work
Some of the possible amendments and improvements in this system are:
● Adding more formats for CV.

● Saving the CV of the users into the database by providing login.

● Giving option to share the CV on social media websites like linkedin.

Adding more format can make users to choose any one format from many
formats and user can generate their CV in their desired format.

By introducing the CV saving into the database by providing login stores


the CV’s of the users so that they can access their CV later at any time.

By giving the option of share to other social media user can share their CV
to a social media website and showcase his CV.

42 | P a g e
43

8. Summary
CV Ready aims to drop the method of typing CV for hours and hours and
improve the speed of creating the CV. CV Ready always aims to make its
users get benefited by using the tool.

Our web application “CV READY” makes students to create their


CV in an easy way. All they need to do is that just input the details of the
fields which user want to include in their CV. our application
automatically generates several professional formats of CV, user needs to
choose one among them and his/her CV gets generated and can save into
their local memory in PDF format.

43 | P a g e
44

9. References
1. www.w3schools.com

2. www.codepen.io

3. www.youtube.com

4. Roger S Pressman, Software engineering A Practitioner’s Approach, sixth edition


McGraw Hill International Edition.
5. Ian Somerville, Software Engineering, seventh edition, Pearson education

6. https://www.cv-library.co.uk/career-advice/cv/how-to-write-a-cv-tips-for-2018/

44 | P a g e

You might also like