My Portfolio
HTML
<html>
<head>
<title>My Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<nav>
<ul class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Social</a>
<div class="dropdown-content">
<a href="#">Facebook</a>
<a href="#">LinkedIn</a>
<a href="#">Twitter</a>
<a href="#">GitHub</a>
</div>
</li>
</ul>
</nav>
<!-- Rest of the website content goes here -->
<div class="header-container">
<h1>Hi! This is Kaushik,</h1>
</br>
<p id="typing-text">I am a</p>
<img src="https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Your Image" class="profile-image">
</div>
<section id="home">
<!-- Home section content here -->
</section>
<section id="projects">
<!-- Projects section content here -->
</section>
<section id="contact">
<!-- Contact section content here -->
</section>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
.navbar li {
float: none;
display: inline-block;
}
.navbar li a {
display: block;
padding: 16px;
text-decoration: none;
color: black;
transition: background-color 0.3s ease;
}
.navbar li a:hover {
background-color: #f9f9f9;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
transition: background-color 0.3s ease;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
background-color: red;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
h1 {
font-size: 24px;
margin-left: 10px;
}
.profile-image {
width: 200px; /* Adjust the width as needed */
height: auto; /* Adjust the height as needed */
border-radius: 10%; /* To create a circular image */
margin-left: auto;
transition: box-shadow 0.3s ease;
}
.profile-image:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Customize the box shadow effect */
}
#typing-text {
font-size: 24px;
margin-left: 10px;
white-space: nowrap;
overflow: hidden;
border-right: 0.15em solid #000; /* Cursor style */
animation: typing 3s steps(40, end), blink-caret 0.5s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 300px; /* Adjust the width as needed */
}
}
@keyframes blink-caret {
from, to {
border-color: transparent;
}
50% {
border-color: #000;
}
}
JAVASCRIPT
const typingTextElement = document.getElementById("typing-text");
const roles = ["Software Engineer", "Web Developer", "Content Writer"];
let roleIndex = 0;
function changeRole() {
typingTextElement.textContent = "I am a " + roles[roleIndex];
roleIndex = (roleIndex + 1) % roles.length;
}
setInterval(changeRole, 2000); // Change role every 2 seconds
