TABLE OF CONTENTS

1|Page
 INTRODUCTION

A portfolio website is a crucial tool for professionals across various industries, and its necessity stems
from several key reasons like Showcasing Skills and Work, Searchability and Online Presence,
Demonstrating Growth and Progress, Career Advancement and Networking etc.

that is why portfolio website project is a versatile and powerful tool which plays a pivotal role in
establishing a professional identity, creating opportunities, and facilitating meaningful connections in
today’s interconnected world.

1.1 Problem Statement:

It is not possible to test or showcase our skills by interacting with each person that is why everyone in the
tech industry needs an e portfolio which can reflect the persons capabilities, his work and contact details.
Each tech industry needs a good employee having set of technological knowledge and e-portfolio will
help you to show case your skills and work.

1.2 Proposed Solution:

A portfolio website project will be a digital platform that individuals, typically professionals or creatives,
use to showcase their work, skills, accomplishments, and experiences. It will serve as an online portfolio,
providing a centralized and easily accessible space for presenting a curated selection of projects, designs,
artworks, or any other relevant contributions in a visual and interactive format.

1.3 Objective of the Project:

The basic formula of a portfolio website project would include your about , your best work , experience ,
Achievements and contact information . The main objective to create your e portfolio website is to
showcase your skills and work to other recruiters or companies.

2|Page
1.4 Methodologies Used:
Front end of the website will be created using html for stylizing the page with its layout structure and
dynamic images which will be handled by the developer. We are using CSS for the styling of our page.

We can add some functionalities to contact.

1.5 Technology Used:

Technologies used in this project are:

 HTML
 CSS
 Vs-Code
 Web Browser

1.6 Future Scope:

We can add the databases and different contact methods like messages to make our portfolio more
interactive and responsive. We can add new UI / UX technologies for making our website more
interactive.

We can use various frontend technologies like react and Angular JS to improve our website appearance
which will increase the effectiveness of the project.

3|Page
 Requirement Gathering Phase

Below are some of the key points in a Software Requirement Specification Document:

 Introduction
o Purpose
o Scope
 Overall Description
o Product Perspective
o System Interface
o Product Function
o Operating Environment
 Functional Requirements
o Software Requirements
o Hardware Requirements
 Non-Functional Requirement
o Usability Requirements
o Security Requirements
o Availability Requirements
o Error Requirements
 Design
o Control Flow Diagram
o Use Case Diagram
 System Features

Let’s Start building a Software Requirement Specification for Portfolio Website Project:

4|Page
2.1Portfolio Website Project (SRS)
Purpose:

The main objective of this document is to illustrate the requirements of the Portfolio Website Project. The
document gives the detailed description of the both functional and non-functional requirements proposed
by the client.

Developing a Portfolio Website Project that provides about, your best work, experience, Achievements
and contact information. The main objective to create your e portfolio website is to showcase your skills
and work to other recruiters, companies or other consent authorities.

Scope:

A Portfolio Website Project is a Online tool designed to provide users best work, experience,
Achievements and contact information.

It is the project which will be in demand for a very long time until we have some new and advance way to
show a person work and information’s.

The primary goal of this project is to present your portfolio to anyone using just a website link and you
will be able to showcase your works and knowledge.

2.2 Overall Description | Portfolio Website Project:

Product Perspective:

This Website will provide the work, experience, Achievements and contact information of the author.

System Interface:

The user interface for the task will have a website that will have the work, experience, Achievements and
contact information about author. This site will utilize HTML and CSS for portfolio website project.

Product Functions:

 It will show the Academic Details about the author.

 It will show the Technical Specializations about the author.
 It will also show Achievements, Skills and Contact details about the author.

5|Page
2.3 Functional Requirements
2.3.1 Software Requirements:

This software package is developed using html and CSS for frontend. Using Vs Code as a text editor and
Google Chrome for the execution of our code.

Required Specifications for our Device:

 Operating System: Windows 7, 8, 9, 10 .

 Language: Html , CSS.
 Text Editor: Vs Code.
 Extension: Live Server

