diff --git a/bootstrap (2).html b/bootstrap (2).html
new file mode 100644
index 000000000000..9d1f9b480a40
--- /dev/null
+++ b/bootstrap (2).html	
@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>aboutme</title>
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+	<link rel="stylesheet" type="text/css" href="style/css">
+	</head>
+   <style type="text/css">
+	.sub-menu{
+		border: 3px solid black;
+		border-collapse: collapse;
+		height: 10vh;
+		width: 100%;
+		table-layout: fixed;
+		background-color: rgba(255,8, 10, 1.0);
+		text-align: center;
+		margin: 0;
+		padding: 0;
+		position: fixed;
+		margin-top: 70px;
+		z-index: 1000;
+	}
+	header{
+		background-color: BLUE;
+		height: 20vh;
+		padding:  5px;
+		position: fixed;
+		width: 100%;
+		z-index: 1000; 
+}
+	.table-row td{
+		border: 3px solid black;
+	}
+	.sections div{
+		min-height: 80vh;
+	}
+	.sections div:nth-child(1){
+		background-color: lightblue;
+	}
+	.sections div:nth-child(2){
+		background-color: rebeccapurple;
+	}
+	.sections div:nth-child(3){
+		background-color: blueviolet;
+	}
+	.sections div:nth-child(4){
+		background-color: lightgrey;
+	}
+	.sections {
+		margin-top: 20h;
+	}
+	.about {
+		display: flex;
+		justify-content: space-between;
+		padding: 60px 10%;
+		gap: 20%;
+	}
+	.about-text {
+		flex: 1;
+	}
+	.about-image {
+		flex: 1;
+	}
+	.about-image img {
+		height: 15%;
+		border-radius: 10% ;
+	}
+	#latest, #birth, #Educ, #skills{
+		scroll-margin-top: 20vh;
+	}
+	table {
+		margin: auto;
+		border-radius: 10px;
+		border: 3px solid black;
+	} 
+	th,td{
+		padding: 20px;
+		text-align: center;
+		border: 3px solid black;
+	}
+	th{
+		background-color: black;
+		co: 4px solid border-radius:;
+		border-radius: 10px;
+		border: 4px solid black;
+		border-radius: 10px;
+	}
+	td{
+		background-color: none;
+		border: 4px solid black;
+		color: white;
+		border-radius: 10px;
+	}
+	td{
+		margin: 0;
+	}
+	ul{
+		list-style: none;
+		display: flex;
+		margin-left: 200px;
+		justify-content: end;
+	}
+	li{
+		margin: 20px;
+	}
+	ul li :first-child {
+	margin-left: 5;
+	margin-right: auto;
+	justify-content: start;
+	display: flex;
+	}
+</style>
+<body>
+	<header>
+	<ul>
+		<li><a href="index.html">MY PORTFOLIO</a></li>
+		<li><a href="index.html"><img src="yy.jp"></a></li>
+		<li><a href="index.html">HOME</a></li>
+		<li><a href="aboutme.html">ABOUT ME</a></li>
+		<li><a href="contact.html">CONTACTS</a></li>
+		<li><a href="profiles.html">PROFILES</a></li>
+	</ul>
+</header>
+<table class="sub-menu">
+	<tr class="table-row">
+		<td> <a href="#latest">Latest Updates</a> </td>
+		<td> <a href="#birth">Birthday</a> </td>
+		<td> <a href="#educ">Educational Background</a> </td>
+		<td> <a href="#ski">Skills</a> </td>
+	</tr>
+</table>
+<div class="sections">
+	<div id="latest" class="about">
+		<section class="about-text">
+		<h1><span style="color:gold;"> Latest Update About Me!!!</span></h1>
+		<h1>MHARJHUN E, BUENAFE The only son of JUN Just 19years old</h1>
+		<h1><span style="color:darkblue;">":)"</span></h1>	
+		</section>
+		<section class="about-image">
+			<img src="yy.jpeg"alt="this is my picture"></a></li>
+		</section>
+		</div>
+	<div id="birth">
+	        <h1><i style="color: violet;">AUG 2006</i></h1>
+	<br>
+	<table>
+		<tr>
+			<th>SUN</th>
+			<th>MON</th>
+			<th>TUE</th>
+			<th>WED</th>
+			<th>THU</th>
+			<th>FRI</th>
+			<th>SAT</th>
+		</tr>
+		<tr>
+			<td></td>
+			<td></td>
+			<td>1</td>
+			<td>2</td>
+			<td>3</td>
+			<td>4</td>
+			<td>5</td>
+		</tr>
+		<tr>
+			<td>6</td>
+			<td>7</td>
+			<td>8</td>
+			<td>9</td>
+			<td>10</td>
+			<td>11</td>
+			<td>12</td>
+		</tr>
+		<tr>
+			<td>13</td>
+			<td>14</td>
+			<td>15</td>
+			<td>16</td>
+			<td>17</td>
+			<td>18</td>
+			<td>19</td>
+		</tr>
+		<tr>
+			<td>20</td>
+			<td>21</td>
+			<td>22</td>
+			<td>23</td>
+			<td>24</td>
+			<td class= "birthday">
+				<strong>25</strong><br>
+			My Birthday</td>
+			<td>26</td>
+		</tr>
+		<tr>
+			<td>27</td>
+			<td>28</td>
+			<td>29</td>
+			<td>30</td>
+			<td>31</td>
+			<td></td>
+			<td></td>></td>
+	</tr>
+</table>
+		</div>
+	<div id="educ">
+		<div id="carouselExample" class="carousel slide">
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img src="elem.jpg" class="d-block w-100" alt="...">
+      <h5><a href="daan-ili.html"> DAAN ILI ELEMENTARY SCHOOL</a></h5>
+      <p> ALLACAPAN, DAAN-ILI ALLACAPAN CAGAYAN </p>
+    </div>
+    <div class="carousel-item">
+      <img src="allacapan.jpg" class="d-block w-100" alt="...">
+      <h5><a href="ALLACAPAN.html"><span style="color:yellow">ALLACAPAN VOCATIONAL HIGH SCHOOL</span></a> </h5>
+      <p> ALLACAPAN,VOCATIONAL,HIGH SCHOOL</p>
+    </div>
+    <div class="carousel-item">
+      <img src="asc.jpg" class="d-block w-100" alt="...">
+      <h5><a href="ASC.html"> APAYAO STATE COLLEGE</a> </h5>
+      <p> SAN ISIDRO SUR LUNA, APAYAO</p>
+    </div>
+  </div>
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden"></span>
+  </button>
+  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden"></span>
+  </button>
+</div>
+	</div>
+	<div id="ski">
+      
+    </div>
+</body>
+</html>
diff --git a/bootstrap.html b/bootstrap.html
new file mode 100644
index 000000000000..ee5652f7c213
--- /dev/null
+++ b/bootstrap.html
@@ -0,0 +1,294 @@
+ <!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>aboutme</title>
+	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+	<link rel="stylesheet" type="text/css" href="style/css">
+	</head>
+   <style type="text/css">
+	body{
+		margin: 0;
+		color: pink;
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		overflow-x: hidden;
+}
+	.sub-menu{
+		border: 3px solid black;
+		border-collapse: collapse;
+		height: 10vh;
+		width: 100%;
+		table-layout: fixed;
+		background-color: rgba(255,8, 10, 1.0);
+		text-align: center;
+		margin: 0;
+		padding: 0;
+		position: fixed;
+		margin-top: 70px;
+		z-index: 1000;
+	}
+	.sub-menu a{
+		text-decoration: none;
+		color: white;
+	}
+	header{
+		background-color: BLUE;
+		height: 20vh;
+		padding:  5px;
+		position: fixed;
+		width: 100%;
+		z-index: 1000; 
+}
+header img{
+	height: 50px;
+	border-radius: 25px;
+	align-content: center;
+
+}
+header a{
+	text-decoration: none;
+	color: white;
+}
+	.table-row td{
+		border: 3px solid black;
+	}
+	.sections div{
+		min-height: 80vh;
+	}
+	.sections div:nth-child(1){
+		background-color: lightblue;
+	}
+	.sections div:nth-child(2){
+		background-color: rebeccapurple;
+	}
+	.sections div:nth-child(3){
+		background-color: blueviolet;
+	}
+	.sections div:nth-child(4){
+		background-color: lightgrey;
+	}
+	.sections {
+		margin-top: 20vh;
+	}
+	.about {
+		display: flex;
+		justify-content: space-between;
+		padding: 60px 10%;
+		gap: 20%;
+	}
+	.about-text {
+		flex: 1;
+	}
+	.about-image {
+		flex: 1;
+	}
+	.about-image img {
+		height: 15%;
+		border-radius: 10% ;
+	}
+	#latest, #birth, #Educ, #skills{
+		scroll-margin-top: 20vh;
+	}
+	table {
+		margin: auto;
+		border-radius: 10px;
+		border: 3px solid black;
+	} 
+	th,td{
+		padding: 20px;
+		text-align: center;
+		border: 3px solid black;
+	}
+	th{
+		background-color: black;
+		co: 4px solid border-radius:;
+		border-radius: 10px;
+		border: 4px solid black;
+		border-radius: 10px;
+	}
+	td{
+		background-color: none;
+		border: 4px solid black;
+		color: white;
+		border-radius: 10px;
+	}
+	td{
+		margin: 0;
+	}
+	ul{
+		list-style: none;
+		display: flex;
+		margin-left: 200px;
+		justify-content: end;
+	}
+	li{
+		margin: 20px;
+	}
+	ul li :first-child {
+	margin-left: 5;
+	margin-right: auto;
+	justify-content: start;
+	display: flex;
+	}
+</style>
+<body>
+	<header>
+	<ul>
+		<li><a href="index.html">MY PORTFOLIO</a></li>
+		<li><a href="index.html"><img src="yy.jpeg"></a></li>
+		<li><a href="index.html">HOME</a></li>
+		<li><a href="aboutme.html">ABOUT ME</a></li>
+		<li><a href="contact.html">CONTACTS</a></li>
+		<li><a href="profile.html">PROFILES</a></li>
+	</ul>
+</header>
+<table class="sub-menu">
+	<tr class="table-row">
+		<td> <a href="#latest">Latest Updates</a> </td>
+		<td> <a href="#birth">Birthday</a> </td>
+		<td> <a href="#educ">Educational Background</a> </td>
+		<td> <a href="#ski">Skills</a> </td>
+	</tr>
+</table>
+<div class="sections">
+	<div id="latest" class="about">
+		<section class="about-text">
+		<h1><span style="color:gold;"> Latest Update About Me!!!</span></h1>
+		<h1>MHARJHUN E, BUENAFE The only son of JUN Just 19years old</h1>
+		<h1><span style="color:darkblue;">":)"</span></h1>	
+		</section>
+		<section class="about-image">
+			<img src="yy.jpeg"alt="this is my picture"></a></li>
+		</section>
+		</div>
+	<div id="birth">
+	        <h1><i style="color: violet;">AUG 2006</i></h1>
+	<br>
+	<table>
+		<tr>
+			<th>SUN</th>
+			<th>MON</th>
+			<th>TUE</th>
+			<th>WED</th>
+			<th>THU</th>
+			<th>FRI</th>
+			<th>SAT</th>
+		</tr>
+		<tr>
+			<td></td>
+			<td></td>
+			<td>1</td>
+			<td>2</td>
+			<td>3</td>
+			<td>4</td>
+			<td>5</td>
+		</tr>
+		<tr>
+			<td>6</td>
+			<td>7</td>
+			<td>8</td>
+			<td>9</td>
+			<td>10</td>
+			<td>11</td>
+			<td>12</td>
+		</tr>
+		<tr>
+			<td>13</td>
+			<td>14</td>
+			<td>15</td>
+			<td>16</td>
+			<td>17</td>
+			<td>18</td>
+			<td>19</td>
+		</tr>
+		<tr>
+			<td>20</td>
+			<td>21</td>
+			<td>22</td>
+			<td>23</td>
+			<td>24</td>
+			<td class= "birthday">
+				<strong>25</strong><br>
+			My Birthday</td>
+			<td>26</td>
+		</tr>
+		<tr>
+			<td>27</td>
+			<td>28</td>
+			<td>29</td>
+			<td>30</td>
+			<td>31</td>
+			<td></td>
+			<td></td>></td>
+	</tr>
+</table>
+		</div>
+	<div id="educ">
+		<div id="carouselExample" class="carousel slide">
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img src="elem.jpg" class="d-block w-100" alt="...">
+      <h5><a href="daan-ili.html"> DAAN ILI ELEMENTARY SCHOOL</a></h5>
+      <p> ALLACAPAN, DAAN-ILI ALLACAPAN CAGAYAN </p>
+    </div>
+    <div class="carousel-item">
+      <img src="allacapan.jpg" class="d-block w-100" alt="...">
+      <h5><a href="high school.html">AVHS</a> </h5>
+      <p> ALLACAPAN.VOCATIONAL.HIGH SCHOOL</p>
+    </div>
+    <div class="carousel-item">
+      <img src="asc.jpg" class="d-block w-100" alt="...">
+      <h5><a href="ASC.html"> APAYAO STATE COLLEGE</a> </h5>
+      <p> SAN ISIDRO SUR LUNA, APAYAO</p>
+    </div>
+    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+  </button>
+  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden"></span>
+  </button>
+</div>
+	</div>
+	<div id="ski">
+    <div class="conteinar mt-5">
+	 <h3 class="tex-center-md-4 fw-bold">my skills</h3>
+
+    <div class="row g-4">
+    	<div class="col-md-4 col-sm-6">
+    		<div class="card h-100 shodaw-sm boder-0">
+    			<img src=".jpeg" class="card-img-top p-3">
+    			<div class="card-body text-center">
+    				<p class="card-text fw-bold">playing basketball </p>
+    			</div>
+    		</div>
+    	</div>
+    	<div class="col-md-4 col-sm-6">
+    		<div class="card h-100 shodaw-sm boder-0">
+    			<img src=".jpeg" class="card-img-top p-3">
+    			<div class="card-body text-center">
+    				<p class="card-text fw-bold">playing basketball </p>
+    			</div>
+    		</div>
+    	</div>
+    	<div class="col-md-4 col-sm-6">
+    		<div class="card h-100 shodaw-sm boder-0">
+    			<img src=".jpeg" class="card-img-top p-3">
+    			<div class="card-body text-center">
+    				<p class="card-text fw-bold">playing basketball </p>
+    			</div>
+    		</div>
+    	</div>
+    </div>
+   </div>
+  </div>
+</div>
+</head>
+
+</body>
+</html>
diff --git a/skills.html b/skills.html
new file mode 100644
index 000000000000..aa42ed59fb44
--- /dev/null
+++ b/skills.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>my skills</title>
+	<link href="https:cdm.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+	<style>
+		body {
+			background-color: pink;
+			font-family: arial, sans-serif;
+		}
+		 .frofile-container {
+		 	max-width: 800px;
+		 	margin: 50px outo;
+		 	background: pink;
+		 	border-radius: 10px;
+		 	padding: 20px;
+		 	box-shadow: 0 0 120px black;
+		 }
+		 .profile-header {
+		 	background-color: violet;
+		 	color: white;
+		 	padding: 20px;
+		 	border-radius: 10px 10px 0 0;
+		 	text-align: center;
+		 }
+		  .profile-img {
+		  width: 120px;
+		  height: 200px;
+		  border-radius: 50%;
+		  border: 4px solid hotpink; 
+		  margin-top: 20px;
+		 }
+		 .section {
+		 	margin-top: 20px;
+		 }
+
+		 h2 {
+		 	font-size: 20px;
+		 	border-bottom: 2px solid black;
+		 	padding-bottom: 5px;
+		 }
+
+		 p {
+		 	margin: 5px 0;
+		 }
+
+		 b img{
+		 	position: fixed;
+		 	bottom: 5%;
+		 	left: 2%;
+		 	height: 50px;
+		 	border-radius: 40px;
+		 }
+		</style>
+	</head>
+	<body>
+		<div id="skill">
+<div class="conteinar mt-5">
+	 <h3 class="tex-center-md-4 fw-bold">my skills</h3>
+
+    <div class="row g-4">
+    	<div class="col-md-4 col-sm-6">
+    		<div class="card h-100 shodaw-sm boder-0">
+    			<img src=".jpeg" class="card-img-top p-3">
+    			<div class="card-body text-center">
+    				<p class="card-text fw-bold">playing basketball </p>
+    			</div>
+    		</div>
+    	</div>
+    	<div class="col-md-4 col-sm-6">
+    		<div class="card h-100 shodaw-sm boder-0">
+    			<img src=".jpeg" class="card-img-top p-3">
+    			<div class="card-body text-center">
+    				<p class="card-text fw-bold">playing basketball </p>
+    			</div>
+    		</div>
+    	</div>
+    	<div class="col-md-4 col-sm-6">
+    		<div class="card h-100 shodaw-sm boder-0">
+    			<img src="asc1.jpeg" class="card-img-top p-3">
+    			<div class="card-body text-center">
+    				<p class="card-text fw-bold">playing basketball </p>
+    			</div>
+    		</div>
+    	</div>
+    </div>
+   </div>
+  </div>
+</div>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file

+ 25
+ My Birthday