FINAL SYMPOSYS

RESUME MAKER
Minor Project Report

Submitted in Partial fulfillment for the award of
Bachelor of Engineering
Submitted to
RAJIV GANDHI PROUDYOGIKI VISHWAVIDYALAYA
BHOPAL (M.P)
Submitted by
RAHUL KUMAR PRASAD (0133CS233D12)
SHUBHESH KUMAR NAPIT (0133CS221197)
Under the supervision of

Prof. CHETAN GUPTA
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

SAGAR INSTITUTE OF RESEARCH & TECHNOLOGY, BHOPAL
SESSION-2024-25

CERTIFICATE
This is to certify that the work embodied in this report entitled “RESUME
MAKER” has been satisfactorily completed by RAHUL KUMAR PRASAD,
SHUBHESH KUMAR NAPIT. It is a bonafide piece of work, carried out under
our guidance in the Department of Computer Science & Engineering, Sagar
Insititute of Research & Technology, Bhopal for the partial fulfillment of the
Bachelor of Engineering during the academic year 2024-25.
Head of Department Guide Name

Dr. Ritu Shrivastava Prof. CHETAN GUPTA

ACKNOWLEDGEMENT
The completion of this project work could be possible with continued & dedicated efforts &
guidance of large number of faculty & staff members of the Institute. We acknowledge our
gratitude to all of them. The acknowledgement however will be incomplete without specific
mention as follows:
We express our profound sense of gratitude to our project guide Prof. Chetan Gupta for
their continuous encouragements & guidance during the project period.
We also express our sincere thanks to the HOD (CSE) Dr. Ritu Shrivastava for
encouragement & providing all the facilities in the department.
We would like to extend our gratitude to the Director Dr. Rajiv Srivastava for their
valuable encouragement & approval of the project work.
We are thankful to all staff members of the CSE department and my friends for their timely
help co-operation and suggestion for my project work. Lastly but not the least, we must
express thanks to our family, without their moral support it was impossible for us to complete
this minor/major project work.
Submitted by:
Rahul kumar Prasad 0133CS233D12
Shubhesh Kumar Napit 0133CS221197
Table of Contents
S.No. Topic Page

