inital release

public/assets/mike-czyz-public.asc

@@ -0,0 +1,52 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+mQINBGL7npwBEAC6LJJGexQ9uvmBLGYROG3iKt1SQIx/p0y+q8N15TRRcHVepLU3
+lzaikwYtAGra+qCL17O5AOZ+2jbwLrozLdvNEUYJV0GdLZ6/plTiGu9gn+DS3/yR
+Wv2SE8pMyKFSf0XZHWgDzCDYYXD0g3hf3H0z3cv+4N0P9h9977Jaw3IV6hn65Nv+
+gkjTVeLyEH62qNLlnrJ+dHKAYmQP0oHs1oBigKazDTw9nQYs0e4hefUloqxaFCBg
+vOyxy4i8rlkeapSOMNBrj7OCseDXknmu99MuQkKdNM63yrzzlm8iXG2+FPanDZ0R
+b9/VwGe1PTHcaLV7Kyp+UR68NYZJcsAd/KObXuE8vc84kq6ODnppTcQl2IHJP9+L
+J1BFkF+QFlU/UgNcnxd1r1KrFWBNshQG66NePpA9ppB39qGsaJTNALBBPMC2C42r
+4v7Bir16hKqEM2etI0aFMBesY346dQEd7O6NdF+WEZcnpSJTLznzX11bU4LOEx0j
+o9p9ydNQNAIN7sJz+CJH40QHs+WtkAqwjfCgzlVAlfZgc8AA0Pu1ZC2+PpnCxEqS
+nYT0V15PNVS5Al0wlfxQZt287YxtJkc6YBBAaVlPU6dGKJwqLt9zbDmhK3ZruF1X
+yP6hvFTfujS0gJrkuTp6CGg6c1VbQDuul0WNc3KWwSDgghqSkFWKg+saTwARAQAB
+tBxNaWNoYWVsIEN6eXogPG1pa2VAY3p5ei5pY3U+iQJUBBMBCAA+FiEEcQ00B9N/
+8SOLhXD6eNSCmkd9qyUFAmL7npwCGwMFCQPCZwAFCwkIBwIGFQoJCAsCBBYCAwEC
+HgECF4AACgkQeNSCmkd9qyXfAQ/+JrZGJ2YBaLoV0T+LFG54V+UOsqz0pKGckQkt
+MjSqyXTi1XW13EhkG5DRm4F9zjntAT2X8KOEZqXb0snPj3ifx+2YF/IomhnWn4rJ
+VXqMBWZ5HsQaUEmKyovN+ogejfN3ho3FPBBtPv5WCuS74EyVFiRjpLUoD9GOftu3
+gGhCpEkNjVhIEDn4wcgi7zvT5pVaMil5QqNaGF9kB0YndfigYgrspugfLukEbIqp
+j4sfLs4UFMBO8yPp8JOk5XFw70wu5+4fZPqDwYUYG9f/exlIUuy1pLpkG+RWoaa6
+KOruGvjJPTr/6JkRlAOiSJRrkWW+2lrizi4uD6Lia315IUNxjqHdiojTqkDyFUEH
+cNCphzu/b8VlsP7FHbu68+eoBaD1kqRlEYpEevTGgwSnzkrHHdKcDKnjj+WsAot1
+2xLC0clEQnYDLie7Fcag/EMgDOFnMRubRSEjnGMJF5dhXd/muDYRCWryGENbkhQv
+8XLqupDBAGT35iyA7RA7eoyFvFf3P1rr52Y0goOBSr39b/FTO+xvzjWmUZ2DHvP4
+BSwGgQKZmXW58PHfxews8xQJCdLeEK1MzcZNRzypEAOJvKSOW18tnVYYtubKWlY+
+8TcccmjZlqecXUtvBd3KfXCi5NFNU3KtCr+kXflSKBW/ffU+8lp9gIS+8p4erQuS
+t0xLYYS5Ag0EYvuenAEQAOQqMl52C8Dk+5jllGpSUYs1CwzHgxnhb5ffy5aJYwnj
+q145F0WQdcOsOUtekTd6Q9mvs/UcnjcGntIu6wPub3Yr5+3Rm4yajxDrA93MRv/m
+HtFXzwdsZMxCmmHygQGWoSHLd5weD49sANbmNzVyNJN/4/SUlNipmVUsfnFksXbQ
+aJv59fmXxhW5KhrotdizpR2T5VfelnJc0RKbx3i7H9Idvs4mCARyGoI7gWoNs5mh
+/kJMHnTiVJ7EiKshVyjUVN+QtbGwsqZE0kYTCE4oGW41S1lTOQhMRQ3sx/yjIOAz
+YCS320GEQkE74FQNqNXEkT2KJt1BlYwYXjtHMdxtGaiuWQ8CXshjvhHukoSr5mXb
+gTxWXq6EY9NQumoecfCo9un2f3b+p+CNbIBah12yaf1u0oSiDigbDCPkauYJU8Bw
+pVywWO6AfRXyK0jr3CH8zjs0/L446yfWZ7pqYefPX+EsIi3TkS3Uy+zHh8FDW+ae
+tk0c8YyC1mght1YWsugtx/p3RWe4zH6UTqV06M6BF/eDd80KdkenC5A0p51iKW82
+zZ3GJZ3Em4wzmZYd6VNy4mt9w+LYTaayFTjPwDsYNsEdv4cIdBZ02Sm51MfeH9T5
+SU89yCTHP92Ai3m+SdeFPR/IcZJ3zBUB4p1nAV5Oq/VYjcAsH31FrtGtQOlY7nSR
+ABEBAAGJAjwEGAEIACYWIQRxDTQH03/xI4uFcPp41IKaR32rJQUCYvuenAIbDAUJ
+A8JnAAAKCRB41IKaR32rJb+BEACyXUlDHXML3JuSIPn0iGZR2xE8slm6MvjxP+OR
+s3P1rHPGVLsAev2ed8cJi9r7VEU6zRO97KbAoK+YOiSKj/ZY1wqGGSqVJX/adHYk
+MYByqu+ZP9N38ObRQnqzF5dLr43dQmUEKjuVoA79oBRfczBjQXfN0boFRJzcBPqm
+gRr97c7UedM6qLJ9+xMnP8RumKnNK/Sf4CbUqWJa69IP50wZUMJHGCcm8AGBwPFe
+HOvs1Xd1aseKmhVocwVVhz676bT8WDHBnkKU4k8CdmKirUtyvNnvE8RR+TW0IVO5
+ynR9iPQX2IK56q/Mev4D7n39pWb2Pv5hPWpE5H+BDPo5mZJEcf7yNUeNCYUvK0MV
+vEJ2dhH1s8dhkosb18EgGyw7H921WrXWG8V3lW9cOthMNAaY18lp7hSnIhFLB/Bb
+CLWAENwmM7QZlnVhsnHYOzrgDQIMW5lIYZqwdWjtqXZJXGhqb6z2aw5Bnuhyv4c0
+mtimmF0jC+OyKG056+M6D2cGvZu/f939ENfNHjxRTST/Acsy91NUOKqw+GIlfwnI
+4FPuafxgEielHJPCwPJJPKwJEiJUGV906K210uDImJO5/4b/LN7qxH5cer3+SFLB
+CUoQAFNBeQLYiGcGDKRtCu/VEDK7TxOn3xcNo3Bal77SWCKL2ZKmwkR1ME0Wgk4l
+V6UXAg==
+=WQk6
+-----END PGP PUBLIC KEY BLOCK-----

