SSIT

Shri Sai Institute of Technology

The Portfolio Website

Monday 20 December 2023

GUIDED BY:
PRINCIPAL: Namrata Jain
PROF: Amit Sharma

Submitted By:

Deepti Bindua
 DECLARATION

I hereby declare that the project work entitled “Personal Portfolio Website”

submitted to the Rajiv Gandhi Proudyogiki Vishwavidyalaya Bhopal , is a record of

an original work done by me under the guidance of

Mr. Amit Sharma, Professor of Shri Sai Insitute of Technology, and this project
work is submitted in the Partial fulfillment of their requirements for the award of
the degree of Master of Computer Science.

The result embodied in this thesis have not been submitted to ant oter University
or Institute for the award of any degree or diploma.

29-12-2023 Deepti Bindua

4
 INDEX

Title Page no.

Declaration ………………………… 04

Certificate …………………………… 05

Acknowledgement …………………. 06

Introduction …………………………. 07

Importance …………………………… 08

Abstract ……………………………… 11

List of Figure ………………………… 12

List of Symbols ,
Abbreviations and
Nomenclature ……………………… 12

1. Method ……….……………………… 13
1.1 Objectives
1.2 Home Section
1.3 About Section
1.4 Skills Section
1.5 Experience Section

2
 1.6 Contact Detail Section

2. Software Used …………………………… 19

2.1 HTML5
2.2 CSS3
2.3 JAVASCRIPT
2.4 BOOTSTRAP
2.5 GOOGLE SHEETS

3. Significance …………………………… 23

4. Challenges ……………………………… 24

5. references ……………………………… 25

3
 Acknowledgement

An individual cannot do project of this scale. I take this opportunity to express my

acknowledgement and deep sense
of gratitude to the individuals for rendering valuable assistance and gratitude to
me. Firstly, I would like to express
my gratitude to our Principal, for providing me such an interesting project work
for my university project and their by supporting co-
operating with me during my project. Their inputs have played a vital role in
success of this project. Then express my sincere thanks to my project guide.

Principal Project Guide

Mrs. Namrata Jain Mr. Amit Sharma

6
 CERTIFICATE

This is to certify that Deepti Bindua, Masters of Computer Science Semester-III

SESSION 2022-2023, in Shri Sai Institute of Technology Ratlam, has successfully
Completed the project on the topic “Personal Portfolio Website” Under the
guidance of PROF- Amit Sharma.

I appreciate her skill diligence and sense of commitment in preparation of this

project. The project work has been submitted as

partial fulfillment of the degree of Masters of Computer Science Of Shri Sai

Institute of Technology, Ratlam.

Signature Signature

…………………. ………………….
Project Guide Principal

Mr. Amit Sharma Mrs. Namrata Jain

5
 REFERENCE

• Coursera:
Introduction to Web Development , UC Daniel Randall – taught all
the tree languages HTML5, CSS3 and JAVASCRIPT 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.

• YouTube:
How to add Google sheet in backend to store Data .

• Ariponnammal, S. and Natarajan, S. (1994) „Transport

Phenomena of
Sm Sel – X Asx‟, Pramana – Journal of Physics Vol.42,
No.1, pp.421-425.

• Barnard, R.W. and Kellogg, C. (1980) „Applications of

Convolution Operators to Problems in Univalent Function
Theory‟, Michigan Mach, J.,
Vol.27, pp.81–94.

• Shin, K.G. and Mckay, N.D. (1984) „Open Loop Minimum

Time Control of
Mechanical Manipulations and its Applications‟,
Proc.Amer.Contr.Conf., San Diego, CA, pp. 1231-1236.

26
 ABSTRACT

This Personal Portfolio Website Project Is Based On Web

Development.

This Is Developed Using HTML5, CSS3 And JavaScript. Code Editor

Used For This Project Is VS Code. It Displays The Professional

Background Of An Individual. It Displays Brief Information About

Work Experiences Till Date Education, Skills And Contact Details

Along With Social Media Links . All The Elements Are Rendered

Distinctively On The Website.

11
 LIST OF FIGURES

1. Home section
2. About section
3. Skill section
4. Services section
5. Project Section
6. Contact section

LIST OF SMBOLS , ABBREVIATIONS AND

NOMENCLATURE

1. IDE– Integrated Development Environment

2. HTML– Hyper Text Markup Language
3. CSS – Cascading Style Sheet
4. JS – JavaScript
5. VS Code – Visual Studio Code

12
 INTRODUCTION

A portfolio website is a curated, online space that showcases your

best work. It’s one of the most practical and memorable ways to
share your work with press, potential collaborators or employers.

Much like your PDF portfolio, a portfolio website can be used when
applying for jobs or internships. The idea is that in just one,
centralized space, you can quickly communicate who you are, what
you do and how people can contact you.

Portfolio websites come in all shapes and sizes, and can vary
depending on your discipline. Ultimately, whether you’re a designer,
photographer, writer or digital artist, the best portfolio websites are
a true reflection of your projects, passions and personality.