No.
1. Introduction…………………………………………………………………… 1-5
1.1Objective……………………………………………………………. 6
1.2Purpose……………………………………………………………... 7
1.3Scope………………………………………………………………... 7-12
1.4Problem identification……………………………………………… 12
1.5Methodology……………………………………………………….. 12-15
1.6Software Requirements…………………………………………….. 16
1.7Hardware Requirements……………………………………………. 16
2. System design………………………………………………………………… 18-23
2.1Use Case Diagram………………………………………………….. 24
2.2Class Diagram………………………………………………………. 25
2.3Sequence Diagram……………………………................................. 26
2.4Collaboration Diagram…………………………………………….. 27
2.5Data Flow Diagram…………………………………………………. 28-29
2.6Flow Chart……………………………………………………… .. 30
2.7Activity Diagram…………………………………………………… 31
3. Algorithm...….………………………………………………………………… 28-55
4. Code
5. Result Screenshots…………………………………………………………. 56-58
6. Conclusion & Future enhancements………………………………………….. 58-59
7. References…………………………………………………………………….. 59-60
Introduction
In today's highly competitive job market, a well-crafted resume serves as a crucial gateway to
securing career opportunities. It is often the first impression a potential employer has of a
candidate, making it essential to present one's qualifications and experiences in a professional
and organized manner. However, many job seekers face challenges in creating resumes that
effectively highlight their strengths due to difficulties with formatting and a lack of design
skills. This is where the "Resume Maker" project comes into play.
The application aims to simplify the resume creation process by providing an intuitive
interface where users can input their personal, educational, and professional information. By
offering a real-time preview and PDF download functionality, the Resume Maker ensures
that users can generate polished and ready-to-use resumes without the hassle of manual
formatting. Many individuals struggle with the intricacies of formatting, which can detract
from the quality of their presentation. Resume Maker" project represents a significant step
towards simplifying the resume creation process. By providing a user-friendly and efficient
tool, this project not only showcases technical prowess but also highlights the importance of
user-centric design. As the job market continues to evolve.The Resume Builder project is a
web-based application designed to help individuals create professional resumes quickly and
efficiently. This tool allows users to input their personal, educational, and professional
information and generate a polished resume that can be downloaded in PDF format. The goal
of the project is to provide a simple yet powerful platform that streamlines the resume
creation process for job seekers, students, and professionals. The Resume Builder was
developed using HTML, CSS, and JavaScript, ensuring an interactive and user-friendly
experience. The tool offers customizable templates, enabling users to select from different
styles and personalize their resumes. This project aims to enhance the resume-building
experience by offering a seamless interface and a hassle-free method for producing high-
quality resumes. In today’s competitive job market, a professional and well-structured resume
plays a crucial role in securing job opportunities. The Resume Builder project was created to
address the challenge of quickly generating a professional resume, especially for individuals
who may not have experience with design or formatting. This web-based tool provides users
with an intuitive platform to enter personal, educational, and professional information and
generate a customized resume in just a few steps.The Resume Builder tool is designed to
cater to a wide range of users, including job seekers, students, and professionals, offering an
easy-to-use solution for creating resumes that highlight their skills and experience effectively.
The platform includes various templates, allowing users to select from different formats and
personalize the content to suit their career needs. Additionally, the generated resume can be
downloaded as a PDF, ensuring that users can easily share their resumes with potential
employers. Developed using HTML, CSS, and JavaScript, the Resume Builder focuses on
providing an efficient and interactive user experience. The tool allows users to fill out
information such as contact details, work experience, education, and skills. The
customization options provide flexibility in tailoring the resume to match industry-specific
standards. The project also demonstrates key concepts in web development, such as front-end
design, dynamic content manipulation, and client-side PDF generation. The development of
this project not only aims to help users create professional resumes but also serves as a
learning experience in applying modern web technologies to solve real-world problems.
Develop an intuitive and easy-to-navigate user interface that accommodates users with
varying levels of technical expertise. Ensure a seamless user experience throughout the
resume creation process. Create a diverse collection of dynamic and visually appealing
resume templates to cater to different industries, professions, and personal preferences. Allow
users to customize templates easily to reflect their unique professional identities. Content
Optimization. Provide educational resources, such as tips, guides, and tutorials, to assist users
in creating resumes that align with current industry standards. Offer insights into effective
resume writing and job application strategies. By achieving these objectives, the "Resume
Builder" project aims to empower individuals in their professional journeys, helping them
craft compelling resumes that effectively showcase their skills and experiences to prospective
employers. The concept of resume builders has evolved in tandem with advancements in
technology and changes in hiring practices. Traditionally, individuals created resumes
manually, using word processors or desktop publishing tools. However, with the rise of the
internet and digitalization, online resume builders emerged to simplify and enhance the
resume creation processIn the realm of professional advancement, the process of crafting an
effective and compelling resume remains a persistent challenge for individuals seeking career
opportunities. The existing landscape of resume-building tools exhibits several limitations
and deficiencies, necessitating the development of an innovative "Resume Builder" project
Conventional resume-building tools often adhere to outdated formatting paradigms, making it
challenging for users to create visually appealing and modern resumes that resonate with
contemporary industry expectations. Conventional resume-building tools often adhere to
outdated formatting paradigms, making it challenging for users to create visually appealing
and modern resumes that resonate with contemporary industry expectations. Many existing
platforms lack sufficient personalization options, hindering users from tailoring their resumes
to reflect their unique skills, experiences, and career objectives. A one-size-fits-all approach
fails to accommodate diverse professional backgrounds Users encounter difficulties in
optimizing their resume content effectively. The absence of intelligent algorithms results in
missed opportunities to enhance the visibility of key skills and achievements in alignment
with current industry trends. The process of creating resumes has traditionally been a manual
task, requiring individuals to format their work experience, education, skills, and personal
details into a professional-looking document. Over time, with the growth of the internet and
advancements in digital tools, several applications and platforms have emerged to streamline
this process. Early tools focused on simple word processors or templates, which allowed
users to plug in their information but often required manual adjustments for formatting.
With the rise of the digital job application process, the demand for more efficient and
accessible resume-building tools increased. Online resume builders began to gain popularity
in the early 2000s, offering more automated and customizable solutions. These tools
simplified the resume creation process by providing users with templates, guidance, and
instant formatting, reducing the time and effort spent on manually designing resumes.
The introduction of web-based resume builders revolutionized this space, allowing users to
create and download resumes from anywhere without needing specialized software. This shift
was further accelerated by the proliferation of cloud computing and PDF technology, making
it easier to generate and share resumes in a universally accepted format.
In recent years, some of the more advanced resume-building tools have incorporated
additional features, such as personalized suggestions, integrated portfolio options, and job-
matching capabilities. However, many existing solutions still offer limited customization or
require users to pay for premium templates and features.
The Resume Builder project was conceived to address the need for an easy-to-use,
customizable, and fully accessible resume tool. By focusing on simplicity and user
experience, this project aims to provide an intuitive platform where users can create
professional resumes quickly, without needing advanced design skills or expensive software.
The tool incorporates multiple templates, real-time editing, and a PDF export feature to
deliver a modern, efficient solution for job seekers and professionals alike.
Understanding the Evolution: It shows how resume builders have evolved over time,
highlighting the shift from manual resume creation to digital solutions. This helps the reader
appreciate the need for your tool in today's job market.
Justifying Your Project: By mentioning existing tools and their limitations, you justify the
necessity of your own project. This makes it clear that your Resume Builder aims to address
specific needs that other tools may not fully solve.
Positioning Your Tool: This section places your tool within the larger landscape of resume-
building solutions. It explains how your project fits into the current market, making it more
relatable to the audience.
Demonstrating Knowledge: Providing background information shows your understanding
of the problem space. It demonstrates that your project is not just an arbitrary tool, but a
response to real challenges faced by job seekers.
The Resume Builder is designed to be easily accessible through a web browser, ensuring that
users can access the tool from any device with an internet connection. Below are the key
ways in which users can reach and interact with the too The Resume Builder will be hosted
on a website, making it accessible to anyone with internet access. Users can simply visit the
website URL, where they can start building their resumes without needing to download any
software. This ensures that the tool is available across different platforms, including desktop
computers, laptops, and mobile devices.
The platform will be designed with a user-friendly interface, allowing individuals of all
technical backgrounds to create resumes effortlessly. The intuitive design ensures that even
users with limited technical knowledge can navigate the tool, enter their details, and generate
a professional resume.
Search Engine Visibility:
The website can be optimized for search engines (SEO), allowing it to appear in search
results when users look for resume-building tools. This will help users discover the tool
through search queries such as "online resume builder" or "create resume for free."
Sharing and Referrals:
The platform can be shared through social media, email, or word of mouth. Users who are
satisfied with their experience may refer others to the tool, expanding its reach organically.
Additionally, positive reviews and testimonials can help increase awareness and attract new
users.
Access via Job Portals:
If the tool is integrated into job portals or partnered with platforms that assist job seekers
(e.g., LinkedIn, Indeed, or university career centers), it can be easily accessed by users in
those communities. This would further increase the tool’s exposure and utility for individuals
actively seeking jobs.
Mobile Accessibility:
The Resume Builder can be optimized for mobile devices, allowing users to build resumes
while on the go. Whether users are commuting, at school, or traveling, they will have the
flexibility to create and edit resumes from their smartphones or tablets.
The platform will be designed with a user-friendly interface, allowing individuals of all
technical backgrounds to create resumes effortlessly. The intuitive design ensures that even
users with limited technical knowledge can navigate the tool, enter their details, and generate
a professional resume.
users.
(e.g., LinkedIn, Indeed, or university career centers), it can be easily accessed by users in
flexibility to create and edit resumes from their smartphones or tablets.The platform will be
designed with a user-friendly interface, allowing individuals of all technical backgrounds to
create resumes effortlessly. The intuitive design ensures that even users with limited technical
knowledge can navigate the tool, enter their details, and generate a professional resume.
users.
(e.g., LinkedIn, Indeed, or university career centers ) , it can be easily accessed by users in
flexibility to create and edit resumes from their smartphones or tablets.As technology
evolves, the project aims to continue adding more features based on user feedback. Future
updates may include additional templates, integration with professional networks like
LinkedIn, and more options for exporting resumes (e.g., Word or HTML format). The
purpose is to keep the tool relevant, adaptable, and responsive to the ever-changing needs of
job seekers and professionals
Objective
The main objective of the Resume maker project is to create an efficient, easy-to-use web
application that empowers individuals to generate professional resumes effortlessly. The tool
is designed to cater to a broad audience, including job seekers, students, and professionals
looking to enhance their career opportunities. By simplifying the resume-building process,
the project aims to help users showcase their qualifications in the best possible light, without
requiring advanced design or formatting skills.
The specific objectives of the Resume Builder project are:
Simplify Resume Creation:
Provide a straightforward platform where users can quickly enter key details such as
contact information, work experience, education, skills, and achievements. The goal is to
remove the barriers that make traditional resume writing time-consuming and complex.
Customizable Templates:
Offer a variety of professional, customizable resume templates that suit different
industries and job roles. Users will have the flexibility to choose a template that best fits
their personal style and the type of job they are applying for. This customization ensures
that resumes are tailored to specific needs, whether for creative roles, business positions,
or technical jobs.
Real-Time Editing and Formatting:
Implement a dynamic editing interface that formats the resume automatically as users
input their information. This eliminates the need for manual formatting, ensuring that
users' resumes are consistently professional and error-free.
Downloadable PDF Format:
Enable users to download their resume in PDF format, which is universally accepted by
employers and applicant tracking systems (ATS). The PDF option ensures that the resume
maintains its formatting, regardless of the device or operating system being used.
Ensure that the Resume maker is fully responsive and accessible on mobile devices. This
will allow users to create and edit their resumes on the go, making it easier for them to
access the tool from anywhere, whether they are at home, at school, or on the move.
Free and Accessible:
Offer the tool at no cost to ensure that all users—regardless of financial resources—can
access and benefit from it. This is especially important for students, recent graduates, and
job seekers who may not have the budget for paid resume-building services.
User Empowerment:
Help users feel more confident about their resumes by providing an easy-to-use tool that
improves their chances of landing a job. By allowing users to focus on content rather than
formatting, the Resume maker ensures that the resume is an accurate and polished
reflection of their skills and experiences.
Expand Reach:
Strive to increase the tool’s reach by optimizing it for search engines (SEO) and enabling
easy sharing via social media, email, or job portal integrations. This will ensure that
individuals from various backgrounds can discover and use the tool to create their
resumes.
Continuous Improvement:
After the initial launch, continue to improve the tool by adding new features such as
additional templates, integration with LinkedIn for automatic profile importing, or a
feature to store multiple resumes. Regular updates will ensure that the tool evolves with
users' changing needs and expectations.
Purpose
The Resume maker project was created with the purpose of simplifying the process of
creating professional, well-structured resumes for a wide range of users. With the ever-
growing competition in the job market, a well-designed resume has become a crucial tool for
job seekers, students, and professionals. However, many individuals struggle with the
complex task of formatting and designing resumes, especially if they do not have access to
advanced tools or design knowledge. This project aims to address this gap by offering a free,
accessible, and user-friendly solution for resume creation.
The key purposes of the Resume maker project are:
Empower Job Seekers:
The primary purpose is to provide a tool that empowers job seekers—whether students
applying for their first job, professionals seeking career advancement, or individuals re-
entering the workforce. The tool allows users to create a polished and professional resume
that highlights their qualifications and skills in the best possible light.
Reduce Barriers to Resume Creation:
Many individuals face barriers when creating resumes due to lack of technical
knowledge or design skills. This project eliminates these barriers by offering an intuitive
platform where users can focus on entering their details rather than spending time on
formatting. It ensures that users with limited experience or access to expensive software
can still create high-quality resumes.
Enhance Professionalism:
Resumes are often the first impression a potential employer has of an applicant. By
offering well-designed, customizable templates, the project aims to help users create
resumes that not only look professional but also effectively communicate their
qualifications. The tool ensures that resumes follow industry standards and best practices
in design and structure.
Improve Accessibility:
The Resume Builder is a web-based platform, making it accessible from any device with
an internet connection. This makes it easy for users to create and edit their resumes from
anywhere, whether they are using a laptop, tablet, or smartphone. Additionally, the tool is
free to use, ensuring that it is accessible to a wide audience, including those who may not
have the resources to purchase expensive resume-building software or professional design
services.
Customization to Meet Individual Needs:
The tool is designed to offer a variety of customization options, including different
resume templates suited to various professions, industries, and job roles. Users can select
from templates that best align with the job they are applying for, enabling them to tailor
their resumes for specific industries, such as marketing, engineering, or education. This
feature ensures that users can create resumes that are both personal and tailored to
industry-specific needs.
Streamline the Job Application Process:
The Resume maker is not just about creating a resume; it’s about making the overall job
application process smoother and more efficient. By providing a simple, fast, and
customizable way to generate a resume, the tool helps users reduce the time spent on job
applications, allowing them to focus more on applying to multiple jobs rather than
perfecting their resumes.
PDF Generation for Professional Sharing:
By offering the ability to download resumes in PDF format, the project ensures that the
resume can be easily shared with potential employers. PDF is the standard format for
professional document submission, and the tool guarantees that the formatting of the
resume remains intact, regardless of the device or operating system used by the employer.
Scope
The Resume maker project focuses on providing an efficient, accessible, and user-friendly
web-based platform to help individuals create professional resumes. The tool is designed to
cater to a broad audience, including students, job seekers, professionals, and individuals
transitioning into new careers. The scope of this project includes the following: Core Features
User-Friendly Interface:
A simple and intuitive interface that allows users to input personal, educational, and
professional information without technical challenges.
Customizable Templates:
A variety of professional resume templates tailored for different industries and job roles.
These templates allow users to customize their resumes to meet specific requirements.
Real-Time Formatting:
Automated formatting capabilities that ensure consistent, professional design while
eliminating the need for manual adjustments.
PDF Export:
Option to download resumes in PDF format, ensuring compatibility with employer
systems and maintaining formatting across devices.
Accessibility
Web-Based Platform:
Available online, accessible from any device with an internet connection, including
desktops, laptops, tablets, and smartphones.
Cross-Browser Compatibility:
Ensures that the tool functions seamlessly on major browsers such as Chrome, Firefox,
Edge, and Safari.
Mobile-Friendly Design:
Fully responsive, allowing users to create and edit resumes conveniently on mobile
devices.
Target Audience
Job Seekers:
Individuals looking for new jobs or internships can quickly create resumes tailored to
their desired roles.
Students and Graduates:
Provides first-time job applicants with an easy way to structure their resumes
professionally.
Career Changers:
Helps professionals transitioning into new industries or roles craft resumes that highlight
transferable skills.
Value Addition
Customization Options:
Users can modify text, layout, and sections to personalize resumes for specific job
applications.
Guidance and Suggestions:
The tool could include tips for writing impactful resumes, such as sample text for job
descriptions or skill recommendations.
Real-Time Preview:
Users can view their resume updates in real time, ensuring confidence in the final
product.
LinkedIn Integration:
Users may import their LinkedIn profiles directly to populate resume fields automatically.
Problem Identification
Creating a professional resume is one of the most critical steps in the job application process.
However, many individuals face significant challenges when it comes to designing,
formatting, and presenting their resumes effectively. These challenges often result in poorly
structured resumes, diminishing candidates' chances of standing out in competitive job
markets. The Resume maker project was conceived to address these key problems:
Lack of Design Skills
Many job seekers lack the necessary design skills to create visually appealing and
professional resumes. Formatting a resume to meet industry standards is time-consuming and
requires knowledge of design tools or templates. Time-Consuming Process Manually creating
or updating a resume can be tedious and prone to errors.Ensuring consistency in formatting
and alignment takes significant effort, often detracting from the time spent on job
applications.
Limited Access to Tools
Premium resume design software and tools, such as Adobe InDesign or Canva, are often
expensive and inaccessible to students, recent graduates, or individuals with limited financial
resources.
Free tools may offer limited features, lack customization, or produce unprofessional results.
Overwhelming Options
Many users are unsure of how to structure their resumes, what information to include, and
which template is appropriate for their desired industry or role.
The absence of guidance often leads to resumes with irrelevant or poorly organized content.
Compatibility Issues
Resumes created using word processors or outdated templates often fail to pass through
Applicant Tracking Systems (ATS), which are widely used by recruiters to filter resumes.
Poor formatting or unsupported file types can lead to rejection even before a recruiter reviews
the resume.
Lack of Personalization
Generic resume templates do not cater to the unique needs of different industries, roles, or
professional levels.
Users often struggle to customize resumes to highlight their strengths and align with specific
job descriptions.
Limited Access to Professional Help
Hiring professional resume writers or career coaches can be costly and is often not an option
for students or entry-level job seekers.
Many users lack the resources or knowledge to improve their resumes without external
assistance.
Mobile Accessibility Challenges
In today’s digital age, many users prefer to create or update resumes on the go. However,
most existing tools are not optimized for mobile devices, limiting accessibility and
convenience.
Lack of Free and Efficient Tools
While some free resume-building tools exist, they often include watermarks, have limited
features, or require payment for downloading resumes.
Users face difficulty finding a truly free and efficient tool that meets professional standards.
Methodology
The methodology outlines the structured approach used to design, develop, and implement
the Resume maker project. The project employs the Software Development Life Cycle
(SDLC) as a framework, focusing on delivering a user-friendly, efficient, and feature-rich
platform for resume creation. The methodology involves the following stages:
Requirement Analysis
The first step involves understanding the needs of the target audience, including students,
professionals, and job seekers. Key activities include: Conducting surveys and interviews to
identify challenges faced in resume creation. Researching existing resume-building tools to
analyze , strengths, weaknesses, and gaps.
Finalizing the functional and non-functional requirements of the platform, such as:
User-friendly interface.
Multiple customizable templates.
Cross-device compatibility.
Planning
A detailed project plan is created, which includes:
Defining Objectives: Setting clear goals, such as improving user accessibility, providing
templates, and ensuring professional formatting.
Timeline and Milestones: Dividing the project into smaller milestones (e.g., design,
development, testing, and deployment).
Resource Allocation: Assigning roles for frontend development, backend programming, and
quality assurance.
Design
The design phase focuses on creating a blueprint of the platform, covering the following
aspects: User Interface (UI) Design: Developing mock ups and wireframes to ensure a clean
and intuitive layout.
User Experience (UX) Design: Planning the user flow for an easy and seamless resume
creation process. Database Design: Structuring the database to store user information,
templates, and saved resumes.
Key deliverables from this phase include:
Mock up designs for the homepage, form fields, template selection, and preview pages.A
clear structure for data storage and retrieval.
Development
The development phase involves coding the application using appropriate technologies for
frontend, backend, and database management.
Frontend Development:
Technologies: HTML, CSS, JavaScript (and frameworks like React.js or Angular).
Features: Responsive design, real-time preview, and template customization.
Backend Development:
Technologies: Node.js, Python, or PHP.
Features: Data validation, form handling, and integration with the database.
Database Management:
Database: MySQL or MongoDB.
Storing user details, templates, and generated resumes.
Export Functionality:
Generating resumes in PDF format with consistent formatting.
Testing
Comprehensive testing ensures the platform is reliable, user-friendly, and bug-free. Testing
types include:
Unit Testing: Ensuring individual components (e.g., form inputs, template preview) work as
intended. Integration Testing: Verifying the seamless interaction between frontend, backend,
and database. Usability Testing: Collecting user feedback to identify and fix usability issues.
Cross-Browser Testing: Ensuring compatibility across major browsers (Chrome, Firefox,
Safari, etc.). Mobile Responsiveness Testing: Ensuring functionality and layout are optimized
for mobile devices.
Deployment
Once the platform passes all testing stages, it is deployed to a live environment. Key steps
include: Setting up a web server using services like AWS, Google Cloud, or Heroku.
Configuring the domain name and SSL certificates for secure access. Monitoring
performance and addressing any initial issues reported by users.Maintenance and Updates
After deployment, regular updates and maintenance are performed to ensure the platform
remains effective and relevant. Fixing bugs and improving performance. Adding new
features, such as more templates, AI-based suggestions, and language support. In corp rating
user feedback to refine the platform further.
Software Requirements
Development Environment
Operating System: Windows 10 or higher, macOS, or Linux.
Frontend Development Tools:
HTML, CSS, JavaScript (with frameworks like React.js, Angular, or Vue.js).
IDE/Text Editor: Visual Studio Code, Sublime Text, or Atom.
CSS Preprocessors (optional): SASS or LESS.
Backend Development Tools:
Node.js with Express.js or Python with Django/Flask for server-side development.
Package Managers: npm (for Node.js) or pip (for Python).
Database:
MySQL, MongoDB, or PostgreSQL for data storage.
SQLite for lightweight development.
Version Control: Git (with platforms like GitHub or GitLab).
Testing Tools: Selenium, Jest, Mocha, or Cypress for unit and integration testing.
PDF Generation Library: JS PDF, Puppeteer, or a similar tool for exporting resumes.
Browser Compatibility Testing: Tools like Browser Stack for testing across browsers.
Hardware Requirements
Development Environment
Processor: Minimum Intel i5 or AMD equivalent (Intel i7 or higher recommended).
RAM: Minimum 8GB (16GB recommended for smoother multitasking).
Storage: At least 256GB SSD for fast read/write speeds (512GB or higher recommended).
Display: Monitor with a minimum resolution of 1920x1080 (Full HD).
Graphics: Integrated graphics sufficient; dedicated graphics card optional for advanced tasks.
Network: Stable internet connection for accessing cloud services, repositories, and APIs.
Production Environment
Server Configuration:
CPU: Quad-core processor (e.g., Intel Xeon or AMD EPYC).
RAM: 8GB minimum (16GB or higher for heavy traffic).
Storage: SSD-based storage with a minimum of 100GB, scalable as per data growth.
Network: High-speed internet connection with low latency for user requests.
Cloud Hosting Alternatives:
AWS EC2 Instance (t2. micro for small-scale; t2. medium or higher for larger traffic).
Google Cloud Compute Engine or Microsoft Azure Virtual Machines.
System Design
Frontend Design:
User Interface:
A clean, intuitive, and responsive UI.
Includes input forms for personal, educational, and professional details.
Template selection and real-time preview features.
Responsive Design:
Ensures compatibility with various devices (desktops, tablets, and smartphones).
Frontend Libraries and Frameworks:
React.js/Angular for dynamic rendering and improved user experience.
Bootstrap or Tailwind CSS for styling.
Backend Design:
RESTful API:
Facilitates communication between the frontend and backend.
Example API endpoints:
save User Data: Saves user details.
fetch Templates: Retrieves available templates.
generate Resume: Creates and exports the resume in PDF format.
Business Logic:
Processes user inputs, applies template logic, and generates the final output.
Implements validation rules to ensure data integrity.
Export Functionality:
Uses libraries like js pdf or Puppeteer to convert user data into a downloadable PDF resume.
Database Design:
Database Schema: Tables/ Collections: Users: Stores user profile data (e.g., name, email,
password). Resume Data: Contains user-provided information (e.g., education,
experience).Templates: Stores metadata for different resume templates .Downloads: Tracks
generated resumes and download history. Cloud Hosting and Deployment: Server Hosting:
AWS EC2, Heroku, or Google Cloud for backend deployment. Database Hosting: Amazon
RDS, Firebase, or MongoDB Atlas. Static Assets: CDN (e.g., Cloudflare) for faster delivery
of templates and images. Data Flow User Interaction: The user accesses the platform via a
web browser. Inputs personal, educational, and professional details. Selects a template and
previews the resume. Data Processing: User input is validated on the frontend and sent to the
backend via API calls. The backend processes the data, matches it with the selected template,
and generate resume. Resume Generation: The backend uses a PDF generation library to
create a formatted resume The resume is sent back to the frontend for preview and download.
Key Design Considerations Scalability: The system can handle increasing users by deploying
additional server instances and database sharding. Security: User data is encrypted during
storage (e.g., hashed passwords) and transmission (using HTTPS). Implements secure
authentication via OAuth or JWT. User Experience: Provides real-time feedback during form
filling (e.g., error prompts for invalid data). Cross Platform Compatibility: Ensures smooth
functionality on different browsers and devices.
System Design Diagram Below is a textual representation of the design architecture:
Code Frontend (User Interface)
- Input Forms - Template Selection
- Preview Section - Download Options
HTTP Requests (REST API) v
API Server - Authentication -
Resume Data Processing| - Template Engine
- File Generation
Database Interaction v
User Profile Database - User Information
- Saved Resumes
File Storage (e.g., Cloud Storage) v
Cloud Storage - Resume Files
| Optional: External
Services| - LinkedIn Integration | - Google
Drive Backup This user-friendly while meeting the objectives
of the Resume maker project. Let me know if you'd like diagrams or more details on
any section!
Use Case Diagram for Resume Builder The Use Case Diagram visually represents the
interactions between the user and the Resume Builder System. It outlines the core
functionalities and how the user engages with them. Below is a detailed explanation:
Actors User: Represents the primary actor who interacts with the system. The user
performs all actions, including entering data, selecting templates, and downloading
resumes. Use Cases The system provides the following primary functionalities for the
user: Create Account Allows new users to register with the system using their email
and password. Login: Enables registered users to securely access their profiles. Enter
Personal Details: Collects user data, including personal, educational, and professional
information. Choose Template Allows users to browse and select a professional
resume template from various options. Preview Resume: Provides a real-time preview
of the resume based on user input and selected template. Generate Resume: Processes
the input data and formats it using the selected template to create a professional
resume. Download Resume: Allows users to save the generated resume in PDF
format for offline use
.He i
The Class Diagram for the Resume Builder project. It outlines the core classes, their
attributes, methods, and the relationships among them. Let me know if you would like
an explanation or further refinement
Diagram 2
Objects/ Actors: User Frontend Backend Database Collaboration Flow: User interacts
with Frontend: Sends personal data (name, contact info, education, etc.) Frontend.
Selects resume template. Initiates actions like "Preview Resume" or "Generate
Resume. "Frontend sends requests to Backend: Sends user input and selected template
to Backend for processing. Backend interacts with Database: Queries and stores data
in the Database (e.g., user information, saved templates). retrieves or updates resume-
related information. Backend sends processed data back to Frontend: Sends the
processed resume data or status to the Frontend. Provides the resume for preview or
download. Frontend communicates back to User: Displays the preview of the resume.
Allows the user to download the resume in PDF format once generated.
Diagram 4
Diagram5 Explanation: User: The user interacts with the application by entering their
details into the HTML form.HTML Form: The form collects user inputs for personal
information, education, experience, and skills. JavaScript Controller: Handles form
submission, validates inputs, and processes the data. Dynamic Content Generator:
Uses JavaScript to dynamically update the resume preview area based on user
inputs.PDF Generation Library: Converts the resume preview content into a
downloadable PDF file. Resume Preview Area: Displays the dynamically generated
resume content for the user to review.
dataflow diagram A Data Flow Diagram (DFD) is a graphical representation of the
flow of data within a system. It shows how data moves from one process to another,
how it is stored, and how it interacts with different components. Let's create a Level 0
and Level 1 Data Flow Diagram for your Resume Builder project. level 0 Data Flow
Diagram (Context Diagram)This is the highest level of DFD which provides an
overview of the entire system and its interactions with external entities.
Level 1 Data Flow Diagram This diagram provides a more detailed view of the
system, showing how data flows between different processes within the Resume
Maker.
Diagram 6
Explanation: User: The user interacts with the Resume Builder application by
inputting their personal, educational, and professional details. Input Data: The data
entered by the user is collected through the form inputs. Validate Data: The
application validates the data to ensure it is complete and correct. Generate Preview:
The validated data is used to generate a dynamic preview of the resume. Generate
PDF: Once the preview is generated, the user can download the resume as a PDF.
Generated PDF: The final output of the system is the generated PDF resume. This
DFD provides a clear view of how data flows through your Resume Builder.
Work Experience Save Data Corrected
Diagram 7
Start: The process begins when the user opens the Resume Maker application. User
Opens Application: The user initiates the interaction. User Enters Personal
Information: The user fills in personal details such as name, email, and phone number.
Validate Personal Info: The system checks the entered personal information. If there
are errors, it prompts the user to correct them. If correct, it saves the data. User Enters
Educational Details: The user inputs educational background information. Validate
Educational Info: The system validates the educational details. Errors lead to
correction prompts; valid data is saved. User Enters Work Experience: The user
provides details of their work experience. Validate Work Experience: The system
validates the work experience data. Errors prompt corrections; valid data is saved.
User Enters Skills: The user lists their skills. Validate Skills Info: The system checks
the skills information for accuracy. Errors prompt corrections; valid data is saved.
generate Resume Preview: The system generates a preview of the resume based on
the input data. User Reviews Resume: The user reviews the generated resume
preview. Generate PDF: The system generates a PDF version of the resume.
End: The process concludes with the user having a completed resume in PDF format
Algorithm for Resume Maker
Step1: Initialization Start the application. 1.2 Display the resume form to the user.
Step 2: Personal Information Entry 2.1 Prompt the user to enter their full name,
email, and phone number. 2.2 Validate the entered personal information. If invalid,
display an error message and prompt the user to re-enter the details. If valid, store the
information and proceed to the next step.
Step 3: Educational Details Entry 3.1 Prompt the user to enter their educational
details. 3.2 Validate the entered educational information. If invalid, display an error
message and prompt the user to re-enter the details. If valid, store the information and
proceed to the next step.
Step 4: Work Experience Entry 4.1 Prompt the user to enter their work experience.
4.2 Validate the entered work experience information. If invalid, display an error
message and prompt the user to re-enter the details. If valid, store the information and
proceed to the next step.
Step 5: Skills Entry 5.1 Prompt the user to enter their skills. 5.2 Validate the entered
skills information. If invalid, display an error message and prompt the user to re-enter
the details. If valid, store the information and proceed to the next step.
Step 6: Resume Preview Generation 6.1 Generate a dynamic preview of the resume
using the stored information. 6.2 Display the resume preview to the user.
Step 7: User Review and Confirmation 7.1 Allow the user to review the generated
resume preview. 7.2 If the user confirms the details, proceed to the next step. 7.3 If
the user wants to make changes, return to the relevant entry step.
Step 8: PDF Generation 8.1 Use the PDF generation library to convert the resume
preview into a PDF document. 8.2 Provide the user with an option to download the
generated PDF.
Step 9: Completion 9.1 End the application.
CODE: HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Resume 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>
</button>
</div>
</div>
</div>
</nav>
<section id = "about-sc" class = "">

