HTML Projects : Personal Portfolio

A personal portfolio is required to tell other people about you work as a professional. In this article, you will create a personal portfolio page with dummy content. The project has following things

  • A banner displaying your name
  • Navigation link that when clicked will open to different section of the page.
  • A grid view of your project and each grid item will open in a new product page.
  • A box to ask people to contact you.

Program Code: Personal Portfolio

<!DOCTYPE html>
<html>
<head>
    <title>Project: Personal Portfolio</title>
	<style>
	body{
	   margin:auto;
	   background:#282828;
	   color:#ffffff;
	   	   }
	#welcone-section {
	
	width:100%;
	display:flex;
	flex-direction:column;
	
	}
	#navbar {
	background:darkred;
	padding:2%;
	width:98%;
	text-align:right;
	margin:0;
	z-index:2;
	position:fixed;
	top:0;
	}
	#navbar a{
	text-align:right;
	padding:3px 10px;
	text-decoration:none;
	font-size:16px;
	font-family:monospace;
	color:white;
	
	}
	#banner{
	   
	   width:100%;
	   height:100vh;
	   position:relative;
	   top:30px;
	  
	}
	  
	 article h1{
	
	 text-align:center;
	 position:relative;
	 top:20%;
	 font-family:arial,sans-serif;
	 font-size:54px;
	 font-weight:bold;
	 }
	  article p{
	
	 text-align:center;
	 position:relative;
	 top:18%;
	 font-family:monospace;
	 font-size:28px;
	 color:red;
	 
	 }
	 
	 /*Project Tile */
	 #projects{
	 background:gray;
	 display:grid;
	 grid-template-columns:1fr 1fr 1fr;
	 grid-gap:10px;
	 }
	 .project-tile{
	 
	 background:red;
	 }
	</style>
</head>
<body>
<section id="Welcome-section">
<nav id="navbar">
<a id="profile-link" href="about.html">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
<article id="banner">
<h1>My Name is Ram Kumar</h1>
<p><em>I am a web designer</em></p>
<article>
</section>
<header>
<h2>My Projects</h2>
</header>
<section id="projects">

   <figure class="project-tile">
   <a href="https://codepen.io/GirishS/full/rNBdjgP">
   <img src="images/product-page.png" alt="product page">
   <figcaption> Tribute Page</figcaption></a>
   </figure>
<figure class="project-tile">
   <a href="https://codepen.io/GirishS/full/pozLVeQ">
   <figcaption> Survey Form Page</figcaption></a>
   </figure>
   <figure class="project-tile">
   <a href="https://codepen.io/GirishS/full/eYOrbba">
   <figcaption> Product Page</figcaption></a>
   </figure>
  <figure class="project-tile">
   <a href="https://codepen.io/GirishS/full/aboGrym">
   <figcaption>Technical Documentation Page</figcaption></a>
   </figure>
 <figure class="project-tile">
   <a href="https://codepen.io/GirishS/full/aboGrym">
   <figcaption>Technical Documentation Page</figcaption></a>
   </figure>
   
</section>
<section id="contact">
<header>
<h2>Hire Me!</h2>
<p>Let's work together...</p>
</header>
</section>
</body>
</html>

Output to Browser: Personal Portfolio

There are few special feature of this project They are listed below:

  • The project uses both flex-box and grid display.
  • The portfolio page is responsive in nature. Try making your page smaller.
  • We have used HTML 5 semantic elements to build this page.
HTML Project : Personal Portfolio
HTML Project : Personal Portfolio

Please support us by disabling your adblocker or whitelist this site from your adblocker. Thanks!

turn of adblocker imag