Update index.html

Shrikrishnan · Dec 13, 2024 · 8545d4f · 8545d4f
1 parent 29454bd
commit 8545d4f
Showing 1 changed file with 21 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -40,33 +40,34 @@
       position: relative;
     }
     header h1 {
-      font-size: 48px;
+      font-size: 3rem;
       margin-bottom: 10px;
     }
     header p {
       margin: 10px 0;
-      font-size: 18px;
+      font-size: 1.2rem;
     }
     header .contact-links {
       margin-top: 20px;
     }
     header .contact-links a {
       display: inline-block;
       margin: 0 10px;
-      font-size: 16px;
+      font-size: 1rem;
       font-weight: bold;
     }
 
     /* Hero Section */
     .hero {
-      background: url('https://source.unsplash.com/1200x600/?technology,programming') no-repeat center center/cover;
+      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
+        url('https://source.unsplash.com/1200x600/?technology,programming') no-repeat center center/cover;
       height: 400px;
       display: flex;
       align-items: center;
       justify-content: center;
       text-align: center;
       color: white;
-      font-size: 24px;
+      font-size: 1.8rem;
       font-weight: bold;
       text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
     }
@@ -89,7 +90,7 @@
       border-bottom: none;
     }
     section h2 {
-      font-size: 28px;
+      font-size: 2rem;
       color: #087F5B;
       margin-bottom: 10px;
     }
@@ -101,6 +102,13 @@
       margin-bottom: 10px;
     }
 
+    /* Skills Section Grid */
+    .skills-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 15px;
+    }
+
     /* Timeline Section */
     .timeline {
       position: relative;
@@ -161,7 +169,7 @@
     /* Responsive Design */
     @media (max-width: 768px) {
       header h1 {
-        font-size: 36px;
+        font-size: 2.5rem;
       }
       .container {
         width: 95%;
@@ -197,12 +205,12 @@ <h2>About Me</h2>
 
     <section class="fade-in">
       <h2>Skills</h2>
-      <ul>
-        <li><strong>Programming:</strong> Java, J2EE, SQL, Bash, Data Structures and Algorithms</li>
-        <li><strong>Frameworks:</strong> Spring Boot, JPA, Querydsl, Apache FreeMarker</li>
-        <li><strong>Tools:</strong> Git, Grafana, GitLab</li>
-        <li><strong>Specializations:</strong> High-Level Design (HLD), Low-Level Design (LLD), Problem Solving</li>
-      </ul>
+      <div class="skills-grid">
+        <div><strong>Programming:</strong> Java, J2EE, SQL, Bash</div>
+        <div><strong>Frameworks:</strong> Spring Boot, JPA, Querydsl</div>
+        <div><strong>Tools:</strong> Git, Grafana, GitLab</div>
+        <div><strong>Specializations:</strong> HLD, LLD, Problem Solving</div>
+      </div>
     </section>
 
     <section class="fade-in">