Robot

<body class="bg-gray-900 text-white font-sans leading-normal tracking-normal">
  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-r from-purple-500 via-pink-500 to-red-500">
    <div class="absolute inset-0 bg-cover bg-center filter blur-lg" style="background-image: url('https://placehold.co/1920x1080');"></div>
    <div class="relative z-10 p-8 bg-white bg-opacity-10 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg">
      <header class="text-center mb-8">
        <h1 class="text-4xl font-bold mb-2">My Portfolio</h1>
        <p class="text-lg">Welcome to my personal portfolio website</p>
      </header>
      <section class="mb-8">
        <div class="flex flex-col items-center">
          <img src="https://placehold.co/150x150" alt="Profile Picture" class="rounded-full mb-4">
          <div class="flex space-x-4 mb-4">
            <a href="https://github.com" target="_blank" class="text-gray-300 hover:text-white transition duration-300">
              <i class="iconoir-github text-3xl"></i>
            </a>
            <a href="https://linkedin.com" target="_blank" class="text-gray-300 hover:text-white transition duration-300">
              <i class="iconoir-linkedin text-3xl"></i>
            </a>
          </div>
          <h2 class="text-2xl font-bold mb-4">About Me</h2>
          <p class="mb-4">I am a passionate web developer with a love for creating beautiful and functional websites. I have experience in various web technologies and enjoy learning new things.</p>
          <h3 class="text-xl font-bold mb-2">Favorite Programming Languages</h3>
          <div class="flex space-x-4 mb-4">
            <div class="flex flex-col items-center">
              <img src="https://placehold.co/50x50" alt="JavaScript Logo" class="mb-2">
              <p>JavaScript</p>
            </div>
            <div class="flex flex-col items-center">
              <img src="https://placehold.co/50x50" alt="Python Logo" class="mb-2">
              <p>Python</p>
            </div>
            <div class="flex flex-col items-center">
              <img src="https://placehold.co/50x50" alt="Ruby Logo" class="mb-2">
              <p>Ruby</p>
            </div>
            <div class="flex flex-col items-center">
              <img src="https://placehold.co/50x50" alt="PHP Logo" class="mb-2">
              <p>PHP</p>
            </div>
          </div>
          <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 transform hover:scale-105">Learn More</button>
        </div>
      </section>
      <section class="mb-8">
        <h2 class="text-2xl font-bold mb-4">Projects</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="bg-white bg-opacity-10 p-4 rounded-lg shadow-lg transition duration-300 transform hover:scale-105">
            <h3 class="text-xl font-bold mb-2">Project 1</h3>
            <p class="mb-2">Description of project 1.</p>
            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition duration-300 transform hover:scale-105">View Project</button>
          </div>
          <div class="bg-white bg-opacity-10 p-4 rounded-lg shadow-lg transition duration-300 transform hover:scale-105">
            <h3 class="text-xl font-bold mb-2">Project 2</h3>
            <p class="mb-2">Description of project 2.</p>
            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition duration-300 transform hover:scale-105">View Project</button>
          </div>
        </div>
      </section>
      <section class="mb-8">
        <h2 class="text-2xl font-bold mb-4">Skills</h2>
        <ul class="list-disc list-inside">
          <li class="mb-2">HTML & CSS</li>
          <li class="mb-2">JavaScript</li>
          <li class="mb-2">React</li>
          <li class="mb-2">Node.js</li>
          <li class="mb-2">Python</li>
          <li class="mb-2">Django</li>
          <li class="mb-2">Ruby on Rails</li>
          <li class="mb-2">PHP & Laravel</li>
        </ul>
      </section>
      <section class="mb-8">
        <h2 class="text-2xl font-bold mb-4">Certificates</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="bg-white bg-opacity-10 p-4 rounded-lg shadow-lg transition duration-300 transform hover:scale-105">
            <h3 class="text-xl font-bold mb-2">Certificate 1</h3>
            <p class="mb-2">Description of certificate 1.</p>
          </div>
          <div class="bg-white bg-opacity-10 p-4 rounded-lg shadow-lg transition duration-300 transform hover:scale-105">
            <h3 class="text-xl font-bold mb-2">Certificate 2</h3>
            <p class="mb-2">Description of certificate 2.</p>
          </div>
        </div>
      </section>
      <section class="mb-8">
        <h2 class="text-2xl font-bold mb-4">Contact</h2>
        <form>
          <div class="mb-4">
            <label for="name" class="block text-gray-300 mb-2">Name</label>
            <input type="text" id="name" class="w-full p-2 border rounded bg-gray-800 text-white" placeholder="Enter your name">
          </div>
          <div class="mb-4">
            <label for="email" class="block text-gray-300 mb-2">Email</label>
            <input type="email" id="email" class="w-full p-2 border rounded bg-gray-800 text-white" placeholder="Enter your email">
          </div>
          <div class="mb-4">
            <label for="message" class="block text-gray-300 mb-2">Message</label>
            <textarea id="message" class="w-full p-2 border rounded bg-gray-800 text-white" placeholder="Enter your message" rows="4"></textarea>
          </div>
          <button type="submit" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-300 transform hover:scale-105">Send Message</button>
        </form>
      </section>
      <footer class="text-center mt-8">
        <p>&copy; 2023 My Portfolio. All rights reserved.</p>
      </footer>
    </div>
  </div>
</body>