index-profile

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>My Portfolio</h1>
        <button id="mode-switch">Switch Mode</button>

    </header>
    <section id="profile">
        <img src="/img/1.jpg" alt="Profile Picture">
        <h2>About Me</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget ante id nisl pulvinar vestibulum.</p>
    </section>
    <section id="gallery">
      <h2>Photo Gallery</h2>
      <div class="gallery-container">
          <button id="prevBtn">&lt;</button>
          <div class="gallery">
              <img src="/img/2.jpg" alt="Gallery Image 1">
              <img src="/img/3.jpg" alt="Gallery Image 2">
              <img src="/img/4.jpg" alt="Gallery Image 3">
              <img src="/img/5.jpg" alt="Gallery Image 1">
              <img src="/img/6.jpg" alt="Gallery Image 2">
              <img src="/img/7.jpg" alt="Gallery Image 3">
              <img src="/img/8.jpg" alt="Gallery Image 2">
              <img src="/img/9.jpg" alt="Gallery Image 3">
              <!-- Add more images as needed -->
          </div>
          <button id="nextBtn">&gt;</button>
      </div>
  </section>
    <section id="sports">
        <h2>My Favorite Sports</h2>
        <ul>
            <li>Football</li>
            <li>Basketball</li>
            <li>Tennis</li>
            <!-- Add more sports as needed -->
        </ul>
    </section>
    <section id="books">
        <h2>My Favorite Books</h2>
        <ul>
            <li>The Great Gatsby</li>
            <li>To Kill a Mockingbird</li>
            <li>1984</li>
            <!-- Add more books as needed -->
        </ul>
    </section>
    <section id="contact">
        <h2>Contact Me</h2>
        <form id="contact-form">
            <input type="text" id="name" placeholder="Your Name" required>
            <input type="email" id="email" placeholder="Your Email" required>
            <textarea id="message" placeholder="Your Message" required></textarea>
            <button type="submit">Send</button>
        </form>
    </section>
    <script src="script.js"></script>
</body>
</html>