Small About Section change

assets/css/style.css

@@ -1031,18 +1031,18 @@ main {
 
 
 /*-----------------------------------*\
-  #BLOG
+  #project
 \*-----------------------------------*/
 
-.blog-posts { margin-bottom: 10px; }
+.project-posts { margin-bottom: 10px; }
 
-.blog-posts-list {
+.project-posts-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px;
 }
 
-.blog-post-item > a {
+.project-post-item > a {
   position: relative;
   background: var(--border-gradient-onyx);
   height: 100%;
@@ -1051,7 +1051,7 @@ main {
   z-index: 1;
 }
 
-.blog-post-item > a::before {
+.project-post-item > a::before {
   content: "";
   position: absolute;
   inset: 1px;
@@ -1060,54 +1060,54 @@ main {
   z-index: -1;
 }
 
-.blog-banner-box {
+.project-banner-box {
   width: 100%;
   height: 200px;
   border-radius: 12px;
   overflow: hidden;
 }
 
-.blog-banner-box img {
+.project-banner-box img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: var(--transition-1);
 }
 
-.blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); }
+.project-post-item > a:hover .project-banner-box img { transform: scale(1.1); }
 
-.blog-content { padding: 15px; }
+.project-content { padding: 15px; }
 
-.blog-meta {
+.project-meta {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 7px;
   margin-bottom: 10px;
 }
 
-.blog-meta :is(.blog-category, time) {
+.project-meta :is(.project-category, time) {
   color: var(--light-gray-70);
   font-size: var(--fs-6);
   font-weight: var(--fw-300);
 }
 
-.blog-meta .dot {
+.project-meta .dot {
   background: var(--light-gray-70);
   width: 4px;
   height: 4px;
   border-radius: 4px;
 }
 
-.blog-item-title {
+.project-item-title {
   margin-bottom: 10px;
   line-height: 1.3;
   transition: var(--transition-1);
 }
 
-.blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); }
+.project-post-item > a:hover .project-item-title { color: var(--orange-yellow-crayola); }
 
-.blog-text {
+.project-text {
   color: var(--light-gray);
   font-size: var(--fs-6);
   font-weight: var(--fw-300);
@@ -1244,11 +1244,11 @@ textarea.form-input::-webkit-resizer { display: none; }
 
 
   /**
-   * #PORTFOLIO, BLOG 
+   * #PORTFOLIO, project 
    */
 
   .project-img,
-  .blog-banner-box { height: auto; }
+  .project-banner-box { height: auto; }
 
 }
 
@@ -1488,29 +1488,81 @@ textarea.form-input::-webkit-resizer { display: none; }
    * #RESUME
    */
 
-  .timeline-list { margin-left: 65px; }
+  /* Timeline styling */
+  .timeline-list {
+    margin-left: 65px;
+  }
 
-  .timeline-item:not(:last-child)::before { left: -40px; }
+  .timeline-item:not(:last-child)::before {
+    left: -40px;
+  }
 
   .timeline-item::after {
     height: 8px;
     width: 8px;
     left: -43px;
   }
 
-  .skills-item:not(:last-child) { margin-bottom: 25px; }
+  /* Skills item margin */
+  .skills-item:not(:last-child) {
+    margin-bottom: 25px;
+  }
+
+  /* Scoped Download Icon Style */
+  .resume header {
+    display: flex; /* Ensure the text and icon are properly aligned */
+    align-items: center; /* Vertically center align the icon and text */
+    gap: 10px; /* Add space between the text and the icon */
+  }
+
+  .resume header h2 {
+    display: flex; /* Aligns header elements in a row */
+    align-items: center;
+  }
+
+  .resume header .header-download-icon {
+    margin-left: 10px; /* Space between text and icon */
+    font-size: 1.2em; /* Adjust icon size */
+    color: inherit; /* Inherit text color */
+    text-decoration: none; /* Remove underline */
+    display: flex; /* Make the icon inline-flex for better alignment */
+    align-items: center;
+  }
+
+  .resume header .header-download-icon:hover {
+    color: #007BFF; /* Highlight color on hover */
+    cursor: pointer;
+  }
+
+  /* Download Resume Button */
+  .download-resume {
+    margin-top: 20px; /* Adds space between header and button */
+  }
+
+  .download-resume a {
+    font-size: 1em;
+    text-decoration: none;
+    color: #007BFF; /* Default color for the button */
+    display: flex;
+    align-items: center;
+    gap: 5px; /* Adds space between icon and text */
+  }
 
+  .download-resume a:hover {
+    color: #0056b3; /* Darker blue on hover */
+    text-decoration: underline; /* Add an underline for hover effect */
+  }
 
 
   /**
-   * #PORTFOLIO, BLOG
+   * #PORTFOLIO, project
    */
 
-  .project-img, .blog-banner-box { border-radius: 16px; }
+  .project-img, .project-banner-box { border-radius: 16px; }
 
-  .blog-posts-list { gap: 30px; }
+  .project-posts-list { gap: 30px; }
 
-  .blog-content { padding: 25px; }
+  .project-content { padding: 25px; }
 
 
 
@@ -1622,9 +1674,9 @@ textarea.form-input::-webkit-resizer { display: none; }
 
   .filter-item button.active { color: var(--orange-yellow-crayola); }
 
-  /* portfolio and blog grid */
+  /* portfolio and project grid */
 
-  .project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }
+  .project-list, .project-posts-list { grid-template-columns: 1fr 1fr; }
 
 
 
@@ -1749,10 +1801,10 @@ textarea.form-input::-webkit-resizer { display: none; }
 
 
   /**
-   * BLOG
+   * project
    */
 
-  .blog-banner-box { height: 230px; }
+  .project-banner-box { height: 230px; }
 
 }