about_me.html

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: lightblue;
  }
  h1 {
    text-align: center;
    color: white;
  }
  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
  p {
    text-align: center;
    color: black;
  }
  ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
  }
  li {
    margin: 10px;
  }
  a {
    text-decoration: none;
    color: white;
    background-color: darkblue;
    padding: 5px;
    border-radius: 5px;
  }
</style>
</head>
<body>
  <h1>About Me</h1>
  <img src="your_photo.jpg" alt="Your photo">
  <p>Hi, I'm John Doe, a web developer and a mystery lover. I created this website to share some of my secrets and puzzles with you. Can you find them all?</p>
  <ul>
    <li><a href="https://twitter.com/your_username">Twitter</a></li>
    <li><a href="https://github.com/your_username">GitHub</a></li>
    <li><a href="https://your_blog.com">Blog</a></li>
  </ul>
</body>
</html>