2.3.2 Hardware Requirements:

 Processor: Intel core i3 or above for a stable experience and fast retrieval of data.
 Hard Disk: 2GB and above
 RAM: 256 MB or more, recommended 2 GB for fast reading and writing capabilities which will
result in better performance time.

6|Page
2.4 Non-Functional Requirements:
Usability Requirements

Our user interface should be interactive simple and easy to understand . Website should use proper
colours and fonts to look good and appealing. Use consistent backgrounds and images.

Security Requirements

Use some authentications to only let legit users to show your personal details.

Normal users can just read information using this website.

System will have different types of users and every user has access constraints.

Proper user authentication should be provided.

Availability Requirements

Availability requirements for a e portfolio website are crucial to ensure that the website service is
consistently accessible and operational.

Here are key availability requirements:

 Uptime Percentage: Maintain a high level of service availability, such as 99.9% uptime. so a high
uptime percentage ensures that the service is consistently accessible.
 Load Balancing: Use load balancing to distribute incoming traffic across multiple servers or
instances. Load balancing helps distribute the load evenly, preventing individual servers from
becoming overwhelmed and improving overall system performance and availability.
 Scalability: Scalability ensures that the application can handle varying levels of traffic and user
activity without degradation in performance.
 Backup and Recovery: Regularly back up critical data and implement robust recovery procedures.
In the event of data loss or system failures, a well-defined backup and recovery strategy ensures
that the application can be restored quickly and efficiently.
 Use updated Data: Use updated data for making your portfolio more authentic and usable.

Error Requirements:

If there comes any errors in any part of the project it should be able to alert the author about it. Errors in
the links and website working should be treated in less down time.

7|Page
2.5 Project Model
Which life cycle will work best for any project? This is an important strategic question because making
the wrong choice could lead to disastrous results of catastrophic proportions considering delayed
deliveries, unhappy clients, project overruns, and cancelled projects on mind.

The Incremental Approach is more suitable in modelling our system.

Above figure shows the basic idea of the incremental model

The incremental build model is a method of software development where the model is designed
implemented and tested incrementally (a little more is added each time) until the product is finished. It
involves both development and maintenance.

The product is defined as finished when it satisfies all of its requirements. This model combines the
elements of the waterfall model with the iterative philosophy of prototyping.

The product is decomposed into a number of components, each of which are designed and built separately
(termed as builds). Each component is delivered to the client when it is complete.

This allows partial utilization of product and avoids a long development time. It also creates a large initial
capital outlay with the subsequent long wait avoided. This model of development also helps ease the
traumatic effect of introducing completely new system all at once.

8|Page
Advantages of Incremental model:
 Generates working software quickly and early during the software life cycle.
 More flexible – less expensive to change scope and requirements.
 Easier to test and debug during a smaller iteration.
 Customer can respond to each built.
 Lowers initial delivery cost.
 Easier to manage risk because risky pieces are identified and handled during its iteration.
Disadvantages of Incremental model:
 Needs good planning and design.
 Needs a clear and complete definition of the whole system before it can be broken down
 and built incrementally.
 Total cost is higher than waterfall.

2.6 Design

9|Page
The design phase in portfolio website project is a crucial stage where the conceptual ideas and
requirements are transformed into a detailed and visually appealing blueprint. This phase
involves creating the Data flow Diagrams, ER model design, and the overall architecture of the
portfolio website.

2.6.1 Data flow Diagram for Portfolio Website Project:

Data Flow Diagram (DFD) serves as a visual representation of the flow of information within the
system. This diagram illustrates how data, flows in the project. because this is our frontend
project majorly, we will be only using html and css part of the project so we are only going to
discuss about the project structure in this stage.
-------------------------------------------image-----------------------------------
2.6.2 Use Case Diagram:

A use case diagram is a visual representation of the functional requirements of a system,

illustrating how users interact with the system and the system’s responses. For a portfolio
website project , the use case diagram will include actors such as “User,” or “Administrator” and
system will tell about the various details like about , experience , skills , achievements etc.
-------------------------------------------image-----------------------------------

Coding or Implementation Phase of Portfolio Website Project

