тестирую

Reviewed-on: https://git.zhirov.kz/alexander/web-page/pulls/1

css/style.css

@@ -17,35 +17,40 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 100vh;
-    overflow: hidden;
+    /* min-height: 140vh; */
     flex-direction: column;
     color: #333333;
     margin: 0;
     opacity: 0;
     font-family: ProblematicPiercer;
+    cursor: default;
+    padding: 20px;
+    box-sizing: border-box;
 }
 
 div.row {
     display: flex;
     flex-direction: row;
-    width: 1000px;
+    width: 100%;
+    max-width: 1000px;
     align-items: center;
 }
 
 div.photo {
-    border-radius: 300px;
+    border-radius: 50%;
     box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
     background-image: url(../images/favicon.jpg);
     width: 300px;
     height: 300px;
-    background-size: contain;
+    background-size: cover;
+    background-position: center;
     margin-right: 80px;
 }
 
 div.info {
     display: flex;
-    width: 620px;
+    width: 100%;
+    max-width: 620px;
     flex-direction: column;
 }
 
@@ -62,55 +67,54 @@ div.bio {
     text-align: justify;
 }
 
+div.icons {
+    min-height: 400px;
+}
+
 div.social {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 100px;
-    width: 800px;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr); /* 5 столбцов для десктопа */
+    gap: 60px;
+    justify-items: center;
+    margin-top: 50px;
+    width: 100%;
+    max-width: 600px;
 }
 
 .social div {
     width: 50px;
     height: 50px;
-    background-size: contain;
+    background-repeat: no-repeat;
     cursor: pointer;
-    transition: 0.2s;
+    transition: transform 0.2s;
+    background-size: 100px auto;
 }
 
 .social div:hover {
     transform: scale(1.5);
+    background-position: -50px 0;
 }
 
-.mastodon { background-image: url(../images/social/mastodon-off.png); }
-.mastodon:hover { background-image: url(../images/social/mastodon-on.png); }
-.twitter { background-image: url(../images/social/twitter-off.png); }
-.twitter:hover { background-image: url(../images/social/twitter-on.png); }
-.linkedin { background-image: url(../images/social/linkedin-off.png); }
-.linkedin:hover { background-image: url(../images/social/linkedin-on.png); }
-.facebook { background-image: url(../images/social/facebook-off.png); }
-.facebook:hover { background-image: url(../images/social/facebook-on.png); }
-.instagram { background-image: url(../images/social/instagram-off.png); }
-.instagram:hover { background-image: url(../images/social/instagram-on.png); }
-.git { background-image: url(../images/social/git-off.png); }
-.git:hover { background-image: url(../images/social/git-on.png); }
-.github { background-image: url(../images/social/github-off.png); }
-.github:hover { background-image: url(../images/social/github-on.png); }
-.telegram { background-image: url(../images/social/telegram-off.png); }
-.telegram:hover { background-image: url(../images/social/telegram-on.png); }
-.solus { background-image: url(../images/social/linux-off.png); }
-.solus:hover { background-image: url(../images/social/linux-on.png); }
-.blog { background-image: url(../images/social/blog-off.png); }
-.blog:hover { background-image: url(../images/social/blog-on.png); }
-.ftp { background-image: url(../images/social/ftp-off.png); }
-.ftp:hover { background-image: url(../images/social/ftp-on.png); }
-.email { background-image: url(../images/social/email-off.png); }
-.email:hover { background-image: url(../images/social/email-on.png); }
+.mastodon { background-image: url(../images/social/mastodon.png); }
+.twitter { background-image: url(../images/social/twitter.png); }
+.linkedin { background-image: url(../images/social/linkedin.png); }
+.facebook { background-image: url(../images/social/facebook.png); }
+.instagram { background-image: url(../images/social/instagram.png); }
+.git { background-image: url(../images/social/git.png); }
+.github { background-image: url(../images/social/github.png); }
+.telegram { background-image: url(../images/social/telegram.png); }
+.solus { background-image: url(../images/social/linux.png); }
+.ftp { background-image: url(../images/social/ftp.png); }
+.band { background-image: url(../images/social/band.png); }
+.soundcloud { background-image: url(../images/social/soundcloud.png); }
+.matrix { background-image: url(../images/social/matrix.png); }
+.gallery { background-image: url(../images/social/gallery.png); }
 
 .tooltip {
     position: relative;
     display: inline-block;
 }
