style: add hero section with matrix canvas styling

2 files changed, 118 insertions, 0 deletions

diff --git a/assets/css/components/hero.css b/assets/css/components/hero.css
new file mode 100644
index 0000000..a1f93fc
--- /dev/null
+++ b/assets/css/components/hero.css
@@ -0,0 +1,117 @@
+/* hero.css */
+.hero {
+  position: relative;
+  overflow: hidden;
+  padding: var(--section-py-mobile) 1.5rem;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+}
+
+@media (min-width: 768px) {
+  .hero {
+    padding: var(--section-py-desktop) 1.5rem;
+  }
+}
+
+#matrix-canvas {
+  position: absolute;
+  inset: 0;
+  opacity: 0.13;
+  pointer-events: none;
+}
+
+html.theme-light #matrix-canvas {
+  opacity: 0.18;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+  max-width: var(--container-max);
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-lg);
+}
+
+.hero-avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-head);
+  font-size: 1.4rem;
+  font-weight: 800;
+  color: #fff;
+}
+
+@media (min-width: 768px) {
+  .hero-avatar {
+    width: 80px;
+    height: 80px;
+    font-size: 1.8rem;
+  }
+}
+
+.hero-text h1 {
+  margin-bottom: 0.25rem;
+}
+
+.hero-role {
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  color: var(--accent);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin-bottom: 0.75rem;
+}
+
+.hero-bio {
+  color: var(--text-dim);
+  font-size: 0.95rem;
+  line-height: 1.8;
+  max-width: 400px;
+}
+
+/* Scanlines effect on canvas */
+#matrix-canvas::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0.15),
+    rgba(0, 0, 0, 0.15) 1px,
+    transparent 1px,
+    transparent 2px
+  );
+  pointer-events: none;
+}
+
+/* Ambient glow behind hero */
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+@media (max-width: 768px) {
+  .hero-content {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .hero-bio {
+    max-width: 100%;
+  }
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index dedab3d..a8ea5c7 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300&family=Oxanium:wght@700;800&display=swap');
 
 @import 'variables.css';
+@import 'components/hero.css';
 
 /* Base Styles */
 html {