<div class = "container">
<div class = "about-cnt">
<form action="" class="cv-form" id = "cv-form">
<div class = "cv-form-blk">
<div class = "cv-form-row-title">
<h3>about section</h3>
</div>
<div class = "cv-form-row cv-form-row-about">
<div class = "cols-3">
<div class = "form-elem">
<label for = "" class = "form-label">First Name</label>
<input name = "firstname" type = "text" class = "form-control
firstname" id = "" onkeyup="generateCV()" placeholder="e.g. John">
<span class="form-text"></span>
</div>
<label for = "" class = "form-label">Middle Name <span class =
"opt-text">(optional)</span></label>
<input name = "middlename" type = "text" class = "form-control
middlename" id = "" onkeyup="generateCV()" placeholder="e.g. Herbert">
</div>
<label for = "" class = "form-label">Last Name</label>
<input name = "lastname" type = "text" class = "form-control
lastname" id = "" onkeyup="generateCV()" placeholder="e.g. Doe">
</div>
</div>
<div class="cols-3">
<label for = "" class = "form-label">Your Image</label>
<input name = "image" type = "file" class = "form-control image" id
= "" accept = "image/*" onchange="previewImage()">
</div>
<label for = "" class = "form-label">Designation</label>
<input name = "designation" type = "text" class = "form-control
designation" id = "" onkeyup="generateCV()" placeholder="e.g. Sr.Accountants">
</div>
<label for = "" class = "form-label">Address</label>
<input name = "address" type = "text" class = "form-control
address" id = "" onkeyup="generateCV()" placeholder="e.g. Lake Street-23">
</div>
</div>

