diff --git a/SonalImg.jpg b/SonalImg.jpg
new file mode 100644
index 0000000..4b10e6a
Binary files /dev/null and b/SonalImg.jpg differ
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..36e75cf
--- /dev/null
+++ b/index.css
@@ -0,0 +1,402 @@
+.sidebar {
+  width: 280px;
+  background-color: #fff;
+  border-right: 1px solid #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  height: 100vh;
+  z-index: 10;
+}
+
+.logo {
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.logo h1 {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 900;
+  text-transform: uppercase;
+  font-size: 2.2rem;
+  letter-spacing: 1px;
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.logo h1::after {
+  content: '';
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
+  height: 3px;
+  background-color: #000;
+}
+
+.nav-menu {
+  flex-grow: 1;
+  padding: 40px 0;
+}
+
+.nav-menu ul {
+  list-style: none;
+}
+
+.nav-menu li {
+  margin-bottom: 8px;
+}
+
+.nav-menu a {
+  display: block;
+  padding: 14px 20px;
+  text-decoration: none;
+  color: #333;
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  letter-spacing: 1px;
+  transition: all 0.3s;
+}
+
+.nav-menu a.active {
+  background-color: #ffd500;
+  color: #000;
+}
+
+.nav-menu a:hover:not(.active) {
+  background-color: #f5f5f5;
+}
+
+.social-icons {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
+  border-top: 1px solid #e0e0e0;
+}
+
+.social-icons a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  margin: 0 5px;
+  color: #333;
+  transition: all 0.3s;
+}
+
+.social-icons a:hover {
+  background-color: #f5f5f5;
+}
+
+.copyright {
+  padding: 15px;
+  font-size: 0.75rem;
+  text-align: center;
+  color: #777;
+}
+
+.main-content {
+  margin-left: 280px;
+  flex-grow: 1;
+  position: relative;
+}
+
+/* Content sections */
+.content-section {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  padding: 40px;
+}
+
+.content-section:not(.active) {
+  display: none;
+}
+
+.hero-section {
+  display: flex;
+  align-items: center;
+  padding: 40px;
+  min-height: 100vh;
+}
+
+.profile-container {
+  position: relative;
+  width: 450px;
+}
+
+.profile-frame {
+  position: relative;
+  border: 2px solid #000;
+  padding: 10px;
+  z-index: 2;
+}
+
+.profile-img {
+  width: 100%;
+  display: block;
+}
+
+.yellow-block {
+  position: absolute;
+  width: 80%;
+  height: 80%;
+  background-color: #ffd500;
+  bottom: -20px;
+  right: -20px;
+  z-index: 1;
+}
+
+.back-button {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  width: 40px;
+  height: 40px;
+  background-color: #000;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  transition: all 0.3s;
+  z-index: 5;
+}
+
+.back-button:hover {
+  background-color: #333;
+}
+
+.hero-content {
+  padding-left: 60px;
+}
+
+.hero-title {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 4rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  line-height: 1.1;
+  margin-bottom: 30px;
+}
+
+.hero-title::after {
+  content: '';
+  display: block;
+  width: 80px;
+  height: 4px;
+  background-color: #000;
+  margin-top: 20px;
+}
+
+.hero-description {
+  font-size: 1.1rem;
+  color: #333;
+  margin-bottom: 40px;
+  line-height: 1.6;
+}
+
+.signature {
+  max-width: 200px;
+  margin-top: 20px;
+}
+
+/* Content Styling */
+.content-container {
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 80px 20px 40px;
+}
+
+.content-title {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 3rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  margin-bottom: 40px;
+  position: relative;
+}
+
+.content-title::after {
+  content: '';
+  position: absolute;
+  bottom: -15px;
+  left: 0;
+  width: 80px;
+  height: 4px;
+  background-color: #000;
+}
+
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 ratio */
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+  margin: 30px 0;
+  border: 2px solid #000;
+}
+
+.video-container iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.card {
+  background-color: #fff;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  overflow: hidden;
+  margin: 30px 0;
+  transition: all 0.3s;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
+}
+
+.card-content {
+  padding: 30px;
+}
+
+.card h3 {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 1.6rem;
+  margin-bottom: 15px;
+}
+
+.card p {
+  color: #666;
+  margin-bottom: 20px;
+  line-height: 1.6;
+}
+
+.button {
+  display: inline-block;
+  background-color: #ffd500;
+  color: #000;
+  font-weight: bold;
+  text-decoration: none;
+  padding: 12px 25px;
+  border-radius: 5px;
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  letter-spacing: 1px;
+  transition: all 0.3s;
+}
+
+.button:hover {
+  background-color: #000;
+  color: #fff;
+}
+
+.social-card {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  margin-bottom: 20px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+}
+
+.social-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.social-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20px;
+  font-size: 1.5rem;
+}
+
+.social-card h3 {
+  margin: 0;
+  font-size: 1.2rem;
+}
+
+.social-card p {
+  margin: 5px 0 0;
+  color: #777;
+  font-size: 0.9rem;
+}
+
+.linkedin {
+  color: #0077B5;
+}
+
+.github {
+  color: #333;
+}
+
+.medium {
+  color: #000;
+}
+
+.youtube {
+  color: #FF0000;
+}
+
+@media (max-width: 1200px) {
+  .hero-section {
+    flex-direction: column;
+    padding: 80px 40px 40px;
+  }
+  
+  .profile-container {
+    margin-bottom: 40px;
+  }
+  
+  .hero-content {
+    padding-left: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  body {
+    flex-direction: column;
+  }
+  
+  .sidebar {
+    width: 100%;
+    height: auto;
+    position: relative;
+    border-right: none;
+    border-bottom: 1px solid #e0e0e0;
+  }
+  
+  .main-content {
+    margin-left: 0;
+  }
+  
+  .profile-container {
+    width: 100%;
+    max-width: 450px;
+  }
+  
+  .hero-title {
+    font-size: 3rem;
+  }
+  
+  .content-title {
+    font-size: 2.2rem;
+  }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 557db03..20b4abf 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,224 @@
-Hello World
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sonal Sachdev - Website Developer</title>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght@700;900&display=swap" rel="stylesheet">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
+  <link rel="stylesheet" href="index.css">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: 'Roboto', sans-serif;
+    }
+    
+    body {
+      display: flex;
+      min-height: 100vh;
+    }
+    
+  </style>
+</head>
+<body>
+  <div class="sidebar">
+    <div class="logo">
+      <h1>Sonal Sachdev</h1>
+    </div>
+    <nav class="nav-menu">
+      <ul>
+        <li><a href="#home" class="nav-link active" data-section="home">Home</a></li>
+        <li><a href="#speaker" class="nav-link" data-section="speaker">Featured Speaker</a></li>
+        <li><a href="#mentor" class="nav-link" data-section="mentor">Mentor</a></li>
+        <li><a href="#blogs" class="nav-link" data-section="blogs">Blogs</a></li>
+        <li><a href="#connect" class="nav-link" data-section="connect">Let's Connect</a></li>
+      </ul>
+    </nav>
+    <div class="social-icons">
+      <a href="https://github.com/13-Sonal" target="_blank"><i class="fab fa-github"></i></a>
+      <a href="https://www.linkedin.com/in/sonal-sachdev13" target="_blank"><i class="fab fa-linkedin-in"></i></a>
+      <a href="https://medium.com/@sachdevsonal9131" target="_blank"><i class="fab fa-medium-m"></i></a>
+      <a href="https://www.youtube.com/watch?v=37HJZxiGIpQ" target="_blank"><i class="fab fa-youtube"></i></a>
+    </div>
+    <div class="copyright">
+      &copy; 2025 Sonal Sachdev<br>
+      Software Developer & Speaker
+    </div>
+  </div>
+  
+  <div class="main-content">
+    <a href="#home" class="back-button">
+      <i class="fas fa-arrow-left"></i>
+    </a>
+    
+    <div id="home" class="content-section hero-section active">
+      <div class="profile-container">
+        <div class="profile-frame">
+          <img src="SonalImg.jpg" alt="Sonal Sachdev" class="profile-img">
+        </div>
+        <div class="yellow-block"></div>
+      </div>
+      
+      <div class="hero-content">
+        <h2 class="hero-title">Software Developer</h2>
+        <p class="hero-description">
+          Hi there! I'm a passionate software developer specializing in Ruby on Rails. I love building scalable applications and contributing to open-source projects. My goal is to create user-friendly experiences while maintaining clean and efficient code.
+        </p>
+        <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgNjAiPjxwYXRoIGQ9Ik0xNSAyMGMwIDAgMTUgMTAgMjUgMTVzMzUgNSA1MCAwYzE1LTUgMjAtOCAzMC0xNSAxMC03IDE1LTEwIDI1LTEwIDEwIDAgMTUgNSAyMCAxMHM1IDEwIDEwIDE1YzUgNSA4IDEwIDAgMTUtOCAxMC0xNSAxMC0yMCAxMHMtMTAtNS0xNS0xMGMtNS01LTUtOC0xMC0xNS01LTctNS0xMC0xNS0xMC0xMCAwLTE1IDUtMjAgMTBzLTEwIDUtMjAgMTBjLTEwIDUtMjAgMTAtMzAgMTAtMTAgMC0xNS01LTIwLTEwLTUtNS0xMC0xMC0xMC0xNXoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+" 
+             class="signature" alt="Signature">
+      </div>
+    </div>
+    
+    <div id="speaker" class="content-section">
+      <div class="content-container">
+        <h2 class="content-title">Featured Speaker</h2>
+        <p>Watch my latest talk at RailsConf 2024 which speaks about my journey in Rails</p>
+        
+        <div class="video-container">
+          <iframe width="560" height="315" src="https://www.youtube.com/embed/37HJZxiGIpQ" 
+                  title="YouTube video player" frameborder="0" 
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+                  allowfullscreen></iframe>
+        </div>
+        
+        <div class="card">
+          <div class="card-content">
+            <h3>Speaking Engagements</h3>
+            <p>This journey highlights my evolution from starting as a Manual QA to exploring diverse technologies and building sustainable, high-impact websites.</p>
+            <a href="https://www.youtube.com/watch?v=37HJZxiGIpQ" target="_blank" class="button">Watch Full Talk</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div id="mentor" class="content-section">
+      <div class="content-container">
+        <h2 class="content-title">Mentorship</h2>
+        <p>I believe in giving back to the community through mentorship. I regularly volunteer at Rails Girls events and other tech initiatives to help newcomers to tech find their way.</p>
+        
+        <div class="card">
+          <div class="card-content">
+            <h3>Rails Girls Mentor</h3>
+            <p>As a mentor at Rails Girls events, I help beginners learn Ruby on Rails and build confidence in tech. These workshops provide a supportive environment for people to take their first steps in development.</p>
+            <a href="https://www.linkedin.com/posts/sonal-sachdev13_railsabrgirls-ruby-activity-7305052361750683648-d1x-?utm_source=share&utm_medium=member_desktop" target="_blank" class="button">View LinkedIn Post</a>
+          </div>
+        </div>
+        
+        <div class="card">
+          <div class="card-content">
+            <h3>Community Involvement</h3>
+            <p>Having once been a learner myself, I’m now passionate about giving back—mentoring aspiring developers and building inclusive tech communities where everyone can grow and thrive.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div id="blogs" class="content-section">
+      <div class="content-container">
+        <h2 class="content-title">Blogs & Writing</h2>
+        <p>I regularly share my thoughts, experiences, and technical tutorials through writing. Check out my latest articles on Medium.</p>
+        
+        <div class="card">
+          <div class="card-content">
+            <h3>Latest Articles</h3>
+            <p>I write about Ruby on Rails, test automation tips, community building, and tech culture. Writing helps me clear my thoughts and share what I learn with others in tech.
+            </p>
+            <a href="https://medium.com/@sachdevsonal9131" target="_blank" class="button">Read on Medium</a>
+          </div>
+        </div>
+        
+        <div class="social-card">
+          <div class="social-icon medium">
+            <i class="fab fa-medium"></i>
+          </div>
+          <div>
+            <h3>Follow me on Medium</h3>
+            <p>@sachdevsonal9131</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div id="connect" class="content-section">
+      <div class="content-container">
+        <h2 class="content-title">Let's Connect</h2>
+        <p>I'm always open to connecting with fellow developers, speakers, and tech enthusiasts. Reach out to me through any of these platforms:</p>
+        
+        <a href="https://www.linkedin.com/in/sonal-sachdev13" target="_blank" class="social-card">
+          <div class="social-icon linkedin">
+            <i class="fab fa-linkedin-in"></i>
+          </div>
+          <div>
+            <h3>LinkedIn</h3>
+            <p>linkedin.com/in/sonal-sachdev13</p>
+          </div>
+        </a>
+        
+        <a href="https://github.com/13-Sonal" target="_blank" class="social-card">
+          <div class="social-icon github">
+            <i class="fab fa-github"></i>
+          </div>
+          <div>
+            <h3>GitHub</h3>
+            <p>github.com/13-Sonal</p>
+          </div>
+        </a>
+        
+        <div class="card">
+          <div class="card-content">
+            <h3>Work Inquiries</h3>
+            <p>Interested in working together? I'm open to consulting opportunities, speaking engagements, and technical writing projects. Feel free to reach out through LinkedIn or email.</p>
+            <p><strong>Email:</strong> sachdevsonal9131@gmail.com</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const navLinks = document.querySelectorAll('.nav-link');
+      const sections = document.querySelectorAll('.content-section');
+      const backButton = document.querySelector('.back-button');
+      
+      function showSection(sectionId) {
+        sections.forEach(section => {
+          section.classList.remove('active');
+        });
+        
+        document.getElementById(sectionId).classList.add('active');
+        
+        navLinks.forEach(link => {
+          if (link.getAttribute('data-section') === sectionId) {
+            link.classList.add('active');
+          } else {
+            link.classList.remove('active');
+          }
+        });
+      }
+      
+      navLinks.forEach(link => {
+        link.addEventListener('click', function(e) {
+          e.preventDefault();
+          const sectionId = this.getAttribute('data-section');
+          showSection(sectionId);
+        });
+      });
+      
+      backButton.addEventListener('click', function(e) {
+        e.preventDefault();
+        showSection('home');
+      });
+      
+      if (window.location.hash) {
+        const sectionId = window.location.hash.substring(1);
+        if (document.getElementById(sectionId)) {
+          showSection(sectionId);
+        }
+      }
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file