Update index.html

background image
magoimaxwel · Nov 21, 2024 · dce9bd5 · dce9bd5
1 parent 410285a
commit dce9bd5
Showing 1 changed file with 28 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <title>Magoi Maxwel - Mechatronic Engineer & XR Developer</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
-        :root {
+       :root {
             --primary-color: #fff;
             --secondary-color: #000;
             --background-color: #000;
@@ -83,10 +83,31 @@
             justify-content: center;
             align-items: flex-start;
             text-align: left;
-            background-color: #000;
+            position: relative;
+            background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692');
+            background-size: cover;
+            background-position: center;
             color: #fff;
             padding: 2rem;
             width: 100%;
+            overflow: hidden;
+        }
+
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.6); /* Dark overlay */
+            z-index: 1;
+        }
+
+        .hero-content {
+            position: relative;
+            z-index: 2;
+            max-width: 800px;
         }
 
         .hero h1 {
@@ -164,17 +185,9 @@
             .hero p {
                 font-size: 1rem;
             }
-
-            .section {
-                padding: 1rem;
-            }
         }
 
         @media (max-width: 480px) {
-            header h1 {
-                font-size: 1.5rem;
-            }
-
             .hero h1 {
                 font-size: 2rem;
             }
@@ -186,11 +199,6 @@
             .hero p {
                 font-size: 0.9rem;
             }
-
-            .hiring-btn {
-                padding: 0.5rem;
-                font-size: 0.9rem;
-            }
         }
     </style>
 </head>
@@ -207,9 +215,11 @@ <h1>Magoi Maxwel</h1>
 
         <!-- Hero Section -->
         <section class="hero">
-            <h1>Magoi Maxwel</h1>
-            <h2>Specializing in Industrial Automation, IIoT, SCADA Systems, and XR Solutions</h2>
-            <p>Come and see what I’m currently working on ⟶</p>
+            <div class="hero-content">
+                <h1>Magoi Maxwel</h1>
+                <h2>Specializing in Industrial Automation, IIoT, SCADA Systems, and XR Solutions</h2>
+                <p>Come and see what I'm currently working on ⟶</p>
+            </div>
         </section>
 
         <!-- Professional Summary -->