public/index.html

@@ -44,9 +44,14 @@
       <div class="page">
         <h1>Hi, I'm Mike 👋🏻 👨🏻‍💻</h1>
         
-        <p>I'm a student and a frontend developer creating websites in many technologies and frameworks. I also want to get closer to the metal 🔨 so I create software in C++, C# and Python. Electron is terrifying me :electron:.</p>
+        <div class="bio">
+          <div>
+            <p>I'm a student and a frontend developer creating websites in many technologies and frameworks. I also want to get closer to the metal 🔨 so I create software in C++, C# and Python. Electron is terrifying me ⚛.</p>
             <p>I built a <a href="https://github.com/eRgo35/Project-TSI">Web App</a> using Angular Material framework, a simple <a href="https://github.com/eRgo35/Server-Manager">Server Manager</a> program for Windows and much more! I'm also a co-author of a Discord <a href="https://github.com/HiveMindStudios/MelvinJS">multipurpose bot</a> written in JavaScript.</p> 
             <p>I'm having a lot of fun with the latest technologies, mainly Cryptocurrencies 💰 and Artificial Inteligence 👁️.</p>
+          </div>
+          <img src="assets/mike-czyz.webp" class="avatar" width="2.5in" height="2.5in"/>
+        </div>
         
         <h2>Find Mike around the web 🌎:</h2>
         <ul>
