DEPARTMENT OF ELECTRONICS AND COMMUNICATION

ENGINEERING

23ITR202 – WEB TECHNOLOGY

ASSIGNMENT II
(Mini Project)

RESUME GENERATING SYSTEM

Submitted by
717825L362–VISHAL H
717825F226–KESAVARAJ A
717825I317–HARIVISHNU S
717825I334–NAVADEEP M

APRIL – 2026
Department of ELECTRONICS AND
COMMUNICATION ENGINEERING

ACADEMIC YEAR: 2025-26

Name & Register No of the Candidate: VISHAL H & 717825L362
Course Code & Title: 23ITR202 & WEB TECHNOLOGY
Date of Issue: 30.01.2026 Date of Submission:
Year/Dept./Sem/Section: I/ECE/II/C
Assignment: II (Mini Project)

Reference(s):

Marks Details
Total
Q. No 1
(100)
CO3 CO4 CO5
COs
(20) (40) (40)
Marks
Obtained

Course In-charge
 TABLE OF CONTENTS
ABSTRACT

1. INTRODUCTION

1.1. OBJECTIVE

2. REQUIREMENTS SPECIFICATION

2.1. REQUIREMENTS

3. DETAILED DESIGN

3.1. HTML, CSS PROPERTIES, JAVASCRIPT USED AND DESCRIPTION

4. PROJECT IMPLEMENTATION (SCREEN SHOTS)

5. CONCLUSION

2
 ABSTRACT

The Dynamic Resume Generator is a sophisticated front-end web application developed to

bridge the gap between complex document formatting and user-centric data entry. In the

contemporary recruitment landscape, the structural integrity and aesthetic clarity of a

Curriculum Vitae (CV) significantly influence candidate selection; however, manual formatting

often leads to inconsistencies. This project implements a robust client-side architecture using

HTML5, CSS3, and ES6+ JavaScript to provide an instantaneous, "What You See Is What

You Get" (WYSIWYG) experience for the user.

A significant technical milestone of this system is its serverless data handling approach. By

utilizing the FileReader API, the application processes high-resolution profile imagery locally

within the browser’s memory, bypassing the need for expensive back-end storage or database

management while maintaining user privacy. To ensure the production of high-quality data, the

system employs an advanced validation layer built on Regular Expressions (RegEx), which

sanitizes inputs for critical fields such as email structures and ten-digit contact information before

the document generation phase.

The output module leverages Dynamic DOM Manipulation to construct a secondary document

object in a new browser context, which is then styled for physical output using CSS Media Queries

(@media print). This ensures that the resulting resume adheres to professional print standards,

including optimized margins and font scaling.

3
 INTRODUCTION

The digital era has fundamentally transformed how professional identities are
presented to potential employers. A Curriculum Vitae (CV) or resume is no
longer just a document; it is a critical marketing tool that serves as the first point
of contact between a candidate and an organization. However, many job seekers,
particularly students and freshers,struggle with the complexities of document
formatting, alignment, and structural standards. The Dynamic Resume
Generator is developed to address these challenges by providing a structured,
automated, and user-friendly platform for professional resume creation.

This project focuses on the "What You See Is What You Get" (WYSIWYG)
principle, where the user inputs data into a clean, intuitive web form and receives
a perfectly formatted document in real-time. Unlike traditional word processors
that require manual adjustment of margins and fonts, this system uses predefined
CSS layouts to ensure every generated resume meets industry standards. By
utilizing client-side technologies like HTML5, CSS3, and JavaScript, the
application provides a high-speed experience without the latency associated with
server-side processing. This approach also enhances data security, as the user's
personal information is processed locally within the browser context and is not
stored on external servers.

4
 OBJECTIVE

The primary goal of this project is to architect and implement a high-performance web
application that automates the professional document creation process. The specific
objectives are outlined below:

● Automation of Professional Formatting: To eliminate the manual labor involved in