7
 IMPORTANCE

Importance of online portfolio

Having an online portfolio can open a lot of new doors to unparalleled

opportunities. There are some of them!

1. Provides a Platform to Highlight Your Best Work

An online portfolio is there for you to display your best work to the
world on your terms. You can choose the layout of your portfolio, what
pieces to show at the forefront, provide background information on
every piece/project, and much more.

For example, you can dedicate a section or even page to your latest
projects, another section for award-winning pieces, and even include
an accessible archive. Moreover, your personality is also more likely to
shine through when it is on your website.

2. Great First Impression For Employers

If an employer sees your website link in your signature or on your

resume, they’ll likely click on it to see what you’ve built. Seeing you’ve
taken the time to build a website featuring work samples,
recommendations, previous presentations and more will be a killer first
impression.

3. Your Specializations and Best Work

8
Now is the time to showcase your best work and include information
about your specialization. When posting samples of your best work, it is
important to present your craft in a way that will cater to your target
clients. You can show off and present yourself in a manner that implies
that your audience should choose you.

4. Reflects Your Personality and Creativity

An online portfolio is an excellent reflection of who you are as a person

and a professional. You can choose how to present yourself, what
works to display, what achievements to list, etc. Again, design and
layout are essential here. Unlike social media profiles or an online
resume, you can pick the colors, visuals, fonts, interactive elements,
and even animations that best reflect your style. You can even show
your sense of humor if you wish to do so and make yourself look more
approachable.

5. Improves Chances Of Gaining Customers

Clients are growing increasingly concerned with “saving time” and

headaches over saving money. A professional portfolio provides a
glimpse of your body of work, requires less reading, and renders a more
visually appealing experience.

6. Consistency and Professionalism

Going the extra mile and putting effort into your portfolio provides a
visual and verbal example of the level of dedication you put into your
craft. In other words, an online portfolio makes a striking first

9
 impression. It shows you can cleverly communicate a message (the
written content on your website) and

choose the best ways to display that message (your website’s layout,
galleries, work, etc.).
 1. METHOD

1.1 OBJECTIVES

1.1.1 Elements Rendered Distinctly

1.1.2 Brief Information About :-
About me
Skills
Services
Projects
Contacting Ways

1.2 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
attached resume also.

13
 1.3 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.

14
 1.2 SRVICES SECTION

This is a list of my service offerings. Providing this information lets

interested people know that they’re on the correct website. There are
some of my services :

1.2 PROJECT SECTION

A project portfolio is a strategic way to show what you can offer to a

company. It can also be used by companies to show the greatness of their
products to clients. Here I have mentioned some of my projects.

15
 1.2 SKILLS SECTION

It displays my technical skills with my technical proficiency displayed as

percentage for each technology and my current work experience.

16
 1.2 CONTACT SECTION

This Section Has A Contact Form Which Is Store Data In Google Sheet And
Also Links

Listed Below:

a. E-Mail
b. LinkedIn
c. Instagram
d. Git Hub

17
18
 SOFTWARE USED

Code editor I used for this project is VS code. It is used to code complex piece
of programs and to develop complex projects. Further technologies I used for
this project are HTML5, CSS3 and JS.

2.1 HTML5
“Hyper Text Markup Language”—is the language used to tell your web
browser what each part of a website is. So, using HTML, you can define
headers, paragraphs, links, images, and more, so your browser knows how to
structure the web page you're looking at.

19
2.1 CSS3
“CSS stands for cascading style sheets” In short, CSS is a design language that
makes a website look more appealing than just plain or uninspiring pieces of
text. Whereas HTML largely determines textual content, CSS determines
visual structure, layout, and aesthetics.

2.1 JavaScript
JavaScript (JS) is a high-level, interpreted programming language. It is one of
the three core technologies of the World Wide Web, along with HTML and
CSS. JavaScript is used to make web pages interactive and dynamic, and to
provide functionality for a wide range of web applications.

20
2.1 BOOTSTRAP
Bootstrap is a free front-end framework that helps developers create
responsive websites faster and easier. It provides a collection of syntax for
template designs, including HTML and CSS-based design templates for
typography, forms, buttons, tables, navigation, modals, and image carousels.

21
2.1 GOOGLE SHEETS
Google Sheets is a spreadsheet app that allows users to organize and analyze
data, create custom reports, and automate calculations. It's part of the
Google Workspace suite of products.

22
 SIGNIFICANCE

Significance of personal portfolio is that it presents your work that represents

your performance and skills as well as strength 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.

23
 Challenges

Challenges faced during this project were:

1. Linking Google drive files like my images and my documents.

2. Spacing out the elements property using CSS.

3. Choosing background was major challenges it had to be both

formal and soothing to eyes.

4. Create the Database connection was too time taking.

24
 CONCLUSION

At last to conclude , I have developed a single Page and basic Personal

Portfolio
Website Using HTML5, CSS3 and JavaScript using VS Code as IDE which I
would continue to maintain in future too.

25