Merge pull request 'dev' (#1 ) from dev into master

Reviewed-on: #1
open new tab
2023-05-02 00:11:57 +00:00 · 2023-05-02 03:09:31 +03:00 · 2023-05-02 02:55:04 +03:00 · 2023-04-30 02:32:22 +03:00
31 changed files with 194 additions and 5 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,3 @@
+# Основной вебсайт
+
+![site](site.png)
--- a/css/Caveat-Regular.ttf
+++ b/css/Caveat-Regular.ttf
--- a/css/Whypo-rrey.ttf
+++ b/css/Whypo-rrey.ttf
--- a/css/style.css
+++ b/css/style.css
@ -3,6 +3,16 @@
    src: url(../css/ProblematicPiercer.ttf);
 }

+@font-face {
+    font-family: Caveat;
+    src: url(../css/Caveat-Regular.ttf);
+}
+
+@font-face {
+    font-family: Whypo-rrey;
+    src: url(../css/Whypo-rrey.ttf);
+}
+
 body {
    display: flex;
    align-items: center;
@ -16,6 +26,108 @@ body {
    font-family: ProblematicPiercer;
 }

-div.test {
-    font-size: 100px;
-}
+div.row {
+    display: flex;
+    flex-direction: row;
+    width: 1000px;
+    align-items: center;
+}
+
+div.photo {
+    border-radius: 300px;
+    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;
+    margin-right: 80px;
+}
+
+div.info {
+    display: flex;
+    width: 620px;
+    flex-direction: column;
+}
+
+div.title {
+    font-size: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+div.bio {
+    font-family: Caveat;
+    font-size: 25px;
+    text-align: justify;
+}
+
+div.social {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 100px;
+    width: 800px;
+}
+
+.social div {
+    width: 50px;
+    height: 50px;
+    background-size: contain;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+.social div:hover {
+    transform: scale(1.5);
+}
+
+.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); }
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+  
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    left: 50%;
+    margin-left: -60px;
+    color: #000000;
+    text-align: center;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    top: 110%;
+    opacity: 0;
+    transition: opacity 1s;
+    font-family: Whypo-rrey;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
--- a/images/social/blog-off.png
+++ b/images/social/blog-off.png
--- a/images/social/blog-on.png
+++ b/images/social/blog-on.png
--- a/images/social/email-off.png
+++ b/images/social/email-off.png
--- a/images/social/email-on.png
+++ b/images/social/email-on.png
--- a/images/social/facebook-off.png
+++ b/images/social/facebook-off.png
--- a/images/social/facebook-on.png
+++ b/images/social/facebook-on.png
--- a/images/social/ftp-off.png
+++ b/images/social/ftp-off.png
--- a/images/social/ftp-on.png
+++ b/images/social/ftp-on.png
--- a/images/social/git-off.png
+++ b/images/social/git-off.png
--- a/images/social/git-on.png
+++ b/images/social/git-on.png
--- a/images/social/github-off.png
+++ b/images/social/github-off.png
--- a/images/social/github-on.png
+++ b/images/social/github-on.png
--- a/images/social/instagram-off.png
+++ b/images/social/instagram-off.png
--- a/images/social/instagram-on.png
+++ b/images/social/instagram-on.png
--- a/images/social/linkedin-off.png
+++ b/images/social/linkedin-off.png
--- a/images/social/linkedin-on.png
+++ b/images/social/linkedin-on.png
--- a/images/social/linux-off.png
+++ b/images/social/linux-off.png
--- a/images/social/linux-on.png
+++ b/images/social/linux-on.png
--- a/images/social/mastodon-off.png
+++ b/images/social/mastodon-off.png
--- a/images/social/mastodon-on.png
+++ b/images/social/mastodon-on.png
--- a/images/social/telegram-off.png
+++ b/images/social/telegram-off.png
--- a/images/social/telegram-on.png
+++ b/images/social/telegram-on.png
--- a/images/social/twitter-off.png
+++ b/images/social/twitter-off.png
--- a/images/social/twitter-on.png
+++ b/images/social/twitter-on.png
--- a/index.html
+++ b/index.html
@ -11,6 +11,31 @@
        <script src="js/script.js"></script>
    </head>
    <body>
-        <div class="test">Page in development</div>
+        <div class="row">
+            <div class="photo"></div>
+            <div class="info">
+                <div class="title">About me</div>
+                <div class="bio">
+                    <p>Hi there!</p>
+                    <p>I'm Alexander Zhirov from Russia! I am engaged in development in C/C++ and D, study Linux, share and contribute to the spread of the philosophy of Open Source software.</p>
+                    <p>In my free time I read books, do music and sports.</p>
+                    <p>If you have any questions or suggestions, you can always contact me.</p>
+                </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>
    </body>
 </html>
--- a/js/script.js
+++ b/js/script.js
@ -1,3 +1,52 @@
 $(document).ready(function(){
-    $('body').delay(500).fadeTo(500, 1);
+    $(this).on("contextmenu", e => e.preventDefault());
+    $("body").delay(500).fadeTo(500, 1);
+
+    $(".mastodon").on( "click", function() {
+        window.open("https://fosstodon.org/@alexanderzhirov");
+    });
+
+    $(".twitter").on( "click", function() {
+        window.open("https://twitter.com/zhirofficial");
+    });
+
+    $(".linkedin").on( "click", function() {
+        window.open("https://www.linkedin.com/in/alexander-zhirov-34b6711a6");
+    });
+
+    $(".facebook").on( "click", function() {
+        window.open("https://www.facebook.com/azhirov1991");
+    });
+
+    $(".instagram").on( "click", function() {
+        window.open("https://www.instagram.com/alexanderzhirov");
+    });
+
+    $(".git").on( "click", function() {
+        window.open("https://git.zhirov.kz/alexander");
+    });
+
+    $(".github").on( "click", function() {
+        window.open("https://github.com/AlexanderZhirov");
+    });
+
+    $(".telegram").on( "click", function() {
+        window.open("https://t.me/alexanderzhirov");
+    });
+
+    $(".solus").on( "click", function() {
+        window.open("https://dev.getsol.us/p/alexanderzhirov");
+    });
+
+    $(".blog").on( "click", function() {
+        window.open("https://blog.zhirov.kz");
+    });
+
+    $(".ftp").on( "click", function() {
+        window.open("https://ftp.zhirov.kz");
+    });
+
+    $(".email").on( "click", function() {
+        window.open("");
+    });
 });
--- a/site.png
+++ b/site.png
Author	SHA1	Message	Date
Alexander Zhirov	8919e8f1a2	Merge pull request 'dev' (#1 ) from dev into master Reviewed-on: #1	2023-05-02 00:11:57 +00:00
Alexander Zhirov	ba6c53072b	open new tab	2023-05-02 03:09:31 +03:00
Alexander Zhirov	833cff3425	almost finished version	2023-05-02 02:55:04 +03:00
Alexander Zhirov	c286a55f8f	Блок "Обо мне"	2023-04-30 02:32:22 +03:00