document styling by providing a predefined, industry-standard CSS layout that
automatically maps user data to a professional resume structure.
● Client-Side Efficiency and Privacy: To utilize the FileReader API for processing
profile imagery locally, ensuring that user data is processed entirely within the
browser context without the need for external server communication or database
storage.
● Robust Data Validation: To implement a rigorous validation layer using JavaScript
Regular Expressions (RegEx) to verify the structural integrity of critical inputs, such
as email formats and phone numbers, before document generation occurs.
● Dynamic Document Rendering: To enable real-time document creation by
leveraging Dynamic DOM Manipulation, allowing the system to open a secondary
browser context and populate it with a "print-ready" version of the user's data.
● Seamless Output Generation: To provide an integrated "Print to PDF" functionality
that utilizes CSS Media Queries (@media print) to optimize the final document
for physical output, ensuring margins and font scales are preserved for professional
use.
● User Accessibility: To design an intuitive, single-page interface (SPI) that allows
users with varying technical backgrounds to generate a comprehensive resume—
including education, skills, and projects—in under two minutes

5
 REQUIREMENT SPECIFICATIONS

2.1. Functional Requirements

● User Input Management: The system must provide specific fields for personal data,
educational history, professional experience, and technical skills.
● Dynamic Image Processing: The application must allow users to upload a profile
photo and render it instantly within the document using the FileReader API.
● Real-time Validation: Critical fields such as Email and Phone Number must be
validated using Regular Expressions (RegEx) to prevent formatting errors.
● Document Generation: Upon submission, the system must open a new browser
window containing the populated resume, styled for professional presentation.
● Print Functionality: The system must include a dedicated print trigger that utilizes
the browser's native print-to-PDF capabilities while hiding non-essential UI elements.

2.2. Non-Functional Requirements

● Performance: The resume generation process should be near-instantaneous (under 2

seconds) since all logic is client-side.
● Usability: The interface must be responsive and accessible, ensuring that users with
varying levels of technical expertise can navigate the form easily.
● Compatibility: The application must function consistently across all modern web
browsers including Chrome, Firefox, and Safari.
● Privacy: No user data should be transmitted to a backend; all information must remain
within the local browser session.

6
 DETAILED DESIGN

3.1. System Architecture

The architecture of the Dynamic Resume Generator follows a decoupled Front-End design
pattern where the data management, logical processing, and document rendering are handled
entirely within the client-side environment. This ensures zero latency and maximum data
privacy.

7
● User Interface Layer (HTML5): This layer acts as the entry point for all user data. It
utilizes a structured table-based layout to maintain alignment and readability across
various input types, including text, dates, emails, and file uploads.
● Style and Layout Layer (CSS3): This layer manages the aesthetics of the form and
the final resume. It includes specific rules for typography, spacing, and a responsive
background gradient.
● Logic and Processing Layer (JavaScript): The "brain" of the application. It handles
event listeners, performs asynchronous file reading, validates strings via Regular
8
 Expressions, and manages the creation of the final document object.

3.2. Technical Module Description

3.2.1. Input Validation Module (RegEx Engine) Data integrity is maintained through a series of

pattern-matching algorithms. The system does not allow the generation of a resume until the
following criteria are met:

● Name Validation: Ensures only alphabetical characters and spaces are accepted.
● Email Validation: Uses a complex pattern (/^[^\s@]+@[^\s@]+\.[^\s@]+
$/) to verify the presence of a username, the "@" symbol, a domain, and a top-level
domain.
● Phone Validation: Restricts input to exactly ten numerical digits, which is essential
for professional contact standards.

3.2.2. Asynchronous Image Processing (FileReader API) One of the most advanced
features of this project is the handling of profile photos. Instead of uploading the image to a
server, the system uses the FileReader object to read the file from the user's local disk as
a DataURL. This encoded string is then injected directly into the <img> tag of the generated
resume, allowing for high-resolution photo display without any backend infrastructure.

