Online Project Report on:

“PORTFOLIO DESIGNING”
Developed and submitted by:
NEHA SINGH
DEPARTMENT OF INFORMATION TECHNOLOGY
B. TECH -2nd YEAR
ROLL NO.- 03
ENROLLMENT NO.-12021002004001

Semester -III

2022-22 session
Proj-CS301

Under the guidance of:

Prof. Subhabrata Sengupta
IT-DEPARTMENT

1
 ACKNOWLEDGEMENT
In the completion of this project “PORTFOLIO DESIGNING”, I would like to
convey my special gratitude to Subhabrata Sengupta sir of the IT department,
for his constant guidance and support throughout the execution of this project
and for sharing useful study materials with us. I also thank our college for
giving us this opportunity to do this project.

Finally, I would like to thank my dear friends who have been with me all the
time.

Neha Singh
Information Technology (2nd Year)
                                         

2
 CONTENTS
1. Abstract . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ..
4
2. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . .. . . . . . . . . . . . .
5
3. Utility of the project with the socio-economic platform . . . . . . . . . . . . . .
6
4. Description of Technologies which are used . . . . . . . . . . . . . . . . . . . . . 7-
8
5. Design of the
Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ..9
6. Source Code of the
Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ..10
7. Snapshots of the Project Implementation . . . . . . . . . . . . . . . . . . . . . .11-
12
8. References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
3

3
 ABSTRACT
This project Portfolio Designing is a webpage displaying my portfolio which
shall contain my details such as Educational, Contact, and project details. Also,
it will contain the skills that I know. It has the functionality of Logging in also.
Basically, it showcases the skills that I have developed in the past year and a
half journey.
This paper maps, from concept to execution, my process for creating a personal
portfolio website. It includes research and analysis of existing portfolio
websites, and it investigates how technology and selected design principles
influence a website’s creation. The research presented here culminates with the
creation and launch of my own personal portfolio website.

4
 INTRODUCTION
This work aims to report the process of designing and developing a web
portfolio for a B.Tech. student which shall help to uplift the level of the CV and
skills space. It will define what a portfolio website is, it will also explain the
basic theory and elements of an online portfolio design process. Further, this
work presents different ways and channels through which a design student can
create and develop a personal online portfolio. By covering aspects such as:
how to integrate personal visual identity and what is required to build an
effective portfolio. In order to carry out this process, it is essential to understand
various strategies and techniques that are used today, while acquiring skill full
understanding of modern tools and trends.

The frame of reference describes the keystones of a basic portfolio model,

covering vital aspects, such as user interaction. (Figure 1) It is a preliminary
guideline for newcomers to the design/development industry that should include
a meaningful and future-friendly website portfolio.

5
 UTILITY OF THE PROJECT
In simple words, a web portfolio is 24 hours working showcase of the
designer’s works, and professional skills. It has the potential to attract future
employers/clients, while it also provides the essential contact information of the
designer. For web professionals, creating a web portfolio is crucial. It is one of
the key steps in the self branding4 process. In order to build a successful
portfolio, the designer needs to focus on its simplicity, ease of use, how to reach
the main objectives, and lastly project management.

6
 TECHNOLOGIES USED
The final project will be a result of the front-end and back-end technologies
compiled together to create this website.
In the designing of the portfolio, the Front-end technologies used are:
1. HTML(HYPERTEXT MARKUP LANGUAGE)
2. CSS(CASCADING STYLE SHEETS)
3. JAVASCRIPT(JAVASCRIPT)
The Back-End technologies are:
1. MySQL: It is used for the database management system.
HTML: It provides the basic structure or the skeleton of the webpage that we
create. In this very project, we have used HTML for creating the structure of:
 NAVIGATION BAR
 HOME SECTION
 ABOUT ME
 HERO SECTION
 WORK EXPERIENCE SECTION
 FOOTER SECTION: Privacy policy, Terms of use, Contact information,
and Other links.
Some basic tags used in the code are:
 class
 <a href=” ”></a>
 <li></li>
 <img src= “”> </img>
 <div></div>
 <p></p>
 <section></section>

CSS: CSS is the language we use to style an HTML document.CSS describes

how HTML elements should be displayed. CSS saves a lot of work. It can
control the layout of multiple web pages all at once. External stylesheets are
stored in CSS files.

CSS is used to define styles for your web pages, including the design, layout,
and variations in display for different devices and screen sizes.

7
An example of the CSS code used in the project is as follows:

body{
width: 100%;
max-width: 1400px;
display: block;
margin: auto;
min-height: 100vh;
background: #191919;
font-family: sans-serif;
}

JavaScript: JavaScript is one of the most famous and widely used languages,
especially for web development. It is used to program the behavior of the web
page.

 The Original JavaScript ES1 ES2 ES3 (1997-1999)

 The First Main Revision ES5 (2009)
 The Second Revision ES6 (2015)
 All Yearly Additions (2016, 2017, 2018, 2019, 2020)

The multiple uses of JS can be described as follows:

 Adding interactive behavior to the web page

 Creating web pages and mobile apps.
 Building web servers and developing server applications.
 Game development

We use JS over other programming languages because of the following reasons:

 It is the only language native to the web browser.
 It is the most popular language.
 There is a low threshold to get started.

8
 DESIGN OF THE PROJECT
The webpage contains the following sections:

 NAVIGATION BAR
 HOME SECTION
 ABOUT ME
 HERO SECTION
 WORK EXPERIENCE SECTION
 FOOTER SECTION: Privacy policy, Terms of use, Contact information,
and Other links.

9
 SOURCE CODE

The GitHub link is:

https://github.com/Nehathesingh/portfolio

10
SNAPSHOT OF PROJECT
IMPLEMENTATION

HOME PAGE

11
SKILLS

12
EDUCATION PAGE

13
 REFERENCES
https://getbootstrap.com/

https://www.w3schools.com/

https://stackoverflow.com/

https://www.wix.com/blog/creative/2020/03/best-portfolio-websites/

14