Topic: Create a Personal Portfolio Website

Subject: Advance Web Technology

Submitted by: Mhayio Patton

MCA 1st Semester
Enroll No: 22FHPCNND07004
Submitted To: Akumlong
Assistant Professor INU
CONTENT
1. INTRODUCTION
2. SYSTEM REQUIREMENTS
3. SYSTEM ANALISYS AND DESIGN
3.1. HOME
3.2. ABOUT
3.3. SERVICE
3.4. CONTACT
4. List of Figures
Fig 1: Screenshot of Home page
Fig 2: Screenshot of About page
Fig 3: Screenshot of Service Page
Fig 4: Screenshot of Contact page
5. CONCLUSION
6. REFERENCE
 1.Introduction
This Portfolio was created as a part of our class activity.
The portfolio is about showcasing my work and let others
know about me. The whole idea behind developing this
personal portfolio website is to solve the problem that
arrives while gathering the personal information and
services.
The main objective of this project is to provide information
about services provided by individuals.
The content of this website includes a Home page which
simply provides a greeting to the users. About page which
gives information about who am I and what I do. Service
page provides what profession I’m in and the services I
provide and Contact page which provides my information on
how users will be able to reach me. It is not a fully developed
website it does not have a back-end it is created by using just
basic HTML and CSS. So it is user-friendly and nothing
complicated.

1. SYSTEM REQUIREMNETS
The tool which was used to create this website is VS code
which is one of a powerful source code editor. I choose this
because it is easy to use and we can keep our code clean and
easy to understand.

2. SYSTEM ANALYSIS AND DESIGN

Functional requirements of the developed website are:
3.1. Home Page:
It is the first page of this website. In this Home page it does
not provide any personal information. It simply greets the
user Hello.
3.2. About:
Here in this About page first thing the user will notice is the
profile picture along with my personal information like who I
am, what my profession is and a follow me link to my social
media page.
3.3. Services:
Service page provides information related to my work so that
the user will get to know what profession I am in and according
to that they can hire me.

3.4. Contact:
In this Contact page I’ve provided my personal contact
information like my g-mail and phone number. There is a
contact form too so using that form any user will be able to
contact me, they can put their name, address, mail and once
they press the submit button it will be stored in database and
will receive it via mail. But this feature is still not included since
there is no java script built in this website.

4. List of Figures
Fig 1: Screenshot of Home page
Fig 2: Screenshot of About page

Fig 3: Screenshot of Service Page

Fig 4: Screenshot of Contact page

5. Conclusion
Creating a personal portfolio website has significantly tested my
creativity and has shown me that there are still many things to
learn. With the countless Google search about how a portfolio
website looks like I now know what or how a portfolio should
look like and not only that I was introduced to new CSS features
like working with flex, where to include position, grid, after
selector, scroll-snapping. With all this experience and
experimenting with all sorts of CSS properties I realized how
someone can improve their skill instead of just watching
YouTube videos.
There were lots of errors included but the more error I get the
more I learn so at the end I was benefited from those mistakes.
This small project has helped me learn a lot of CSS.

6. REFERENCE:
1. https://www.w3schools.com/
2. https://www.tutorialspoint.com/css/index.htm
3. Web dev simplified (2019, 30 April) Learn CSS Position In 9
Minutes[video].YouTube. https://www.youtube.com/watch?
v=jx5jmI0UlXU
4. Codu Community (2020, 12 May) CSS Scroll Snapping|HTML
CSS[video].YouTube. https://www.youtube.com/watch?
v=GLxdqbsMKYA