update Page UI and spaces

Author: jfullstackdev

css/style.css

@@ -138,3 +138,41 @@ p.ellipsis-separator + p {
         padding-right: 5px;
     }
 }
+
+.my-profile .row .col-lg-8 .card {
+    min-height: 450px;
+    display: flex;
+    flex-direction: column;
+}
+
+.my-profile .row .col-lg-8 .card .card-header {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.tech-stack {
+    margin-top: auto;
+    margin-bottom: auto;
+    text-align: center;
+}
+
+.tech-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    max-width: 500px;
+    margin: 0 auto 20px auto;
+}
+
+.tech-item {
+    background: #e0e0e0;
+    padding: 5px 8px;
+    border-radius: 15px;
+    font-size: 13px;
+    font-weight: 500;
+    margin: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

index.html

@@ -51,7 +51,6 @@ <h3>jfullstackdev</h3>
                 <div class="col-lg-8">
                   <div class="card shadow-sm">
                     <div class="card-header bg-transparent border-0">
-                      <h3 class="mb-0"><i class="far fa-clone pr-1"></i>About Me</h3>
                       <div class="social-icons" style="text-align: center; margin: 10px 0;">
                         <a 
                           href="https://github.com/jfullstackdev" 
@@ -76,30 +75,26 @@ <h3 class="mb-0"><i class="far fa-clone pr-1"></i>About Me</h3>
                         Senior Full Stack Developer, GitHub Contributor, Google &
                         VEX Robotics Certified Educator, ICT & Robotics Instructor
                       </p>
-                      <p class="ellipsis-separator" style="text-align: center;"> ... </p>
-                      <p>
-                        I'm documenting the things I'm interested in, lessons that I'm
-                        learning and topics that I'm teaching. And I want to share these
-                        things with you. So, please hit the star button or fork any repo that
-                        you think is helpful / informative / worth it. It
-                        means a lot to me. Thanks.
-                      </p>
-                      <p class="ellipsis-separator" style="text-align: center;"> ... </p>
-                      <p>
-                        I'm now a freelancer so you can hire me:
-                      </p>
-                      <ol style="margin: 5px 0; padding-left: 25px;">
-                        <li>Web Dev ( Java, Spring Boot, PHP, Laravel )</li>
-                        <li>online tutorial ( programming, Arduino & Robotics )</li>
-                        <li>writing tech lessons, topics or Course Syllabus</li>
-                        <li>Technical Writing</li>
-                      </ol>
-                      <p>
-                        just DM me for the details at <a
-                                                        href="https://twitter.com/jfullstackdev"
-                                                        style="color: #000;">Twitter (X)
-                                                      </a>
-                      </p>
+                      
+                      <div class="tech-stack">
+                        <div class="tech-grid">
+                          <span class="tech-item">Java</span>
+                          <span class="tech-item">Spring Boot</span>
+                          <span class="tech-item">PHP</span>
+                          <span class="tech-item">Laravel</span>
+                          <span class="tech-item">HTML/CSS</span>
+                          <span class="tech-item">JavaScript</span>
+                          <span class="tech-item">Node.js</span>
+                          <span class="tech-item">React</span>
+                          <span class="tech-item">Git</span>
+                          <span class="tech-item">GitHub</span>
+                          <span class="tech-item">Robotics</span>
+                          <span class="tech-item">Arduino</span>
+                          <span class="tech-item">Web Dev</span>
+                          <span class="tech-item">Tutorials</span>
+                          <span class="tech-item">Tech Writing</span>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>