Creating and Hosting E Portfolio Website from Scratch | Portfolio Website Project

Creating Personal Portfolio Website is one of the most common project in Software Development. A well-crafted portfolio website serves as a digital resume, showcasing your skills, creativity, and accomplishments that define an individual or a brand in the online landscape. In the following Article we are going to build a e portfolio website project from scratch.

👁 Portfolio-Website-Project-Banner

Demo Video:

Hosted Website: Click Here !!

How to Create Personal Portfolio Website?

Before start of any step there is the ideation process in which developer think and generate some creative problem statements and their solutions . Here in this post we are covering portfolio creation.

You can also visit Top 50 project ideas for Software Development page to know about some more creative software development ideas for your future projects.

A Project Development is a multiphase process in which each and every process are equally important. Here in this post we are also going to develop our Portfolio Website project in multiple phases, such as:

1. Team Formation
2. Creating Project Synopsys
3. Requirement Gathering
4. Coding or Implementation
5. Testing
6. Project Presentation

Let us look into the steps one by one.

In Team Formation Phase we will form a dynamic team having high energy and enthusiasm for the project.

In Portfolio website project creation We need Frontend Developer majorly i.e. HTML , CSS and some knowledge of JavaScript as well. If you want to improve your website appearance you can also take the help of any UI/UX Developer also.

• Front end Developer
• UI / UX Developer

If a person knows about frontend development he/she can develop the portfolio website project all by himself/herself.

👁 team

:

A project synopsis serves as a concise overview or summary of a proposed project, offering a brief but comprehensive insight into its objectives, scope, methodology, and expected outcomes.

Let’s create a Synopsys Report for Portfolio Website Project:

2.1 :

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.

2.1.1 :

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.

2.1.2 :

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.

2.1.3 :

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

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.

👁 dfd

We are using CSS for the styling of our page also some JavaScript for making website dynamic.

We can add some functionalities to contact using message which will store in the database which will need some knowledge of SQL and databases.

2.3 :

Technologies used in this project are:

• HTML
• CSS
• JavaScript
• Vs-Code
• Web Browser

2.4 

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.

:

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

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

Note: To know more about What is a SRS Document or How to write a good SRS for your Project follow these articles.

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

3.1 

3.1.1 

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.

3.1.2 

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 persons work and information's.

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

3.2.1 :

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

3.2.2 :

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, CSS and JavaScript for portfolio website project.

3.2.3 :

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

3.2.4 :

E Portfolio Website is an web page which you can run using your favourite browser. In the website all details are static and can only be updated by the author. It requires knowledge of html , CSS and JS to update any entry in this project.

3.3 

3.3.1 

This software package is developed using html , CSS for frontend and JavaScript for the backend. 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 , JavaScript.
• Text Editor: Vs Code.
• Extension: Live Server

3.3.2 

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

3.3.2 

• You can use databases for storing the messages of the website users like recruiters.
• For this feature using MY SQL database will be convenient.
• It Requires the knowledge of SQL and JavaScript or php language to operate.

3.4 

3.4.1 

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

3.4.2 

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

3.4.3 

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:

•  Maintain a high level of service availability, such as 99.9% uptime. so a high uptime percentage ensures that the service is consistently accessible.
• : 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 ensures that the application can handle varying levels of traffic and user activity without degradation in performance.
• : 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 for making your portfolio more authentic and usable.

3.4.4 

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.

3.5 :

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.

3.5.1 :

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.

Let’s Draw a Dataflow Diagram for our project:

👁 Image

3.5.2

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.

Here’s a simplified use case diagram for a portfolio website project:

👁 ucd

:

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.

4.1 :

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.

• : Vs Code is a widely used text editor for development purpose .
• : You need to install a web browser to execute the html code. You can use any of your favourite web browser.

:

• : 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.

4.2 :

In this stage we are going to develop our frontend part of the project. Initially we will discuss about each module and its working separately and then combined code will be given in the end.

