Skip to content

Commit

Permalink
index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@Himel-Sarder
Himel-Sarder authored Apr 7, 2024
1 parent 8e574f1 commit 98735c8
Showing 1 changed file with 265 additions and 0 deletions.
265 changes: 265 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,265 @@
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">
<!--
Coded by---
-----------------------------------------------------------------------------------------------
Himel Sarder
Bachelor of Engineering (B.E)
Dept. of Computer Science and Engineering
Bangamata Sheikh Fhojilatunnesa Mujib Science and Technology University, Jamalpur, Bangladesh
-----------------------------------------------------------------------------------------------
-->
<style>
/* GLOBAL STYLES */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
color: #0c0c0c;
font-size: 110%;
font-family: "EB Garamond", serif;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .10em solid black; /* The typewriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .10em; /* Adjust as needed */
animation:
typing 3s steps(30, end),
blink-caret .5s step-end infinite;

position: absolute;
top: 40%;
left: 12%;
}

/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 75% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}

/* Your existing styles */
.box {
width: 300px;
height: 500px;
border-radius: 5px;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
box-shadow: 2px 2px 10px grey;
}

.box img {
border-radius: 10%; /* Add border-radius for round shape */
width: 100px; /* Adjust width as needed */
height: 100px; /* Adjust height as needed */
position: absolute;
top: 20%; /* Center vertically */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Center image */
border: 5px solid white;
z-index: 10; /* Ensure image is behind waves */
}

.box .text1 {
position: absolute;
top: 33%;
font-size: larger;
font-weight: bold;
/*bottom: 10px; /* Adjust distance from the bottom */
left: 50%; /* Center horizontally */
transform: translateX(-50%); /* Center horizontally */
color: rgb(10, 10, 10); /* Text color */
font-size: 25px; /* Adjust font size */
font-family: "EB Garamond", serif; /* Specify font family */
z-index: 10; /* Ensure text is above waves */
}

.wave {
opacity: .4;
position: absolute;
top: 10%;
left: 50%;
background: #0af;
width: 500px;
height: 460px;
margin-left: -250px;
margin-top: -250px;
transform-origin: 50% 48%;
border-radius: 43%;
animation: drift 3000ms infinite linear;
}
.wave.-three {
animation: drift 5000ms infinite linear;
}
.wave.-two {
animation: drift 7000ms infinite linear;
opacity: .1;
background: rgb(4, 47, 95);
}
.box:after {
content: '';
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom,
rgba(#cd3d6d, 1),
rgba(#68b0f8, 0) 80%,
rgba(white, .5));
z-index: 11;
transform: translate3d(0, 0, 0);
}
@keyframes drift {
from {
transform: rotate(0deg);
}
from {
transform: rotate(360deg);
}
}

/* Skill Bar Styles */
.skills {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 70%;
max-width: 300px;
}

.skill {
margin-bottom: 1px;
}

.skill-name {
font-size: 13px;
font-weight: bold;
margin-bottom: 1px;
color: #333; /* Darken the color for better readability */
}

.skill-bar {
background-color: rgba(0, 0, 0, 0.1); /* Add some transparency to the background */
height: 7px;
border-radius: 5px;
overflow: hidden; /* Hide overflowing parts of the skill level */
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
}

.skill-level {
height: 100%;
background: linear-gradient(to right, #0af, #0ff); /* Gradient background for a nice effect */
border-radius: 5px;
animation: fill 6s ease-in-out forwards; /* Add animation to fill the bars */
}

@keyframes fill {
from { width: 0; }
to { width: var(--percentage); }
}
</style>
</head>

<!--
Coded by---
-----------------------------------------------------------------------------------------------
Himel Sarder
Bachelor of Engineering (B.E)
Dept. of Computer Science and Engineering
Bangamata Sheikh Fhojilatunnesa Mujib Science and Technology University, Jamalpur, Bangladesh
-----------------------------------------------------------------------------------------------
-->

<body>
<div class='box'>
<img src="S.jpg" alt="Round Image">
<div class="typewriter">
<h1>Dept. of CSE, BSFMSTU</h1>
</div>
<div class="text1">Himel Sarder</div>
<div class='wave -one'></div>
<div class='wave -two'></div>
<div class='wave -three'></div>

<!-- Skill Bar -->
<div class="skills">
<div class="skill">
<div class="skill-name">HTML</div>
<div class="skill-bar">
<div class="skill-level" style="--percentage: 98%;"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">CSS</div>
<div class="skill-bar">
<div class="skill-level" style="--percentage: 87%;"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">JavaScript</div>
<div class="skill-bar">
<div class="skill-level" style="--percentage: 50%;"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">Python</div>
<div class="skill-bar">
<div class="skill-level" style="--percentage: 85%;"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">C</div>
<div class="skill-bar">
<div class="skill-level" style="--percentage: 80%;"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">C++</div>
<div class="skill-bar">
<div class="skill-level" style="--percentage: 85%;"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">Java</div>
<div class="skill-bar">
<div class="skill-level" style="--percentage: 40%;"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">Linux</div>
<div class="skill-bar">
<div class="skill-level" style="--percentage: 30%;"></div>
</div>
</div>
</div>
</div>
</body>
</html>

<!--
Coded by---
-----------------------------------------------------------------------------------------------
Himel Sarder
Bachelor of Engineering (B.E)
Dept. of Computer Science and Engineering
Bangamata Sheikh Fhojilatunnesa Mujib Science and Technology University, Jamalpur, Bangladesh
-----------------------------------------------------------------------------------------------
-->

0 comments on commit 98735c8

Please sign in to comment.