index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AppData's website</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bulmaswatch/darkly/bulmaswatch.min.css">
    <script src="script.js"></script>
    <style>
      .box {
        padding: 10px;
      }
      #gohoki:hover {
        transform: rotate(360deg);
      }
      #gohoki {
        transition: transform .75s ease-in-out;
      }
    </style>
    <link rel="icon" type="image/x-icon" href="/img/gohoski.png">
  </head>
  <body>
    <section class="section">
      <div class="has-text-centered block">
        <h1 class="title">👋 Hello!</h1>
      </div>
      <figure class="image is-128x128 mx-auto">
        <img src="img/gohoski.png" class="is-rounded" id="gohoki">
      </figure><br>
      <div class="block has-text-centered">You just got to a website of a spaghetti coder!</div>
      <table class="table mx-auto">
        <tbody>
          <tr>
            <th>👤 Name</th>
            <td>Gleb</td>
          </tr>
          <tr>
            <th>👤 Aliases</th>
            <td>AppData, Gohoski</td>
          </tr>
          <tr>
            <th>♂️ Gender</th>
            <td>Male</td>
          </tr>
          <tr>
            <th>🎂 BD</th>
            <td>24th of September, 2009</td>
          </tr>
          <tr>
            <th>🏁 Nation</th>
            <td>🇷🇺 Russian (I am for Ukraine!)</td>
          </tr>
          <tr>
            <th>💠 Sexuality</th>
            <td>None (for now)</td>
          </tr>
          <tr>
            <th>🏁 Languages</th>
            <td>🇷🇺, 🇬🇧 (learning: 🇩🇪, 🇨🇳)</td>
          </tr>
          <tr>
            <th>💻 Programming languages</th>
            <td>JavaScript, C++, Java</td>
          </tr>
          <tr>
            <th>💻 OS</th>
            <td>Windows 10, Linux Mint</td>
          </tr>
        </tbody>
      </table>
      <div class="buttons is-centered">
        <a href="contact.html" class="button is-link mx-auto">📧 Contact me!</a>
      </div>
      <div class="block has-text-centered">Here are my projects:</div>
      <progress class="progress is-medium is-info"></progress>
      <div class="columns">
      </div>
    </section>
  </body>
</html>