Improve responsiveness and alignments. Overall cleanup and organization.

Author: Fernando Tona

css/style.css

@@ -1,3 +1,25 @@
+/* ===================================
+   CSS STRUCTURE:
+   1. Global Styles
+   2. Layout Components
+   3. UI Components
+   4. Media Queries (Responsive)
+   =================================== */
+
+/* ===================================
+   1. GLOBAL STYLES
+   =================================== */
+
+/* Reset and base styles */
+a {
+    text-decoration: none;
+}
+
+/* ===================================
+   2. LAYOUT COMPONENTS
+   =================================== */
+
+/* Background and animations */
 .gradient-bg {
     background: linear-gradient(300deg, #070F2B, #3572EF, #3ABEF9);
     background-size: 180% 180%;
@@ -18,31 +40,35 @@
     }
 }
 
+/* Main section layout */
 #main {
     min-height: 100vh;
     display: flex;
     align-items: center;
 }
 
-a {
-    text-decoration: none;
-}
+/* ===================================
+   3. UI COMPONENTS
+   =================================== */
 
+/* Button icons */
 .btn-icon {
     width: 20px;
     height: 20px;
     margin-right: 8px;
     filter: brightness(0) invert(1);
 }
 
-/* Styles for LinkedIn button */
+/* LinkedIn button */
 .btn-linkedin {
     background-color: #2856C7;
     color: white;
     border: 2px solid #2856C7;
     display: flex;
     align-items: center;
     justify-content: center;
+    min-width: 130px;
+    width: 130px;
 }
 
 .btn-linkedin:hover {
@@ -62,14 +88,16 @@ a {
     filter: brightness(0) invert(0);
 }
 
-/* Styles for GitHub button */
+/* GitHub button */
 .btn-github-outline {
     background-color: transparent;
     color: white;
     border: 2px solid white;
     display: flex;
     align-items: center;
     justify-content: center;
+    min-width: 130px;
+    width: 130px;
 }
 
 .btn-github-outline:hover {
@@ -85,12 +113,48 @@ a {
     border-color: #070F2B;
 }
 
-
 .btn-github-outline:hover .btn-icon {
     filter: brightness(0) invert(0);
 }
 
 .btn-github-outline:focus .btn-icon,
 .btn-github-outline:active .btn-icon {
     filter: brightness(0) invert(1);
+}
+
+/* ===================================
+   4. MEDIA QUERIES (RESPONSIVE)
+   =================================== */
+
+/* Tablet and mobile (below 992px) */
+@media (max-width: 991.98px) {
+    .col-10.col-sm-8.col-lg-6 {
+        display: flex;
+        justify-content: center;
+        margin: 0 auto;
+    }
+    
+    .col-10.col-sm-8.col-lg-6 img {
+        margin: 0 auto;
+        display: block;
+    }
+    
+    .col-lg-6 {
+        text-align: center;
+    }
+    
+    .d-grid.gap-2.d-md-flex {
+        justify-content: center !important;
+    }
+}
+
+/* Small mobile (below 576px) */
+@media (max-width: 575.98px) {
+    .container {
+        text-align: center;
+    }
+    
+    .btn {
+        margin: 0.25rem !important;
+    }
 }

index.html

@@ -16,13 +16,13 @@
         <div class="container col-xxl-8 px-4 p-5">
             <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
                 <div class="col-10 col-sm-8 col-lg-6">
-                    <img src="./assets/images/fernando-tona-dev-pic.jpg" class="d-block mx-lg-auto img-fluid"
+                    <img src="./assets/images/fernando-tona-dev-pic.jpg" class="d-block mx-auto img-fluid"
                         alt="Fernando Tona picture" style="max-height: 450px; border-radius: 2%;" loading="lazy">
                 </div>
                 <div class="col-lg-6">
                     <h1 class="display-5 fw-bold lh-1 mb-3" style="color: #070F2B;">Fernando Tona</h1>
-                    <p class="lead" style="color:white">Full Stack Developer | C#/.NET · React · TypeScript · Azure |
-                        Problem-Solver with a Musician’s Discipline</p>
+                    <p class="lead" style="color:white">Software Developer | .NET/C# | Azure</p>
+                    <p class="lead" style="color:white">Problem-Solver with a Musician’s Discipline</p>
                     <div class="d-grid gap-2 d-md-flex justify-content-md-start">
                         <a href="https://linkedin.com/in/fernandotona" target="_blank" rel="noopener noreferrer">
                             <button type="button" class="btn btn-linkedin btn-lg px-4 me-md-2">
@@ -41,26 +41,6 @@ <h1 class="display-5 fw-bold lh-1 mb-3" style="color: #070F2B;">Fernando Tona</h
 
     </section>
 
-
-    <section id="features">
-
-    </section>
-
-
-    <section id="testimonial">
-
-    </section>
-
-
-    <section id="pricing">
-
-    </section>
-
-
-    <section id="footer">
-
-    </section>
-
 </body>
 
 </html>