<!DOCTYPE html>
<html>
<head>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
  
    <title>DevMonte - Grzegorz Jońca</title>
  
  <style>
    body {
      background-color: #f2f2f2;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start; /* Adjusted alignment */
      height: 100vh;
      font-family: Arial, sans-serif;
      margin-top: 20vh; /* Added margin-top */
    }

    /* CSS for header animation */
    .header {
      text-align: center;
      font-size: 24px;
    }
    
    /* Keyframes for header animation */
    @keyframes changeTitle {
      0% { opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { opacity: 0; }
    }

    .header span {
      animation: changeTitle 3s linear infinite;
    }

    .social-icons {
      list-style-type: none;
      padding: 0;
      margin: 20px 0;
      display: flex;
      justify-content: center;
    }

    .social-icons li {
      margin: 0 10px;
    }

    .social-icons a {
      color: #333;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <img src="image.png" alt="Profile picture" style="border-radius: 50%; width: 300px; height: 350px;">
  <h1 class="header">Hi, my name is Greg and I am <span id="title">engineer</span>.</h1>
  
  <ul class="social-icons">
    <li><a href="https://www.linkedin.com/in/gregjonca/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
    <li><a href="https://www.instagram.com/dev.monte/" target="_blank"><i class="fab fa-instagram"></i></a></li>
    <li><a href="https://twitter.com/devgrzegorz" target="_blank"><i class="fab fa-twitter"></i></a></li>
    <li><a href="mailto:greg.jonca@gmail.com" target="_blank"><i class="far fa-envelope"></i></a></li>
  </ul>
  <script>
    // JavaScript to change the title every 3 seconds
    const titleElement = document.getElementById('title');
    const titles = ['engineer', 'traveller', 'bushcrafter', 'mountaineer', 'photographer', 'cyclist', 'runner', 'hiker', 'reader', 'learner', 'minimalist', 'doer'];
    let index = 0;

    setInterval(() => {
      titleElement.textContent = titles[index];
      index = (index + 1) % titles.length;
    }, 3000);
  </script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</body>
</html>