neon tweaks and biome css enable rules

Xanazf · Oct 21, 2024 · 98f8d31 · 98f8d31
1 parent 0a70d63
commit 98f8d31
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 18 deletions.
diff --git a/biome.json b/biome.json
@@ -42,6 +42,19 @@
       "attributePosition": "multiline"
     }
   },
+  "css": {
+    "parser": {
+      "cssModules": true
+    },
+    "formatter": {
+      "enabled": true,
+      "indentStyle": "space",
+      "lineWidth": 66
+    },
+    "linter": {
+      "enabled": true
+    }
+  },
   "overrides": [
     {
       "include": [

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -13,8 +13,8 @@ import PFP from "@public/pfp.png";
         <h1>Hi, I'm Xan</h1>
       </section>
       <section class="main-content">
-        <p>My name is Oleksandr, but I go by Xanazf online. I'm a full stack web developer and designer living Kyiv, Ukraine.</p>
-        <p>Currently, I work as a freelance web techie, which basically means I do everything web related. My main focus and interest lies in infrastructure design and color theory, with secondary interest in cloud technologies and web applications. I enjoy tackling complex problems and developing long-lasting solutions. If I were to summarize what I value the most about what I do, it's being able to build things and see them come alive.</p>
+        <p>My name is Oleksandr, but I go by Xanazf online. I'm a full stack web developer and designer living in Kyiv, Ukraine.</p>
+        <p>Currently, I work as a freelance web techie, which basically means I do everything web related. My main focus and interest lies in infrastructure design and color theory, with secondary interest in cloud technologies and web applications. I enjoy tackling complex problems and developing long-lasting solutions. If I were to summarize what I value the most about what I do, it's being able to build things and see them come alive. That is why I also contribute to a number of open-source projects in my free time.</p>
       </section>
     </div>
     <div class="main-image-contacts">

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -29,23 +29,35 @@ a {
   width: 100%;
   height: 1px;
   position: relative;
-  background-color: white;
 
   &::before {
     content: "";
     position: absolute;
     inset: -1px;
-    background: white;
-    background: linear-gradient(90deg,
-        hsla(var(--neon) / 0.9) 0%,
-        white 50%,
-        hsla(var(--neon) / 0.9) 100%);
-    box-shadow:
-      hsla(var(--neon)) 0 54px 55px,
-      hsla(var(--neon)) 0 -12px 30px,
-      hsla(var(--neon)) 3px 4px 6px,
-      hsla(var(--neon)) 3px 12px 13px,
-      hsla(var(--neon)) 3px -3px 5px;
+    border-radius: 100vh;
+    background: linear-gradient(
+      90deg,
+      hsla(var(--neon) / 0.9) 0%,
+      white 50%,
+      hsla(var(--neon) / 0.9) 100%
+    );
+    box-shadow: hsla(var(--neon)) 0 54px 55px, hsla(var(--neon)) 0
+      0 30px, hsla(var(--neon)) 0 0 6px, hsla(var(--neon)) 0 0 5px;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    height: 10rem;
+    width: 100%;
+    background: linear-gradient(
+      180deg,
+      hsla(var(--neon) / 0.21) 0%,
+      hsla(var(--bg) / 0.7) 50%,
+      hsla(var(--bg) / 1) 100%
+    );
+    filter: blur(1.5rem) saturate(120%);
   }
 }
 
@@ -82,6 +94,8 @@ a {
 }
 
 .contacts {
+  margin-top: 1.618rem;
+
   & ul {
     list-style: none;
     padding: 0;
@@ -123,10 +137,12 @@ a {
   content: "";
   position: absolute;
   inset: 0;
-  background: linear-gradient(115deg,
-      hsla(var(--green) 20 15 / 0.7) 25%,
-      hsla(var(--green) 25 25 / 0.8) 50%,
-      hsla(var(--green) 60 60 / 0.6) 80%);
+  background: linear-gradient(
+    115deg,
+    hsla(var(--green) 20 15 / 0.7) 25%,
+    hsla(var(--green) 25 25 / 0.8) 50%,
+    hsla(var(--green) 60 60 / 0.6) 80%
+  );
   filter: blur(1.5rem) saturate(150%);
   z-index: -1;
 }