better design and new font

assets/css/main.css

@@ -1,25 +1,32 @@
-@font-face {
+@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap");
-  font-family: 'Gotham';
-  src: url("../fonts/Gotham-Font/Gotham-Bold.otf");
-}
-
 * {
   margin: 0;
   padding: 0;
 }
 
 body {
-  font-family: 'Gotham', sans-serif;
+  font-family: 'Orbitron', sans-serif;
-  background-image: url("../images/background.png");
+  background-color: black;
   background-size: cover;
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   text-transform: uppercase;
+  font-style: italic;
+  text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
+  -webkit-animation-duration: 0.2s;
+          animation-duration: 0.2s;
+  -webkit-animation-name: textflicker;
+          animation-name: textflicker;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-direction: alternate;
+          animation-direction: alternate;
 }
 
-iframe {
+.name {
-  margin: 1.5% 1.5% 1.5% 1.5%;
+  color: white;
+  font-size: 8vh;
 }
 
 .socials {
@@ -40,7 +47,7 @@ iframe {
 }
 
 .socials a:hover {
-  color: #a865ff81;
+  color: #ffe66b;
 }
 
 .links {
@@ -61,14 +68,6 @@ a {
   height: 10vh;
 }
 
-.credits {
-  position: absolute;
-  left: 50%;
-  right: 25%;
-  bottom: 30px;
-  margin-left: -50px;
-}
-
 .creator {
   font-size: 2.5vh;
   color: white;
@@ -83,57 +82,28 @@ a {
   text-decoration: none;
   margin: 0;
   padding: 0;
-  color: #8445fa;
+  color: white;
 }
 
 .creator a:hover {
   color: #8445fa50;
 }
 
-.them {
+@-webkit-keyframes textflicker {
-  width: auto;
-  height: 16vh;
-  margin-left: -20px;
-}
-
-.floating {
-  -webkit-animation-name: floating;
-          animation-name: floating;
-  -webkit-animation-duration: 3s;
-          animation-duration: 3s;
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
-  -webkit-animation-timing-function: ease-in-out;
-          animation-timing-function: ease-in-out;
-}
-
-@-webkit-keyframes floating {
   from {
-    -webkit-transform: translate(0, 0px);
+    text-shadow: 1px 0 0 #3642ea, -2px 0 0 #fa6969;
-            transform: translate(0, 0px);
-  }
-  65% {
-    -webkit-transform: translate(0, 10px);
-            transform: translate(0, 10px);
   }
   to {
-    -webkit-transform: translate(0, 0px);
+    text-shadow: 2px 0.5px 2px #3642ea, -1px -0.5px 2px #fa6969;
-            transform: translate(0, 0px);
   }
 }
 
-@keyframes floating {
+@keyframes textflicker {
   from {
-    -webkit-transform: translate(0, 0px);
+    text-shadow: 1px 0 0 #3642ea, -2px 0 0 #fa6969;
-            transform: translate(0, 0px);
-  }
-  65% {
-    -webkit-transform: translate(0, 10px);
-            transform: translate(0, 10px);
   }
   to {
-    -webkit-transform: translate(0, 0px);
+    text-shadow: 2px 0.5px 2px #3642ea, -1px -0.5px 2px #fa6969;
-            transform: translate(0, 0px);
   }
 }
 /*# sourceMappingURL=main.css.map */

assets/css/main.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AAAA,UAAU;EACN,WAAW,EAAE,QAAQ;EACrB,GAAG,EAAE,2CAA2C;;;AAEpD,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CAAG;;AAEjB,AAAA,IAAI,CAAC;EACD,WAAW,EAAE,oBAAoB;EACjC,gBAAgB,EAAE,+BAA+B;EACjD,eAAe,EAAE,KAAK;EACtB,qBAAqB,EAAE,KAAK;EAC5B,mBAAmB,EAAE,MAAM;EAC3B,iBAAiB,EAAE,SAAS;EAC5B,cAAc,EAAE,SAAS;CAAG;;AAEhC,AAAA,MAAM,CAAC;EACH,MAAM,EAAE,mBAAmB;CAAG;;AAElC,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,IAAI,EAAE,CAAC;EACP,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,IAAI;EACpB,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,MAAM;EAClB,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,IAAI;EACX,cAAc,EAAE,SAAS;CAOA;;AAhB7B,AAWI,QAXI,CAWJ,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,OAAO;CAAG;;AAbzB,AAeI,QAfI,CAeJ,CAAC,AAAA,MAAM,CAAC;EACJ,KAAK,EAAE,SAAS;CAAG;;AAE3B,AAAA,MAAM,CAAC;EACH,OAAO,EAAE,YAAY;CAAG;;AAE5B,AAAA,CAAC,CAAC;EACE,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;CAAG;;AAErC,AAAA,KAAK,CAAC;EACF,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CAAG;;AAEnB,AAAA,QAAQ,CAAC;EACL,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,GAAG;EACT,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,KAAK;CAAG;;AAEzB,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,aAAa;EACtB,OAAO,EAAE,GAAG;EACZ,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;CAAG;;AAEf,AAAA,QAAQ,CAAC,CAAC,CAAC;EACP,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,KAAK,EAAE,OAAO;CAAG;;AAErB,AAAA,QAAQ,CAAC,CAAC,AAAA,MAAM,CAAC;EACb,KAAK,EAAE,SAAS;CAAG;;AAEvB,AAAA,KAAK,CAAC;EACF,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,KAAK;CAAG;;AAEzB,AAAA,SAAS,CAAC;EACN,cAAc,EAAE,QAAQ;EACxB,kBAAkB,EAAE,EAAE;EACtB,yBAAyB,EAAE,QAAQ;EACnC,yBAAyB,EAAE,WAAW;CAAG;;AAE7C,UAAU,CAAV,QAAU;EACN,IAAI;IACA,SAAS,EAAE,iBAAkB;;EACjC,GAAG;IACC,SAAS,EAAE,kBAAkB;;EACjC,EAAE;IACE,SAAS,EAAE,iBAAkB",
+    "mappings": "AAAA,OAAO,CAAC,qEAAI;AAEZ,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CAAG;;AAEjB,AAAA,IAAI,CAAC;EACD,WAAW,EAAE,sBAAsB;EACnC,gBAAgB,EAAE,KAAK;EACvB,eAAe,EAAE,KAAK;EACtB,qBAAqB,EAAE,KAAK;EAC5B,mBAAmB,EAAE,MAAM;EAC3B,iBAAiB,EAAE,SAAS;EAC5B,cAAc,EAAE,SAAS;EACzB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,sDAAsD;EACnE,kBAAkB,EAAE,IAAI;EACxB,cAAc,EAAE,WAAW;EAC3B,yBAAyB,EAAE,QAAQ;EACnC,mBAAmB,EAAE,SAAS;CAAG;;AAErC,AAAA,KAAK,CAAC;EACF,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,GAAG;CAAG;;AAErB,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,GAAG;EACd,IAAI,EAAE,CAAC;EACP,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,IAAI;EACpB,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,MAAM;EAClB,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,IAAI;EACX,cAAc,EAAE,SAAS;CAOF;;AAhB3B,AAWI,QAXI,CAWJ,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,OAAO;CAAG;;AAbzB,AAeI,QAfI,CAeJ,CAAC,AAAA,MAAM,CAAC;EACJ,KAAK,EAAE,OAAO;CAAG;;AAEzB,AAAA,MAAM,CAAC;EACH,OAAO,EAAE,YAAY;CAAG;;AAE5B,AAAA,CAAC,CAAC;EACE,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;CAAG;;AAErC,AAAA,KAAK,CAAC;EACF,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CAAG;;AAInB,AAAA,QAAQ,CAAC;EACL,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,aAAa;EACtB,OAAO,EAAE,GAAG;EACZ,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;CAAG;;AAEf,AAAA,QAAQ,CAAC,CAAC,CAAC;EACP,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,KAAK,EAAE,KAAK;CAAG;;AAEnB,AAAA,QAAQ,CAAC,CAAC,AAAA,MAAM,CAAC;EACb,KAAK,EAAE,SAAS;CAAG;;AAEvB,UAAU,CAAV,WAAU;EACR,IAAI;IACF,WAAW,EAAE,iCAAiC;;EAChD,EAAE;IACA,WAAW,EAAE,8CAA8C",
     "sources": [
         "main.sass"
     ],

assets/css/main.sass

@@ -1,22 +1,27 @@
-@font-face
+@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
-    font-family: 'Gotham'
-    src: url('../fonts/Gotham-Font/Gotham-Bold.otf')
 
 *
     margin: 0
     padding: 0
 
 body
-    font-family: 'Gotham', sans-serif
+    font-family: 'Orbitron', sans-serif;
-    background-image: url('../images/background.png')
+    background-color: black
     background-size: cover
     background-attachment: fixed
     background-position: center
     background-repeat: no-repeat
     text-transform: uppercase
+    font-style: italic
+    text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
+    animation-duration: 0.2s;
+    animation-name: textflicker;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
 
-iframe
+.name
-    margin: 1.5% 1.5% 1.5% 1.5%
+    color: white
+    font-size: 8vh
 
 .socials
     font-size: 3vh
@@ -34,7 +39,7 @@ iframe
         color: #ffffff
 
     a:hover
-        color: #a865ff81
+        color: #ffe66b
 
 .links
     display: inline-block
@@ -47,12 +52,7 @@ a
     width: auto
     height: 10vh
 
-.credits
+
-    position: absolute
-    left: 50%
-    right: 25%
-    bottom: 30px
-    margin-left: -50px
 
 .creator
     font-size: 2.5vh
@@ -67,26 +67,13 @@ a
     text-decoration: none
     margin: 0
     padding: 0
-    color: #8445fa
+    color: white
 
 .creator a:hover
-    color: #8445fa50
+    color: #ef486f
 
-.them
+@keyframes textflicker
-    width: auto
+  from
-    height: 16vh
+    text-shadow: 1px 0 0 #3642ea, -2px 0 0 #fa6969;
-    margin-left: -20px
+  to
-
+    text-shadow: 2px 0.5px 2px #3642ea, -1px -0.5px 2px #fa6969;
-.floating
-    animation-name: floating
-    animation-duration: 3s
-    animation-iteration-count: infinite
-    animation-timing-function: ease-in-out
-
-@keyframes floating
-    from
-        transform: translate(0,  0px)
-    65%
-        transform: translate(0, 10px)
-    to
-        transform: translate(0, -0px)

assets/fonts/Gotham-Font/freefontsfamily.com.txt

@@ -1 +0,0 @@
-You can download this font here: https://freefontsfamily.com

constants.js

@@ -1,11 +1,9 @@
 module.exports = {
+  name: 'ABISU',
   socials: {
-    discord: "https://discord.gg/eXST5gv",
+    bandcamp: "https://abisu.bandcamp.com/",
-    bandcamp: "https://sorsor.bandcamp.com",
+    twitter: "https://twitter.com/abisoos",
-    patreon: "https://patreon.com/sorsor",
+    soundcloud: "https://soundcloud.com/abisoos",
-    youtube: "https://youtube.com/sorsor",
+    spotify: "https://open.spotify.com/artist/4AjMDVVo5Hh1UJ5emUgX5s?si=Fii2vRh3TrGTpjTKMbuyhQ"
-    twitter: "https://twitter.com/YaiSor",
-    soundcloud: "https://soundcloud.com/yaisor",
-    spotify: "https://open.spotify.com/artist/2gR5b7EpjCvePrAZZ3KQPj"
   }
 };

server.js

@@ -60,39 +60,24 @@ module.exports = async => {
       social: [
         {
           name: "Twitter",
-          link: "sor.dog/twitter",
+          link: "abisu.net/twitter",
           character: breakSocials("Twitter")
         },
         {
           name: "Spotify",
-          link: "sor.dog/spotify",
+          link: "abisu.net/spotify",
           character: breakSocials("Spotify")
         },
         {
           name: "Soundcloud",
-          link: "sor.dog/soundcloud",
+          link: "abisu.net/soundcloud",
           character: breakSocials("Soundcloud")
         },
-        {
-          name: "Patreon",
-          link: "sor.dog/patreon",
-          character: breakSocials("Patreon")
-        },
         {
           name: "Bandcamp",
-          link: "sor.dog/bandcamp",
+          link: "abisu.net/bandcamp",
           character: breakSocials("Bandcamp")
         },
-        {
-          name: "Youtube",
-          link: "sor.dog/youtube",
-          character: breakSocials("Youtube")
-        },
-        {
-          name: "Discord",
-          link: "sor.dog/discord",
-          character: breakSocials("Discord")
-        }
       ]
     });
   });

views/index.hbs

@@ -1,13 +1,21 @@
 <div id="main">
+<svg class="large shape" viewBox="40 50 100 35">
+      <defs>
+        <linearGradient id="circleGradient" x1="10%" x2="100%" y1="70%" y2="10%">
+          <stop stop-color="#ffd1dc" offset="0%"/>
+          {{!-- <stop stop-color="#2a2c41" offset="30%"/> --}}
+          <stop stop-color="#0D0D0C" offset="80%"/>
+        </linearGradient>
+      </defs>
+      <circle cx="90" cy="55" r="5" fill-rule="evenodd" stroke-linecap="square" fill="url(#circleGradient)"/>
+      <circle cx="120" cy="50" r="28" fill-rule="evenodd" stroke-linecap="square" fill="url(#circleGradient)"/>
+      <circle cx="100" cy="70" r="15" fill-rule="evenodd" stroke-linecap="square" fill="url(#circleGradient)"/>
+    </svg>
 
   <section class="socials">
-
+  <h1 class="name">  {{name}}</h1>
-    <div class="floating">
+  <br>
-      <img class="them" src="./assets/images/them.png" alt="Sor's Icon" srcset="" />
+  <br>
-    </div>
-
-    <br />
-
     <div class="links">
       {{#each social}}
       <div id="{{name}}">
@@ -26,21 +34,8 @@
 
 </div>
 
-<iframe width="97%" height="20" scrolling="no" frameborder="no" allow="autoplay"
-  src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/723173407&color=%23a595ed&inverse=true&auto_play=false&show_user=true"></iframe>
-
-<div class="sor">
-
-  <div class="credits">
-
-    <img class="logo" src="./assets/images/sor_white.png" alt="Sor's Logo" />
-
-  </div>
-
-</div>
-
 <div class="creator">  
   <p>
-    <a href="https://werewolf.computer">hokkqi</a>
+    <a href="https://werewolf.computer">lio</a>
   </p>
 </div>

views/layouts/main.hbs

@@ -2,29 +2,35 @@
 <html lang="en">
 
 <head>
-  <title>sor | sor.dog</title>
+  <title>ABISU</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link rel="stylesheet" type="text/css" href="./assets/css/main.css">
+  <link rel="stylesheet" type="text/css" href="https://manekit.now.sh/assets/css/manekit.min.css">
 
-  <link rel="icon" type="image/png" href="/assets/images/them.png" sizes="32x32">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
-  <link rel="icon" type="image/png" href="/assets/images/them.png" sizes="96x96">
+
-  <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/them.png">
+  <script src="/assets/js/main.js"></script>
+
+
+  <link rel="icon" type="image/png" href="/assets/images/favi.jpg" sizes="32x32">
+  <link rel="icon" type="image/png" href="/assets/images/favi.jpg" sizes="96x96">
+  <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favi.jpg">
 
   <meta name="theme-color" content="#ffffff">
-  <meta property="og:title" content="sor">
+  <meta property="og:title" content="abisu">
   <meta property="og:type" content="website">
-  <meta property="og:url" content="https://sor.dog">
+  <meta property="og:url" content="https://abisu.net">
-  <meta property="og:description" content="your one-stop shop for all things sor">
+  <meta property="og:description" content="abisu">
-  <meta property="og:image" content="/assets/images/moon.png">
+  <meta property="og:image" content="/assets/images/favi.jpg">
 
-  <meta name="description" content="your one-stop shop for all things sor.">
+  <meta name="description" content="abisu">
-  <meta name="keywords" content="sor, music, commissions, producer">
+  <meta name="keywords" content="abisu, music">
 
   <meta name="twitter:card" content="summary">
-  <meta name="twitter:image" content="https://sor.dog/assets/images/moon.png">
+  <meta name="twitter:image" content="https://abisu.net/assets/images/favi.jpg">
-  <meta name="twitter:creator" content="@YaiSor">
+  <meta name="twitter:creator" content="@abisoos">
 
 </head>