@@ -57,6 +62,28 @@
         </ul>
 
         <p>Psst! You can also take a look at my <a href="https://github.com/eRgo35/dots">dotfiles</a> and find my latest rice 🍚.</p>
+        
+        <p>[📎 <a href="assets/resume.pdf"">resume</a>] [📧 <a href="mailto:mike@czyz.icu?subject=Hi">contact</a>]</p>
+        
+        <div class="footer">
+          <div class="copyright">
+            Copyright &copy; <span id="year">2023</span> All rights reserved
           </div>
+          <div class="gpg">
+            🔑 
+            <a href="assets/mike-czyz-public.asc" class="pgp-key">
+              <span>710D</span>
+              <span>3407</span>
+              <span>D37F</span>
+              <span>F123</span>
+            </a>
+          </div>
+        </div>
+      </div>
+      <script>
+        window.onload = () => {
+          document.querySelector("#year").innerHTML = new Date().getFullYear();
+        };
+      </script>
   </body>
 </html>

public/manifest.json

@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#363a4f",
-  "background_color": "#ffffff"
+  "background_color": "#24273a"
 }

public/styles.css

@@ -1,13 +1,27 @@
 @import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap');
 
+::selection {
+  background-color: #6e738d;
+}
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+    transform: scale(97.5%);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(100%);
+  }
+}
+
 html, body {
   margin: 0;
   height: 100vh;
   background-color: #24273a;
   color: #cad3f5;
-  display: flex;
+  display: grid;
-  justify-content: center;
+  place-items: center;
-  align-items: center;
   font-family: 'Schibsted Grotesk', sans-serif;
 }
 
@@ -18,8 +32,122 @@ html, body {
   height: 11in;
   background-color: #363a4f;
   padding: 0.5in;
+  position: relative;
+  animation: 0.4s ease-out 0s 1 fadein;
 }
 
 a {
   color: #7dc4e4;
+  transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  color: #8aadf4;
+  text-decoration: underline;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0.5in;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 0.5in;
+  width: calc(100% - 1in);
+}
+
+.copyright {
+  text-align: left;
+}
+
+.gpg {
+  text-align: right;
+}
+
+.bio {
+  text-align: justify;
+  display: grid;
+  grid-template-columns: 1fr 2.5in;
+  column-gap: 0.5in;
+}
+
+.avatar {
+  width: 2.5in;
+  height: 2.5in;
+  border-radius: 100%;
+  pointer-events: none;
+}
+
+.pgp-key:hover, .gpg-key:active, .gpg-key:focus {
+  text-decoration: none;
+  transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out;
+}
+
+.pgp-key:hover span, .gpg-key:active span, .gpg-key:focus span {
+  text-decoration: underline;
+  transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out;
+}
+
+@media only screen and (min-width: 768px) and (max-width: 900px) {
+  /* tablets and desktop */
+  .page {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0.25in;
+    box-shadow: none;
+  }
+
+  .footer {
+    margin-top: 0.25in;
+    grid-template-rows: none;
+    grid-template-columns: auto;
+  }
+
+  .copyright {
+    text-align: center;
+  }
+
+  .gpg {
+    text-align: center;
+    grid-row: 1;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  /* phones */
+  .page {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0.25in;
+    box-shadow: none;
+  }
+
+  .bio {
+    grid-template-columns: none;
+    grid-template-rows: 2.5in 1fr;
+    place-items: center;
+  }
+
+  .avatar {
+    grid-row: 1;
+  }
+
+  .footer {
+    margin-top: 0.25in;
+    position: static;
+    grid-template-rows: none;
+    grid-template-columns: auto;
+    width: 100%;
+  }
+
+  .copyright {
+    text-align: center;
+  }
+
+  .gpg {
+    text-align: center;
+    grid-row: 1;
+  }
 }