<label for = "" class = "form-label">Email</label>
<input name = "email" type = "text" class = "form-control email" id
= "" onkeyup="generateCV()" placeholder="e.g. johndoe@gmail.com">
</div>
<label for = "" class = "form-label">Phone No:</label>
<input name = "phoneno" type = "text" class = "form-control
phoneno" id = "" onkeyup="generateCV()" placeholder="e.g. 456-768-798, 567.654.002">
</div>
<label for = "" class = "form-label">Summary</label>
<input name = "summary" type = "text" class = "form-control
summary" id = "" onkeyup="generateCV()" placeholder="e.g. Doe">
</div>
</div>
</div>
</div>
<div class="cv-form-blk">
<h3>achievements</h3>
</div>
<div class = "row-separator repeater">

<div class = "repeater" data-repeater-list = "group-a">
<div data-repeater-item>
<div class = "cv-form-row cv-form-row-achievement">
<label for = "" class = "form-label">Title</label>
<input name = "achieve_title" type = "text" class = "form-
control achieve_title" id = "" onkeyup="generateCV()" placeholder="e.g.
johndoe@gmail.com">
</div>
<label for = "" class = "form-label">Description</label>
<input name = "achieve_description" type = "text" class =
"form-control achieve_description" id = "" onkeyup="generateCV()" placeholder="e.g.
johndoe@gmail.com">
</div>
</div>
<button data-repeater-delete type = "button" class = "repeater-
remove-btn">-</button>
</div>
</div>
</div>
<button type = "button" data-repeater-create value = "Add" class =
"repeater-add-btn">+</button>
</div>
</div>
<h3>experience</h3>
</div>

