A Project Report On

Portfolio Website
Submitted in partial fulfillment for the award of

MASTER OF COMPUTER APPLICATIONS DEGREE

Session 2023-

2024 By

Vinay Singh

(2200110140126)

Under the guidance

of Mr. Ashutosh

Pandey Assistant

Professor

UNITED INSTITUTE OF MANAGEMENT (011)

AFFILIATED TO

Dr. A.P.J Abdul Kalam Technical University (APJAKTU), LUCKNOW

 UNITED INSTITUTE OF
MANAGEMENT
Ph. 0532–2686070. 2686 Fax 0532-2687147

Certificate

Mini Project Report – 2023

This is to certify that the Project titled “TRAVEL AND TOURISM” is a bonafide record
of independent work done by VISHAL TRIPATHI (Roll No: 2200110140129) under my
supervision during 21st Aug to 30th Sept 2023, submitted to the Department of Computer
Applications, UNITED INSTITUTE OF MANAGEMENT, NAINI, PRAYAGRAJ
in partial fulfilment for the award of the degree of MASTER IN COMPUTER
APPLICATION from Dr. A.P.J. Abdul Kalam Technical University ( APJAKTU),
LUCKNOW.

The project is original work of the student and has not been submitted anywhere else in any
manner.

Date: (Mr. Ashutosh Pandey)

Assistant Professor
Department of Computer Application

Counter Signed
Signature…………………………….
(Prof. K.K. Malviya)
Principal
Date……………………………………

Affiliated to:

Dr APJ ABDUL KALAM. TECHNICAL UNIVERISTY, LUCKNOW

Noida Campus: 50, Knowledge Park III. Greater Noida. G.B. Nagar Ph: 0120-3230169. 2322209 Fax: 2322208

Corporate Office: 53, Leader Road, Allahabad-211003 Ph: 0532 2402951-55 Fax: 0532-2401865

E-mail [email protected] Web: http//unitedcollege.com

 Index
Sr. No. Description Page No.
1 Introduction and Objective 01-03
2 System Analysis
2.1 Identification of Need 04-08
2.2 Preliminary Investigation

3 Feasibility Study
3.1 Technical Feasibility 09-15
3.2 Economic Feasibility
3.3 Operational Feasibility
4 Analysis (DFD, ER-Diagram) 16-17
5 S/W Engineering 18-20
6 S/W & H/W Requirement Specification 21-22
7 System Design 23-26
8 Coding 27-60
9 Validation Checks 61-62
10 Implementation and Maintenance 63-66
11 Testing 67-70
12 System Security Measures 71-73
13 Report/Modules 74-75
14 Pert/Gantt Chart 76-77
15 Future Scope 78-79
16 Bibliography/References 80-81
 Acknowledgement

I am very grateful to Dr. K.K. Malviya (Principal, UIM) and Dr. Awaneesh Gupta (Head

of Department, MCA), for providing me the department facility during the course of this

project.

I am thankful to my project guide Mr. Ashutosh Pandey (Assistant Professor) for giving

his valuable time and constructive guidance in preparing the Synopsis and Project.

It would not have been possible to complete this project in short period of time without his

kind encouragement and valuable guidance.

I am highly indebted to our project coordinator Mr. Dhananjay Kumar Singh (Assistant

Professor), Department of Computer Application for their guidance and constant

supervision as well as for providing necessary information regarding the project. He was

like a great mentor during the whole project.

I would also like to express our special thanks to our friends and all staff members of the

“Department of Computer Application” for encouraging me and giving such attention and

time during this project.

Date: Signature
(Vishal Tripathi)
 Certificate of Originality

I hereby declare that the Project entitled “TRAVEL AND TOURISM” submitted to the
Department of Computer Application, UNITED INSTITUTE OF MANAGEMENT,
NAINI, PRAYAGRAJ in partial fulfilment for the award of the Degree of MASTER IN
COMPUTER APPLICATION during session 2023-2024 is an authentic record of my own
work carried out under the guidance of “Mr. Ashutosh Pandey” and that the Project has
not previously formed the basis for the award of any other degree.

This is to certify that the above statement made by me is correct to the best of my knowledge.

Place: Prayagraj
Signature of the candidate
Date:
Vishal Tripathi
(2200110140129)
 Chapter 1
Introduction/Aims and Objective

1
 Introduction/Aims and Objective

Introduction

A portfolio website is a great way to showcase your work and skills to potential employers or
clients. It can also be a great way to learn new skills and improve your web development skills.

A portfolio website typically includes the following sections:

 About: This section should introduce you and your work. It should include your name,
contact information, and a brief bio.
 Projects: This section should showcase your best work. It should include images or videos
of your projects, as well as a brief description of each project.
 Skills: This section should list your skills and experience. It can be helpful to include
keywords that potential employers or clients might be searching for.
 Contact: This section should include your contact information so that potential employers
or clients can reach you.

Here are some tips for creating a great portfolio website:

 Choose a simple and elegant design: Your portfolio website should be visually
appealing, but it should not be cluttered or distracting. The focus should be on your work.

 Use high-quality images and videos: Your work is the star of the show, so make sure to
showcase it in the best possible light. Use high-quality images and videos to highlight your
skills and creativity.

 Write clear and concise descriptions: When describing your work, be sure to be clear
and concise. Highlight the most important aspects of each project and explain the impact
your work had.

 Make it easy for visitors to contact you: Include your contact information on every page
of your website and make it easy for visitors to send you an email or call you.

2
Objective

The objective of a portfolio website is to showcase your skills and abilities to potential employers
or clients. It should be a well-designed and easy-to-navigate website that highlights your best
work. The website should also include information about your education, experience, and contact
details.

Here are some specific objectives of a portfolio website:

 To demonstrate your skills and abilities in a specific area, such as web development,
graphic design, or photography.

 To showcase your creativity and problem-solving skills.

 To show potential employers or clients that you are capable of completing projects on time
and to a high standard.

 To build your online presence and make yourself more visible to potential employers or
clients.

 To generate leads and inquiries from potential clients.

When creating a portfolio website, it is important to keep the following things in mind:

 The website should be visually appealing and easy to navigate.

 The website should be mobile-friendly.

 The website should be well-organized and easy to find the information that visitors are
looking for.

 The website should be updated regularly with new projects and information.

 The website should be secure and protected from unauthorized access.

