Introduction :
Before diving into coding, take time to plan out the design and structure of your portfolio website. Consider the factors such as color scheme, layout, navigation, and the content you want to showcase. Sketching out your ideas on paper or using digital tools can be helpful in visualizing the final outcome.
Below are the steps to get started:
- Create an HTML file named “index.html and ensure it carries the .html extension.
- Insert the provided Html code into your “index.html” file.
- Create a CSS file named “style.css” file.
- Insert the provided CSS code into your “style.css” file.
These steps will establish the necessary structure for portfolio website.
HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header-background">
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="header-content">
<img src="https://iconape.com/wp-content/png_logo_vector/vipul-logo.png" alt="Profile Photo of Vipul">
<h1>Hi, my name is Vipul</h1>
<p>Web Developer | Designer | Tech Enthusiast</p>
</div>
</header>
<main>
<section id="about">
<h2>~ About Me ~</h2>
<img src="https://i.imgut.com/Xo57zMo.jpg" alt="Vipul's Profile" class="profile-photo">
<p>Hello there! I'm a Front-end Developer and aspiring App Developer. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliquq. Ut enim ad minim veniam, quis nostrud exercitation. ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquq. Ut enim ad minim veniam, quis nostrud exercitation.
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum! :)</p>
</section>
<section id="portfolio">
<h2>~ My Work ~</h2>
<div class="project" id="project1">Project 1</div>
<div class="project" id="project2">Project 2</div>
<div class="project" id="project3">Project 3</div>
<div class="project" id="project4">Project 4</div>
</section>
<section id="contact">
<h2>~ Keep in Touch ~</h2>
<button class="btn btn-default td-btn outline white">Send me a message!</button>
</section>
</main>
<footer>
<p>Copyright 2024 Vipul - All Rights Reserved</p>
</footer>
</body>
</html>
CSS :
:root {
--primary-color: #29a598;
--text-color: #394c4a;
--background-light: #ffffff;
--header-height: 100vh;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 110%;
}
body {
margin: 0;
padding: 0;
font-family: 'Work Sans', Helvetica, sans-serif;
color: #394c4a;
line-height: 1.5;
overflow-x: hidden;
}
.header-background {
background-size: cover;
text-align: center;
height:100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
nav {
width: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
padding: 15px 0;
}
nav ul {
list-style: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: white;
text-decoration: none;
font-family: 'Unica One', cursive;
font-size: 1.2rem;
}
.header-content img {
max-width: 250px;
border-radius: 50%;
}
.header-content h1,
.header-content p {
margin: 0.5rem.0;
font-family: 'Unica One', cursive;
}
#about {
background-color: #ffffff;
padding-left: 40px;
padding-right: 40px;
margin: 40px;
border-radius: 0.5%;
text-align: center;
}
.profile-photo {
max-width: 40%;
height: auto;
border-radius: 50%;
}
#portfolio {
background-color: #0fbfbf;
padding: 15px;
border-radius: 0.5%;
text-align: center;
margin-bottom: 10px;
}
.project {
width: 200px;
height: 200px;
border: 1px solid #ccc;
margin: 10px;
display: inline-block;
line-height: 200px;
}
#contact {
background-color: #ffbc4b;
padding: 15px;
border-radius: 0.5%;
text-align: center;
}
.td-btn {
padding: 12px 36px;
text-transform: uppercase;
transition: background-color 0.2s ease-in-out;
background-color: #0fbfbf;
}
footer {
background-color: #f4f4f4;
text-align: center;
padding: 10px;
}
h2 {
color: #333;
font-family: 'Unica One', cursive;
font-size: 2.3rem;
}
a{
color: #29a598;
transition: color 0.2s ease-in-out;
}
a:hover {
color: #208479;
}
@media (max-width: 76px) {
nav ul li {
display: block;
margin: 10px 0;
}
.profile-photo {
width: 50%;
margin: 0 auto;
}
}
output :
Conclusion :
A student portfolio is a collection of student work that demonstrates a student’s skills and learning progress. Portfolio help students keep track of their learning progress and skills development over time. Portfolio motivate students to do their best work, as they know that their work will be seen by others.