Personal Portfolio Website

A PROJECT REPORT
SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENT FOR THE AWARD
OF THE DEGREE

BACHELOR OF TECHNOLOGY
(Computer Science and Engineering)

SUBMITTED BY

ANUPRIYA JOHRI
(RA1811003030365)

SRM INSTITUTE OF SCIENCE AND TECHNOLOGY NCR CAMPUS,

MODINAGAR, GHAZIABAD UTTAR PRADESH (INDIA)
November, 2021

1
 DECLARATION
This is to verify that project report entitled “Personal Portfolio Website” which is

submitted by me in partial fulfillment of the requirement for the award of degree B.

Tech in Computer Science and Engineering to SRM Institute of Science and

Technology, Modinagar, Ghaziabad, Uttar Pradesh comprises only my original

work and due acknowledgement has been in the text to all other material used.

Date: Name of Student

2
 SRMIST NCR CAMPUS, GHAZIABAD, UTTAR
PRADESH

BONAFIDE CERTIFICATE
Certified that this project report “Personal Portfolio Website Project” is bonafide

work of “Anupriya Johri” who carried out the project work under my supervision.

Signature Signature

(Head of Department) (Supervisor)

RP MAHAPATRA AMIT SHARMA

(Computer Science and Engineering) (Computer Science and Engineering)

SRMIST NCR MODINAGAR SRMIST NCR MODINAGAR

3
 TABLE OF CONTENTS
CHAPTER NO. TITLE PAGE NO.
ABSTRACT 5
LIST OF FIGURES 6
LIST OF SYMBOLS 7
LIST OF SYMBOLS,
ABREVIATIONS AND
NOMENCLATURE
1. INTRODUCTION 8
1.1 OBJECTIVES
1.2 HOME SECTION
1.3 ABOUT SECTION
1.4 SKILLS SECTION
1.5 EXPERIENCE SECTION
1.6 CONTACT DETAILS SECTION
2. SOFTWARE USED 14
2.1 HTML
2.2 CSS
2.3 JAVASCRIPT
3. SIGNIFICANCE 15
4. CHALLENGES 16
5. CONCLUSION 17
6. REFFERENCES 17

4
 ABSTRACT

This Personal Portfolio Website project is based on Web Development.

This is developed using HTML5, CSS and JS. 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.

5
 LIST OF FIGURES

1. Home section
2. About section
3. Skills section
4. Experience section
5. Contact details section

6
 LIST OF SYMBOLS, ABBREVIATIONS AND
NOMENCLATURE
Abbreviations
1. IDE – Integrated Development Environment
2. HTML – Hyper Text Markup Language
3. CSS – Cascading Styling Sheets
4. JS – JavaScript
5. VS Code – Visual Studio Code

7
 INTRODUCTION

Personal Portfolio Website provides brief information about the

professional background of an individual. This project comprises of

three files. First is an HTML file for creating markup of the application

on the web. Then CSS file is used to provide more styles to the

website. Then JS file is used to give a proper functionality to the

application through JavaScript.

1.1 OBJECTIVES
1.1.1 Elements rendered distinctly
1.1.2 Brief information about :-
Work experience
Education
Skills
Contacting ways

8
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 my contact detail shortcuts on top right.

9
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.

10
1.4 SKILLS SECTION

It displays my technical skills with my technical proficiency displayed

as percentage for each technology and my current work experience.

11
1.5 EXPERIENCE SECTION

This section displays my work experience including my volunteer

experience in any organizations and my internships.

12
1.6 CONTACT DETAILS SECTION

This section has all the links listed below :

a. Whatsapp
b. Call
c. Mail
d. Linked In
e. Instagram

13
 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, CSS and JS.

2.1 HTML5

It is the code for creating web pages, using tags and other commands that a

browser reads and converts into the normal web pages that people see.

2.2 CSS

CSS is the language for describing the presentation of Web pages, including

colours, layout, and fonts.

2.3 JS

JavaScript is a text-based programming language used both on the client-side and

server-side that allows you to make web pages interactive. It gives web pages

interactive elements that engage a user.

14
 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. 

15
 CHALLENGES

Challenges faced during this project were:

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

2. Spacing out the elements properly using CSS.

3. Choosing background was a major challenge as it had to be both formal and

soothing to eyes.

16
 CONCLUSION

At last to conclude, I have developed a simple and basic Personal Portfolio

Website using HTML5, CSS, JavaScript using VS Code as IDE which I would

continue to maintain in future too.

REFFERENCES

 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.

17