3
Chapter 2
System
Analysis

4
 System Analysis

System Analysis is a process of collecting and interpreting facts, identifying the problems,
and decomposition of a system into its components.

A system analysis of a portfolio website can be broken down into the following steps:

 Problem analysis: The first step is to identify the problem that the portfolio website is trying
to solve. In most cases, the problem is to showcase the work of the individual or company
to potential clients or employers.

 Requirements analysis: Once the problem has been identified, the next step is to define
the requirements for the portfolio website. This includes the types of work that will be
showcased, the target audience, and the desired functionality of the website.

 Decision analysis: The decision analysis step involves identifying the different options for
solving the problem and selecting the best option. In the case of a portfolio website, the
options might include using a pre-made template, hiring a web designer, or building the
website yourself.

 Design: The design step is where the look and feel of the portfolio website is created. This
includes the layout, typography, colors, and images.

 Construction: The construction step is where the portfolio website is actually built. This
involves coding the website and uploading the content.

 Testing: The testing step is where the portfolio website is tested to make sure that it works
properly. This includes testing the navigation, the functionality, and the overall user
experience.

 Implementation: The implementation step is where the portfolio website is made live.
This involves publishing the website to a web server.

 Operation and support: The operation and support step is where the portfolio website is
maintained and updated. This includes fixing bugs, adding new content, and making changes to
the design.

5
In addition to these steps, there are a number of other factors that should be considered when
designing and developing a portfolio website. These factors include the following:

 The target audience: The portfolio website should be designed for the specific audience
that it is trying to reach. For example, a portfolio website for a web designer will be different
from a portfolio website for a photographer.

 The budget: The budget will determine the level of functionality and design that can be
included in the portfolio website.

 The timeline: The timeline will determine how long it will take to develop the portfolio
website.

 The skills and experience of the developer: The developer should have the skills and
experience necessary to create a high-quality portfolio website.

Here are some additional tips for creating a successful portfolio website:

 Make sure your website is easy to navigate.

 Use high-quality images and videos.

 Write clear and concise descriptions of your work.

 Keep your website updated with new content.

 Promote your website on social media and other online channels.

6
Preliminary Investigation

A preliminary investigation of a portfolio website is the process of gathering information and data
about the website in order to make informed decisions about its development and design. This
information can include the website's purpose, target audience, content, and design.

The following are some of the things you can do to conduct a preliminary investigation of a
portfolio website:

 Review the website's purpose. What is the website trying to achieve? Who is the target
audience?

 Analyze the website's content. What kind of content is included on the website? Is it relevant to
the target audience?

 Evaluate the website's design. Is the design visually appealing? Is it easy to navigate?

 Gather feedback from users. Ask potential users what they think of the website.

 Once you have gathered this information, you can use it to make decisions about the
website's development and design. For example, if the website's purpose is to showcase
your work as a graphic designer, you will need to make sure that the content is relevant
and the design is visually appealing.

Here are some of the key things to keep in mind when conducting a preliminary investigation of a
portfolio website:

 Be clear about the website's purpose. What do you want to achieve with the website?

 Understand your target audience. Who are you trying to reach with the website?

 Gather relevant content. The content should be relevant to your target audience andshowcase
your skills and experience.

 Make sure the design is visually appealing and easy to navigate.

 Get feedback from users. Ask potential users what they think of the website.

7
By conducting a preliminary investigation of your portfolio website, you can ensure that it is well-
designed and effective in achieving its goals.

Here are some additional tips for conducting a preliminary investigation of a portfolio website:

 Use a website audit tool to help you gather information about the website's performance,
traffic, and SEO.

 Look at similar websites in your industry to get ideas for design and content.

 Ask a friend or colleague to review the website and give you feedback.

Need of System

The need of a system for a portfolio website is to:

 Organize and showcase your work: A portfolio website is a great way to show potential
employers or clients your best work. It should be organized in a way that is easy to
navigate and that highlights your skills and abilities.

 Demonstrate your skills and experience: A portfolio website is more than just a collection
of your work. It is also a way to demonstrate your skills and experience. You can use your
portfolio website to highlight your areas of expertise, your creative process, and your results.

 Make it easy for people to find you: Your portfolio website should be easy to find on
search engines. This means using relevant keywords and phrases in your website's title,
meta descriptions, and content.

 Make a good first impression: A well-designed portfolio website can make a great first
impression on potential clients or employers. It shows that you are serious about your
work and that you take the time to present yourself professionally.

 Get feedback on your work: A portfolio website is a great way to get feedback on your
work from potential clients, employers, or peers. This feedback can help you to improve
your skills and create even better work in the future.

8
Chapter 3
Feasibility
Study

9
 Feasibility Study

Feasibility study analyses the viability of a proposed project or venture. It is used to evaluate

a project's potential, including the technical, financial, and economic aspects, and to

determine whether it should proceed. A feasibility study aims to identify and assess a

proposed project's strengths, weaknesses, opportunities, and threats to determine its

potential for success.

A portfolio website is a website that showcases a person's or company's work. It is a great way to
market oneself or one's services to potential clients or employers. Portfolio websites can be used
by a variety of professionals, including artists, designers, photographers, writers, and developers.

Purpose

The purpose of this feasibility study is to assess the feasibility of creating a portfolio website. The
study will consider the following factors:

 Technical feasibility: Do you have the necessary technical skills to create and maintain a
website? If not, will you need to hire someone to help you?

 Financial feasibility: How much will it cost to create and maintain a website? Can you
afford the costs?

 Legal feasibility: Are there any laws or regulations that you need to be aware of?

 Market feasibility: Is there a market for your portfolio website? Will people be interested
in seeing your work?

 Time feasibility: How much time do you have to create and maintain a website?

10
Here are some additional things to consider when conducting a feasibility study for a portfolio
website:

 The type of work you do. If you are a graphic designer, for example, you will need to
showcase your visual work. If you are a writer, you will need to focus on your written
work.

 Your target audience. Who are you trying to reach with your portfolio website? Once
you know your target audience, you can tailor the website to their needs.

 Your budget. How much money are you willing to spend on the website? There are many
free and low-cost website builders available, but you may need to hire a web designer if
you want a more professional-looking website.

 Your time commitment. How much time are you willing to spend on maintaining the