10 | P a g e
At this stage, the fundamental development of the product starts. For this, we use a specific
programming code as per the design. Conventional programming tools like compilers,
interpreters, debuggers, etc. are also put into use at this stage.

In our project we are using HTML, CSS and JavaScript to build the project so in this stage we
are going to code our project. Before going further lets talk about the environment we need for
the project.

3.1 Environment Creation:

In this stage we are going to create the environment to build our project, We will install all
required software and extensions for ease in the coding part.

Required Softwares:

 VsCode: Vs Code is a widely used text editor for development purpose .

 Google Chrome: You need to install a web browser to execute the html code. You can
use any of your favourite web browser.

Extensions :

 Live Server: You can use live server extension because It enables you to right-click an
HTML document, and it runs a server for you and opens a browser window with the file
in it.

SOURCE CODE

11 | P a g e
3.2 HTML
3.2.1index.html

12 | P a g e
13 | P a g e
3.2.2 shivam.html & other
Shivam.html along with Mayank.html, Ayushman.html & Abhinav.html have same code with minimal
difference.

14 | P a g e
15 | P a g e
 3.2.3 SOURCE CODE EXPLANATION
Lines 1-12:
These lines define the document type (<!DOCTYPE html>) and start the HTML structure
(<html>...</html>). They also specify the character encoding (<meta charset="UTF-8">), viewport size
(<meta name="viewport"...), and the title of the webpage (<title>Personal Portfolio</title>). The last line
links an external stylesheet (<link rel="stylesheet" href="style.css">) that likely controls the styling of the
website.

Lines 14-33:
This section defines the <header> element, which typically contains the website's logo, navigation bar,
and introductory content.
 Lines 15-20: Create a <nav> element for the navigation bar.
o Lines 16-19: Define an unordered list (<ul>...</ul>) containing navigation items (<li>...</li>).
 Each list item contains an anchor tag (<a>...</a>) that links to different parts of the webpage (href) or
external links (href="..." target="_blank" which opens the link in a new tab).
 Lines 22-27: Create a <div> element likely containing the profile picture and introduction.
o Line 23: An <img> element displays the profile picture (src="Profile_Photo.jpg") with an alternate
description (alt="Profile Photo of Abhinav").
o Lines 24-26: Display the website owner's name (<h1>Hi, my name is Abhinav</h1>) and a description
(<p>Web Developer | Designer | Tech Enthusiast</p>).

Lines 35-62:

This section defines the <main> element, which contains the website's main content. Here, the content is
divided into sections using the <section> element with unique IDs for referencing in the navigation bar.
 Lines 36-47: This section likely describes the website owner (id="about").
o Line 37: Displays a heading (<h2>~ About Me ~</h2>).
o Lines 38-46: An image (<img>) and paragraphs (<p>...</p>) describe the website owner.
 Lines 48-61: This section likely showcases a team (id="portfolio").
o Line 49: Displays a heading (<h2>~ My Team ~</h2>).
o Lines 50-54: Create multiple project divs (<div class="project"...></div>) containing links (<a>...</a>) to
other webpages, probably for team members.

Lines 64-72:

This section defines the <footer> element, which typically holds the website's copyright information or
contact details.
 Line 65: Displays the copyright information (<p>Copyright © 2024 Abhinav Mishra — All Rights
Reserved</p>)

16 | P a g e
 Note:
 This code seems to reference external files like style.css, Profile_Photo.jpg, Shivam.html, etc. These files
are likely not included in the provided code snippet.
 The last line (<a href=""></a>) seems like an empty link and might be a leftover or placeholder element.

17 | P a g e
3.3 CSS

18 | P a g e
19 | P a g e
20 | P a g e
21 | P a g e
 3.3.1 SOURCE CODE EXPLANATION
1. :root { ... }

 This defines variables that can be used throughout the code.

 Think of it like a color palette for the website.
 Examples:
