design

app/globals.css

@@ -42,6 +42,41 @@
     perspective: 1000px;
   }
 
+  .grid-pattern {
+    background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px);
+    background-size: 40px 40px;
+  }
+
+  .tech-line {
+    @apply absolute h-px bg-accent/20;
+  }
+
+  .tech-dot {
+    @apply absolute w-1 h-1 bg-accent/30 rounded-full;
+  }
+
+  .tech-corner {
+    @apply absolute w-4 h-4 border-accent/30;
+  }
+
+  .section-number {
+    @apply absolute -left-12 top-0 text-6xl font-black text-slate-100 select-none pointer-events-none hidden lg:block;
+    font-family: monospace;
+  }
+
+  .tech-card-border {
+    @apply relative;
+  }
+
+  .tech-card-border::before {
+    content: '';
+    @apply absolute -inset-px bg-gradient-to-br from-accent/20 via-transparent to-accent/20 rounded-[inherit] opacity-0 transition-opacity duration-500;
+  }
+
+  .tech-card-border:hover::before {
+    @apply opacity-100;
+  }
+
   h1, h2, h3, h4, h5, h6 {
     @apply font-bold tracking-tight text-primary;
     text-wrap: balance;