3.2.3. Dynamic Document Generation Upon clicking "Generate Resume," the system
executes the following steps:

1. Data Extraction: Values are pulled from the DOM elements using
[Link].
2. String Parsing: Multi-value inputs, such as "Skills," are converted from comma-
separated strings into HTML list items (<li>) using the .split() and .map()
methods.
3. Context Switching: A new browser window is opened using [Link]("",

9
 "_blank").
4. Buffer Injection: The pre-constructed HTML/CSS string is written into the new
window's document stream via [Link]().

Property Implementation Purpose

Detail

@media print Custom CSS Automatically

rules for print hides buttons
output. and adjusts
margins for
the PDF
version.

object-fit: cover Applied to the Ensures that

profile image the user's
container. uploaded
photo fills the
circular frame
without
distortion.

background-attachment Set to fixed in Keeps the

the body aesthetic
selector. gradient
stationary
while the user
scrolls through
the form.

10
border-collapse Set to collapse Provides the
for the form professional,
table. thin-lined grid
seen in the
data entry
form.

box-shadow Applied to the Provides a

#resumeOutput 10px blurred
shadow to
container. give the
resume a
"floating
paper" effect.

[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Resume Generator | Record Version</title>
<style>
/* General Body Styling */

11
 body {
margin: 0;
padding: 20px;
font-family: 'Times New Roman', Times, serif;
background-color: #f0e68c; /* Fallback color */
background-image: url("soft-golden-yellow-blending-into-warm-orange-for-a-smooth-
[Link]");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

/* Form Table Styling */

table {
background-color: #f8f4f1;
border-collapse: collapse;
border: 3px solid black;
width: 700px;
margin: auto;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

td {
padding: 12px;
font-size: 14px;
font-weight: bold;
}

12
/* Input Element Styling */
input, select, textarea {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
font-family: Arial, sans-serif;
}

textarea {
resize: vertical;
}

/* Header Styling */
#head {
background-color: #c0bab6;
color: white;
text-align: center;
padding: 20px;
}

#head h2 {
margin: 0;
letter-spacing: 2px;
text-transform: uppercase;
}

/* Button Styling */
13
 .submit-btn {
background-color: #c0bab6;
color: white;
border: none;
cursor: pointer;
font-size: 18px;
padding: 15px;
width: 60%;
transition: background 0.3s;
font-weight: bold;
text-transform: uppercase;
}

.submit-btn:hover {
background-color: #a89f99;
}

.gender-box input {
width: auto;
margin-right: 5px;
}
</style>
</head>
<body>

<form id="resumeForm" onsubmit="[Link](); generateResume();">

<table>
<tr>
<td colspan="3" id="head">
14
 <h2>Resume Creation Form</h2>
</td>
</tr>

<tr>
<td>PHOTO</td>
<td>:</td>
<td><input type="file" id="photo" accept="image/*"></td>
</tr>

<tr>
<td>NAME</td>
<td>:</td>
<td><input type="text" id="name" placeholder="Enter Full Name" required></td>
</tr>
<tr>
<td>EMAIL</td>
<td>:</td>
<td><input type="email" id="email" placeholder="example@[Link]"
required></td>
</tr>
<tr>
<td>DATE OF BIRTH</td>
<td>:</td>
<td><input type="date" id="dob" required></td>
</tr>
<tr>
<td>PHONE NUMBER</td>
<td>:</td>
15
 <td><input type="tel" id="phone" placeholder="10 Digit Mobile Number"
required></td>
</tr>
<tr>
<td>GENDER</td>
<td>:</td>
<td class="gender-box">
<input type="radio" name="gender" value="Male" required> Male
<input type="radio" name="gender" value="Female"> Female
</td>
</tr>

<tr>
<td>SHORT BIO</td>
<td>:</td>
<td><textarea id="bio" rows="4" placeholder="Brief professional
summary..."></textarea></td>
</tr>
<tr>
<td>SKILLS</td>
<td>:</td>
<td><textarea id="skills" rows="3" placeholder="Enter skills separated by
commas (e.g. C++, Java, HTML)"></textarea></td>
</tr>
<tr>
<td>EDUCATION</td>
<td>:</td>
<td>
<select id="education">
16
 <option value="High School">High School</option>
<option value="Bachelor's Degree" selected>Bachelor's Degree</option>
<option value="Master's Degree">Master's Degree</option>
<option value="PhD">PhD</option>
</select>
</td>
</tr>
<tr>
<td>EXPERIENCE</td>
<td>:</td>
<td>
<select id="experience">
<option value="Fresher">Fresher</option>
<option value="1-3 Years">1-3 Years</option>
<option value="3-5 Years">3-5 Years</option>
<option value="5+ Years">5+ Years</option>
</select>
</td>
</tr>

<tr>
<td>LINKEDIN</td>
<td>:</td>

<td><input type="url" id="linkedin" placeholder="[Link]

</tr>
<tr>
<td>GITHUB</td>
<td>:</td>
17
 <td><input type="url" id="github" placeholder="[Link]
</tr>
<tr>
<td>PROJECTS</td>
<td>:</td>
<td><textarea id="projects" rows="4" placeholder="Detail your key projects
here..."></textarea></td>
</tr>

<tr>
<td colspan="3" style="text-align: center; padding: 30px;">
<input type="submit" value="Generate Resume" class="submit-btn">
</td>
</tr>
</table>
</form>

<script>
function generateResume() {
// Retrieve Form Values
const name = [Link]("name").[Link]();
const email = [Link]("email").[Link]();
const dob = [Link]("dob").value;
const phone = [Link]("phone").[Link]();
const bio = [Link]("bio").value;
const skills = [Link]("skills").value;
const education = [Link]("education").value;
const experience = [Link]("experience").value;
const linkedin = [Link]("linkedin").value;
18
const github = [Link]("github").value;
const projects = [Link]("projects").value;

// Get Gender Value

const genderOptions = [Link]("gender");
let gender = "";
for (let opt of genderOptions) {
if ([Link]) gender = [Link];
}

// Regular Expression Validations

const nameRegex = /^[A-Za-z ]+$/;
const phoneRegex = /^[0-9]{10}$/;

if () {
alert("Invalid Name: Use alphabets only.");
return;
}
if () {
alert("Invalid Phone: Enter exactly 10 digits.");
return;
}

// Transform Skills into List Items

const skillsHTML = [Link](",")
.map(s => `<li>${[Link]()}</li>`)
.join("");

// Open new window immediately (prevents browser popup blocking)

19
 const resumeWindow = [Link]("", "_blank");

// Handle Photo with FileReader API

const photoInput = [Link]("photo");
if ([Link] && [Link][0]) {
const reader = new FileReader();
[Link] = function(e) {
renderDocument(resumeWindow, name, email, phone, dob, gender, bio,
skillsHTML, education, experience, linkedin, github, projects, [Link]);
};
[Link]([Link][0]);
} else {
renderDocument(resumeWindow, name, email, phone, dob, gender, bio,
skillsHTML, education, experience, linkedin, github, projects, "");
}
}

function renderDocument(win, name, email, phone, dob, gender, bio, skills, edu, exp, li,
gh, proj, photo) {
const photoElement = photo ? `<img src="${photo}" alt="Profile Photo">` : "";

[Link](`
<!DOCTYPE html>
<html>
<head>
<title>${name} - Professional Resume</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-
height: 1.6; color: #333; background: #e9ecef; padding: 20px; }
20
 .resume-card { max-width: 850px; margin: auto; background: white; padding:
40px; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
.header { text-align: center; border-bottom: 3px solid #c0bab6; padding-
bottom: 20px; }
.header img { width: 140px; height: 140px; border-radius: 50%; object-fit:
cover; border: 4px solid #c0bab6; margin-bottom: 15px; }
.header h1 { margin: 10px 0; font-size: 32px; color: #2c3e50; }
.contact-info { color: #7f8c8d; margin-bottom: 10px; }
.links a { color: #2980b9; text-decoration: none; margin: 0 10px; font-weight:
bold; }
h2 { color: #2c3e50; border-left: 5px solid #c0bab6; padding-left: 10px;
margin-top: 30px; text-transform: uppercase; font-size: 18px; }
ul { column-count: 2; padding-left: 20px; }
.print-btn { display: block; width: 200px; margin: 0 auto 20px auto; padding:
12px; background: #c0bab6; color: white; text-align: center; border: none; border-radius:
5px; cursor: pointer; font-size: 16px; font-weight: bold; }
@media print { .print-btn { display: none; } body { background: white;
padding: 0; } .resume-card { box-shadow: none; width: 100%; } }
</style>
</head>
<body>
<button class="print-btn" onclick="[Link]()">PRINT / SAVE AS
PDF</button>
<div class="resume-card">
<div class="header">
${photoElement}
<h1>${name}</h1>
<div class="contact-info">${email} | ${phone} | DOB: ${dob} | $
{gender}</div>
21
 <div class="links">
<a href="${li}" target="_blank">LinkedIn</a>
<a href="${gh}" target="_blank">GitHub</a>
</div>
</div>

<h2>Professional Summary</h2>
<p>${bio}</p>

<h2>Technical Skills</h2>
<ul>${skills}</ul>

<h2>Academic & Professional Background</h2>

<p><strong>Education:</strong> ${edu}</p>
<p><strong>Experience Level:</strong> ${exp}</p>

<h2>Key Projects</h2>
<p style="white-space: pre-wrap;">${proj}</p>
</div>
</body>
</html>
`);
[Link]();
}
</script>
</body>
</html>

22
OUTPUT

OUTPUT

23
24
 CONCLUSION

The successful development and implementation of the Dynamic Resume Generator marks
a significant milestone in applying front-end web technologies to solve real-world
productivity challenges. This project has effectively demonstrated that complex document
processing tasks, which traditionally required heavy server-side infrastructure and database
management, can be executed with high precision and efficiency entirely within a client-side
environment. By leveraging the power of HTML5, CSS3, and JavaScript, the application
provides a seamless, secure, and instantaneous experience for users seeking to
professionalize their career documentation.

A primary achievement of this project was the integration of the FileReader API. This
technical choice addressed the critical challenge of handling user-generated imagery without
a backend. By processing photos as localized DataURLs, the system ensures that sensitive
personal data never leaves the user’s machine, thereby adhering to modern data privacy
standards. Furthermore, the implementation of a robust validation engine using Regular
Expressions (RegEx) ensures that the final output is not only aesthetically pleasing but also
structurally accurate, preventing common errors in contact information and email formatting.

From a design perspective, the project successfully utilized CSS Media Queries and
Dynamic DOM Manipulation to bridge the gap between a web-based form and a print-
ready document. The ability to generate a "floating paper" effect via box-shadow and then
transition into a clean, minimalist PDF layout via @media print demonstrates a deep
understanding of visual hierarchy and user experience (UX) design. This project proves that
modern web development is moving toward a decentralized model where the browser acts as
a powerful, standalone workstation.

25
In conclusion, the Dynamic Resume Generator is a scalable and efficient tool that serves as a
foundation for further innovation. While the current version provides a comprehensive
solution for standardized resume creation, it opens the door for future enhancements such as:

1. Multiple Template Support: Introducing a variety of CSS layouts (e.g., Creative,

Executive, or Academic) that users can toggle between.
2. Multilingual Capabilities: Implementing a "Tanglish" or regional language interface
to assist a broader demographic of users.
3. Local Storage Integration: Utilizing the browser's localStorage to allow users
to save their progress and return to edit their resumes at a later date without data loss.

26
27