Updated with new informations

index.html

@@ -56,7 +56,7 @@ <h2 class="font-semibold text-3xl md:text-4xl my-name">Amal</h2>
                         Contact<i class="fa-solid fa-id-card ml-1 text-base"></i>
                     </li>
                 </a>
-                <a href="public/Documents/Resume3.pdf" download="Amal_Krishnan_V_P_Resume.pdf">
+                <a href="public/documents/Resume3.pdf" download="Amal_Krishnan_V_P_Resume.pdf">
                     <li class="pad-5 nav-border list-item">
                         Resume<i class="fa-solid fa-file-arrow-down download-icon ml-1 text-base"></i>
                     </li>
@@ -81,9 +81,7 @@ <h2 class="font-semibold text-3xl md:text-4xl my-name">Amal</h2>
                         <div class="info md:mr-8 rounded-md px-4 py-4 md:p-8">
                             <p
                                 class="text-lg lg:text-xl xl:text-2xl text-center pt-1 md:mt-0 md:text-left font-semibold">
-                                FRONT
-                                END
-                                DEVELOPER <i class="fa-solid fa-code text-lg xl:text-2xl ml-1"></i></p>
+                                WEB DEVELOPER <i class="fa-solid fa-code text-lg xl:text-2xl ml-1"></i></p>
                             <h1
                                 class="font-bold text-3xl lg:text-4xl xl:text-5xl text-center pt-1 sm:mt-0 sm:text-left">
                                 Amal Krishnan
@@ -123,10 +121,10 @@ <h2 class="text-4xl md:text-5xl font-semibold md:mb-2 pb-6 pt-2 about-heading md
                                 <h3 class="text-3xl md:text-5xl mb-8">I am a <span id="identity"
                                         class="text-3xl md:text-5xl"></span><span id="cursor"
                                         class="text-3xl md:text-5xl d-inline-block">|</span></h3>
-                                <p class="md:text-lg">Welcome to my portfolio! I'm Amal, A front-end
-                                    developer on a journey of full stack development. With an
-                                    understanding of front-end technologies, I provide comprehensive solutions that not
-                                    only look great but also perfrom flawlessly.</p>
+                                <p class="md:text-lg">Welcome to my portfolio! I'm Amal, a developer with a strong
+                                    foundation in both front-end and back-end technologies. I create solutions that not
+                                    only look great but also perform flawlessly, bridging the gap between design and
+                                    functionality.</p>
                             </div>
                         </div>
                     </div>
@@ -150,25 +148,37 @@ <h3 class="text-3xl md:text-5xl mb-8">I am a <span id="identity"
                                     <img src="public/icons/html.png">
                                 </div>
                                 <div
-                                    class="box2  bg-white h-24 w-24 p-4 sm:h-28 sm:w-28 sm:p-5 md:h-32 md:w-32 md:p-6 flex items-center justify-center rounded-xl shadow-property">
+                                    class="box2 bg-white h-24 w-24 p-4 sm:h-28 sm:w-28 sm:p-5 md:h-32 md:w-32 md:p-6 flex items-center justify-center rounded-xl shadow-property">
                                     <img src="public/icons/css.png">
                                 </div>
                                 <div
-                                    class="box3  bg-white h-24 w-24 p-4 sm:h-28 sm:w-28 sm:p-5 md:h-32 md:w-32 md:p-6 flex items-center justify-center rounded-xl shadow-property">
+                                    class="box3 bg-white h-24 w-24 p-4 sm:h-28 sm:w-28 sm:p-5 md:h-32 md:w-32 md:p-6 flex items-center justify-center rounded-xl shadow-property">
                                     <img src="public/icons/javascript.png">
                                 </div>
                                 <div
