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
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:
- Team Formation
- Creating Project Synopsys
- Requirement Gathering
- Coding or Implementation
- Testing
- 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 Formation for Portfolio Website Project
Step 2: Creating Project Synopsys | Portfolio Website Project:
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 Introduction:
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 Problem Statement:
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 Proposed Solution:
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 Objective of the Project:
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 Methodologies Used:
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 for Portfolio Website Project
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 Technology Used:
Technologies used in this project are:
- HTML
- CSS
- JavaScript
- Vs-Code
- Web Browser
2.4 Future Scope:
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.
Step 3: Requirement Gathering Phase:
Below are some of the key points in a Software Requirement Specification Document:
- Introduction
- 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
- ER Model of LMS
- 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 Introduction | Portfolio Website Project ( SRS ):
3.1.1 Purpose:
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 Scope:
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 Overall Description | Portfolio Website Project:
3.2.1 Product Perspective:
This Website will provide the work , experience , Achievements and contact information of the author.
3.2.2 System Interface:
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 Product Functions:
- 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 Operating Environment:
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 Functional Requirements | Portfolio Website Project:
3.3.1 Software Requirements:
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 Hardware Requirements:
- 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 Database Requirements:
- 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 Non-Functional Requirements:
3.4.1 Usability Requirements
- 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 Security Requirements
- 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
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:
- Uptime Percentage: Maintain a high level of service availability, such as 99.9% uptime. so a high uptime percentage ensures that the service is consistently accessible.
- Load Balancing: 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: Scalability ensures that the application can handle varying levels of traffic and user activity without degradation in performance.
- Backup and Recovery: 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: Use updated data for making your portfolio more authentic and usable.
3.4.4 Error Requirements:
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 Design:
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 for Portfolio Website Project:
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:
Data Flow Diagram for Portfolio Website Project
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:
Use Case Diagram | Portfolio website Project
Step 4: Coding or Implementation Phase of Portfolio Website Project:
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 Environment Creation:
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.
Required Softwares:
- VsCode: Vs Code is a widely used text editor for development purpose .
- Google Chrome: You need to install a web browser to execute the html code. You can use any of your favourite web browser.
Extensions :
- Live Server: 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 Implementation of Portfolio Website Project | Frontend Development:
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:
Home Page | Portfolio Website Project
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:
home-page.html
<section class="home" id="home">
<video autoplay loop muted plays-inline class="back-video">
<source src="img/video4.mp4" type="video/mp4">
</video>
<div class="home-text">
<h4>Hello</h4>
<h1>I'm Geek <br> <span>101</span></h1>
<h3>Software Developer and Programming Enthusiast </h3>
</div>
</section>
|
About me Page:
About Page | Portfolio Website Project
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
about.html
<section class="about" id="about">
<div class="about-img">
<img src="img/profile.jpg">
</div>
<div class="about-text">
<h2>About Me</h2>
<h4>Hi, My name is Geek101 !!</h4>
<p>I am a B.Tech Final Year Student of XYZ College, Pursuing My Degree in XYZ . I have a keen Interest in Problems Solving and Finding new and Dynamic Ideas.</p><br>
<p>I am a Machine Learning Enthusiast & Front-end Web Developer. I can provide clean code and pixel perfect design.</p>
<div class="about-gri">
<div class="about-in">
<h5>1. Problem Solving</h5>
</div>
<div class="about-in">
<h5>2. DSA</h5>
</div>
<div class="about-in">
<h5>3. Machine Learning</h5>
</div>
<div class="about-in">
<h5>4. Web Development</h5>
</div>
</div>
<a href="#contact" class="btn">Contact Me</a>
</div>
</section>
|
Experience page:
Experience Page | Portfolio Website Project
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
experience.html
<section class="experience" id="experience">
<div class="main-text">
<h2>My Experiences</h2>
</div>
<br>
<div class="experience-content">
<div class="box">
<img src="img/gfg.png" >
<h3>GeeksforGeeks</h3>
<h4>
<span>
Technical Content Writer
</span>
</h4>
<br>
<p>
• Created Multiple Software Development Projects with their detailed Documentation.
<br>
• Worked with the Dynamic Team of GeeksforGeeks.
</p>
</div>
</div>
</section>
|
Skills Page:
Skills Page | Portfolio Website Project
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 website project, this section is the part of body element in index.html
Skills.html
<section class="skills" id="skills">
<div class="main-text">
<h2>My Skills</h2>
</div>
<div class="skills-content">
<div class="box">
<img src="img/cp-removebg-preview.png" >
<h3>Competitive Programming</h3>
<p>
Competitive programming is a sport of coding, where individuals engage in solving algorithmic challenges against the clock, showcasing their problem-solving skills and efficiency in crafting elegant and optimized solutions.</p>
</div>
<div class="box">
<img src="img/fe-removebg-preview.png" >
<h3>Front-end Development</h3>
<p>Front-end development is the art of bringing digital creativity to life, focusing on the user interface and user experience to seamlessly merge design with functionality, shaping the visual and interactive elements of websites.</p>
</div>
<div class="box">
<img src="img/ml-removebg-preview.png">
<h3>Machine Learning</h3>
<p>Machine learning is a transformative field at the intersection of computer science and A.I., empowering systems to learn from data, recognize patterns, and make intelligent decisions, entering in a automated insights and problem-solving.</p>
</div>
</div>
</section>
|
Achievements Page:
Achievements Page | Portfolio Website Project
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
achievments.html
<section class="achievement" id="achievement">
<div class="main-text">
<h2>My Achievements</h2>
<h4>Some of My Major Achievements</h4>
</div>
<div class="portfolio-content">
<div class="row">
<img src="img/coding.jpg">
<div class="main-row">
<div class="row-text">
<h6>Write your Coding achievements here</h6>
</div>
</div>
<h3>Details about the Achievement </h3>
</div>
<div class="row">
<img src="img/hackathon.jpg">
<div class="main-row">
<div class="row-text">
<h6>Write your Hackathons achievements here</h6>
</div>
</div>
<h3>Details about the Hackathon </h3>
</div>
<div class="row">
<img src="img/extras.jpg">
<div class="main-row">
<div class="row-text">
<h6>Write your Extra curricular achievements here</h6>
</div>
</div>
<h3>Details about the Achievement </h3>
</div>
</div>
</section>
|
Projects Page:
Projects Page | Portfolio Website
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
projects.html
<section class="portfolio" id="portfolio">
<div class="main-text">
<h2>My Projects</h2>
<h4>Some Of My Distinguished Works</h4>
</div>
<div class="portfolio-content">
<div class="row">
<img src="img/lib1.jpg">
</a>
<div class="main-row">
<div class="row-text">
<h6>Web App development</h6>
</div>
</div>
<h3>Library Management System</h3>
</div>
<div class="row">
<img src="img/weather.jpg">
</a>
<div class="main-row">
<div class="row-text">
<h6>Web App Development</h6>
</div>
</div>
<h3>Weather Forecasting App</h3>
</div>
<div class="row">
<img src="img/breed.jpg">
</a>
<div class="main-row">
<div class="row-text">
<h6>Machine Learning</h6>
</div>
</div>
<h3>Dog's Breed Classification</h3>
</div>
<div class="row">
<img src="img/price.jpg">
</a>
<div class="main-row">
<div class="row-text">
<h6>Machine Learning</h6>
</div>
</div>
<h3>Boston House Price Prediction</h3>
</div>
</div>
</section>
|
Contact me Page:
Contact Me Page | Portfolio Website
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
contact.html
<section class="contact" id="contact">
<div class="contact-text">
<h2>Contact Me</h2>
<h4>Let's Work Together</h4>
<p>I will Help you in your next Project, Contact me through details given below .</p>
<div class="contact-list">
<li><a href="#">Local Address</a></li>
<li><a href="#">example@gmail.com</a></li>
<li><a href="#">+91 0000000000</a></li>
<a href="mailto: example@gmail.com">
<button class="btn">
Let's Chat
</button>
</a>
</div>
<div class="contact-icons">
<a title="+91 0000000000"><i class='bx bxl-whatsapp' ></i></a>
</div>
</div>
</section>
|
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.
Project Structure
Below is the whole code for the e portfolio website project :
script.js
const header = document.querySelector("header");
window.addEventListener ("scroll", function() {
header.classList.toggle ("sticky", window.scrollY >0);
});
let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');
menu.onclick = () => {
menu.classList.toggle('bx-x');
navbar.classList.toggle('active');
};
window.onscroll = () => {
menu.classList.remove('bx-x');
navbar.classList.remove('active');
};
const sr = ScrollReveal ({
distance: '25px',
duration: 250,
reset: true
})
sr.reveal('.home-text',{delay:190, origin:'bottom'})
sr.reveal('.about,.services,.portfolio,.contact',{delay:200, origin:'bottom'})
|
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>User Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link rel="stylesheet"
</head>
<body>
<header>
<h2 class="logo">Portfo<span>lio</span></h2>
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#achievement">Achievements</a></li>
<li><a href="#portfolio">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>
<section class="home" id="home">
<video autoplay loop muted plays-inline class="back-video">
<source src="img/video4.mp4" type="video/mp4">
</video>
<div class="home-text">
<h4>Hello</h4>
<h1>I'm Geek <br> <span>101</span></h1>
<h3>Software Developer and Programming Enthusiast </h3>
</div>
</section>
<section class="about" id="about">
<div class="about-img">
<img src="img/profile.jpg">
</div>
<div class="about-text">
<h2>About Me</h2>
<h4>Hi, My name is Geek101 !!</h4>
<p>I am a B.Tech Final Year Student of XYZ College, Pursuing My Degree in XYZ . I have a keen Interest in Problems Solving and Finding new and Dynamic Ideas.</p><br>
<p>I am a Machine Learning Enthusiast & Front-end Web Developer. I can provide clean code and pixel perfect design.</p>
<div class="about-gri">
<div class="about-in">
<h5>1. Problem Solving</h5>
</div>
<div class="about-in">
<h5>2. DSA</h5>
</div>
<div class="about-in">
<h5>3. Machine Learning</h5>
</div>
<div class="about-in">
<h5>4. Web Development</h5>
</div>
</div>
<a href="#contact" class="btn">Contact Me</a>
</div>
</section>
<div class="inner">
<div class="Tech_header">
<h1>Languages</h1>
</div>
<div class="Tcontainer">
<div class="skill-box">
<div class="skill-title">
<div class="tech_img">
<img class="skill-icon" src="img/C.png" alt="C Programming Language">
</div>
<h3>C</h3>
</div>
</div>
<div class="skill-box">
<div class="skill-title">
<div class="tech_img">
<img class="skill-icon" src="img/C++.png" alt="C++ Programming Language">
</div>
<h3>C++</h3>
</div>
</div>
<div class="skill-box">
<div class="skill-title">
<div class="tech_img">
<img class="skill-icon" src="img/html.png" alt="Html">
</div>
<h3>HTML</h3>
</div>
</div>
<div class="skill-box">
<div class="skill-title">
<div class="tech_img">
<img class="skill-icon" src="img/css.png" alt="Css">
</div>
<h3>Css</h3>
</div>
</div>
<div class="skill-box">
<div class="skill-title">
<div class="tech_img">
<img class="skill-icon" src="img/js.png" alt="JavaScript">
</div>
<h3>JavaScript</h3>
</div>
</div>
<div class="skill-box">
<div class="skill-title">
<div class="tech_img">
<img class="skill-icon" src="img/python.png" alt="Python">
</div>
<h3>Python</h3>
</div>
</div>
</div>
</div>
<section class="experience" id="experience">
<div class="main-text">
<h2>My Experiences</h2>
</div>
<br>
<div class="experience-content">
<div class="box">
<img src="img/gfg.png" >
<h3>GeeksforGeeks</h3>
<h4>
<span>
Technical Content Writer
</span>
</h4>
<br>
<p>
• Created Multiple Software Development Projects with their detailed Documentation.
<br>
• Worked with the Dynamic Team of GeeksforGeeks.
</p>
</div>
</div>
</section>
<section class="skills" id="skills">
<div class="main-text">
<h2>My Skills</h2>
</div>
<div class="skills-content">
<div class="box">
<img src="img/cp-removebg-preview.png" >
<h3>Competitive Programming</h3>
<p>
Competitive programming is a sport of coding, where individuals engage in solving algorithmic challenges against the clock, showcasing their problem-solving skills and efficiency in crafting elegant and optimized solutions.</p>
</div>
<div class="box">
<img src="img/fe-removebg-preview.png" >
<h3>Front-end Development</h3>
<p>Front-end development is the art of bringing digital creativity to life, focusing on the user interface and user experience to seamlessly merge design with functionality, shaping the visual and interactive elements of websites.</p>
</div>
<div class="box">
<img src="img/ml-removebg-preview.png">
<h3>Machine Learning</h3>
<p>Machine learning is a transformative field at the intersection of computer science and A.I., empowering systems to learn from data, recognize patterns, and make intelligent decisions, entering in a automated insights and problem-solving.</p>
</div>
</div>
</section>
<section class="achievement" id="achievement">
<div class="main-text">
<h2>My Achievements</h2>
<h4>Some of My Major Achievements</h4>
</div>
<div class="portfolio-content">
<div class="row">
<img src="img/coding.jpg">
<div class="main-row">
<div class="row-text">
<h6>Write your Coding achievements here</h6>
</div>
</div>
<h3>Details about the Achievement </h3>
</div>
<div class="row">
<img src="img/hackathon.jpg">
<div class="main-row">
<div class="row-text">
<h6>Write your Hackathons achievements here</h6>
</div>
</div>
<h3>Details about the Hackathon </h3>
</div>
<div class="row">
<img src="img/extras.jpg">
<div class="main-row">
<div class="row-text">
<h6>Write your Extra curricular achievements here</h6>
</div>
</div>
<h3>Details about the Achievement </h3>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="main-text">
<h2>My Projects</h2>
<h4>Some Of My Distinguished Works</h4>
</div>
<div class="portfolio-content">
<div class="row">
<img src="img/lib1.jpg">
</a>
<div class="main-row">
<div class="row-text">
<h6>Web App development</h6>
</div>
</div>
<h3>Library Management System</h3>
</div>
<div class="row">
<img src="img/weather.jpg">
</a>
<div class="main-row">
<div class="row-text">
<h6>Web App Development</h6>
</div>
</div>
<h3>Weather Forecasting App</h3>
</div>
<div class="row">
<img src="img/breed.jpg">
</a>
<div class="main-row">
<div class="row-text">
<h6>Machine Learning</h6>
</div>
</div>
<h3>Dog's Breed Classification</h3>
</div>
<div class="row">
<img src="img/price.jpg">
</a>
<div class="main-row">
<div class="row-text">
<h6>Machine Learning</h6>
</div>
</div>
<h3>Boston House Price Prediction</h3>
</div>
</div>
</section>
<section class="POR" id="POR">
<div class="main-text">
<h2>Position of Responsibilities</h2>
<h4>Some of My valunteer Work</h4>
</div>
<div class="portfolio-content">
<div class="row">
<img src="img/speaker.jpg">
<div class="main-row">
<div class="row-text">
<h6>GFG College Chapter</h6>
</div>
</div>
<h3>President</h3>
</div>
<div class="row">
<img src="img/chess.jpg">
<div class="main-row">
<div class="row-text">
<h6>Chess Coordinator</h6>
</div>
</div>
<h3>College Chess Club</h3>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="contact-text">
<h2>Contact Me</h2>
<h4>Let's Work Together</h4>
<p>I will Help you in your next Project, Contact me through details given below .</p>
<div class="contact-list">
<li><a href="#">Local Address</a></li>
<li><a href="#">example@gmail.com</a></li>
<li><a href="#">+91 0000000000</a></li>
<a href="mailto: example@gmail.com">
<button class="btn">
Let's Chat
</button>
</a>
</div>
<div class="contact-icons">
<a title="+91 0000000000"><i class='bx bxl-whatsapp' ></i></a>
</div>
</div>
</section>
<a href="#" class="top"><i class='bx bx-up-arrow-alt' ></i></a>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
|
style.css
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
list-style: none;
text-decoration: none;
scroll-behavior: smooth;
}
:root{
--bg-color: #020312;
--text-color: #fff;
--main-color: #eb4a4a;
--second-color: gray;
--other-color: #12141c;
--h1-font: 5.2rem;
--h2-font: 3.5rem;
--p-font: 1.1rem;
}
body{
background: var(--bg-color);
color: var(--text-color);
}
header{
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
padding: 22px 16%;
border-bottom: 1px solid transparent;
transition: all .40s ease;
}
.navbar{
display: flex;
}
.navbar a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: bold;
padding: 10px 25px;
margin: 0 2px;
border-radius: 0.5rem;
transition: all .40s ease;
}
.navbar a:hover{
background: var(--main-color);
color: var(--text-color);
}
#menu-icon{
font-size: 36px;
color: var(--text-color);
z-index: 10001;
cursor: pointer;
display: none;
}
section{
padding: 160px 16% 90px;
}
.home{
height: 100vh;
width: 100%;
position: relative;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: flex-start;
}
.home-text h1{
margin: 15px 0;
font-size: var(--h1-font);
font-weight: bold;
line-height: 1.1;
letter-spacing: 2px;
}
span{
color: var(--main-color);
}
.home-text h4{
color: var(--main-color);
font-size: 24px;
font-weight: 600;
}
.home-text h3{
font-size: 24px;
font-weight: 600;
margin-bottom: 3rem;
}
.btn{
display: inline-block;
padding: 14px 40px;
border-radius: 0.5rem;
font-size: 17px;
font-weight: 500;
background: var(--main-color);
color: var(--text-color);
border: 1px solid var(--main-color);
transition: all .40s ease;
}
.btn:hover{
transform: scale(1.01) translateY(-5px);
background: transparent;
border: 1px solid var(--main-color);
}
header.sticky{
padding: 10px 16%;
background: var(--bg-color);
border-bottom: 1px solid #0e1630;
}
.about{
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2rem;
}
.about-text h4{
margin: 10px 0;
color: var(--main-color);
font-size: 20px;
font-weight: 600;
}
.about-text h2{
font-size: var(--h2-font);
}
.about-text p{
color: var(--second-color);
font-size: var(--p-font);
line-height: 30px;
margin-bottom: 2rem;
}
.about-gri{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, auto));
align-items: center;
gap: 1rem;
margin-bottom: 3rem;
}
.about-in h5{
font-size: 22px;
font-weight: 600;
}
.about-img img{
height: auto;
width: 100%;
max-width: 460px;
}
.main-text{
text-align: center;
}
.main-text h2{
font-size: var(--h2-font);
margin-bottom: 10px;
}
.main-text h4{
color: var(--main-color);
font-size: 24px;
font-weight: 600;
}
.services-content{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, auto));
align-items: center;
text-align: center;
gap: 2rem;
margin-top: 5rem;
}
.box{
padding: 45px;
background: #12141c;
border-top: 5px solid transparent;
border-radius: 0.5rem;
transition: all .40s ease;
cursor: pointer;
}
.box h3{
font-size: 24px;
font-weight: 600;
margin: 15px 0;
transition: all .40s ease;
}
.box p{
color: var(--second-color);
font-size: var(--p-font);
line-height: 30px;
}
.box:hover{
transform: scale(1.01) translateY(-5px);
border-top: 5px solid var(--main-color);
}
.box:hover h3{
color: var(--main-color);
}
.portfolio-content{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, auto));
align-items: center;
gap: 2rem;
margin-top: 5rem;
}
.row img{
height: auto;
width: 100%;
border-radius: 0.5rem;
margin-bottom: 1.5rem;
}
.row{
padding: 25px;
background: #12141c;
border-radius: 0.5rem;
transition: all .40s ease;
}
.main-row{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.row h3{
font-size: 25px;
font-weight: 700;
}
.row h6{
color: var(--main-color);
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
}
.row-icon i{
font-size: 21px;
}
.row:hover{
transform: scale(1.01) translateY(-5px);
cursor: pointer;
}
.contact{
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 3rem;
}
.contact-text h4{
margin: 15px 0;
color: var(--main-color);
font-size: 20px;
font-weight: 600;
}
.contact-text h2{
font-size: var(--h2-font);
}
.contact-text p{
color: var(--second-color);
font-size: var(--p-font);
line-height: 30px;
margin-bottom: 2rem;
}
.contact-list{
margin-bottom: 3rem;
}
.contact-list li{
margin-bottom: 10px;
display: block;
}
.contact-list li a{
display: block;
color: var(--second-color);
font-size: var(--p-font);
font-weight: 600;
transition: all .40s ease;
}
.contact-list li a:hover{
transform: scale(1.01) translateY(-5px);
color: var(--main-color);
}
.contact-icons i{
height: 40px;
width: 40px;
background: #12141c;
border-radius: 0.5rem;
color: var(--main-color);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin-right: 10px;
transition: all .40s ease;
}
.contact-icons i:hover{
transform: scale(1.01) translateY(-5px);
color: var(--text-color);
background: var(--main-color);
}
.last-text p{
text-align: center;
padding: 15px;
color: var(--second-color);
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
}
.top{
position: fixed;
bottom: 2.1rem;
right: 2.1rem;
}
.top i{
color: var(--text-color);
background: var(--main-color);
font-size: 20px;
padding: 10px;
border-radius: 0.5rem;
}
@media (max-width: 1325px){
header{
padding: 16px 3%;
}
header.sticky{
padding: 8px 3%;
}
section{
padding: 130px 3% 60px;
}
}
@media (max-width: 970px){
:root{
--h1-font: 4.2rem;
--h2-font: 2.9rem;
--p-font: 1rem;
}
section{
padding: 70px 3% 60px;
}
.home{
height: 85vh;
}
.about{
grid-template-columns: 1fr;
}
.about-img{
text-align: center;
}
.contact{
grid-template-columns: 1fr;
}
}
@media (max-width: 830px){
#menu-icon{
display: block;
}
.navbar{
position: absolute;
top: -600px;
right: 0;
left: 0;
display: flex;
flex-direction: column;
background: #12141c;
text-align: left;
transition: all .40s ease;
}
.navbar a{
display: block;
padding: 1rem;
margin: 1rem;
}
.navbar.active{
top: 100%;
}
:root{
--h1-font: 3.7rem;
--h2-font: 2.7rem;
}
}
.back-video{
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
@media (min-aspect-ratio: 16/10){
.back-video{
width: 110%;
height: auto;
}
}
@media (max-aspect-ratio: 16/10){
.back-video{
width: auto;
height: 100%;
}
}
img{
height:150px;
width: 150px;
}
.tech-skills h2{
font-size: var(--h2-font);
text-align: center;
}
.skills{
box-sizing: border-box;
}
.diff-skills::after {
content: "";
display: table;
clear: both;
}
.skill-item{
float: left;
width: 14.28%;
height: 90%;
padding: 8px;
}
@media (max-width:660px){
.skill-item img{
height:90%;
width:90%;
}
.tech-skills h2{
font-size: var(--h2-font);
}
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.inner{
padding-top: 20px;
}
.Tech_header{
text-align: center;
color: #fff;
padding: 1rem;
position: relative;
}
.Tech_header::after{
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
height: 4px;
width: 100px;
background-color: #eb4a4a;
border-radius: 2px;
}
.Tcontainer{
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
align-items: center;
text-align: center;
grid-gap: 1rem;
padding: 1rem 80px;
font-size: 1.2rem;
}
.skill-box{
padding: 1rem;
color: #ddd;
cursor: pointer;
}
.skill-box:hover > .skill-title:after, .skill-box:hover > .skill-title:before{
width: 35px;
}
.skill-box:hover .tech_img{
transform: translateY(-10px);
}
.skill-title{
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem;
margin-bottom: 0.5rem;
position: relative;
}
.skill-title:after{
content: '';
position: absolute;
bottom: 0;
right: 50%;
width: 0;
height: 4px;
border-radius: 2px 0 0 2px;
background-color: #eb4a4a;
transition: .5s;
}
.skill-title:before{
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 4px;
border-radius: 0 2px 2px 0;
background-color: #eb4a4a;
transition: .5s;
}
.tech_img{
width: 90px;
height: 90px;
position: relative;
border-radius: 45px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
transition: .5s;
}
.tech_img:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 90px;
background: rgba(100, 100, 100, 0.5);
border-radius: 45px 0 0 45px;
}
.skill-title h3{
color: #fff;
margin-top: 0.5rem;
}
.skill-icon{
width: 50px;
height: 50px;
z-index: 2;
}
@media screen and (max-width: 990px){
.Tcontainer{
grid-template-columns: repeat(2, 1fr);
padding: 2rem 50px;
}
}
@media screen and (max-width: 650px){
.Tcontainer{
grid-template-columns: 1fr;
}
}
|
Step 5: Hosting our Website:
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?
Step 6: Testing Phase:
Testing is a crucial phase in the development of a portfolio 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:
- 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.
- Integration Testing:
- Verify that different modules and components of the portfolio website should work together seamlessly.
- Functional Testing:
- Validate that the intended functions accurately and efficiently.
- 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.
- 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.
Step 7: Creating Project Presentation on Portfolio Website Project:
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:
- Project Name and Team Details
- Introduction
- Purpose
- Project Scope
- Problem Statement
- Proposed Solution
- Product Functionalities
- Flow chart of the project
- Analysis of model
- Summary
Future Enhancements
- 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.
FAQ’s about Portfolio Website Project
Answer:
An online portfolio (may also be called a digital portfolio or e-portfolio) is an online representation of work you have created, as well as your skills and experiences. It could be a website, blog, or even a video channel.
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.
Answer:
Follow the Instruction above in this post.
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.
Share your thoughts in the comments
Please Login to comment...