-  
+
 .tooltip .tooltiptext {
     visibility: hidden;
     width: 120px;
@@ -121,7 +125,7 @@ div.social {
     padding: 5px 0;
     position: absolute;
     z-index: 1;
-    top: 110%;
+    top: 100%;
     opacity: 0;
     transition: opacity 1s;
     font-family: Whypo-rrey;
@@ -131,3 +135,68 @@ div.social {
     visibility: visible;
     opacity: 1;
 }
+
+/* Медиа-запросы для мобильных устройств */
+@media screen and (max-width: 768px) {
+    body {
+        padding: 10px;
+        /* min-height: 170vh; */
+    }
+
+    div.row {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    div.photo {
+        width: 150px;
+        height: 150px;
+        margin-right: 0;
+        margin-bottom: 20px;
+    }
+
+    div.info {
+        max-width: 100%;
+        padding: 0 10px;
+    }
+
+    div.title {
+        font-size: 30px;
+    }
+
+    div.bio {
+        font-size: 18px;
+    }
+
+    div.icons {
+        min-height: 150%;
+    }
+
+    div.social {
+        grid-template-columns: repeat(3, 1fr); /* 3 столбца для мобильных */
+        gap: 60px;
+        margin-top: 30px;
+    }
+
+    .social div {
+        width: 40px;
+        height: 40px;
+        background-size: 80px auto;
+    }
+
+    .social div:hover {
+        background-position: -40px 0;
+    }
+
+    .tooltip .tooltiptext {
+        width: 100px;
+        margin-left: -50px;
+        font-size: 14px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    div.social {
+        grid-template-columns: repeat(2, 1fr); /* 2 столбца для очень маленьких экранов */
+    }
+}

index.html

@@ -2,6 +2,7 @@
 <html>
     <head>
         <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Alexander Zhirov</title>
         <link href="css/style.css" rel="stylesheet">
         <link href="css/jquery-ui.css" rel="stylesheet">
@@ -10,7 +11,7 @@
         <script src="js/jquery-ui.min.js"></script>
         <script src="js/script.js"></script>
     </head>
-    <body>
+    <body onselectstart="return false" onmousedown="return false">
         <div class="row">
             <div class="photo"></div>
             <div class="info">
@@ -23,19 +24,23 @@
                 </div>
             </div>
         </div>
-        <div class="row social">
-            <div class="tooltip mastodon"><span class="tooltiptext">Mastodon</span></div>
-            <div class="tooltip twitter"><span class="tooltiptext">Twitter</span></div>
-            <div class="tooltip linkedin"><span class="tooltiptext">LinkedIn</span></div>
-            <div class="tooltip facebook"><span class="tooltiptext">Facebook</span></div>
-            <div class="tooltip instagram"><span class="tooltiptext">Instagram</span></div>
-            <div class="tooltip telegram"><span class="tooltiptext">Telegram</span></div>
-            <div class="tooltip git"><span class="tooltiptext">Git</span></div>
-            <div class="tooltip github"><span class="tooltiptext">GitHub</span></div>
-            <div class="tooltip solus"><span class="tooltiptext">Solus Linux</span></div>
-            <!-- <div class="tooltip blog"><span class="tooltiptext">Blog</span></div> -->
-            <!-- <div class="tooltip ftp"><span class="tooltiptext">FTP</span></div> -->
-            <!-- <div class="tooltip email"><span class="tooltiptext">Email</span></div> -->
+        <div class="icons">
+            <div class="row social">
+                <div class="tooltip mastodon"><span class="tooltiptext">Mastodon</span></div>
+                <div class="tooltip twitter"><span class="tooltiptext">Twitter</span></div>
+                <div class="tooltip linkedin"><span class="tooltiptext">LinkedIn</span></div>
+                <div class="tooltip facebook"><span class="tooltiptext">Facebook</span></div>
+                <div class="tooltip instagram"><span class="tooltiptext">Instagram</span></div>
+                <div class="tooltip matrix"><span class="tooltiptext">Matrix</span></div>
+                <div class="tooltip telegram"><span class="tooltiptext">Telegram</span></div>
+                <div class="tooltip git"><span class="tooltiptext">Git</span></div>
+                <div class="tooltip github"><span class="tooltiptext">GitHub</span></div>
+                <div class="tooltip solus"><span class="tooltiptext">Solus Linux</span></div>
+                <div class="tooltip ftp"><span class="tooltiptext">FTP</span></div>
+                <div class="tooltip band"><span class="tooltiptext">Band</span></div>
+                <div class="tooltip soundcloud"><span class="tooltiptext">Soundcloud</span></div>
+                <div class="tooltip gallery"><span class="tooltiptext">Gallery</span></div>
+            </div>
         </div>
     </body>
 </html>

js/script.js

@@ -46,7 +46,23 @@ $(document).ready(function(){
         window.open("https://ftp.zhirov.kz");
     });
 
+    $(".band").on( "click", function() {
+        window.open("https://www.realrocks.ru/formaldehyde");
+    });
+
+    $(".soundcloud").on( "click", function() {
+        window.open("https://soundcloud.com/alexanderzhirov");
+    });
+
     $(".email").on( "click", function() {
         window.open("");
     });
+
+    $(".matrix").on( "click", function() {
+        window.open("https://matrix.to/#/@alexanderzhirov:matrix.org");
+    });
+
+    $(".gallery").on( "click", function() {
+        window.open("https://piwigo.zhirov.kz");
+    });
 });