better responsivity, fix spotify link, replace X link

ondrejhonus · Oct 13, 2024 · 87e1952 · 87e1952
1 parent 353a496
commit 87e1952
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
   <meta property="og:description" content="Links to social medias of Ondřej Honus" />
   <meta name="twitter:title" content="Ondřej Honus's socials" />
   <meta name="twitter:description" content="Social media links of Ondřej Honus" />
-  <!--EOSOL-->
+  <!--EndOfSOL-->
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Home</title>
   <link rel="icon" href="img/logo.png" />
@@ -31,18 +31,19 @@ <h1 class="is-size-1 has-text-weight-bold">Ondřej Honus</h1>
         <button class="button" onclick="window.open('https://github.com/ondrejhonus/', '_blank')">
           <p class="is-size-4">Github</p>
         </button>
-        <button class="button" onclick="window.open('https://https://www.instagram.com/ondrej.honus/', '_blank')">
-          <p class="is-size-4">Instagram</p>
+        <button class="button" onclick="window.open('https://qwerticek.itch.io/', '_blank')">
+          <p class="is-size-4">itch.io</p>
         </button>
-        <button class="button" onclick="window.open('https://https://open.spotify.com/user/ondrasihonda/', '_blank')">
+        <button class="button" onclick="window.open('https://open.spotify.com/user/ondrasihonda/', '_blank')">
           <p class="is-size-4">Spotify</p>
         </button>
-        <button class="button" onclick="window.open('https://x.com/0ndra_honuz', '_blank')">
-          <p class="is-size-4">Twitter</p>
+        <button class="button" onclick="window.open('https://instagram.com/ondrej.honus/', '_blank')">
+          <p class="is-size-4">Instagram</p>
         </button>
-        <button class="button" onclick="window.open('https://qwerticek.itch.io/', '_blank')">
-          <p class="is-size-4">itch.io</p>
+        <button class="button" onclick="window.open('https://steamcommunity.com/id/qwerticek', '_blank')">
+          <p class="is-size-4">Steam</p>
         </button>
+
       </div>
     </div>
     <div class="scroll-down">
@@ -52,8 +53,8 @@ <h1 class="is-size-1 has-text-weight-bold">Ondřej Honus</h1>
       <h2 class="is-size-2 has-text-weight-bold about-title">About me</h2>
       <div class="about-text is-size-4">
         <p>Hi, I'm Ondřej Honus, a student and a developer from the Czech Republic.<br>
-          I'm interested in programming, web design and music.<br>
-          I'm currently learning C and JS.</p>
+          I'm interested in programming, game development, web applications and music.<br>
+          I'm currently learning C, JavaScript(+ libraries) and Godot.</p>
         <br>
         <p id="email">Email me on </p>
         <p>You can also support me on <a href="https://www.buymeacoffee.com/honus" target="_blank">buymeacoffee.com</a>
@@ -62,7 +63,7 @@ <h2 class="is-size-2 has-text-weight-bold about-title">About me</h2>
     </div>
     <div class="width-div">
       <div class="link-buttons-2" id="projects">
-        <h2 class="is-size-2 has-text-weight-bold mb-5">Projects that I made</h2>
+        <h2 class="is-size-2 has-text-weight-bold mb-5">Some projects that I made</h2>
         <button class="button button-bottom" onclick="window.open('https://paint.ondrejhonus.com/', '_blank')">
           <p class="is-size-4">PaintJS</p>
           <i class="fa-solid fa-paintbrush button-icon"></i>
@@ -92,8 +93,7 @@ <h2 class="is-size-2 has-text-weight-bold mb-5">Projects that I made</h2>
           <p class="is-size-4">Flappy plane</p>
           <i class="fa-solid fa-plane button-icon"></i>
         </button>
-        <button class="button button-bottom"
-          onclick="window.open('https://qr.ondrejhonus.com/', '_blank')">
+        <button class="button button-bottom" onclick="window.open('https://qr.ondrejhonus.com/', '_blank')">
           <p class="is-size-4">QR code gen</p>
           <i class="fa-solid fa-qrcode button-icon"></i>
         </button>

diff --git a/style.css b/style.css
@@ -30,16 +30,21 @@ main{
 }
 
 .width-div {
-  width: 100%;
+  width: 100vw;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .link-buttons {
-  width: 50%;
+  width: 40%;
 }
 
+@media only screen and (max-width: 520px) {
+  .link-buttons {
+    width: 100%;
+  }
+}
 .link-buttons-2 {
   width: 60%;
 }
@@ -103,7 +108,7 @@ button{
     flex-direction: column;
   }
   button{
-    min-width: 10em;
+    min-width: 20em;
   }
   .button-bottom {
     min-width: 14em;