Last Updated 14-10-2024 New Details Updated without the image and Lin…

…ks .

css/animation.css

@@ -0,0 +1,183 @@
+@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
+
+*{
+    margin: 0px;
+    padding: 0px;
+}
+
+body{
+    font-family: 'Exo', sans-serif;
+}
+
+body {
+    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out; /* Smooth transitions */
+}
+
+.context {
+    width: 100%;
+    position: absolute;
+    top:50vh;
+
+}
+
+/* Circle animation */
+.circles li {
+    position: absolute;
+    display: block;
+    list-style: none;
+    width: 80px;
+    height: 80px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    animation: animate 25s linear infinite;
+}
+
+
+/* Transition effects for moving content */
+#content {
+    transition: transform 0.5s ease, color 0.5s ease; /* Smooth transition for position and color change */
+}
+
+.move-left {
+    transform: translateX(-100px); /* Move left */
+}
+
+.move-right {
+    transform: translateX(100px); /* Move right */
+}
+
+
+.circles li {
+    /* Add styles for the animated background circles here */
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.bg-light {
+    background-color: #f8f9fa !important;
+}
+
+.bg-dark {
+    background-color: #343a40 !important;
+}
+
+.theme-btn {
+    background-color: transparent;
+    border: none;
+    font-size: 1.5rem;
+}
+
+.circles{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.circles li{
+    position: absolute;
+    display: block;
+    list-style: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    opacity: 0.5; /* Set transparency */
+    animation: animate 25s linear infinite;
+    bottom: -150px;
+
+}
+
+.circles li:nth-child(1){
+    left: 25%;
+    width: 80px;
+    height: 80px;
+    animation-delay: 0s;
+}
+
+
+.circles li:nth-child(2){
+    left: 10%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 2s;
+    animation-duration: 12s;
+}
+
+.circles li:nth-child(3){
+    left: 70%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 4s;
+}
+
+.circles li:nth-child(4){
+    left: 40%;
+    width: 60px;
+    height: 60px;
+    animation-delay: 0s;
+    animation-duration: 18s;
+}
+
+.circles li:nth-child(5){
+    left: 65%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 0s;
+}
+
+.circles li:nth-child(6){
+    left: 75%;
+    width: 110px;
+    height: 110px;
+    animation-delay: 3s;
+}
+
+.circles li:nth-child(7){
+    left: 35%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 7s;
+}
+
+.circles li:nth-child(8){
+    left: 50%;
+    width: 25px;
+    height: 25px;
+    animation-delay: 15s;
+    animation-duration: 45s;
+}
+
+.circles li:nth-child(9){
+    left: 20%;
+    width: 15px;
+    height: 15px;
+    animation-delay: 2s;
+    animation-duration: 35s;
+}
+
+.circles li:nth-child(10){
+    left: 85%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 0s;
+    animation-duration: 11s;
+}
+
+
+
+@keyframes animate {
+
+    0%{
+        transform: translateY(0) rotate(0deg);
+        opacity: 1;
+        border-radius: 0;
+    }
+
+    100%{
+        transform: translateY(-1000px) rotate(720deg);
+        opacity: 0;
+        border-radius: 50%;
+    }
+
+}

css/style.css

@@ -49,10 +49,74 @@ html {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
+.btn-download {
+  display: inline-block;
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: bold;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: #fff;
+  background-color: #000;
+  border: 2px solid #fff;
+  border-radius: 25px;
+  transition: all 0.3s ease-in-out;
+}
+
+.btn-download:hover {
+  background-color: #fff;
+  color: #000;
+  border-color: #000;
+}
+
+.btn-download:active {
+  background-color: #333;
+  color: #fff;
+}
+
+.center-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Add hover effect for scaling */
+.container-fluid:hover {
+  transform: scale(1.05);
+}
+
+.skill-icon {
+  text-align: center;
+  font-size: 2.5rem; /* Adjust font size as needed */
+}
+
+.skill-icon i {
+  font-size: 5rem; /* Adjust icon size as needed */
+  margin-bottom: 10px; /* Space between icon and text */
+}
+
+.nav-tabs .nav-link {
+  font-size: 1.2rem; /* Adjust tab font size as needed */
+}
+
+.display-4 {
+  font-size: 5.5rem; /* Adjust main title font size */
+}
 article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
   display: block;
 }
 
+.social-icon {
+  font-size: 40px; /* Adjust size as needed */
+  color: #ffffff; /* Icon color */
+  transition: transform 0.3s, color 0.3s; /* Transition effects */
+}
+
+.social-icon:hover {
+  transform: scale(1.1); /* Slightly enlarge on hover */
+  color: #007bff; /* Change color on hover */
+}
+
 body {
   margin: 0;
   font-family: "Roboto", sans-serif;
@@ -9572,18 +9636,12 @@ a.text-danger:hover, a.text-danger:focus {
   color: #a71d2a !important;
 }
 
-.text-light {
-  color: #ffffff !important;
-}
+
 
 a.text-light:hover, a.text-light:focus {
   color: #d9d9d9 !important;
 }
 
-.text-dark {
-  color: #343a40 !important;
-}
-
 a.text-dark:hover, a.text-dark:focus {
   color: #121416 !important;
 }