o --primary-color: This sets a blue color (#29a598) for various elements.
o --text-color: This sets a dark grey color (#394c4a) for most text.

**2. *, ::before, ::after { ... }

 This applies a box-sizing rule to all elements and some generated content.
 Box-sizing affects how padding and border are calculated for elements.
 This setting ensures consistent sizing across browsers.

3. html { ... }

 This increases the base font size of the entire webpage by 10%.

4. body { ... }

 This styles the main content area of the webpage:

o No margin or padding by default.
o Font family is set to "Work Sans", Helvetica, or a sans-serif font as fallback.
o Text color is set to the dark grey from the --text-color variable.
o Line spacing is set to 1.5 for better readability.
o Horizontal scrolling is hidden (overflow-x: hidden;).

5. .header-background { ... }

 This styles the background section of the header:

o It uses a gradient effect with two semi-transparent white layers on top of a background image
("Background.jpg").
o The background image is centered and fixed (doesn't scroll with the page).
o Text is aligned to the center.
o It uses flexbox for layout:
 Full height (height: 100vh;).
 Flex items are displayed in a column (flex-direction: column;).
 Content is vertically centered (justify-content: center;).
 Content is horizontally centered (align-items: center;).

6. nav { ... }

 This styles the navigation bar:

o Spans the full width of the page (width: 100%;).

22 | P a g e
 o Positioned absolutely on top of the content (position: absolute;).
o Located at the top left corner (top: 0; left: 0;).
o Has a semi-transparent black background (background: rgba(0, 0, 0, 0.5);).
o Padding on top and bottom (padding: 15px 0;).

7. nav ul { ... }

 This styles the unordered list (navigation menu) inside the navigation bar:
o Removes default bullet points (list-style: none;).
o Center-aligned text (text-align: center;).
o No top/bottom margins or padding (padding: 0; margin: 0 auto;).

8. nav ul li { ... }

 This styles the list items (navigation menu items) inside the navigation bar:
o Displayed inline next to each other (display: inline;).
o Margin on the left and right (margin: 0 10px;).

9. nav ul li a { ... }

 This styles the links inside the navigation menu items:

o White text color.
o No underline decoration (text-decoration: none;).
o Font family is set to "Unica One", a cursive font.
o Font size is slightly larger than default (1.2rem).

10. .header-content img { ... }

 This styles the image inside the header content area:

o Maximum width of 250px.
o Rounded corners with a 50% border radius.

11. .header-content h1, .header-content p { ... }

 This styles both headings (h1) and paragraphs (p) inside the header content area:
o Margin of 0.5rem on top and bottom.
o Font family is set to "Unica One", a cursive font.

12. #about { ... }

 This styles the "about" section:

o White background color (background-color: #ffffff;).
o Padding on the left and right sides (40px).
o Margin around the section (40px).
o Slightly rounded corners with a 0.5% border radius.

23 | P a g e
 o Text is centered (text-align: center;).
o
13. .profile-photo { ... }

 This styles the profile photo within the "about" section:

o Maximum width set to 40% of the container.
o Height adjusts automatically based on content (height: auto;).
o Rounded corners with a 50% border radius.

14. #portfolio { ... }

 This styles the "portfolio" section:

o Light blue background color (background-color: #0fbfbf;).
o Padding on all sides (15px).
o Slightly rounded corners with a 0.5% border radius.
o Text is centered (text-align: center;).
o Margin on the bottom (10px).

15. .project { ... }

 This styles individual project elements within the "portfolio" section:

o Fixed width and height (200px).
o Solid border with a light grey color (border: 1px solid #ccc;).
o Margin on all sides (10px).
o Inline-block display for horizontal placement.
o Sets the line height to match the height (200px) to vertically center content within the project boxes.

16. #contact { ... }

 This styles the "contact" section:

o Light orange background color (background-color: #ffbc4b;).
o Padding on all sides (15px).
o Slightly rounded corners with a 0.5% border radius.
o Text is centered (text-align: center;).

17. .td-btn { ... }

 This likely styles a button element with the class "td-btn" (possibly short for "text decoration button").
o Padding on all sides (12px horizontally and 36px vertically).
o Text transformed to uppercase.
o Applies a smooth color transition effect on hover (transition: background-color 0.2s ease-in-out;).
o Sets the default background color to the light blue from the --primary-color variable.

18. footer { ... }

24 | P a g e
 This styles the website footer:
o Light grey background color (background-color: #f4f4f4;).
o Text is centered (text-align: center;).
o Padding on all sides (10px).

19. h2 { ... } (Additional Styles)

 This styles all h2 elements throughout the website:

o Text color set to a dark grey (color: #333;).
o Font family is set to "Unica One", a cursive font.
o Sets a larger font size (2.3rem).

20. a { ... } (Additional Styles)

 This styles all anchor tags (links) throughout the website:

o Text color set to the blue from the --primary-color variable.
o Applies a smooth color transition effect on hover (transition: color 0.2s ease-in-out;).

21. a:hover { ... } (Additional Styles)

 This defines the style for links when hovered over:

o Changes the text color to a slightly darker blue (color: #208479;).

22. @media (max-width: 768px) { ... }

 This defines media queries for screens with a maximum width of 768px (likely tablets and
smartphones).
o Changes the navigation list items to display as blocks stacked vertically (display: block; margin:
10px 0;).
o Centers the profile photo horizontally within the "about" section (width: 50%; margin: 0 auto;).

25 | P a g e
 Website Glimpse
4.1 HOME SECTION
It displays my name, my current work status and where I am from. On the top it also has navigation bar
which displays other tabs of my website and my contact detail shortcuts on top right.

26 | P a g e
4.2 ABOUT SECTION
It displays a quick introduction for me a button also provided to view my resume. The navigation bar has
sticky property which make visible even after scrolling down.

27 | P a g e
4.3 PORTFOLIO SECTION
This section displays my work experience including my volunteer experience in any organizations and
my internships.

28 | P a g e
4.4 RESUME SECTION
This section displays Resume containing my work experience including my volunteer experience in any
organizations and my internships.

29 | P a g e
4.5 CONTACT & KEEP IN TOUCH SECTION
This section provides a way to contact me.

30 | P a g e
4.6 MY TEAM SECTION
It contains the link to my team members personal portfolio which include their name, their current work
status and where they are from.

31 | P a g e
 Testing Phase
Testing is a crucial phase in the development of a portfolio website project to ensure that it meets its
intended requirements, functions correctly, and is free of bugs.

Below are some key steps and considerations for the testing phase of a portfolio website:

Unit Testing:
 Test individual modules or components of the system in isolation to ensure they function as
intended.
 We have to check all links and sections of the project should work properly.
Integration Testing:
 Verify that different modules and components of the portfolio website should work together
seamlessly.
Functional Testing:
 Validate that the intended functions accurately and efficiently.
User Interface (UI) Testing:
 Ensure that the user interface is user-friendly, intuitive, and visually appealing.
 Check for consistency in design elements and responsiveness across different devices.
Security Testing:
 Identify and rectify any security vulnerabilities in the system.
 Ensure that user data is handled securely, and unauthorized access is prevented.
 There is lots of personal details so make sure to provide only those details which are less
confidential.

32 | P a g e
 SIGNIFICANCE
Significance of personal portfolio is that it presents your work that represents your performance and skills
as well as strengths and weaknesses. The culmination of work that is represented in a portfolio allows
peers, mentors and potential employers to get an understanding of you as a student, your passions and
your work.

33 | P a g e
 CHALLENGES
Challenges faced during this project were:
 Linking Google drive files like my images and my documents.
 Spacing out the elements properly using CSS.
 Choosing background was a major challenge as it had to be both formal and soothing to eyes.

34 | P a g e
 CONCLUSION
At last, we would like to conclude, that we have developed a simple and basic Personal Portfolio Website
using HTML5, CSS & using VS Code as IDE which I would continue to maintain in future too.

35 | P a g e
 REFERENCES
 Coursera Course:
Introduction to Web Development, UC Davis by Daniel Randall – It taught all the three languages
HTML5, CSS and JS thoroughly.
 Stack Overflow: How to modify Google drive links to embed in anchor tag in HTML.
 W3 Schools: How to give all social media and contacting links.

36 | P a g e