<div class = "repeater" data-repeater-list = "group-b">
<div class = "cv-form-row cv-form-row-experience">
<label for = "" class = "form-label">Title</label>
<input name = "exp_title" type = "text" class = "form-control
exp_title" id = "" onkeyup="generateCV()">
</div>
<label for = "" class = "form-label">Company /
Organization</label>
<input name = "exp_organization" type = "text" class =
"form-control exp_organization" id = "" onkeyup="generateCV()">
</div>
<label for = "" class = "form-label">Location</label>
<input name = "exp_location" type = "text" class = "form-
control exp_location" id = "" onkeyup="generateCV()">
</div>
</div>

<label for = "" class = "form-label">Start Date</label>
<input name = "exp_start_date" type = "date" class = "form-
control exp_start_date" id = "" onkeyup="generateCV()">
</div>
<label for = "" class = "form-label">End Date</label>
<input name = "exp_end_date" type = "date" class = "form-
control exp_end_date" id = "" onkeyup="generateCV()">
</div>
<input name = "exp_description" type = "text" class = "form-
control exp_description" id = "" onkeyup="generateCV()">
</div>
</div>

</div>
</div>
</div>
</div>
</div>
<h3>education</h3>
</div>

<div class = "repeater" data-repeater-list = "group-c">
<label for = "" class = "form-label">School</label>
<input name = "edu_school" type = "text" class = "form-
control edu_school" id = "" onkeyup="generateCV()">
</div>
<label for = "" class = "form-label">Degree</label>
<input name = "edu_degree" type = "text" class = "form-
control edu_degree" id = "" onkeyup="generateCV()">
</div>
<label for = "" class = "form-label">City</label>
<input name = "edu_city" type = "text" class = "form-control
edu_city" id = "" onkeyup="generateCV()">
</div>
</div>