website? You will need to update the website regularly with new work and information.

The following sections provide more detail on each of these factors:

Technical feasibility

The technical feasibility of a portfolio website depends on a number of factors, including the
following:

 The skills and experience of the person who will be creating the website.

 The budget available for the project.

 The desired features and functionality of the website.

 The complexity of the website.

 The amount of time available to complete the project.

In general, a portfolio website is a feasible project for most people. There are many platforms and
tools available that make it easy to create a professional-looking website without any coding
knowledge. However, if you have specific requirements or a complex website in mind, you may
need to hire a web developer.

11
Here are some of the factors to consider when assessing the technical feasibility of a portfolio
website:

 Skills and experience: If you have no experience with web development, you may want to
start with a platform like WordPress or Squarespace. These platforms have drag-and-drop
editors that make it easy to create a website without any coding knowledge. If you have
more experience, you could use a content management system (CMS) like Drupal or Joomla.
These CMSs offer more flexibility and customization options, but they require more
technical knowledge to use.

 Budget: The cost of creating a portfolio website will vary depending on the platform you
choose, the features and functionality you need, and the amount of customization you
want. If you're on a tight budget, you can choose a free platform like WordPress or
Blogger. However, you may need to pay for additional features or functionality, such as a
custom domain name or a premium theme.

 Desired features and functionality: What features do you want your portfolio website to
have? Do you need to be able to display your work, write blog posts, or sell products? The
more features you need, the more complex your website will be and the more time and
money it will take to create.

 Complexity of the website: The complexity of your website will also affect its feasibility.
A simple website with a few pages and no custom features can be created relatively
quickly and easily. However, a complex website with many pages, custom features, and
interactive elements will take more time and expertise to develop.

 Amount of time available: How much time do you have to create your portfolio website?
If you're on a tight deadline, you'll need to choose a platform that's easy to use and that
doesn't require a lot of customization.

12
Economic feasibility

The economical feasibility of a portfolio website depends on a number of factors, including the
following:

 The cost of creating and maintaining the website.

 The potential benefits of having a website, such as increased exposure, improved

branding, and more opportunities to connect with potential clients or employers.

 The target audience for the website.

 The specific needs of the individual or business creating the website.

In general, a portfolio website can be a cost-effective way to showcase your work and attract new
clients or employers. However, the actual cost will vary depending on the specific needs of your
project.

Here are some of the costs involved in creating and maintaining a portfolio website:

 Domain name and hosting: The cost of a domain name and hosting will vary depending
on the provider. You can expect to pay around $10-20 per year for a domain name and $5-
10 per month for hosting.

 Design and development: If you don't have the skills to design and develop your own
website, you'll need to hire a professional. This can cost anywhere from a few hundred
dollars to several thousand dollars.

 Content: You'll need to create content for your website, such as text, images, and videos.
This can be time-consuming, but it doesn't have to be expensive.

 Marketing: You'll need to market your website to potential clients or employers. This can
involve things like search engine optimization (SEO), social media marketing, and email
marketing.

13
Schedule feasibility

The schedule feasibility of a portfolio website depends on a number of factors, including:

 The complexity of the website

 The experience of the developer(s)
 The availability of resources
 The budget

A simple portfolio website can be created in a few days, while a more complex website with custom
features may take several weeks or even months to develop.

If you are developing the website yourself, you will need to factor in your own availability and
experience. If you are hiring a developer, you will need to discuss the timeline with them and
make sure that it is realistic.

You also need to consider the availability of resources. If you are using a template or platform,
you will need to make sure that it has all of the features that you need. If you are developing a
custom website, you will need to make sure that you have access to the necessary tools and
software.

Operational feasibility

The operational feasibility of a portfolio website refers to its ability to be operated and maintained
on a day-to-day basis. This includes factors such as the website's design, content, and
functionality, as well as the resources required to keep it up and
running. Here are some of the key considerations for assessing the operational feasibility of a
portfolio website:

 Design: The website should be well-designed and easy to use. It should be visually
appealing and engaging, and it should be easy for visitors to find the information they are
looking for.

 Content: The website should contain high-quality content that showcases the individual's
skills and experience. The content should be well-written and well-organized, and it should
be updated regularly.

14
  Functionality: The website should be functional and user-friendly. It should allow visitors
to easily navigate the site and find the information they are looking for. The website
should also be secure and reliable.

 Resources: The website should be able to be operated and maintained with the resources
that are available. This includes the time, money, and skills of the individual or team
responsible for managing the website.

Here are some additional tips for improving the operational feasibility of a portfolio website:

 Choose a content management system (CMS) that is easy to use and maintain.

 Use a hosting provider that offers reliable and secure hosting services.

 Back up the website regularly to prevent data loss.

 Delegate tasks to others to free up your time.

 Automate tasks wherever possible.

15
 Chapter 4
Analysis (Data Flow Diagram)

16
Analysis (Data Flow Diagram)

DFD 1-Level

17
 Chapter 5
Software Engineering

18
 Software Engineering
Software engineering is the process of designing, developing, testing, and maintaining
software. The software engineering of a portfolio website involves a number of
considerations, including:

 Choosing the right technology stack: The technology stack that you choose will depend
on your specific needs and requirements.

Some popular options for portfolio websites include:

 Front-end: HTML, CSS, Javascript

 Designing a user-friendly interface: Your portfolio website should be easy to navigate and
use. Make sure that the layout is clear a concise, and that the important information is easy
to find.

 Showcasing your work: The most important part of your portfolio website is your work.
Make sure to highlight your most impressive projects and accomplishments. You can do
this by including screenshots, videos, and descriptions of your projects.

 Making your website responsive: Your portfolio website should look good and function well
on all devices, including desktop, laptop, tablet, and mobile.

 Securing your website: It is important to secure your portfolio website to protect it from
cyberattacks. Make sure to use strong passwords and keep your software up to date.

Here are some additional software engineering considerations for portfolio websites:

 Version control: It is important to use a version control system, such as Git, to track
changes to your website's code. This will make it easier to roll back changes if something
goes wrong.
 Continuous integration/continuous delivery: CI/CD is a set of practices that automates the
building, testing, and deployment of software. This can help you to deploy changes to your
website quickly and reliably.
 Testing: It is important to test your portfolio website thoroughly before launching it. This
