From a9fa0badc663fa1efb02fb929aef01029db7e6e2 Mon Sep 17 00:00:00 2001
From: adminvns <shubham.editor@gmail.com>
Date: Sun, 28 Dec 2025 17:43:59 +0530
Subject: [PATCH] added buy me a cofffe link

---
 assets/css/style.css   | 260 ++++++++++++++++++++++++++++++++++++++---
 index.html             | 111 ++++++++++--------
 inner-page.html        |  43 ++++---
 portfolio-details.html |  35 +++---
 4 files changed, 348 insertions(+), 101 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 1a9ffff..e533dfe 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -23,7 +23,12 @@ a:hover {
   text-decoration: none;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: "Raleway", sans-serif;
 }
 
@@ -43,15 +48,18 @@ h1, h2, h3, h4, h5, h6 {
   border-radius: 50px;
   transition: all 0.4s;
 }
+
 .back-to-top i {
   font-size: 28px;
   color: #fff;
   line-height: 0;
 }
+
 .back-to-top:hover {
   background: #2eafec;
   color: #fff;
 }
+
 .back-to-top.active {
   visibility: visible;
   opacity: 1;
@@ -73,12 +81,14 @@ h1, h2, h3, h4, h5, h6 {
   background: #040b14;
   overflow-y: auto;
 }
+
 #header .profile img {
   margin: 15px auto;
   display: block;
   width: 120px;
   border: 8px solid #2c2f3f;
 }
+
 #header .profile h1 {
   font-size: 24px;
   margin: 0;
@@ -88,10 +98,13 @@ h1, h2, h3, h4, h5, h6 {
   text-align-last: center;
   font-family: "Poppins", sans-serif;
 }
-#header .profile h1 a, #header .profile h1 a:hover {
+
+#header .profile h1 a,
+#header .profile h1 a:hover {
   color: #fff;
   text-decoration: none;
 }
+
 #header .profile .social-links a {
   font-size: 18px;
   display: inline-block;
@@ -106,12 +119,82 @@ h1, h2, h3, h4, h5, h6 {
   height: 36px;
   transition: 0.3s;
 }
+
 #header .profile .social-links a:hover {
   background: #149ddd;
   color: #fff;
   text-decoration: none;
 }
 
+#header .profile .social-links a.coffee:hover {
+  background: #ffdd00;
+  color: #111;
+}
+
+/* Buy Me A Coffee Animation */
+#header .profile .social-links a.coffee {
+  animation: coffee-pulse 2s infinite;
+  background: #ffdd00 !important;
+  color: #111 !important;
+}
+
+@keyframes coffee-pulse {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(255, 221, 0, 0.7);
+  }
+
+  70% {
+    transform: scale(1.2);
+    box-shadow: 0 0 0 10px rgba(255, 221, 0, 0);
+  }
+
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(255, 221, 0, 0);
+  }
+}
+
+/* Nav Menu Coffee Animation */
+.nav-menu a.nav-coffee i {
+  color: #ffdd00 !important;
+  animation: coffee-wiggle 2.5s infinite;
+}
+
+.nav-menu a.nav-coffee:hover span {
+  color: #ffdd00 !important;
+}
+
+@keyframes coffee-wiggle {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  10% {
+    transform: rotate(-15deg);
+  }
+
+  20% {
+    transform: rotate(15deg);
+  }
+
+  30% {
+    transform: rotate(-15deg);
+  }
+
+  40% {
+    transform: rotate(15deg);
+  }
+
+  50% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
 #main {
   margin-left: 300px;
 }
@@ -125,6 +208,7 @@ h1, h2, h3, h4, h5, h6 {
     margin-left: 0;
   }
 }
+
 /*--------------------------------------------------------------
 # Navigation Menu
 --------------------------------------------------------------*/