<label for = "" class = "form-label">Start Date</label>
<input name = "edu_start_date" type = "date" class = "form-
control edu_start_date" id = "" onkeyup="generateCV()">
</div>
<label for = "" class = "form-label">End Date</label>
<input name = "edu_graduation_date" type = "date" class =
"form-control edu_graduation_date" id = "" onkeyup="generateCV()">
</div>
<input name = "edu_description" type = "text" class = "form-
control edu_description" id = "" onkeyup="generateCV()">
</div>
</div>

</div>
</div>
</div>
</div>
</div>
<h3>projects</h3>
</div>

<div class = "repeater" data-repeater-list = "group-d">
<label for = "" class = "form-label">Project Name</label>
<input name = "proj_title" type = "text" class = "form-
control proj_title" id = "" onkeyup="generateCV()">
</div>
<label for = "" class = "form-label">Project link</label>
<input name = "proj_link" type = "text" class = "form-
control proj_link" id = "" onkeyup="generateCV()">
</div>
<input name = "proj_description" type = "text" class =
"form-control proj_description" id = "" onkeyup="generateCV()">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h3>skills</h3>
</div>

<div class = "repeater" data-repeater-list = "group-e">
<div class = "cv-form-row cv-form-row-skills">
<label for = "" class = "form-label">Skill</label>
<input name = "skill" type = "text" class = "form-control skill"
id = "" onkeyup="generateCV()">
</div>

</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
<section id = "preview-sc" class = "print_area">

<div class = "preview-cnt">
<div class = "preview-cnt-l bg-green text-white">
<div class = "preview-blk">
<div class = "preview-image">
<img src = "" alt = "" id = "image_dsp">
</div>
<div class = "preview-item preview-item-name">
<span class = "preview-item-val fw-6" id = "fullname_dsp"></span>
</div>
<div class = "preview-item">
<span class = "preview-item-val text-uppercase fw-6 ls-1" id =
"designation_dsp"></span>
</div>
</div>

<div class = "preview-blk-title">
<h3>about</h3>
</div>
<div class = "preview-blk-list">
<span class = "preview-item-val" id = "phoneno_dsp"></span>
</div>
<span class = "preview-item-val" id = "email_dsp"></span>
</div>
<span class = "preview-item-val" id = "address_dsp"></span>
</div>
<span class = "preview-item-val" id = "summary_dsp"></span>
</div>
</div>
</div>
<h3>skills</h3>
</div>
<div class = "skills-items preview-blk-list" id = "skills_dsp">

</div>
</div>
</div>
<div class = "preview-cnt-r bg-white">

<h3>Achievements</h3>
</div>
<div class = "achievements-items preview-blk-list" id =
"achievements_dsp"></div>
</div>

<h3>educations</h3>
</div>
<div class = "educations-items preview-blk-list" id =
"educations_dsp"></div>
</div>

<h3>experiences</h3>
</div>
<div class = "experiences-items preview-blk-list" id =
"experiences_dsp"></div>
</div>

<h3>projects</h3>
</div>
<div class = "projects-items preview-blk-list" id = "projects_dsp"></div>
</div>
</div>
</div>
</div>
</section>
<section class = "print-btn-sc">

<button type = "button" class = "print-btn btn btn-primary"
onclick="printCV()">Print CV</button>
</div>
</section>

<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-
a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
crossorigin="anonymous"></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.js"
integrity="sha512-
bZAXvpVfp1+9AUHQzekEZaXclsgSlAeEnMJ6LfFAvjqYUVZfcuVXeQoN5LhD7Uw0Jy4
NCY9q3kbdEXbwhZUmUQ==" crossorigin="anonymous" referrerpolicy="no-
referrer"></script>

<script src = "assets/js/script.js"></script>

<script src="assets/js/app.js"></script>
</body>
</html>
CODE:CSS
@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;}
.fs-13{font-size: 13px;}
.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{
color: var(--clr-white);
border: 1px solid var(--clr-blue);
}
.btn-primary:hover{
border-color: var(--clr-grey);
}
.btn-secondary{
border: 1px solid var(--clr-grey);
}
.btn-secondary:hover{
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;
justify-content: flex-start;
font-size: 1.8rem;
}
.navbar-brand-text{
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;
justify-content: space-between;
}
.header{
min-height: calc(100vh - 80px);
display: flex;
flex-direction: column;
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;
}
.header-content p{
margin-bottom: 2.6rem;
line-height: 1.6;
}
/* section one */
.section-one{
padding: 64px 0;
min-height: 80vh;
display: flex;
}
.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{
}
/* media queries */
@media screen and (min-width: 768px){
grid-template-columns: repeat(2, 1fr);
}
}

.section-one-content{
display: grid;
column-gap: 3rem;
}
.section-one-r{
text-align: left;
}
}
.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);
margin-bottom: 2rem;
}
.cv-form-row-title h3{
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);
position: relative;
}
textarea{
resize: none;
}
.form-elem{
position: relative;
}
.form-label{
display: block;
font-weight: 600;
font-size: 14px;
}
.form-control{
border-radius: none;
border: 1px solid rgba(0, 0, 0, 0.1);
font-size: 14px;
font-family: inherit;
width: 100%;
outline: 0;
}
.form-control:focus{
border-color: rgba(0, 0, 0, 0.3);
}
.form-text{
color: #ca0b00;
font-size: 12px;
position: absolute;
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;
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;
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{
}
.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;
}
.preview-blk-title h3{
text-transform: uppercase;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
padding-bottom: 0.5rem;
}
.preview-blk-title{
}
.preview-blk-list .preview-item{
font-size: 1.5rem;
opacity: 0.95;
}
.preview-cnt-r .preview-blk-title{
}
.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;
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;
}