includes unit testing, integration testing, and user acceptance testing.

19
  Deployment: Once your website is ready to launch, you need to deploy it to a web server.
There are a number of different hosting options available, so choose one that meets your
needs and budget.

Tips for designing and developing a software engineering portfolio website

 Keep it simple: Don't try to cram too much information onto your website. Focus on the
most important things, such as your best projects and accomplishments.

 Use high-quality images: Images are a great way to showcase your work. Make sure to use
high-quality images that are relevant to your projects.

 Write clear & concise descriptions: When describing your projects, be clear and concise.
Avoid using jargon or technical terms that your audience may not understand.

 Make it easy to contact you: Include a contact form on your website so that potential
employers can easily get in touch with you.

 Keep your website up to date: Make sure to update your portfolio website regularly with
new projects and accomplishments.

20
 Chapter 6
S/W & H/W Requirements

21
 S/W & H/W Requirements

Software and Hardware Specifications (Developer End)

Hardware Details:

RAM: Minimum of 4GB RAM

Processor: Intel Processor/Ryzen Processor/AMD Processor

Hard Disk: Minimum of 5GB Disk Space

Graphics Card: Not Mandatory

Display Resolution: 1024x768 (For Better Experience in Desktop/Laptop)

Software Details:

IDE: Visual Studio Code

Extension Used (VS Code): Live Server, Prettier.

Web Browser: Google Chrome/Mozilla Firefox

Web Technologies Used: HTML, CSS, Bootstrap, JavaScript

22
Chapter 7
System
Design

23
 System Design

Home Page

About Page

24
Skills Page

Work Page

25
Contact Page

26
Chapter 8
Coding

27
 Coding

HTML: index.html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="portfolio.css">

<!-- =====BOX ICONS===== -->

<link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css'
rel='stylesheet'>

<title>Portfolio Website</title>

</head>

<body>

<!--===== HEADER =====-->

<header class="l-header">

<nav class="nav bd-grid">

<div>

<a href="#" class="nav logo"></a>

</div>

<div class="nav menu" id="nav-menu">

<ul class="nav list">

<li class="nav item"><a href="#home" class="nav link active">Home</a></li>

<li class="nav item"><a href="#about" class="nav link">About</a></li>

28
 <li class="nav item"><a href="#skills" class="nav link">Skills</a></li>

<li class="nav item"><a href="#work" class="nav link">Work</a></li>

<li class="nav item"><a href="#contact" class="nav link">Contact</a></li>

</ul>

</div>

<div class="nav toggle" id="nav-toggle">

<i class='bx bx-menu'></i>

</div>

</nav>

</header>

<!--===== HOME =====-->

<main class="l-main">

<section class="home bd-grid" id="home">

<div class="home data">

<h1 class="home title">Hi,<br>I'am <span class="home

title- color">Vinay</span><br> Web Designer</h1>

<a href="#contact" class="button">Contact</a>

</div>

<div class="home social">

<a href="https://www.linkedin.com/" class="home social-icon"><i class='bx

bxl-linkedin'></i></a>

<!-- <a href="" class="home social-icon"><i class='bx bxl-behance' ></i></a> -->

<a href="" class="home social-icon"><i class='bx bxl-github' ></i></a>

</div>

29
 <div class="home img">

<image src="photo.jpg"/>

</div>

</section>

<!--===== ABOUT =====-->

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

<h2 class="section-title">About</h2>

<div class="about container bd-grid">

<div class="about img">

<img src="vinay pic.jpg" alt="">

</div>

<div>

<h2 class="about subtitle">I'am Vinay</h2>

<p class="about text">Lorem, ipsum dolor sit amet consectetur

adipisicing elit. Voluptate cum expedita quo culpa tempora, assumenda, quis fugiat ut
voluptates soluta, aut earum nemo recusandae cumque perferendis! Recusandae alias
accusamus atque.</p>

</div>

</div>

</section>

<!--===== SKILLS =====-->

<section class="skills section" id="skills">

<h2 class="section-title">Skills</h2>

<div class="skills container bd-grid">

30
 <div>

<h2 class="skills subtitle">Profesional Skills</h2>

<p class="skills text">Lorem ipsum dolor sit, amet consectetur adipisicing

elit. Velit optio id vero amet, alias architecto consectetur error eum eaque sit.</p>

<div class="skills data">

<div class="skills names">

<i class='bx bxl-html5 skills icon'></i>

<span class="skills name">HTML5</span>

</div>

<div class="skills bar skills html">

</div>

<div>

<span class="skills percentage">95%</span>

</div>

</div>

<div class="skills data">

<div class="skills names">

<i class='bx bxl-css3 skills icon'></i>

<span class="skills name">CSS3</span>

</div>

<div class="skills bar skills css">

</div>

<div>

<span class="skills percentage">85%</span>

</div>

31
</div>

<div class="skills data">

<div class="skills names">

<i class='bx bxl-javascript skills icon' ></i>

<span class="skills name">JAVASCRIPT</span>

</div>

<div class="skills bar skills js">

</div>

<div>

<span class="skills percentage">65%</span>

</div>

</div>

<div class="skills data">

<div class="skills names">

<i class='bx bxs-paint skills icon'></i>

<span class="skills name">UX/UI</span>

</div>

<div class="skills bar skills ux">

</div>

<div>

<span class="skills percentage">85%</span>

</div>

</div>

</div>

32
 <div>

<img src="work3.jpg" alt="" class="skills img">

</div>

</div>

</section>

<!--===== WORK =====-->

<section class="work section" id="work">

<h2 class="section-title">Work</h2>

<div class="work container bd-grid">

<a href="" class="work img">

<img src="work1.jpg" alt="">

</a>

<a href="" class="work img">

<img src="work2.jpg" alt="">

</a>

<a href="" class="work img">

<img src="work3.jpg" alt="">

</a>

<a href="" class="work img">

<img src="work4.jpg" alt="">

</a>

<a href="" class="work img">

<img src="work5.jpg" alt="">

33
 </a>

<a href="" class="work img">

<img src="work6.jpg" alt="">

</a>

</div>

</section>

<!--===== CONTACT =====-->

<section class="contact section" id="contact">

<h2 class="section-title">Contact</h2>

<div class="contact container bd-grid">

<form action="" class="contact form">

<input type="text" placeholder="Name" class="contact input">