@@ -132,16 +216,20 @@ h1, h2, h3, h4, h5, h6 {
 .nav-menu {
   padding: 30px 0 0 0;
 }
+
 .nav-menu * {
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.nav-menu > ul > li {
+
+.nav-menu>ul>li {
   position: relative;
   white-space: nowrap;
 }
-.nav-menu a, .nav-menu a:focus {
+
+.nav-menu a,
+.nav-menu a:focus {
   display: flex;
   align-items: center;
   color: #a8a9b4;
@@ -150,16 +238,26 @@ h1, h2, h3, h4, h5, h6 {
   transition: 0.3s;
   font-size: 15px;
 }
-.nav-menu a i, .nav-menu a:focus i {
+
+.nav-menu a i,
+.nav-menu a:focus i {
   font-size: 24px;
   padding-right: 8px;
   color: #6f7180;
 }
-.nav-menu a:hover, .nav-menu .active, .nav-menu .active:focus, .nav-menu li:hover > a {
+
+.nav-menu a:hover,
+.nav-menu .active,
+.nav-menu .active:focus,
+.nav-menu li:hover>a {
   text-decoration: none;
   color: #fff;
 }
-.nav-menu a:hover i, .nav-menu .active i, .nav-menu .active:focus i, .nav-menu li:hover > a i {
+
+.nav-menu a:hover i,
+.nav-menu .active i,
+.nav-menu .active:focus i,
+.nav-menu li:hover>a i {
   color: #149ddd;
 }
 
@@ -188,6 +286,7 @@ h1, h2, h3, h4, h5, h6 {
 .mobile-nav-active {
   overflow: hidden;
 }
+
 .mobile-nav-active #header {
   left: 0;
 }
@@ -202,15 +301,19 @@ h1, h2, h3, h4, h5, h6 {
   background-size: cover; */
   overflow: hidden;
 }
+
 #bg-video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  object-fit: cover; /* Makes sure the video covers the entire container */
-  z-index: -1; /* Sends the video behind other content */
+  object-fit: cover;
+  /* Makes sure the video covers the entire container */
+  z-index: -1;
+  /* Sends the video behind other content */
 }
+
 #hero:before {
   content: "";
   background: rgba(5, 13, 24, 0.3);
@@ -221,11 +324,13 @@ h1, h2, h3, h4, h5, h6 {
   right: 0;
   z-index: 1;
 }
+
 #hero .hero-container {
   position: relative;
   z-index: 2;
   min-width: 300px;
 }
+
 #hero h1 {
   margin: 0 0 10px 0;
   font-size: 64px;
@@ -233,28 +338,33 @@ h1, h2, h3, h4, h5, h6 {
   line-height: 56px;
   color: #fff;
 }
+
 #hero p {
   color: #fff;
   margin-bottom: 50px;
   font-size: 26px;
   font-family: "Poppins", sans-serif;
 }
+
 #hero p span {
   color: #fff;
   padding-bottom: 4px;
   letter-spacing: 1px;
   border-bottom: 3px solid #149ddd;
 }
+
 @media (min-width: 1024px) {
   #hero {
     background-attachment: fixed;
   }
 }
+
 @media (max-width: 768px) {
   #hero h1 {
     font-size: 28px;
     line-height: 36px;
   }
+
   #hero h2 {
     font-size: 18px;
     line-height: 24px;
@@ -277,6 +387,7 @@ section {
 .section-title {
   padding-bottom: 30px;
 }
+
 .section-title h2 {
   font-size: 32px;
   font-weight: bold;
@@ -285,6 +396,7 @@ section {
   position: relative;
   color: #173b6c;
 }
+
 .section-title h2::after {
   content: "";
   position: absolute;
@@ -295,6 +407,7 @@ section {
   bottom: 0;
   left: 0;
 }
+
 .section-title p {
   margin-bottom: 0;
 }
@@ -307,24 +420,29 @@ section {
   font-size: 26px;
   color: #173b6c;
 }
+
 .about .content ul {
   list-style: none;
   padding: 0;
 }
+
 .about .content ul li {
   margin-bottom: 20px;
   display: flex;
   align-items: center;
 }
+
 .about .content ul strong {
   margin-right: 10px;
 }
+
 .about .content ul i {
   font-size: 16px;
   margin-right: 5px;
   color: #149ddd;
   line-height: 0;
 }
+
 .about .content p:last-child {
   margin-bottom: 0;
 }
@@ -335,10 +453,12 @@ section {
 .facts {
   padding-bottom: 30px;
 }
+
 .facts .count-box {
   padding: 30px;
   width: 100%;
 }
+
 .facts .count-box i {
   display: block;
   font-size: 44px;
@@ -346,6 +466,7 @@ section {
   float: left;
   line-height: 0;
 }
+
 .facts .count-box span {
   font-size: 48px;
   line-height: 40px;
@@ -354,6 +475,7 @@ section {
   color: #050d18;
   margin-left: 60px;
 }
+
 .facts .count-box p {
   padding: 15px 0 0 0;
   margin: 0 0 0 60px;
@@ -361,6 +483,7 @@ section {
   font-size: 14px;
   color: #122f57;
 }
+
 .facts .count-box a {
   font-weight: 600;
   display: block;
@@ -370,6 +493,7 @@ section {
   font-family: "Poppins", sans-serif;
   transition: ease-in-out 0.3s;
 }
+
 .facts .count-box a:hover {
   color: #1f5297;
 }
@@ -383,6 +507,7 @@ section {
   background: none;
   border-radius: 0;
 }
+
 .skills .progress .skill {
   padding: 0;
   margin: 0 0 6px 0;
@@ -392,14 +517,17 @@ section {
   font-family: "Poppins", sans-serif;
   color: #050d18;
 }
+
 .skills .progress .skill .val {
   float: right;
   font-style: normal;
 }
+
 .skills .progress-bar-wrap {
   background: #dce8f8;
   height: 10px;
 }
+
 .skills .progress-bar {
   width: 1px;
   height: 10px;
@@ -417,12 +545,14 @@ section {
   margin-bottom: 20px;
   color: #050d18;
 }
+
 .resume .resume-item {
   padding: 0 0 20px 20px;
   margin-top: -2px;
   border-left: 2px solid #1f5297;
   position: relative;
 }
+
 .resume .resume-item h4 {
   line-height: 18px;
   font-size: 18px;
@@ -432,6 +562,7 @@ section {
   color: #050d18;
   margin-bottom: 10px;
 }
+
 .resume .resume-item h5 {
   font-size: 16px;
   background: #e4edf9;
@@ -440,15 +571,19 @@ section {
   font-weight: 600;
   margin-bottom: 10px;
 }
+
 .resume .resume-item ul {
   padding-left: 20px;
 }
+
 .resume .resume-item ul li {
   padding-bottom: 10px;
 }
+
 .resume .resume-item:last-child {
   padding-bottom: 0;
 }
+
 .resume .resume-item::before {
   content: "";
   position: absolute;
@@ -467,6 +602,7 @@ section {
 .portfolio .portfolio-item {
   margin-bottom: 30px;
 }
+
 .portfolio #portfolio-flters {
   padding: 0;
   margin: 0 auto 35px auto;
@@ -476,6 +612,7 @@ section {
   border-radius: 50px;
   padding: 2px 15px;
 }
+
 .portfolio #portfolio-flters li {
   cursor: pointer;
   display: inline-block;
@@ -488,18 +625,23 @@ section {
   margin-bottom: 5px;
   transition: all 0.3s ease-in-out;
 }
-.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
+
+.portfolio #portfolio-flters li:hover,
+.portfolio #portfolio-flters li.filter-active {
   color: #149ddd;
 }
+
 .portfolio #portfolio-flters li:last-child {
   margin-right: 0;
 }
+
 .portfolio .portfolio-wrap {
   transition: 0.3s;
   position: relative;
   overflow: hidden;
   z-index: 1;
 }
+
 .portfolio .portfolio-wrap::before {
   content: "";
   background: rgba(255, 255, 255, 0.5);
@@ -512,6 +654,7 @@ section {
   z-index: 2;
   opacity: 0;
 }
+
 .portfolio .portfolio-wrap .portfolio-links {
   opacity: 1;
   left: 0;
@@ -523,6 +666,7 @@ section {
   display: flex;
   justify-content: center;
 }
+
 .portfolio .portfolio-wrap .portfolio-links a {
   color: #fff;
   font-size: 28px;
@@ -531,12 +675,15 @@ section {
   transition: 0.3s;
   width: 50%;
 }
+
 .portfolio .portfolio-wrap .portfolio-links a:hover {
   background: rgba(20, 157, 221, 0.95);
 }
-.portfolio .portfolio-wrap .portfolio-links a + a {
+
+.portfolio .portfolio-wrap .portfolio-links a+a {
   border-left: 1px solid #37b3ed;
 }
+
 .portfolio .portfolio-wrap:hover::before {
   top: 0;
   left: 0;
@@ -544,6 +691,7 @@ section {
   bottom: 0;
   opacity: 1;
 }
+
 .portfolio .portfolio-wrap:hover .portfolio-links {
   opacity: 1;
   bottom: 0;
@@ -555,13 +703,16 @@ section {
 .portfolio-details {
   padding-top: 40px;
 }
+
 .portfolio-details .portfolio-details-slider img {
   width: 100%;
 }
+
 .portfolio-details .portfolio-details-slider .swiper-pagination {
   margin-top: 20px;
   position: relative;
 }
+
 .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
@@ -569,13 +720,16 @@ section {
   opacity: 1;
   border: 1px solid #149ddd;
 }
+
 .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
   background-color: #149ddd;
 }
+
 .portfolio-details .portfolio-info {
   padding: 30px;
   box-shadow: 0px 0 30px rgba(5, 13, 24, 0.08);
 }
+
 .portfolio-details .portfolio-info h3 {
   font-size: 22px;
   font-weight: 700;
@@ -583,22 +737,27 @@ section {
   padding-bottom: 20px;
   border-bottom: 1px solid #eee;
 }
+
 .portfolio-details .portfolio-info ul {
   list-style: none;
   padding: 0;
   font-size: 15px;
 }
-.portfolio-details .portfolio-info ul li + li {
+
+.portfolio-details .portfolio-info ul li+li {
   margin-top: 10px;
 }
+
 .portfolio-details .portfolio-description {
   padding-top: 30px;
 }
+
 .portfolio-details .portfolio-description h2 {
   font-size: 26px;
   font-weight: 700;
   margin-bottom: 20px;
 }
+
 .portfolio-details .portfolio-description p {
   padding: 0;
 }
@@ -609,6 +768,7 @@ section {
 .services .icon-box {
   margin-bottom: 20px;
 }
+
 .services .icon {
   float: left;
   display: flex;
@@ -621,29 +781,36 @@ section {
   transition: 0.5s;
   border: 1px solid #149ddd;
 }
+
 .services .icon i {
   color: #fff;
   font-size: 24px;
   line-height: 0;
 }
+
 .services .icon-box:hover .icon {
   background: #fff;
 }
+
 .services .icon-box:hover .icon i {
   color: #149ddd;
 }
+
 .services .title {
   margin-left: 80px;
   font-weight: 700;
   margin-bottom: 15px;
   font-size: 18px;
 }
+
 .services .title a {
   color: #343a40;
 }
+
 .services .title a:hover {
   color: #149ddd;
 }
+
 .services .description {
   margin-left: 80px;
   line-height: 24px;
@@ -653,45 +820,55 @@ section {
 /*--------------------------------------------------------------
 # Testimonials
 --------------------------------------------------------------*/
-.testimonials .testimonials-carousel, .testimonials .testimonials-slider {
+.testimonials .testimonials-carousel,
+.testimonials .testimonials-slider {
   overflow: hidden;
 }
+
 .testimonials .testimonial-item {
   box-sizing: content-box;
   text-align: center;
   min-height: 320px;
 }
+
 .testimonials .testimonial-item .testimonial-img {
   width: 90px;
   border-radius: 50%;
   margin: 0 auto;
 }
+
 .testimonials .testimonial-item h3 {
   font-size: 18px;
   font-weight: bold;
   margin: 10px 0 5px 0;
   color: #111;
 }
+
 .testimonials .testimonial-item h4 {
   font-size: 14px;
   color: #999;
   margin: 0;
 }
-.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
+
+.testimonials .testimonial-item .quote-icon-left,
+.testimonials .testimonial-item .quote-icon-right {
   color: #c3e8fa;
   font-size: 26px;
 }
+
 .testimonials .testimonial-item .quote-icon-left {
   display: inline-block;
   left: -5px;
   position: relative;
 }
+
 .testimonials .testimonial-item .quote-icon-right {
   display: inline-block;
   right: -5px;
   position: relative;
   top: 10px;
 }
+
 .testimonials .testimonial-item p {
   font-style: italic;
   margin: 0 15px 15px 15px;
@@ -702,6 +879,7 @@ section {
   border-radius: 6px;
   box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
 }
+
 .testimonials .testimonial-item p::after {
   content: "";
   width: 0;
@@ -713,10 +891,12 @@ section {
   bottom: -20px;
   left: calc(50% - 20px);
 }
+
 .testimonials .swiper-pagination {
   margin-top: 20px;
   position: relative;
 }
+
 .testimonials .swiper-pagination .swiper-pagination-bullet {
   width: 12px;
   height: 12px;
@@ -724,6 +904,7 @@ section {
   opacity: 1;
   border: 1px solid #149ddd;
 }
+
 .testimonials .swiper-pagination .swiper-pagination-bullet-active {
   background-color: #149ddd;
 }
@@ -734,12 +915,14 @@ section {
 .contact {
   padding-bottom: 130px;
 }
+
 .contact .info {
   padding: 30px;
   background: #fff;
   width: 100%;
   box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
 }
+
 .contact .info i {
   font-size: 20px;
   color: #149ddd;
@@ -753,6 +936,7 @@ section {
   border-radius: 50px;
   transition: all 0.3s ease-in-out;
 }
+
 .contact .info h4 {
   padding: 0 0 0 60px;
   font-size: 22px;
@@ -760,18 +944,22 @@ section {
   margin-bottom: 5px;
   color: #050d18;
 }
+
 .contact .info p {
   padding: 0 0 10px 60px;
   margin-bottom: 20px;
   font-size: 14px;
   color: #173b6c;
 }
+
 .contact .info .email p {
   padding-top: 5px;
 }
+
 .contact .info .social-links {
   padding-left: 60px;
 }
+
 .contact .info .social-links a {
   font-size: 18px;
   display: inline-block;
@@ -786,23 +974,30 @@ section {
   transition: 0.3s;
   margin-right: 10px;
 }
+
 .contact .info .social-links a:hover {
   background: #149ddd;
   color: #fff;
 }
-.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
+
+.contact .info .email:hover i,
+.contact .info .address:hover i,
+.contact .info .phone:hover i {
   background: #149ddd;
   color: #fff;
 }
+
 .contact .php-email-form {
   width: 100%;
   padding: 30px;
   background: #fff;
   box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
 }
+
 .contact .php-email-form .form-group {
   padding-bottom: 8px;
 }
+
 .contact .php-email-form .validate {
   display: none;
   color: red;
@@ -810,6 +1005,7 @@ section {
   font-weight: 400;
   font-size: 13px;
 }
+
 .contact .php-email-form .error-message {
   display: none;
   color: #fff;
@@ -818,9 +1014,11 @@ section {
   padding: 15px;
   font-weight: 600;
 }
-.contact .php-email-form .error-message br + br {
+
+.contact .php-email-form .error-message br+br {
   margin-top: 25px;
 }
+
 .contact .php-email-form .sent-message {
   display: none;
   color: #fff;
@@ -829,12 +1027,14 @@ section {
   padding: 15px;
   font-weight: 600;
 }
+
 .contact .php-email-form .loading {
   display: none;
   background: #fff;
   text-align: center;
   padding: 15px;
 }
+
 .contact .php-email-form .loading:before {
   content: "";
   display: inline-block;
@@ -847,23 +1047,30 @@ section {
   -webkit-animation: animate-loading 1s linear infinite;
   animation: animate-loading 1s linear infinite;
 }
+
 .contact .php-email-form .form-group {
   margin-bottom: 15px;
 }
+
 .contact .php-email-form label {
   padding-bottom: 8px;
 }
-.contact .php-email-form input, .contact .php-email-form textarea {
+
+.contact .php-email-form input,
+.contact .php-email-form textarea {
   border-radius: 0;
   box-shadow: none;
   font-size: 14px;
 }
+
 .contact .php-email-form input {
   height: 44px;
 }
+
 .contact .php-email-form textarea {
   padding: 10px 15px;
 }
+
 .contact .php-email-form button[type=submit] {
   background: #149ddd;
   border: 0;
@@ -872,21 +1079,26 @@ section {
   transition: 0.4s;
   border-radius: 4px;
 }
+
 .contact .php-email-form button[type=submit]:hover {
   background: #37b3ed;
 }
+
 @-webkit-keyframes animate-loading {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
+
 @keyframes animate-loading {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -899,10 +1111,12 @@ section {
   padding: 20px 0;
   background: #f9f9f9;
 }
+
 .breadcrumbs h2 {
   font-size: 26px;
   font-weight: 300;
 }
+
 .breadcrumbs ol {
   display: flex;
   flex-wrap: wrap;
@@ -911,22 +1125,27 @@ section {
   margin: 0;
   font-size: 15px;
 }
-.breadcrumbs ol li + li {
+
+.breadcrumbs ol li+li {
   padding-left: 10px;
 }
-.breadcrumbs ol li + li::before {
+
+.breadcrumbs ol li+li::before {
   display: inline-block;
   padding-right: 10px;
   color: #0e2442;
   content: "/";
 }
+
 @media (max-width: 768px) {
   .breadcrumbs .d-flex {
     display: block !important;
   }
+
   .breadcrumbs ol {
     display: block;
   }
+
   .breadcrumbs ol li {
     display: inline-block;
   }
@@ -946,15 +1165,18 @@ section {
   z-index: 9999;
   background: #040b14;
 }
+
 #footer .copyright {
   text-align: center;
 }
+
 #footer .credits {
   padding-top: 5px;
   text-align: center;
   font-size: 13px;
   color: #eaebf0;
 }
+
 @media (max-width: 1199px) {
   #footer {
     position: static;
diff --git a/index.html b/index.html
index a85d2ca..d424319 100644
--- a/index.html
+++ b/index.html
@@ -59,6 +59,7 @@ <h1 class="text-light"><a href="index.html">Shubham Singh</a></h1>
         <div class="social-links mt-3 text-center">
           <a href="https://www.linkedin.com/in/adminvns/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
           <a href="https://github.com/adminvns" class="twitter"><i class="bx bxl-github"></i></a>
+          <a href="https://buymeacoffee.com/adminvns" class="coffee" target="_blank"><i class="bx bx-coffee"></i></a>
         </div>
       </div>
 
@@ -66,12 +67,15 @@ <h1 class="text-light"><a href="index.html">Shubham Singh</a></h1>
         <ul>
           <li><a href="#hero" class="nav-link scrollto active"><i class="bx bx-home"></i> <span>Home</span></a></li>
           <li><a href="#about" class="nav-link scrollto"><i class="bx bx-user"></i> <span>About</span></a></li>
-          <li><a href="#resume" class="nav-link scrollto"><i class="bx bx-file-blank"></i> <span>Live Resume</span></a></li>
+          <li><a href="#resume" class="nav-link scrollto"><i class="bx bx-file-blank"></i> <span>Live Resume</span></a>
+          </li>
           <li><a href="#testimonials" class="nav-link scrollto"><i class="bx bxs-comment-detail"></i>
               <span>Recommendations</span></a></li>
-          <li><a
-              href="https://github.com/adminvns/adminvns.github.io/raw/main/Shubham_Automation_QA.pdf"
+          <li><a href="https://github.com/adminvns/adminvns.github.io/raw/main/Shubham_Automation_QA.pdf"
               class="nav-link scrollto"><i class="bx bx-download"></i> <span>Download Resume</span></a></li>
+          <li><a href="https://buymeacoffee.com/adminvns" target="_blank" class="nav-link nav-coffee"><i
+                class="bx bx-coffee"></i>
+              <span>Buy me a Coffee</span></a></li>
           <!-- <li><a href="#contact" class="nav-link scrollto"><i class="bx bx-envelope"></i> <span>Contact</span></a></li> -->
         </ul>
       </nav><!-- .nav-menu -->
@@ -88,8 +92,7 @@ <h1 class="text-light"><a href="index.html">Shubham Singh</a></h1>
       <p>Hello, I'm</p>
       </p>
       <h1>Shubham!</h1>
-      <p>I'm <span class="typed"
-          data-typed-items="QA Automation Developer, DevOps Engineer"></span></p>
+      <p>I'm <span class="typed" data-typed-items="QA Automation Developer, DevOps Engineer"></span></p>
     </div>
   </section><!-- End Hero -->
 
@@ -102,7 +105,8 @@ <h1>Shubham!</h1>
         <div class="section-title">
           <h2>About</h2>
           <p>A passionate professional with more than 5 years of experience in IT industry with expertise in Scripting,
-            DevOps and QA Automation knowledge, moved multiple projects from manual to automation in E-Commerce, Banking and Cybersecurity domain.
+            DevOps and QA Automation knowledge, moved multiple projects from manual to automation in E-Commerce, Banking
+            and Cybersecurity domain.
           </p>
         </div>
 
@@ -199,7 +203,9 @@ <h2>Quick Facts</h2>
 
         <div class="section-title">
           <h2>Skills</h2>
-          <p>"I am a Certified Advanced Cypress Engineer, proficient in Jenkins, Docker, AWS, and various other tools. Additionally, I hold the title of 8x Tosca Certified Automation Specialist, ensuring smooth QA to release transitions."</p>
+          <p>"I am a Certified Advanced Cypress Engineer, proficient in Jenkins, Docker, AWS, and various other tools.
+            Additionally, I hold the title of 8x Tosca Certified Automation Specialist, ensuring smooth QA to release
+            transitions."</p>
         </div>
 
         <div class="row skills-content">
@@ -316,7 +322,8 @@ <h5>Sept 2023 - Present</h5>
               <ul>
                 <li>Cypress -Js Automation with Github Actions Integration for CI/CD</li>
                 <li>Working knowledge of public cloud -AWS/Azure </li>
-                <li>Integrating automated tests with CI/CD pipelines and ensuring successful automation as part of our standard build process.</li>
+                <li>Integrating automated tests with CI/CD pipelines and ensuring successful automation as part of our
+                  standard build process.</li>
                 <li>Created and executed automated software test plans, cases and scripts to uncover, identify and
                   document software problems and their causes</li>
               </ul>
@@ -332,7 +339,9 @@ <h5>July 2021 - September 2023</h5>
                 <li>Well versed with other Automation Tools like Puppeteer and Cypress</li>
                 <li>Created and executed automated software test plans, cases and scripts to uncover, identify and
                   document software problems and their causes</li>
-                <li>I have also worked with<h5> FIS & Wipro, for more details, here is my <a href="https://www.linkedin.com/in/adminvns/"> LinkedIn URL</a></h5></li>
+                <li>I have also worked with<h5> FIS & Wipro, for more details, here is my <a
+                      href="https://www.linkedin.com/in/adminvns/"> LinkedIn URL</a></h5>
+                </li>
               </ul>
             </div>
           </div>
@@ -348,7 +357,8 @@ <h5>July 2021 - September 2023</h5>
         <div class="section-title">
           <h2>Recommendations</h2>
           <p>Here are some of the Recommendations which I received on LinkedIn.I am really thankful to the team and my
-            team leaders who have provided their immense support and shared their valuable knowledge.See more Recommendations on my <a href="https://www.linkedin.com/in/adminvns/"> LinkedIn</a></p>
+            team leaders who have provided their immense support and shared their valuable knowledge.See more
+            Recommendations on my <a href="https://www.linkedin.com/in/adminvns/"> LinkedIn</a></p>
         </div>
 
         <div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
@@ -365,8 +375,7 @@ <h2>Recommendations</h2>
                   <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                 </p>
                 <a href="https://www.linkedin.com/in/amarjeet-singh-21933a1b/" target="_blank"><img
-                    src="assets/img/portfolio/amarjeet.jpeg"
-                    class="testimonial-img" alt="Amarjeet Singh"></a>
+                    src="assets/img/portfolio/amarjeet.jpeg" class="testimonial-img" alt="Amarjeet Singh"></a>
                 <h3>Amarjeet Singh</h3>
                 <h4>Senior Manager,Accenture</h4>
               </div>
@@ -387,28 +396,27 @@ <h4>Senior Manager,Accenture</h4>
                   <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                 </p>
                 <a href="https://www.linkedin.com/in/vishal-adsule-ab858820/" target="_blank"><img
-                    src="assets/img/portfolio/vishal.jpeg"
-                    class="testimonial-img" alt="Vishal Adsule"></a>
+                    src="assets/img/portfolio/vishal.jpeg" class="testimonial-img" alt="Vishal Adsule"></a>
                 <h3>Vishal Adsule</h3>
                 <h4>Assistant Manager,FIS</h4>
               </div>
             </div><!-- End testimonial item -->
 
-             <!-- Start testimonial item -->
-             <div class="swiper-slide">
+            <!-- Start testimonial item -->
+            <div class="swiper-slide">
               <div class="testimonial-item" data-aos="fade-up">
                 <p>
                   <i class="bx bxs-quote-alt-left quote-icon-left"></i>
-                  I highly recommend Shubham Singh, who used to be Senior Automation Engineer at Cloud Analogy. 
+                  I highly recommend Shubham Singh, who used to be Senior Automation Engineer at Cloud Analogy.
                   Shubham has exceptional expertise in Cypress, Selenium, Playwright, Tosca, DevOps, and AWS services.
-                  His technical skills, attention to detail, and collaborative spirit made him an invaluable asset to our team. 
-                  Shubham consistently delivered high-quality work and has been dedicated to continuous improvement. 
+                  His technical skills, attention to detail, and collaborative spirit made him an invaluable asset to
+                  our team.
+                  Shubham consistently delivered high-quality work and has been dedicated to continuous improvement.
                   I am confident in his future success.
                   <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                 </p>
                 <a href="https://www.linkedin.com/in/riya-arora-00236b137/" target="_blank"><img
-                    src="assets/img/portfolio/ria.jpeg"
-                    class="testimonial-img" alt="Ria Arora"></a>
+                    src="assets/img/portfolio/ria.jpeg" class="testimonial-img" alt="Ria Arora"></a>
                 <h3>Ria Arora</h3>
                 <h4>Technical Manager,Cloud Analogy</h4>
               </div>
@@ -427,11 +435,10 @@ <h4>Technical Manager,Cloud Analogy</h4>
                   challenging role . He has crafted his skills and expertise in best possible way anybody can and his
                   growth is really exemplary.
                   " All the Best" you have a long way to go....keep shining and keep motivating others with your work.
-          <i class="bx bxs-quote-alt-right quote-icon-right"></i>
+                  <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                 </p>
                 <a href="https://www.linkedin.com/in/siddharth-yadav-9a8a03152/" target="_blank"><img
-                    src="assets/img/portfolio/sid.jpeg"
-                    class="testimonial-img" alt="Siddharth Yadav"></a>
+                    src="assets/img/portfolio/sid.jpeg" class="testimonial-img" alt="Siddharth Yadav"></a>
                 <h3>Siddharth Yadav</h3>
                 <h4>Senior Technical Recruiter,Altrimetrik</h4>
               </div>
@@ -441,37 +448,39 @@ <h4>Senior Technical Recruiter,Altrimetrik</h4>
               <div class="testimonial-item" data-aos="fade-up" data-aos-delay="200">
                 <p>
                   <i class="bx bxs-quote-alt-left quote-icon-left"></i>
-                  I wholeheartedly recommend Shubham for his exceptional contributions as an automation engineer.His strong problem-solving abilities, combined with a passion for innovation, consistently resulted in solutions that elevated our projects and exceeded expectations.
-His proficiency in optimizing processes and knack for fostering collaboration make him an indispensable asset to any team.
-          <i class="bx bxs-quote-alt-right quote-icon-right"></i>
+                  I wholeheartedly recommend Shubham for his exceptional contributions as an automation engineer.His
+                  strong problem-solving abilities, combined with a passion for innovation, consistently resulted in
+                  solutions that elevated our projects and exceeded expectations.
+                  His proficiency in optimizing processes and knack for fostering collaboration make him an
+                  indispensable asset to any team.
+                  <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                 </p>
                 <a href="https://www.linkedin.com/in/megha-rathor-89aa48161/" target="_blank"><img
-                    src="assets/img/portfolio/megha.jpg"
-                    class="testimonial-img" alt="Megha Rathor"></a>
+                    src="assets/img/portfolio/megha.jpg" class="testimonial-img" alt="Megha Rathor"></a>
                 <h3>Megha Rathor</h3>
                 <h4>Senior HR, CoForge</h4>
               </div>
             </div><!-- End testimonial item -->
 
-                  <!-- Start testimonial item -->
-                  <div class="swiper-slide">
-                    <div class="testimonial-item" data-aos="fade-up">
-                      <p>
-                        <i class="bx bxs-quote-alt-left quote-icon-left"></i>
-                        Professionalism defines the duration of one's success.
-          Shubham is highly skilled in his field and their ability to find creative solutions to complex problems has been a valuable asset to our company.
-          He is able to work efficiently in a fast-paced environment and handle multiple projects at once.
-
-                        <i class="bx bxs-quote-alt-right quote-icon-right"></i>
-                      </p>
-                      <a href="https://www.linkedin.com/in/shivani-goyal-4540001a1/" target="_blank"><img
-                          src="assets/img/portfolio/shivani.jpeg"
-                          class="testimonial-img" alt="Shivani Goyal"></a>
-                      <h3>Shivani Goyal</h3>
-                      <h4>HR opertaions,Cloud Analogy</h4>
-                    </div>
-                  </div>
-                  <!-- End testimonial item -->
+            <!-- Start testimonial item -->
+            <div class="swiper-slide">
+              <div class="testimonial-item" data-aos="fade-up">
+                <p>
+                  <i class="bx bxs-quote-alt-left quote-icon-left"></i>
+                  Professionalism defines the duration of one's success.
+                  Shubham is highly skilled in his field and their ability to find creative solutions to complex
+                  problems has been a valuable asset to our company.
+                  He is able to work efficiently in a fast-paced environment and handle multiple projects at once.
+
+                  <i class="bx bxs-quote-alt-right quote-icon-right"></i>
+                </p>
+                <a href="https://www.linkedin.com/in/shivani-goyal-4540001a1/" target="_blank"><img
+                    src="assets/img/portfolio/shivani.jpeg" class="testimonial-img" alt="Shivani Goyal"></a>
+                <h3>Shivani Goyal</h3>
+                <h4>HR opertaions,Cloud Analogy</h4>
+              </div>
+            </div>
+            <!-- End testimonial item -->
 
           </div>
           <div class="swiper-pagination"></div>
@@ -490,8 +499,8 @@ <h4>HR opertaions,Cloud Analogy</h4>
         &copy; Hosted with ❤ on <strong><span>Github</span></strong>
       </div>
       <div class="credits">
-
-        Designed by Shubham Singh</a>
+        Support: <a href="https://buymeacoffee.com/adminvns" target="_blank">Buy me a Coffee</a> | Designed by Shubham
+        Singh
       </div>
     </div>
   </footer><!-- End  Footer -->
@@ -515,4 +524,4 @@ <h4>HR opertaions,Cloud Analogy</h4>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/inner-page.html b/inner-page.html
index 6746cf6..36c774f 100644
--- a/inner-page.html
+++ b/inner-page.html
@@ -14,7 +14,9 @@
   <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
 
   <!-- Google Fonts -->
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
+    rel="stylesheet">
 
   <!-- Vendor CSS Files -->
   <link href="assets/vendor/aos/aos.css" rel="stylesheet">
@@ -42,22 +44,28 @@
         <img src="assets/img/profile-pic.png" alt="" class="img-fluid rounded-circle">
         <h1 class="text-light"><a href="index.html">Shubham Singh</a></h1>
         <div class="social-links mt-3 text-center">
-          <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
-          <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
-          <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
-          <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
-          <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
+          <a href="https://www.linkedin.com/in/adminvns/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
+          <a href="https://github.com/adminvns" class="twitter"><i class="bx bxl-github"></i></a>
+          <a href="https://buymeacoffee.com/adminvns" class="coffee" target="_blank"><i class="bx bx-coffee"></i></a>
         </div>
       </div>
 
       <nav id="navbar" class="nav-menu navbar">
         <ul>
-          <li><a href="index.html" class="nav-link scrollto active"><i class="bx bx-home"></i> <span>Home</span></a></li>
-          <li><a href="index.html#about" class="nav-link scrollto"><i class="bx bx-user"></i> <span>About</span></a></li>
-          <li><a href="index.html#resume" class="nav-link scrollto"><i class="bx bx-file-blank"></i> <span>Resume</span></a></li>
-          <li><a href="index.html#testimonials" class="nav-link scrollto"><i class="bx bx-book-content"></i> <span>Portfolio</span></a></li>
-          <li><a href="index.html#services" class="nav-link scrollto"><i class="bx bx-server"></i> <span>Services</span></a></li>
-          <li><a href="index.html#contact" class="nav-link scrollto"><i class="bx bx-envelope"></i> <span>Contact</span></a></li>
+          <li><a href="index.html" class="nav-link scrollto active"><i class="bx bx-home"></i> <span>Home</span></a>
+          </li>
+          <li><a href="index.html#about" class="nav-link scrollto"><i class="bx bx-user"></i> <span>About</span></a>
+          </li>
+          <li><a href="index.html#resume" class="nav-link scrollto"><i class="bx bx-file-blank"></i>
+              <span>Resume</span></a></li>
+          <li><a href="index.html#testimonials" class="nav-link scrollto"><i class="bx bx-book-content"></i>
+              <span>Portfolio</span></a></li>
+          <li><a href="index.html#services" class="nav-link scrollto"><i class="bx bx-server"></i>
+              <span>Services</span></a></li>
+          <li><a href="index.html#contact" class="nav-link scrollto"><i class="bx bx-envelope"></i>
+              <span>Contact</span></a></li>
+          <li><a href="https://buymeacoffee.com/adminvns" target="_blank" class="nav-link nav-coffee"><i
+                class="bx bx-coffee"></i> <span>Buy me a Coffee</span></a></li>
         </ul>
       </nav><!-- .nav-menu -->
     </div>
@@ -90,20 +98,21 @@ <h2>Inner Page</h2>
 
   </main><!-- End #main -->
 
-   <!-- ======= Footer ======= -->
+  <!-- ======= Footer ======= -->
   <footer id="footer">
     <div class="container">
       <div class="copyright">
         &copy; Hosted with ❤ on <strong><span>Github</span></strong>
       </div>
       <div class="credits">
-       
-        Designed by Shubham Singh</a>
+        Support: <a href="https://buymeacoffee.com/adminvns" target="_blank">Buy me a Coffee</a> | Designed by Shubham
+        Singh
       </div>
     </div>
   </footer><!-- End  Footer -->
 
-  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
+  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
+      class="bi bi-arrow-up-short"></i></a>
 
   <!-- Vendor JS Files -->
   <script src="assets/vendor/purecounter/purecounter.js"></script>
@@ -121,4 +130,4 @@ <h2>Inner Page</h2>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/portfolio-details.html b/portfolio-details.html
index 0c7335f..908c10c 100644
--- a/portfolio-details.html
+++ b/portfolio-details.html
@@ -14,7 +14,9 @@
   <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
 
   <!-- Google Fonts -->
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
+    rel="stylesheet">
 
   <!-- Vendor CSS Files -->
   <link href="assets/vendor/aos/aos.css" rel="stylesheet">
@@ -39,14 +41,12 @@
     <div class="d-flex flex-column">
 
       <div class="profile">
-        <img src="assets/img/profile-img.jpg" alt="" class="img-fluid rounded-circle">
-        <h1 class="text-light"><a href="index.html">Alex Smith</a></h1>
+        <img src="assets/img/profile-pic.png" alt="" class="img-fluid rounded-circle">
+        <h1 class="text-light"><a href="index.html">Shubham Singh</a></h1>
         <div class="social-links mt-3 text-center">
-          <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
-          <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
-          <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
-          <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
-          <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
+          <a href="https://www.linkedin.com/in/adminvns/" class="linkedin"><i class="bx bxl-linkedin"></i></a>
+          <a href="https://github.com/adminvns" class="twitter"><i class="bx bxl-github"></i></a>
+          <a href="https://buymeacoffee.com/adminvns" class="coffee" target="_blank"><i class="bx bx-coffee"></i></a>
         </div>
       </div>
 
@@ -55,9 +55,12 @@ <h1 class="text-light"><a href="index.html">Alex Smith</a></h1>
           <li><a href="#hero" class="nav-link scrollto active"><i class="bx bx-home"></i> <span>Home</span></a></li>
           <li><a href="#about" class="nav-link scrollto"><i class="bx bx-user"></i> <span>About</span></a></li>
           <li><a href="#resume" class="nav-link scrollto"><i class="bx bx-file-blank"></i> <span>Resume</span></a></li>
-          <li><a href="#portfolio" class="nav-link scrollto"><i class="bx bx-book-content"></i> <span>Portfolio</span></a></li>
+          <li><a href="#portfolio" class="nav-link scrollto"><i class="bx bx-book-content"></i>
+              <span>Portfolio</span></a></li>
           <li><a href="#services" class="nav-link scrollto"><i class="bx bx-server"></i> <span>Services</span></a></li>
           <li><a href="#contact" class="nav-link scrollto"><i class="bx bx-envelope"></i> <span>Contact</span></a></li>
+          <li><a href="https://buymeacoffee.com/adminvns" target="_blank" class="nav-link nav-coffee"><i
+                class="bx bx-coffee"></i> <span>Buy me a Coffee</span></a></li>
         </ul>
       </nav><!-- .nav-menu -->
     </div>
@@ -120,7 +123,10 @@ <h3>Project information</h3>
             <div class="portfolio-description">
               <h2>This is an example of portfolio detail</h2>
               <p>
-                Autem ipsum nam porro corporis rerum. Quis eos dolorem eos itaque inventore commodi labore quia quia. Exercitationem repudiandae officiis neque suscipit non officia eaque itaque enim. Voluptatem officia accusantium nesciunt est omnis tempora consectetur dignissimos. Sequi nulla at esse enim cum deserunt eius.
+                Autem ipsum nam porro corporis rerum. Quis eos dolorem eos itaque inventore commodi labore quia quia.
+                Exercitationem repudiandae officiis neque suscipit non officia eaque itaque enim. Voluptatem officia
+                accusantium nesciunt est omnis tempora consectetur dignissimos. Sequi nulla at esse enim cum deserunt
+                eius.
               </p>
             </div>
           </div>
@@ -139,12 +145,13 @@ <h2>This is an example of portfolio detail</h2>
         &copy; Hosted with ❤ on <strong><span>Github</span></strong>
       </div>
       <div class="credits">
-       
-        Designed by Shubham Singh</a>
+        Support: <a href="https://buymeacoffee.com/adminvns" target="_blank">Buy me a Coffee</a> | Designed by Shubham
+        Singh
       </div>
     </div>
   </footer><!-- End  Footer -->
-  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
+  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
+      class="bi bi-arrow-up-short"></i></a>
 
   <!-- Vendor JS Files -->
   <script src="assets/vendor/purecounter/purecounter.js"></script>
@@ -162,4 +169,4 @@ <h2>This is an example of portfolio detail</h2>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file