<html>
 <head>
  <title>
   Developer Info
  </title>
  <script src="https://cdn.tailwindcss.com">
  </script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"/>
 </head>
 <body class="bg-gray-100 font-roboto">
  <header class="bg-blue-600 text-white p-4">
   <div class="container mx-auto flex justify-between items-center">
    <h1 class="text-2xl font-bold">
     Developer Info
    </h1>
    <button class="bg-white text-blue-600 px-4 py-2 rounded" onclick="toggleEditMode()">
     Edit Profile
    </button>
   </div>
  </header>
  <main class="container mx-auto p-4">
   <div class="bg-white p-6 rounded-lg shadow-md">
    <div class="flex flex-col items-center">
     <img alt="Portrait of the developer, smiling and looking at the camera" class="rounded-full mb-4" height="150" id="profileImage" src="https://files.catbox.moe/e16hkn.png" width="150"/>
     <input class="hidden" id="profileImageInput" type="file" accept="image/*" onchange="updateProfileImage(event)"/>
     <h2 class="text-2xl font-bold mb-2" id="nameDisplay">
      CARL WILLIAM
     </h2>
     <input class="hidden text-center text-xl font-bold mb-2" id="nameInput" type="text" value="John Doe"/>
     <p class="text-gray-700 text-center mb-4" id="titleDisplay">
      Full Stack Developer
     </p>
     <input class="hidden text-center text-gray-700 mb-4" id="titleInput" type="text" value="Full Stack Developer"/>
    </div>
    <div class="text-gray-700">
     <h3 class="text-xl font-bold mb-2">
      About Me
     </h3>
     <p class="mb-4" id="aboutMeDisplay">
      Hello! I'm Carl william, a passionate full stack developer with less than 5 years of experience in the tech industry. I specialize in building robust web applications and have a deep understanding of both front-end and back-end technologies.
     </p>
     <textarea class="hidden w-full mb-4 p-2 border rounded" id="aboutMeInput">
Hello! I'm Carl william, a passionate full stack developer with less than 5 years of experience in the tech industry. I specialize in building robust web applications and have a deep understanding of both front-end and back-end technologies.
</textarea>
     <h3 class="text-xl font-bold mb-2">
      My Coding Journey
     </h3>
     <p class="mb-4" id="codingJourneyDisplay">
      My coding journey began in high school when I first encountered HTML and CSS. I was fascinated by the ability to create something from nothing, and this curiosity led me to pursue a degree in Computer Science. Over the years, I have worked with various programming languages and frameworks, including JavaScript, Python, React, and Node.js.
     </p>
     <textarea class="hidden w-full mb-4 p-2 border rounded" id="codingJourneyInput">
My coding journey began in high school when I first encountered HTML and CSS. I was fascinated by the ability to create something from nothing, and this curiosity led me to pursue a degree in Computer Science. Over the years, I have worked with various programming languages and frameworks, including JavaScript, Python, React, and Node.js.
</textarea>
     <p class="mb-4" id="careerStoryDisplay">
      I started my career as a junior developer at a small startup, where I learned the importance of writing clean, maintainable code. As I gained more experience, I moved on to larger companies, taking on more responsibilities and leading development teams. Today, I work as a freelance developer, helping clients bring their ideas to life through innovative and efficient solutions.
     </p>
     <textarea class="hidden w-full mb-4 p-2 border rounded" id="careerStoryInput">
I started my career as a junior developer at a small startup, where I learned the importance of writing clean, maintainable code. As I gained more experience, I moved on to larger companies, taking on more responsibilities and leading development teams. Today, I work as a freelance developer, helping clients bring their ideas to life through innovative and efficient solutions.
</textarea>
     <p class="mb-4" id="personalStoryDisplay">
      In addition to my professional work, I am an active member of the developer community. I enjoy attending meetups, contributing to open-source projects, and mentoring aspiring developers. I believe in continuous learning and always strive to stay updated with the latest industry trends and best practices.
     </p>
     <textarea class="hidden w-full mb-4 p-2 border rounded" id="personalStoryInput">
In addition to my professional work, I am an active member of the developer community. I enjoy attending meetups, contributing to open-source projects, and mentoring aspiring developers. I believe in continuous learning and always strive to stay updated with the latest industry trends and best practices.
</textarea>
     <p class="mb-4" id="hobbiesDisplay">
      When I'm not coding, you can find me exploring the outdoors, reading tech blogs, or experimenting with new recipes in the kitchen.
     </p>
     <textarea class="hidden w-full mb-4 p-2 border rounded" id="hobbiesInput">
When I'm not coding, you can find me exploring the outdoors, reading tech blogs, or experimenting with new recipes in the kitchen.
</textarea>
    </div>
    <div class="text-center">
     <button class="hidden bg-blue-600 text-white px-4 py-2 rounded" id="saveButton" onclick="saveProfile()">
      Save
     </button>
    </div>
   </div>
  </main>
  <footer class="bg-blue-600 text-white p-4 mt-6">
   <div class="container mx-auto text-center">
    <p>
     © 2025 Carl william. All rights reserved.
    </p>
   </div>
  </footer>
  <script>
   function toggleEditMode() {
    const elementsToToggle = [
     'nameDisplay',
     'nameInput',
     'titleDisplay',
     'titleInput',
     'aboutMeDisplay',
     'aboutMeInput',
     'codingJourneyDisplay',
     'codingJourneyInput',
     'careerStoryDisplay',
     'careerStoryInput',
     'personalStoryDisplay',
     'personalStoryInput',
     'hobbiesDisplay',
     'hobbiesInput',
     'saveButton',
     'profileImageInput'
    ];
    elementsToToggle.forEach(id => {
     document.getElementById(id).classList.toggle('hidden');
    });
   }

   function saveProfile() {
    document.getElementById('nameDisplay').innerText = document.getElementById('nameInput').value;
    document.getElementById('titleDisplay').innerText = document.getElementById('titleInput').value;
    document.getElementById('aboutMeDisplay').innerText = document.getElementById('aboutMeInput').value;
    document.getElementById('codingJourneyDisplay').innerText = document.getElementById('codingJourneyInput').value;
    document.getElementById('careerStoryDisplay').innerText = document.getElementById('careerStoryInput').value;
    document.getElementById('personalStoryDisplay').innerText = document.getElementById('personalStoryInput').value;
    document.getElementById('hobbiesDisplay').innerText = document.getElementById('hobbiesInput').value;
    toggleEditMode();
   }

   function updateProfileImage(event) {
    const reader = new FileReader();
    reader.onload = function () {
     document.getElementById('profileImage').src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
   }
  </script>
 </body>
</html>