font-style: italic;
margin-right: 1rem;
}

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

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

.cols-3{
column-gap: 2rem;
}
.cols-2{
column-gap: 2rem;
}
}

.cv-form-row{
}
.cols-3{
}
}
.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;
}
}
CODE: JAVASCRIPT
// regex for validation
const strRegex = /^[a-zA-Z\s]*$/; // containing only letters
const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-
9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const phoneRegex = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;
/* supports following number formats - (123) 456-7890, (123)456-7890, 123-456-7890,
123.456.7890, 1234567890, +31636363634, 075-63546725 */
const digitRegex = /^\d+$/;
const mainForm = document.getElementById('cv-form');

const validType = {
TEXT: 'text',
TEXT_EMP: 'text_emp',
EMAIL: 'email',
DIGIT: 'digit',
PHONENO: 'phoneno',
ANY: 'any',
}
// user inputs elements

let firstnameElem = mainForm.firstname,
middlenameElem = mainForm.middlename,
lastnameElem = mainForm.lastname,
imageElem = mainForm.image,
designationElem = mainForm.designation,
addressElem = mainForm.address,
emailElem = mainForm.email,
phonenoElem = mainForm.phoneno,
summaryElem = mainForm.summary;
// display elements
let nameDsp = document.getElementById('fullname_dsp'),
imageDsp = document.getElementById('image_dsp'),
phonenoDsp = document.getElementById('phoneno_dsp'),
emailDsp = document.getElementById('email_dsp'),
addressDsp = document.getElementById('address_dsp'),
designationDsp = document.getElementById('designation_dsp'),
summaryDsp = document.getElementById('summary_dsp'),
projectsDsp = document.getElementById('projects_dsp'),
achievementsDsp = document.getElementById('achievements_dsp'),
skillsDsp = document.getElementById('skills_dsp'),
educationsDsp = document.getElementById('educations_dsp'),
experiencesDsp = document.getElementById('experiences_dsp');
// first value is for the attributes and second one passes the nodelists
const fetchValues = (attrs, ...nodeLists) => {
let elemsAttrsCount = nodeLists.length;
let elemsDataCount = nodeLists[0].length;
let tempDataArr = [];
// first loop deals with the no of repeaters value

for(let i = 0; i < elemsDataCount; i++){
let dataObj = {}; // creating an empty object to fill the data
// second loop fetches the data for each repeaters value or attributes
for(let j = 0; j < elemsAttrsCount; j++){
// setting the key name for the object and fill it with data
dataObj[${attrs[j]}] = nodeLists[j][i].value;
}
tempDataArr.push(dataObj);
}
return tempDataArr;
}
const getUserInputs = () => {
// achivements
let achievementsTitleElem = document.querySelectorAll('.achieve_title'),
achievementsDescriptionElem = document.querySelectorAll('.achieve_description');
// experiences
let expTitleElem = document.querySelectorAll('.exp_title'),
expOrganizationElem = document.querySelectorAll('.exp_organization'),
expLocationElem = document.querySelectorAll('.exp_location'),
expStartDateElem = document.querySelectorAll('.exp_start_date'),
expEndDateElem = document.querySelectorAll('.exp_end_date'),
expDescriptionElem = document.querySelectorAll('.exp_description');
// education
let eduSchoolElem = document.querySelectorAll('.edu_school'),
eduDegreeElem = document.querySelectorAll('.edu_degree'),
eduCityElem = document.querySelectorAll('.edu_city'),
eduStartDateElem = document.querySelectorAll('.edu_start_date'),
eduGraduationDateElem = document.querySelectorAll('.edu_graduation_date'),
eduDescriptionElem = document.querySelectorAll('.edu_description');
let projTitleElem = document.querySelectorAll('.proj_title'),

projLinkElem = document.querySelectorAll('.proj_link'),
projDescriptionElem = document.querySelectorAll('.proj_description');
let skillElem = document.querySelectorAll('.skill');
// event listeners for form validation

firstnameElem.addEventListener('keyup', (e) => validateFormData(e.target,
validType.TEXT, 'First Name'));
middlenameElem.addEventListener('keyup', (e) => validateFormData(e.target,
validType.TEXT_EMP, 'Middle Name'));
lastnameElem.addEventListener('keyup', (e) => validateFormData(e.target,
validType.TEXT, 'Last Name'));
phonenoElem.addEventListener('keyup', (e) => validateFormData(e.target,
validType.PHONENO, 'Phone Number'));
emailElem.addEventListener('keyup', (e) => validateFormData(e.target,
validType.EMAIL, 'Email'));
addressElem.addEventListener('keyup', (e) => validateFormData(e.target, validType.ANY,
'Address'));
designationElem.addEventListener('keyup', (e) => validateFormData(e.target,
validType.TEXT, 'Designation'));
achievementsTitleElem.forEach(item => item.addEventListener('keyup', (e) =>

validateFormData(e.target, validType.ANY, 'Title')));
achievementsDescriptionElem.forEach(item => item.addEventListener('keyup', (e) =>
validateFormData(e.target, validType.ANY, 'Description')));
expTitleElem.forEach(item => item.addEventListener('keyup', (e) =>
expOrganizationElem.forEach(item => item.addEventListener('keyup', (e) =>
validateFormData(e.target, validType.ANY, 'Organization')));
expLocationElem.forEach(item => item.addEventListener('keyup', (e) =>
validateFormData(e.target, validType.ANY, "Location")));
expStartDateElem.forEach(item => item.addEventListener('blur', (e) =>
validateFormData(e.target, validType.ANY, 'End Date')));
expEndDateElem.forEach(item => item.addEventListener('keyup', (e) =>
validateFormData(e.target, validType.ANY, 'End Date')));
expDescriptionElem.forEach(item => item.addEventListener('keyup', (e) =>
eduSchoolElem.forEach(item => item.addEventListener('keyup', (e) =>
validateFormData(e.target, validType.ANY, 'School')));
eduDegreeElem.forEach(item => item.addEventListener('keyup', (e) =>
validateFormData(e.target, validType.ANY, 'Degree')));
eduCityElem.forEach(item => item.addEventListener('keyup', (e) =>
validateFormData(e.target, validType.ANY, 'City')));
eduStartDateElem.forEach(item => item.addEventListener('blur', (e) =>
validateFormData(e.target, validType.ANY, 'Start Date')));
eduGraduationDateElem.forEach(item => item.addEventListener('blur', (e) =>
validateFormData(e.target, validType.ANY, 'Graduation Date')));
eduDescriptionElem.forEach(item => item.addEventListener('keyup', (e) =>
projTitleElem.forEach(item => item.addEventListener('keyup', (e) =>
projLinkElem.forEach(item => item.addEventListener('keyup', (e) =>
validateFormData(e.target, validType.ANY, 'Link')));
projDescriptionElem.forEach(item => item.addEventListener('keyup', (e) =>
skillElem.forEach(item => item.addEventListener('keyup', (e) =>
validateFormData(e.target, validType.ANY, 'skill')));
return {
firstname: firstnameElem.value,
middlename: middlenameElem.value,
lastname: lastnameElem.value,
designation: designationElem.value,
address: addressElem.value,
email: emailElem.value,
phoneno: phonenoElem.value,
summary: summaryElem.value,
achievements: fetchValues(['achieve_title', 'achieve_description'],
achievementsTitleElem, achievementsDescriptionElem),
experiences: fetchValues(['exp_title', 'exp_organization', 'exp_location', 'exp_start_date',
'exp_end_date', 'exp_description'], expTitleElem, expOrganizationElem, expLocationElem,
expStartDateElem, expEndDateElem, expDescriptionElem),
educations: fetchValues(['edu_school', 'edu_degree', 'edu_city', 'edu_start_date',
'edu_graduation_date', 'edu_description'], eduSchoolElem, eduDegreeElem, eduCityElem,
eduStartDateElem, eduGraduationDateElem, eduDescriptionElem),
projects: fetchValues(['proj_title', 'proj_link', 'proj_description'], projTitleElem,
projLinkElem, projDescriptionElem),
skills: fetchValues(['skill'], skillElem)
}
};
function validateFormData(elem, elemType, elemName){

// checking for text string and non empty string
if(elemType == validType.TEXT){
if(!strRegex.test(elem.value) || elem.value.trim().length == 0) addErrMsg(elem,
elemName);
else removeErrMsg(elem);
}
// checking for only text string

if(elemType == validType.TEXT_EMP){
if(!strRegex.test(elem.value)) addErrMsg(elem, elemName);
}
// checking for email

if(elemType == validType.EMAIL){
if(!emailRegex.test(elem.value) || elem.value.trim().length == 0) addErrMsg(elem,
elemName);
}
// checking for phone number

if(elemType == validType.PHONENO){
if(!phoneRegex.test(elem.value) || elem.value.trim().length == 0) addErrMsg(elem,
elemName);
}
// checking for only empty

if(elemType == validType.ANY){
if(elem.value.trim().length == 0) addErrMsg(elem, elemName);
}
}
// adding the invalid text

function addErrMsg(formElem, formElemName){
formElem.nextElementSibling.innerHTML = ${formElemName} is invalid;
}
// removing the invalid text

function removeErrMsg(formElem){
formElem.nextElementSibling.innerHTML = "";
}
// show the list data

const showListData = (listData, listContainer) => {
listContainer.innerHTML = "";
listData.forEach(listItem => {
let itemElem = document.createElement('div');
itemElem.classList.add('preview-item');
for(const key in listItem){

let subItemElem = document.createElement('span');
subItemElem.classList.add('preview-item-val');
subItemElem.innerHTML = ${listItem[key]};
itemElem.appendChild(subItemElem);
}
listContainer.appendChild(itemElem);
})
}
const displayCV = (userData) => {

nameDsp.innerHTML = userData.firstname + " " + userData.middlename + " " +
userData.lastname;
phonenoDsp.innerHTML = userData.phoneno;
emailDsp.innerHTML = userData.email;
addressDsp.innerHTML = userData.address;
designationDsp.innerHTML = userData.designation;
summaryDsp.innerHTML = userData.summary;
showListData(userData.projects, projectsDsp);
showListData(userData.achievements, achievementsDsp);
showListData(userData.skills, skillsDsp);
showListData(userData.educations, educationsDsp);
showListData(userData.experiences, experiencesDsp);
}
// generate CV
const generateCV = () => {
let userData = getUserInputs();
displayCV(userData);
console.log(userData);
}
function previewImage(){
let oFReader = new FileReader();
oFReader.readAsDataURL(imageElem.files[0]);
oFReader.onload = function(ofEvent){
imageDsp.src = ofEvent.target.result;
}
}
// print CV
function printCV(){
window.print();
}
// form repeater
$(document).ready(function(){
$('.repeater').repeater({
initEmpty: false,
defaultValues: {
'text-input': ''
},
show:function(){
$(this).slideDown();
},
hide: function(deleteElement){
$(this).slideUp(deleteElement);
setTimeout(() => {
generateCV();
}, 500);
},
isFirstItemUndeletable: true
})
})
RESULT:
Conclusion & Future enhancement
Frontend (User Interface): The user interacts with the application by entering their personal
and professional details through forms, selecting templates, and previewing the resume in real
time. API Server (Backend): The backend processes the inputted data, selects the appropriate
template, and generates a well-formatted resume. It also handles user authentication and
manages saved resumes. Database: Stores user information and saved resumes. This enables
users to retrieve, edit, and store their resumes for future use. cloud Storage: The generated
resume files (PDF, DOCX) are stored securely, allowing users to download their files
whenever needed. External Integrations (Optional): Integration with platforms like LinkedIn
and Google Drive allows users to import data or save resumes directly to cloud services.
Admin Panel (Optional): Admins can manage templates, monitor system usage, and maintain
the backend. By leveraging these components, the Resume Maker system provides an
intuitive and user-friendly experience for generating customized resumes. The design is
scalable and can easily accommodate additional features, such as new resume templates,
enhanced integrations, or other user-centric functionalities. This modular design ensures that
as the user base grows or feature requirements change, the system can evolve to meet new
demands. Using tools like Lucid chart, draw.io, or Microsoft Visio, you can visualize and
implement this design in a clear and organized manner, ensuring a smooth and efficient
development process
REFERENCES:
https://translate.google.co.in/https://www.freeprojectz.com/project-report/193.
https://www.scribd.com/docsd/79765526/Online-Resume-Builder-
Report.https://www.livecareer.co.uk/lp/india/lukindlp01.aspx?utm_source=google&utm_med
ium=sem&utm_campaign=21719551189&utm_term=build%20resume&network=g&device=
c&adposition=&adgroupid=168450568478&placement=&adid=713972067595&gad_soujAp
7BhBjEiwAQMrrEQzFqBvuxJDOJ2Iq2YIPEyMnJEiNAQgHLuZ1kHl1hsWRSnrQ_WOTx
BoC4hEQAvD_BwEhttps://www.resume.com/
https://www.w3schools.com/

FINAL SYMPOSYS

Uploaded by

Copyright:

Available Formats

FINAL SYMPOSYS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

FINAL SYMPOSYS

Uploaded by

Copyright:

Available Formats

RESUME MAKER

Minor Project Report

Under the supervision of

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

SAGAR INSTITUTE OF RESEARCH & TECHNOLOGY, BHOPAL

Head of Department Guide Name

SAGAR INSTITUTE OF RESEARCH & TECHNOLOGY, BHOPAL

S.No. Topic Page

2. System design………………………………………………………………… 18-23

2.1Use Case Diagram………………………………………………….. 24

2.5Data Flow Diagram…………………………………………………. 28-29

5. Result Screenshots…………………………………………………………. 56-58

6. Conclusion & Future enhancements………………………………………….. 58-59

<section id = "about-sc" class = "">

<div class = "cols-3">

<div class = "row-separator repeater">

<div class = "row-separator repeater">

<div class = "cols-3">

<button data-repeater-delete type = "button" class = "repeater-

<div class = "row-separator repeater">

<div class = "cols-3">

<button data-repeater-delete type = "button" class = "repeater-

<div class = "row-separator repeater">

<div class = "row-separator repeater">

<button data-repeater-delete type = "button" class = "repeater-

<section id = "preview-sc" class = "print_area">

<div class = "preview-blk">

<div class = "preview-cnt-r bg-white">

<div class = "preview-blk">

<div class = "preview-blk">

<div class = "preview-blk">

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

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

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

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

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

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

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

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

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

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

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

const mainForm = document.getElementById('cv-form');

// user inputs elements

// first loop deals with the no of repeaters value

const getUserInputs = () => {

let projTitleElem = document.querySelectorAll('.proj_title'),

let skillElem = document.querySelectorAll('.skill');

// event listeners for form validation

achievementsTitleElem.forEach(item => item.addEventListener('keyup', (e) =>

function validateFormData(elem, elemType, elemName){

// checking for only text string

// checking for email

// checking for phone number

// checking for only empty

// adding the invalid text

// removing the invalid text

// show the list data

for(const key in listItem){

const displayCV = (userData) => {