Added notes to V1

style.css

@@ -39,7 +39,13 @@ html {
 }
 
 body {
-    background: var(--base);
+    background: radial-gradient(rgba(205, 214, 244, 0.028) 0.5px, transparent 0.6px),
+    radial-gradient(rgba(17, 17, 27, 0.032) 0.5px, transparent 0.6px),
+    radial-gradient(1200px 800px at 12% 8%, rgba(137, 180, 250, 0.07), transparent 62%),
+    radial-gradient(1000px 720px at 88% 92%, rgba(203, 166, 247, 0.07), transparent 64%),
+    linear-gradient(180deg, #1e1e2e 0%, #1b1b2b 55%, #1a1a29 100%);
+    background-size: 3px 3px, 3px 3px, auto, auto, auto;
+    background-position: 0 0, 1px 1px, 0 0, 0 0, 0 0;
     color: var(--text);
     font-family: 'JetBrains Mono', 'Apple Color Emoji', monospace;
     font-size: 15px;
@@ -52,25 +58,27 @@ body::before,
 body::after {
     content: '';
     position: fixed;
-    width: 36rem;
-    height: 36rem;
-    border-radius: 50%;
+    width: 52rem;
+    height: 42rem;
+    border-radius: 58% 42% 55% 45% / 46% 54% 48% 52%;
     pointer-events: none;
     z-index: -1;
-    filter: blur(70px);
-    opacity: 0.12;
+    filter: blur(90px);
+    opacity: 0.16;
 }
 
 body::before {
-    top: -10rem;
-    right: -10rem;
-    background: radial-gradient(circle, var(--mauve), transparent 65%);
+    top: -18rem;
+    right: -16rem;
+    transform: rotate(14deg);
+    background: radial-gradient(closest-side at 38% 42%, rgba(203, 166, 247, 0.42), transparent 72%);
 }
 
 body::after {
-    bottom: -14rem;
-    left: -12rem;
-    background: radial-gradient(circle, var(--blue), transparent 65%);
+    bottom: -20rem;
+    left: -18rem;
+    transform: rotate(-12deg);
+    background: radial-gradient(closest-side at 60% 58%, rgba(137, 180, 250, 0.36), transparent 72%);
 }
 
 ::selection {
@@ -269,11 +277,6 @@ section.full-width {
     opacity: 0.8;
 }
 
-.hero-by-role::before {
-    content: '— ';
-    opacity: 0.4;
-}
-
 .hero-by-footer {
     display: block;
     margin-top: 1rem;
@@ -373,6 +376,12 @@ section.full-width {
     gap: 1.25rem;
 }
 
+.about-grid .about-block:first-child {
+    background: linear-gradient(90deg, rgba(203, 166, 247, 0.07), rgba(203, 166, 247, 0.03));
+    border-left: 2px solid rgba(203, 166, 247, 0.65);
+    box-shadow: inset 0 0 0 1px rgba(203, 166, 247, 0.08);
+}
+
 .about-block:last-child {
     border-bottom: none;
 }
@@ -771,6 +780,15 @@ section.full-width {
     overflow: hidden;
 }
 
+.card-link {
+    cursor: pointer;
+}
+
+.card-link:focus-visible {
+    outline: 1px solid var(--mauve);
+    outline-offset: -1px;
+}
+
 .card::before {
     content: '';
     position: absolute;
@@ -817,6 +835,16 @@ section.full-width {
     flex: 1;
 }
 
+.card-desc a {
+    color: var(--sky);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+.card-desc a:hover {
+    color: var(--mauve);
+}
+
 .card-arrow {
     font-size: 0.8rem;
     color: var(--overlay0);
@@ -894,9 +922,26 @@ section.full-width {
 }
 
 .contact-link-icon {
-    font-size: 1.1rem;
-    width: 1.5rem;
-    text-align: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    flex: 0 0 1.125rem;
+    background: currentColor;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+}
+
+.contact-link-icon--github {
+    -webkit-mask-image: url('icons/github.svg');
+    mask-image: url('icons/github.svg');
+}
+
+.contact-link-icon--linkedin {
+    -webkit-mask-image: url('icons/linkedin.svg');
+    mask-image: url('icons/linkedin.svg');
 }
 
 .contact-link-label {