Deploy k4ustu3h.cf to github.com/k4ustu3h/gitfolio.git:gh-pages

index.css

@@ -1,55 +1,17 @@
-@charset "UTF-8";
-
-@font-face {
-  font-family: "Manrope";
-  src: url("/assets/fonts/web/Manrope-Bold.woff2") format("woff2"),
-    url("/assets/fonts/otf/Manrope-Bold.otf") format("opentype");
-  font-style: normal;
-  font-weight: 700;
-}
-@font-face {
-  font-family: "Manrope";
-  src: url("/assets/fonts/web/Manrope-SemiBold.woff2") format("woff2"),
-    url("/assets/fonts/otf/Manrope-SemiBold.otf") format("opentype");
-  font-style: normal;
-  font-weight: 600;
-}
-@font-face {
-  font-family: "Manrope";
-  src: url("/assets/fonts/web/Manrope-Medium.woff2") format("woff2"),
-    url("/assets/fonts/otf/Manrope-Medium.otf") format("opentype");
-  font-style: normal;
-  font-weight: 500;
-}
-@font-face {
-  font-family: "Manrope";
-  src: url("/assets/fonts/web/Manrope-Regular.woff2") format("woff2"),
-    url("/assets/fonts/otf/Manrope-Regular.otf") format("opentype");
-  font-style: normal;
-  font-weight: 400;
-}
-@font-face {
-  font-family: "Manrope";
-  src: url("/assets/fonts/web/Manrope-Light.woff2") format("woff2"),
-    url("/assets/fonts/otf/Manrope-Light.otf") format("opentype");
-  font-style: normal;
-  font-weight: 300;
-}
-
 body {
   align-items: center;
   background: var(--bg-color);
   color: var(--text-color);
   font-family: "Manrope", sans-serif;
+  font-feature-settings: "calt", "liga";
   margin: 0%;
   max-width: 100vw;
   overflow-x: hidden;
   padding: 0%;
   width: 100vw;
-  font-feature-settings: "calt", "liga";
 }
 
-#profile {
+.profile {
   background: var(--background-image) center center;
   background-repeat: no-repeat;
   background-size: cover !important;
@@ -64,7 +26,7 @@ body {
   width: 24vw;
 }
 
-#display {
+.display {
   display: inline-block;
   height: 92vh;
   padding: 4vh 3vw;
@@ -72,7 +34,7 @@ body {
   width: 64vw;
 }
 
-#display h1 {
+.display h1 {
   color: var(--text-color);
   font-family: "Asap", sans-serif;
   font-size: 50px;
@@ -84,65 +46,30 @@ body {
   width: 18px;
 }
 
-#background_overlay {
+.footer {
-  height: 55vh;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100vw;
-  z-index: -1;
-}
-
-#background {
-  background-repeat: no-repeat !important;
-  background-size: cover !important;
-  height: 55vh;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100vw;
-  z-index: -2;
-}
-
-#header {
-  padding: 3vh 0px;
-  position: absolute;
-  text-align: right;
-  width: 63vw;
-}
-
-#header a {
-  color: var(--text-color);
-  font-weight: bold;
-  margin-left: 4vw;
-  text-decoration: none;
-}
-
-#footer {
   padding: 8vh 0px;
   text-align: center;
   width: 100%;
 }
 
-#footer a {
+.footer a {
   color: var(--text-color) !important;
   font-family: "Manrope", sans-serif;
   font-weight: bold;
   text-decoration: none;
 }
 
-#profile_img {
+.profile_img {
-  background: var(--gradient);
-  transition: background 0.5s ease;
-  background-size: 300% 300%;
   animation: grad 8s ease infinite;
-  -webkit-background-clip: text;
+  background: var(--gradient);
-  font-size: 128px;
+  background-size: 300% 300%;
   font-family: "Asap Condensed", sans-serif;
-  -webkit-text-fill-color: transparent;
+  font-size: 128px;
-
   height: 180px;
+  transition: background 0.5s ease;
   width: 180px;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 @keyframes grad {
@@ -157,7 +84,7 @@ body {
   }
 }
 
-#profile div {
+.profile div {
   font-weight: bold;
   margin: 1.5vh 0px;
 }
@@ -240,8 +167,8 @@ body {
 }
 
 .projects section {
-  border-radius: 5px;
   border: 1px solid rgb(0, 0, 0, 0.08);
+  border-radius: 5px;
   box-shadow: 0px 0px 0px rgb(0, 0, 0, 0);
   color: var(--text-color);
   display: inline-block;
@@ -312,7 +239,7 @@ body {
 }
 
 @media (max-width: 800px) {
-  #profile {
+  .profile {
     height: 60vh;
     padding: 4vh 5vw;
     position: relative;
@@ -320,23 +247,23 @@ body {
     width: 90vw;
   }
 
-  #display {
+  .display {
     display: inline-block;
     height: auto;
-    padding-left: 5vw;
     padding: 4vh 5vw;
+    padding-left: 5vw;
     width: 90vw;
   }
 
-  #profile_img {
+  .profile_img {
-    margin: 0px auto !important;
-    background: var(--gradient);
-    transition: background 0.5s ease;
-    background-size: 300% 300%;
     animation: grad 8s ease infinite;
-    -webkit-background-clip: text;
+    background: var(--gradient);
-    font-size: 128px;
+    background-size: 300% 300%;
     font-family: "Asap Condensed", sans-serif;
+    font-size: 128px;
+    margin: 0px auto !important;
+    transition: background 0.5s ease;
+    -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
 

index.html

@@ -6,17 +6,21 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <meta name="p:domain_verify" content="888d983503e053f3db87d36354df7eef" />
     <title>k4ustu3h</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Asap|Asap+Condensed&amp;display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://github.com/sharanda/manrope/raw/master/fonts/web/index.css"
+      rel="stylesheet"
+    />
+    <script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
     <script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
     <script
       src="https://code.jquery.com/jquery-3.4.1.min.js"
       integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
       crossorigin="anonymous"
     ></script>
-    <link
-      href="https://fonts.googleapis.com/css?family=Asap|Asap+Condensed&amp;display=swap"
-      rel="stylesheet"
-    />
-    <script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
     <link rel="stylesheet" href="index.css" />
     <link
       rel="icon"
@@ -43,9 +47,9 @@
   </head>
 
   <body>
-    <div id="profile">
+    <div class="profile">
-      <div id="profile_img">
+      <div class="profile_img">
-        <span id="status">K_</span>
+        <span>K_</span>
       </div>
       <div id="username">
         <span id="text" style="display:block;"></span>
@@ -168,7 +172,7 @@
         </div>
       </div>
     </div>
-    <div id="display">
+    <div class="display">
       <div id="work">
         <h1>Work.</h1>
         <div class="projects" id="work_section">
@@ -302,7 +306,7 @@
           </a>
         </div>
       </div>
-      <div id="footer">
+      <div class="footer">
         <a
           href="https://github.com/k4ustu3h/gitfolio#acknowledgments"
           target="_blank"