From 2ad0f186380f3ba3e8bf530c8800cc88d7dbc52d Mon Sep 17 00:00:00 2001
From: Dhruva1231 <62621689+Dhruva1231@users.noreply.github.com>
Date: Tue, 24 Sep 2024 20:00:18 -0400
Subject: [PATCH] Update index.html

---
 index.html | 197 ++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 179 insertions(+), 18 deletions(-)
diff --git a/index.html b/index.html
index c281ac3..9560388 100644
--- a/index.html
+++ b/index.html
@@ -2,30 +2,191 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Your Website Title</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Dhruva's Portfolio</title>
     <link rel="stylesheet" href="styles.css">
+    <style>
+        /* Basic Styles */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f4f4;
+        }
+
+        header {
+            background-color: #333;
+            color: white;
+            padding: 1em 0;
+            text-align: center;
+            position: fixed;
+            width: 100%;
+            top: 0;
+            z-index: 1;
+        }
+
+        nav {
+            display: flex;
+            justify-content: center;
+            margin: 0;
+        }
+
+        nav a {
+            color: white;
+            text-decoration: none;
+            padding: 14px 20px;
+            text-transform: uppercase;
+        }
+
+        nav a:hover {
+            background-color: #555;
+            transition: background-color 0.3s;
+        }
+
+        section {
+            padding: 60px 20px;
+            margin-top: 70px;
+        }
+
+        .about {
+            background-color: #fff;
+            padding: 40px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            max-width: 900px;
+            margin: auto;
+        }
+
+        .projects {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+        }
+
+        .project-card {
+            background-color: white;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s;
+        }
+
+        .project-card:hover {
+            transform: translateY(-5px);
+        }
+
+        .project-image {
+            width: 100%;
+            height: 200px;
+            background-size: cover;
+            background-position: center;
+        }
+
+        .project-content {
+            padding: 20px;
+        }
+
+        .contact-form {
+            max-width: 600px;
+            margin: auto;
+            background-color: white;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .contact-form label {
+            display: block;
+            margin: 10px 0 5px;
+        }
+
+        .contact-form input,
+        .contact-form textarea {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 10px;
+            border-radius: 5px;
+            border: 1px solid #ccc;
+        }
+
+        .contact-form button {
+            padding: 10px 20px;
+            background-color: #333;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .contact-form button:hover {
+            background-color: #555;
+        }
+    </style>
 </head>
 <body>
+
+    <!-- Header and Navigation -->
     <header>
-        <h1>Welcome to My Custom Website</h1>
-        <p>This is a custom website aksjdnaksjdnaksjdnakjsdnakjsdasdbuilt with HTML.</p>
+        <nav>
+            <a href="#about">About</a>
+            <a href="#projects">Projects</a>
+            <a href="#contact">Contact</a>
+        </nav>
     </header>
 
-    <main>
-        <section>
-            <h2>About Me</h2>
-            <p>Describe yourself or your project here.</p>
-        </section>
-        <section>
-            <h2>Projects</h2>
-            <p>Detail your projects here with links or images.</p>
-        </section>
-    </main>
-
-    <footer>
-        <p>Contact: your-email@example.com</p>
-    </footer>
+    <!-- About Section -->
+    <section id="about" class="about">
+        <h1>About Me</h1>
+        <p>Hello, I'm Dhruva, an inventor, robotics enthusiast, and engineer. I enjoy creating technologies that positively impact people's lives, whether it's a robotic arm for ALS patients or traffic systems for smarter cities. With experience in robotics, AI, and app development, my goal is to innovate solutions that bridge the gap between technology and society.</p>
+    </section>
+
+    <!-- Projects Section -->
+    <section id="projects" class="projects">
+        <h2>My Projects</h2>
+        <div class="project-card">
+            <div class="project-image" style="background-image: url('project1.jpg');"></div>
+            <div class="project-content">
+                <h3>Transcend Traffic System</h3>
+                <p>An intelligent traffic management system that reduces delays by 78% and improves road visibility up to 1000 meters.</p>
+            </div>
+        </div>
+
+        <div class="project-card">
+            <div class="project-image" style="background-image: url('project2.jpg');"></div>
+            <div class="project-content">
+                <h3>A.I.D App</h3>
+                <p>A disaster relief app connecting volunteers and victims in real-time to assist during natural disasters.</p>
+            </div>
+        </div>
+
+        <div class="project-card">
+            <div class="project-image" style="background-image: url('project3.jpg');"></div>
+            <div class="project-content">
+                <h3>Ken's Robotic Arm</h3>
+                <p>A robotic arm designed to help ALS patients regain some functionality for everyday tasks.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Contact Section -->
+    <section id="contact">
+        <h2>Contact Me</h2>
+        <div class="contact-form">
+            <form action="mailto:youremail@example.com" method="POST" enctype="text/plain">
+                <label for="name">Your Name</label>
+                <input type="text" id="name" name="name" required>
+
+                <label for="email">Your Email</label>
+                <input type="email" id="email" name="email" required>
+
+                <label for="message">Your Message</label>
+                <textarea id="message" name="message" rows="5" required></textarea>
+
+                <button type="submit">Send Message</button>
+            </form>
+        </div>
+    </section>
+
 </body>
 </html>