-                                    class="box4  bg-white h-24 w-24 p-4 sm:h-28 sm:w-28 sm:p-5 md:h-32 md:w-32 md:p-6 flex items-center justify-center rounded-xl shadow-property">
+                                    class="box4 bg-white h-24 w-24 p-4 sm:h-28 sm:w-28 sm:p-5 md:h-32 md:w-32 md:p-6 flex items-center justify-center rounded-xl shadow-property">
                                     <img src="public/icons/tailwind.svg">
                                 </div>
                                 <div
-                                    class="box5  bg-white h-24 w-24 p-4 sm:h-28 sm:w-28 sm:p-5 md:h-32 md:w-32 md:p-6 flex items-center justify-center rounded-xl shadow-property">
+                                    class="box5 bg-white h-24 w-24 p-4 sm:h-28 sm:w-28 sm:p-5 md:h-32 md:w-32 md:p-6 flex items-center justify-center rounded-xl shadow-property">
                                     <img src="public/icons/git.png">
                                 </div>
                                 <div
-                                    class="box6  bg-white h-24 w-24 p-4 sm:h-28 sm:w-28 sm:p-5 md:h-32 md:w-32 md:p-6 flex items-center justify-center rounded-xl shadow-property">
+                                    class="box6 bg-white h-24 w-24 p-4 sm:h-28 sm:w-28 sm:p-5 md:h-32 md:w-32 md:p-6 flex items-center justify-center rounded-xl shadow-property">
                                     <img src="public/icons/java.png">
                                 </div>
+                                <div
+                                    class="box7 bg-white h-24 w-24 p-3 sm:h-28 sm:w-28 sm:p-4 md:h-32 md:w-32 flex items-center justify-center rounded-xl shadow-property">
+                                    <img src="public/icons/node.jpg">
+                                </div>
+                                <div
+                                    class="box8 bg-white h-24 w-24 p-3 sm:h-28 sm:w-28 sm:p-4 md:h-32 md:w-32 flex items-center justify-center rounded-xl shadow-property">
+                                    <img src="public/icons/express.png">
+                                </div>
+                                <div
+                                    class="box9 bg-white h-24 w-24 p-3 sm:h-28 sm:w-28 sm:p-4 md:h-32 md:w-32 flex items-center justify-center rounded-xl shadow-property">
+                                    <img src="public/icons/handlebars.png">
+                                </div>
                             </div>
 
                         </div>

public/stylesheets/style.css

@@ -655,8 +655,20 @@ video {
   height: 7rem;
 }
 
-.h-screen {
-  height: 100vh;
+.h-32 {
+  height: 8rem;
+}
+
+.h-44 {
+  height: 11rem;
+}
+
+.h-72 {
+  height: 18rem;
+}
+
+.h-40 {
+  height: 10rem;
 }
 
 .w-24 {
@@ -675,6 +687,38 @@ video {
   width: 100%;
 }
 
+.w-32 {
+  width: 8rem;
+}
+
+.w-44 {
+  width: 11rem;
+}
+
+.w-72 {
+  width: 18rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-52 {
+  width: 13rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.w-80 {
+  width: 20rem;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -791,6 +835,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 .p-11 {
   padding: 2.75rem;
 }
@@ -1100,6 +1149,22 @@ footer {
     padding: 1.75rem;
   }
 
+  .sm\:p-4 {
+    padding: 1rem;
+  }
+
+  .sm\:p-3 {
+    padding: 0.75rem;
+  }
+
+  .sm\:p-0 {
+    padding: 0px;
+  }
+
+  .sm\:p-1 {
+    padding: 0.25rem;
+  }
+
   .sm\:text-left {
     text-align: left;
   }
@@ -1182,6 +1247,18 @@ footer {
     padding: 2rem;
   }
 
+  .md\:p-2 {
+    padding: 0.5rem;
+  }
+
+  .md\:p-3 {
+    padding: 0.75rem;
+  }
+
+  .md\:p-4 {
+    padding: 1rem;
+  }
+
   .md\:pb-24 {
     padding-bottom: 6rem;
   }