This is how our page will looks like. You can follow the demo video to know about all the features and functionalities of the final project:

Home Page:

👁 hm

Features:

• Simple UI
• Option for Downloading Resume
• Dynamic Navbar

Code:

Below is the code for home page info , this code will be part of the body element of the index.html file in our project:

About me Page:

👁 about

Functionalities:

• More Personal Details are present in this section
• Educational Background
• Technical Background

Code:

Below is the code for about me section in the portfolio website project, this section is the part of body element in index.html

Experience page:

👁 experience

Functionalities:

• This page will tell about the experience.

Code:

Below is the code for Experience section in the portfolio website project, this section is the part of body element in index.html

Skills Page:

👁 skills

Functionalities:

• You can showcase your skills in this section.
• Various technical expertise and languages know will come in this section.

Code:

Below is the code for Skills section in the portfolio websiteproject, this section is the part of body element in index.html

Achievements Page:

👁 ach

Functionalities:

• This section can be used to showcase your some major achievements.
• Detailed achievement details can be provided.
• Certificate and links can be attached in this section.

Code:

Below is the code for achievements section in the portfolio website, this section is the part of body element in index.html

Projects Page:

👁 project

Functionalities:

• Various Projects and their Descriptions will be used in this section.
• Provide the GitHub link and hosted link of your project.

Code:

Below is the code for Project section in the portfolio website, this section is the part of body element in index.html

Contact me Page:

👁 contact

Functionalities:

• This is the important section in all of them.
• Recruiter can interact with user using contact me section
• Details about user like email, mobile no, linked in etc will be provided in this section.

Code:

Below is the code for Contact me section in the portfolio website, this section is the part of body element in index.html

Using all these codes as reference you can add more new fields in this project and make it more impactful.

Below is the whole code used in this project along with its CSS and JavaScript Code

Code:

Code Structure:

You can use images and videos by your own choice in this project.

👁 flow

Below is the whole code for the e portfolio website project :

:

Hosted Link :Click Here !!

To host your website we can use various tools or third party web apps . here we are going to discuss about most reliable source to do it i.e. GitHub.

Steps to host your website:

• Create a new repository.
• Upload all project files in this repository.
• Go to settings >> Pages >> select the branch (main) and folder (root) >> push save.
• then wait for some time when there is a green tick appears on top you can go again in setting >> pages there you will find a link which will be your hosted portfolio website link .

For Detailed Documentation follow How to Host a Website on GitHub For Free?

:

Testing is a crucial phase in the development of aportfolio 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:

1. 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.
2. Integration Testing:
   • Verify that different modules and components of the portfolio website should work together seamlessly.
3. Functional Testing:
   • Validate that the intended functions accurately and efficiently.
4. 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.
5. 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.

:

In this phase of software development, Developer will have to present their work in front of authorities and they will judge your work and give suggestions on the improvement areas.

The ideal length of the ppt should be min 10 slides and maximum 15 slides , you will not have too much time to explain your project so prepare your presentation carefully using important key points.

Some of the key points (slides) which your presentation should have are given below:

1. Project Name and Team Details
2. Introduction
3. Purpose
4. Project Scope
5. Problem Statement
6. Proposed Solution
7. Product Functionalities
8. Flow chart of the project
9. Analysis of model
10. Summary

• Integration of Backend features like Databases and message features.
• Use of more Advance frontend technologies like react, Angular frameworks.
• Use of UI/UX in your project.
• Update the portfolio if needed.

2) Which website is best for portfolio?

Answer:

A portfolio website is a great way to attract potential employers and clients as well as give them a way to see your work in one place. There are various websites using which you can create your own portfolio. Simplified , Behance , Dribble are some of those websites.

You can also use your own knowledge of web development and create your own portfolio website.

3) How do I make my own portfolio website?

Answer:

Follow the Instruction above in this post.

4) How to Host a Website?

Answer :

There are various tools you can use to do this you can use GitHub or Netlify app. Use the Link to find out the steps involved in Website Hosting.