<input type="mail" placeholder="Email" class="contact input">

<textarea name="" id="" cols="0" rows="10" class="contact input"></textarea>

<input type="button" value="Submit" class="contact button button" onclick="Message()">

</form>

</div>

</section>

</main>

<!--===== FOOTER =====-->

<footer class="footer">

<!-- <p class="footer title">Vinay</p> -->

34
 <div class="footer social">

<a href="https://www.facebook.com" class="footer icon"><i class='bx bxl-

facebook' ></i></a>

<a href="https://www.instagram.com" class="footer icon"><i class='bx bxl-

instagram' ></i></a>

<a href="#" class="footer icon"><i class='bx bxl-twitter' ></i></a>

</div>

</footer>

<!--===== MAIN JS =====-->

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

</body>

</html>

35
 CSS: portfolio.css
/*===== GOOGLE FONTS =====*/

@import url("https://fonts.googleapis.com/css2?
family=Poppins:wght@400;600;700&display=swap");

/*===== VARIABLES CSS =====*/

:root {

--header-height: 3rem;

--font-semi: 600;

/*===== Colores =====*/

/*Purple 260 - Red 355 - Blue 224 - Pink 340*/

/* HSL color mode */

--hue-color: 224;

--first-color: hsl(var(--hue-color), 89%, 60%);

--second-color: hsl(var(--hue-color), 56%, 12%);

/*===== Fuente y tipografia =====*/

--body-font: 'Poppins', sans-serif;

--big-font-size: 2rem;

--h2-font-size: 1.25rem;

--normal-font-size: .938rem;

--smaller-font-size: .75rem;

/*===== Margenes =====*/

--mb-2: 1rem;

--mb-4: 2rem;

--mb-5: 2.5rem;

--mb-6: 3rem;

36
 /*===== z index =====*/

--z-back: -10;

--z-fixed: 100;

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

:root {

--big-font-size: 3.5rem;

--h2-font-size: 2rem;

--normal-font-size: 1rem;

--smaller-font-size: .875rem;

/*===== BASE =====*/

*, ::before, ::after {

box-sizing: border-

box;

html {

scroll-behavior: smooth;

body {

margin: var(--header-height) 0 0

0; font-family: var(--body-font);

font-size: var(--normal-font-size);

color: var(--second-color);
37
}

h1, h2, p {

margin: 0;

ul {

margin:

0;

padding: 0;

list-style: none;

a {

text-decoration: none;

img {

max-width: 100%;

height: auto;

display: block;

/*===== CLASS CSS ===== */

.section-title {

position:

relative;

font-size: var(--h2-font-

size); color: var(--first-

38
color); margin-top: var(--mb-

2);

39
 margin-bottom: var(--mb-

4); text-align: center;

.section-title::after {

position: absolute;

content: '';

width: 64px;

height: 0.18rem;

left: 0;

right: 0;

margin: auto;

top: 2rem;

background-color: var(--first-color);

.section {

padding-top: 3rem;

padding-bottom:

2rem;

/*===== LAYOUT =====*/

.bd-grid {

max-width: 1024px;

display: grid;

margin-left: var(--mb-2);
40
 margin-right: var(--mb-2);

.l-header {

width: 100%;

position:

fixed; top: 0;

left: 0;

z-index: var(--z-

fixed); background-

color: #fff;

box-shadow: 0 1px 4px rgba(146, 161, 176, 0.15);

/*===== NAV =====*/

.nav {

height: var(--header-height);

display: flex;

justify-content: space-

between; align-items: center;

font-weight: var(--font-semi);

@media screen and (max-width: 767px) {

.nav menu {

position: fixed;

top: var(--header-height);
41
 right: -100%;

width: 80%;

height: 100%;

padding: 2rem;

background-color: var(--second-color);

transition: .5s;

.nav item {

margin-bottom: var(--mb-4);

.nav link {

position: relative;

color: #fff;

.nav link:hover {

position: relative;

.nav link:hover::after {

position: absolute;

content: '';

width: 100%;

height: 0.18rem;

left: 0;

42
 top: 2rem;

background-color: var(--first-color);

.nav logo {

color: var(--second-color);

.nav toggle {

color: var(--second-

color); font-size: 1.5rem;

cursor: pointer;

/*Active menu*/

.active::after {

position:

absolute; content:

''; width: 100%;

height: 0.18rem;

left: 0;

top: 2rem;

background-color: var(--first-color);

/*=== Show menu ===*/

.show {

right: 0;

43
}

/*===== HOME =====*/

.home {

position: relative;

row-gap: 5rem;

padding: 4rem 0

5rem;

.home data {

align-self: center;

.home title {

font-size: var(--big-font-

size); margin-bottom: var(--mb-

5);

.home title-color {

color: var(--first-color);

.home social {

display: flex;

flex-direction: column;

.home social-icon {
44
width: max-content;

45
 margin-bottom: var(--mb-

2); font-size: 1.5rem;

color: var(--second-color);

.home social-icon:hover {

color: var(--first-color);

.home img {

position: absolute;

top: 150px;

right: 0;

bottom: 0;

.home img img{ border-

radius:

48%;height: 340px;

width: 340px;

object-fit: cover;

.home img img:hover{

filter: drop-shadow(10px 10px 10px black);

transform: scale(1.1);

transition: all 1s ease-out;

46
.home blob {

fill: var(--first-color);

.home blob-img {

width: 360px;

/*BUTTONS*/

.button {

display: inline-block;

background-color: var(--first-color);

color: #fff;

padding: .75rem 2.5rem;

font-weight: var(--font-

semi); border-radius: .5rem;

transition: .3s;

.button:hover {

box-shadow: 0px 10px 36px rgba(0, 0, 0, 0.15);

transform: scale(1.05);

/* ===== ABOUT =====*/

.about container {

47
 row-gap: 2rem;

text-align:

center;

.about subtitle {

margin-bottom: var(--mb-2);

.about img {

justify-self: center;

.about img img {

width: 200px;

border-radius:

15%;

.about img img:hover{

filter: drop-shadow(10px 10px 10px black);

transform: scale(1.1);

transition: all 1s ease-out;

/* ===== SKILLS =====*/

.skills container {

row-gap: 2rem;

text-align:
48
 center;

49
.skills subtitle {

margin-bottom: var(--mb-2);

.skills text {

margin-bottom: var(--mb-4);

.skills data {

display: flex;

justify-content: space-

between; align-items: center;

position: relative;

font-weight: var(--font-semi);

padding: .5rem 1rem;

margin-bottom: var(--mb-

4); border-radius: .5rem;

box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);

.skills icon {

font-size: 2rem;

margin-right: var(--mb-2);

color: var(--first-color);

50
.skills names {

display: flex;

align-items:

center;

.skills bar {

position: absolute;

left: 0;

bottom: 0;

background-color: var(--first-color);

height: .25rem;

border-radius: .5rem;

z-index: var(--z-

back);

.skills html {

width: 95%;

.skills css {

width: 85%;

.skills js {

width: 65%;

.skills ux {
51
width: 85%;

52
}

.skills img {

border-radius: .5rem;

/* ===== WORK =====*/

.work container {

row-gap: 2rem;

.work img {

box-shadow: 0px 4px 25px rgba(14, 36, 49,

0.15); border-radius: .5rem;

overflow: hidden;

.work img img {

transition: 1s;

.work img img:hover {

transform: scale(1.1);

/* ===== CONTACT =====*/

.contact input {

width: 100%;

53
 font-size: var(--normal-font-

size); font-weight: var(--font-

semi); padding: 1rem;

border-radius: .5rem;

border: 1.5px solid var(--second-color);

outline: none;

margin-bottom: var(--mb-4);

.contact button {

display: block;

border: none;

outline: none;

font-size: var(--normal-font-size);

cursor: pointer;

margin-left: auto;

/* ===== FOOTER =====*/

.footer {

background-color: var(--second-color);

color: #fff;

text-align: center;

font-weight: var(--font-semi);

padding: 2rem 0;

54
}

.footer title {

font-size: 2rem;

margin-bottom: var(--mb-4);

.footer social {

margin-bottom: var(--mb-4);

.footer icon { font-

size: 1.5rem;

color: #fff;

margin: 0 var(--mb-2);

.footer copy {

font-size: var(--smaller-font-size);

/* ===== MEDIA QUERIES=====*/

@media screen and (max-width: 320px) {

.home {

row-gap: 2rem;

.home img {

width: 200px;

55
 }

@media screen and (max-width: 360px) {

.home {

row-gap: 2rem;

.home img {

width: 25%;

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

.home {

padding: 4rem 0 2rem;

.home social {

padding-top: 0;

padding-bottom:

2.5rem; flex-

direction: row; align-

self: flex-end;

.home social-icon {

margin-bottom: 0;

margin-right: var(--mb-4);

}
56
.home img {

width: 300px;

bottom: 25%;

.about container {

grid-template-columns: repeat(2,

1fr); align-items: center;

text-align: initial;

.skills container {

grid-template-columns:

.7fr; justify-content:

center; column-gap: 1rem;

.work container {

grid-template-columns: repeat(2,

1fr); column-gap: 2rem;

padding-top: 2rem;

.contact form {

width: 360px;

padding-top:

2rem;

.contact container {
57
 justify-items: center;

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

body {

margin: 0;

.section {

padding-top: 4rem;

padding-bottom:

3rem;

.section-title {

margin-bottom: var(--mb-6);

.section-title::after {

width: 80px;

top: 3rem;

.nav {

height: calc(var(--header-height) + 1.5rem);

.nav list {

display: flex;

padding-top:
58
0;

59
}

.nav item {

margin-left: var(--mb-

6); margin-bottom: 0;

.nav toggle {

display: none;

.nav link {

color: var(--second-color);

.home {

padding: 8rem 0 2rem;

.home img {

width: 400px;

bottom: 10%;

.about container {

padding-top: 2rem;

.about img img {

width: 300px;

60
 .skills container {

grid-template-columns: repeat(2,

1fr); column-gap: 2rem;

align-items:

center; text-align:

initial;

.work container {

grid-template-columns: repeat(3,

1fr); column-gap: 2rem;

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

.bd-grid {

margin-left: auto;

margin-right:

auto;

.home {

padding: 10rem 0 2rem;

.home img {

width: 450px;

}
61
.new{

62
 display: flex;

63
 Javascript: main.js

/*===== MENU SHOW =====*/

const showMenu = (toggleId, navId) =>{

const toggle = document.getElementById(toggleId),

nav = document.getElementById(navId)

if(toggle && nav){

toggle.addEventListener('click', ()=>{

nav.classList.toggle('show')

})

showMenu('nav-toggle','nav-menu')

/*==================== REMOVE MENU MOBILE ====================*/

const navLink = document.querySelectorAll('.nav link')

function linkAction(){

const navMenu = document.getElementById('nav-menu')

// When we click on each nav link, we remove the show-menu class

navMenu.classList.remove('show')

navLink.forEach(n => n.addEventListener('click', linkAction))

/*==================== SCROLL SECTIONS ACTIVE LINK ====================*/

64
const sections =

document.querySelectorAll('section[id]') function

scrollActive(){

const scrollY =

window.pageYOffset

sections.forEach(current =>{

const sectionHeight = current.offsetHeight

const sectionTop = current.offsetTop - 50;

sectionId = current.getAttribute('id')

if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){

document.querySelector('.nav menu a[href*=' + sectionId +

']').classList.add('active')

}else{

document.querySelector('.nav menu a[href*=' + sectionId +

']').classList.remove('active')

})

window.addEventListener('scroll', scrollActive)

/*===== SCROLL REVEAL ANIMATION =====*/

const sr = ScrollReveal({

origin: 'top',

distance: '60px',

duration: 2000,

65
 delay: 200,

// reset: true

66
});

sr.reveal('.home data, .about img, .skills subtitle, .skills text',{});

sr.reveal('.home img, .about subtitle, .about text, .skills img',{delay: 400});

sr.reveal('.home social-icon',{ interval: 200});

sr.reveal('.skills data, .work img, .contact input',{interval: 200});

function Message(){

alert("Message

Sent");

67
 Chapter 9
Validation Checks

68
 Validation Checks

A portfolio website is a great way to showcase your work and skills to potential clients or
employers. However, before you launch your website, it's important to run some validation
checks to make sure that it's working properly and that all of the information is accurate and up-
to-date.

Here are some key validation checks to perform on your portfolio website:

 Test all of the links on your website. Make sure that they all work correctly and that they
lead to the intended pages. You can use a free online tool like W3C Link Checker to help
you with this.
 Check your website's layout and design on different devices and browsers. Make sure that
it looks good and functions properly on all devices, including desktop computers, laptops,
tablets, and smartphones.
 Test your website's contact form. Make sure that it works correctly and that you receive all
of the messages that are sent to you.
 Proofread all of the text on your website carefully. Make sure that there are no errors in
grammar or spelling.
 Ask a friend or colleague to review your website. They can help you to identify any errors
or areas for improvement.

Here are some additional validation checks to consider:

 Validate all of the forms on your website. Make sure that the required fields are marked
correctly and that the data is being submitted correctly.
 Validate all of the images on your website. Make sure that they are the correct size and
format, and that they are loading properly.
 Validate all of the videos on your website. Make sure that they are playing correctly and
that they are compatible with all devices and browsers.
 Validate all of the social media links on your website. Make sure that they are working
correctly and that they lead to the correct social media pages.

69
 Chapter 10
Implementation & Maintenance

70
 Implementation & Maintenance

Implementation

To implement a portfolio website, you will need to:

 Choose a hosting provider and domain name. Your hosting provider will store your website's
files and make them accessible to visitors. Your domain name is the address that people
will type in their web browser to visit your website.
 Design your website. You can use a variety of tools to design your website, such as
HTML, CSS, and JavaScript. If you are not comfortable coding, you can use a website
builder or content management system (CMS) such as WordPress or Wix.
 Add your content. This includes your portfolio projects, contact information, and any other
information you want to share with visitors.
 Publish your website. Once you are happy with your website, you need to publish it so that
it is live on the internet. This process varies depending on your hosting provider.

Here are some additional tips for implementing a portfolio website:

 Choose a simple, clean design. Your portfolio website should be easy to navigate and
focus on your work. Avoid using too many flashy elements or animations.
 Use high-quality images and videos. Visuals are important for showcasing your portfolio,
so make sure to use high-quality images and videos of your work.
 Write clear and concise descriptions. For each project in your portfolio, write a clear and
concise description of what you did, what challenges you faced, and what the results were.
 Include a contact form. Make it easy for potential clients to get in touch with you by
including a contact form on your website.
 Promote your website. Once your website is live, promote it to potential clients by sharing
it on social media, reaching out to your network, and submitting it to search engines.

71
 Maintenance

Maintaining a portfolio website is important to ensure that it is up-to-date, secure, and performing
well. This includes regularly checking for and fixing broken links, updating software and plugins,
backing up the site, and adding new content.

Here is a checklist of website maintenance tasks that you should perform on a regular basis:

 Check for broken links. Broken links can frustrate visitors and make your website look
unprofessional. You can use a free online tool like Link Checker to find and fix broken links.
 Update software and plugins. Outdated software and plugins can leave your website
vulnerable to security attacks. Make sure to update your website's content management
system (CMS), themes, and plugins as soon as new versions are released.
 Back up your website. Regularly backing up your website will protect you from data loss
in the event of a hack or technical issue. You can use a backup plugin to automatically
back up your site on a regular basis.
 Add new content. Adding new content to your portfolio website will keep it fresh and
engaging for visitors. This could include new projects, blog posts, or testimonials.

Here are some additional tips for maintaining your portfolio website:

 Create a maintenance schedule. This will help you to stay on top of all of the tasks that
need to be completed.
 Use a content management system (CMS). A CMS will make it easier to update your
website's content and manage your plugins.
 Keep your website's theme and plugins up-to-date. This will help to improve your
website's security and performance.
 Monitor your website's traffic and analytics. This will help you to identify which pages are
popular and which pages need improvement.
 Get feedback from others. Ask friends, family, or colleagues to visit your website and give
you feedback on its design, usability, and content.

72
 Challenges

Some of the most common challenges while building & maintaining portfolio website:

 Choosing the right platform and tools. There are many different platforms and tools available
for building websites, and it can be difficult to choose the right ones for your needs. You need
to consider your budget, skill level, and the features that are important to you.
 Designing an effective website. Your portfolio website should be visually appealing and
easy to navigate. It should also be responsive, so that it looks good on all devices.
 Selecting the right projects to showcase. You don't want to overload your portfolio with
too many projects, but you also don't want to leave out any important work. You need to
choose your projects carefully and highlight your best work.
 Writing compelling project descriptions. Your project descriptions should be clear,
concise, and informative. They should also be tailored to your target audience.
 Keeping your website up-to-date. As you gain new experience and work on new projects,
you need to update your portfolio website accordingly. This can be a time-consuming task,
but it is important to keep your portfolio fresh and relevant.

73
Chapter 11
Testing

74
 Testing

Testing is a group of techniques to determine the correctness of the application under the

predefined script but, testing cannot find all the defect of application. The main intent of

testing is to detect failures of the application so that failures can be discovered and

corrected.

Testing includes an examination of code and also the execution of code in various

environments, conditions as well as all the examining aspects of the code. In the current

scenario of software development, a testing team may be separate from the development

team so that Information derived from testing can be used to correct the process of software

development.

Manual Testing

The process of checking the functionality of an application as per the customer needs

without taking any help of automation tools is known as manual testing. While performing the

manual testing on any application, we do not need any specific knowledge of any testing

tool, rather than have a proper understanding of the product so we can easily prepare the test

document.

Types of Manual Testing

There are various methods used for manual testing. Each technique is used according to its

testing criteria. Types of manual testing are given below:

 White Box Testing

 Black Box Testing

 Gray Box Testing

75
 White-box testing

The White Box Testing is done by Developer, where they check every line of a code before

giving it to the Test Engineer. Since the code is visible for the Developer during the testing,

that's why it is also known as White Box Testing.

Black Box Testing

The Black Box Testing is done by the Test Engineer, where they can check the functionality

of an application or the software according to the customer /client's needs. In this, the code

is not visible while performing the testing; that's why it is known as Black-Box Testing.

Testing a portfolio website is important to ensure that it is working properly and that it is easy for
visitors to use. There are a number of different types of tests that you can perform, including:

 Functional testing: This type of testing focuses on ensuring that all of the features of your
website are working as expected. This includes testing things like navigation, links, forms,
and any other interactive elements.
 Performance testing: This type of testing focuses on measuring the speed and responsiveness of
your website. This is important to ensure that your website loads quickly and that it can
handle a high volume of traffic.
 Usability testing: This type of testing focuses on observing how users interact with your
website to identify any areas where the user experience can be improved. This can be done
by conducting user testing sessions with a small group of people or by using a usability
testing tool.

Here are some specific things to look for when testing your portfolio website:

 Make sure that all of your links are working properly. This includes both internal links (links
to other pages on your website) and external links (links to other websites).
 Test your forms to make sure that they are submitting data correctly. You should also test
for validation errors, such as trying to submit a form with empty fields.

76
  Check that your images and videos are loading properly.
 Test your website on different devices and browsers. This is important to ensure that your
website looks good and functions well on all platforms.
 Ask a friend or family member to review your website and give you feedback. This can
help you to identify any areas that you may have missed.

Here are some additional tips for testing your portfolio website:

 Use a staging environment. This is a copy of your website that you can use to test changes
before deploying them to your live website.
 Create a test plan. This will help you to stay organized and to ensure that you test all of the
important aspects of your website.
 Use a checklist. This can help you to track your progress and to make sure that you don't
miss anything.
 Document your findings. This will help you to track the progress of your testing and to
identify any areas that need improvement.

77
 Chapter 12
System Security Measures

78
 System Security Measures

System security measures of a portfolio website are features and practices that are

implemented to protect the website and its users from unauthorized access, use, disclosure,

disruption, modification, or destruction.

Some system security measures that you can take to protect your portfolio website:

 Use a strong password and enable two-factor authentication (2FA). A strong password
should be at least 12 characters long and include a mix of upper and lowercase letters,
numbers, and symbols. 2FA adds an extra layer of security to your account by requiring
you to enter a code from your phone in addition to your password when logging in.
 Keep your website software up to date. Software developers regularly release updates to
their software to fix security vulnerabilities. It is important to install these updates as soon
as they are available.
 Use a secure web hosting provider. A secure web hosting provider will have measures in
place to protect your website from cyberattacks. When choosing a web hosting provider,
look for one that offers features such as firewalls, intrusion detection systems, and
malware scanning.
 Use a content delivery network (CDN). A CDN can help to protect your website from
denial- of-service (DoS) attacks. A DoS attack is an attempt to overwhelm your website
withtraffic, making it unavailable to legitimate visitors. A CDN can help to mitigate this
type ofattack by distributing your website's content across multiple servers.
 Use a web application firewall (WAF). A WAF can help to protect your website from
common web attacks, such as SQL injection and cross-site scripting (XSS). A WAF can
also help to block malicious traffic from reaching your website.

In addition to these system security measures, you should also take steps to protect the content of
your portfolio website. This includes:

 Being careful about what information you publish on your website. Avoid publishing
sensitive information, such as your home address or phone number. You may also want to

79
 consider using a contact form instead of publishing your email address directly on your
website.
 Using a watermark on your images. This can help to deter people from stealing your
images and using them without your permission.
 Copyrighting your work. This will give you the legal right to take action against anyone who
infringes on your copyright.

80
 Chapter 13
Report/Module
s

81
 Report/Modules

A portfolio website is a website that showcases your best work. It can be used for a variety of
purposes, such as applying for jobs, attracting new clients, or simply sharing your work with the
world.

A good portfolio website should be well-designed, easy to navigate, and visually appealing. It
should also be mobile-friendly, as more and more people are using their smartphones and tablets
to browse the web.

Here are some of the key elements of a good portfolio website:

 Homepage: The homepage is the first page that visitors will see, so it's important to make
a good impression. This page should include a brief overview of your work, your contact
information, and links to your other pages.
 About page: The about page should tell your visitors more about you and your work
experience. It's a good place to include your resume, testimonials from past clients or
employers, and any other relevant information.
 Portfolio: The portfolio is the most important page on your website. This is where you will
showcase your best work. Be sure to include a variety of projects, and choose projects that
are relevant to your target audience.
 Contact page: The contact page should make it easy for visitors to get in touch with you.
Be sure to include your email address, phone number, and social media links.

In addition to these core modules, you may also want to include additional modules, such as:

 Blog: A blog is a great way to share your thoughts and insights on your industry, as well
as to promote your work.
 Testimonials: If you have any testimonials from past clients or employers, you can display
them on your website to help build trust with potential clients.
 Resume: If you are looking for new job opportunities, you can include a resume module
on your website to make it easy for potential employers to contact you.

82
Chapter 14
Pert/Gantt
Chart

83
Pert/Gantt Chart

84
Chapter 15
Future
Scope

85
 Future Scope

The future scope of portfolio websites is bright, as they become increasingly important for
professionals and businesses to showcase their work and attract new clients. Here are some of the
key trends that are shaping the future of portfolio websites:

 Increased use of emerging technologies: Emerging technologies such as artificial

intelligence (AI), machine learning (ML), and augmented reality (AR) are being used to
create more engaging and interactive portfolio websites. For example, AI can be used to
personalize the website experience for each visitor, while ML can be used to curate and
recommend relevant content. AR can be used to create virtual experiences that allow
visitors to explore a portfolio in a more immersive way.
 Greater focus on storytelling: Portfolio websites are becoming more focused on
storytelling, as professionals and businesses realize the importance of connecting with
their audience on an emotional level. This means using high-quality visuals, compelling
copy, and engaging videos to tell their stories and share their passion for their work.
 More integration with social media: Portfolio websites are becoming more integrated with
social media, as professionals and businesses look to leverage their social media following
to reach a wider audience. This can be done by embedding social media posts on the portfolio
website, or by adding social sharing buttons to make it easy for visitors to share the
website with their own networks.
 Greater focus on user experience (UX): Portfolio websites are becoming more focused on
UX, as professionals and businesses realize the importance of making it easy for visitors to
find the information they are looking for. This means using clear navigation, well-written
labels, and responsive design to ensure that the website looks good and functions well on
all devices.

86
 Chapter 16
Bibliography/References

87
 Bibliography/References

 https://www.w3schools.com/html/html_basic.asp

 https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps

 https://www.javascripttutorial.net/

 https://youtu.be/-mbYAj5hvLs?si=hwEY8VDB2FymlSMV

 https://icons.getbootstrap.com/

88