Refactoring file locations

src/styles/components/Projects.module.scss

@@ -0,0 +1,133 @@
+@use '../variables' as *;
+
+.projects {
+  padding: $space-24 $space-6;
+  background: $color-bg-elevated;
+}
+
+.inner {
+  max-width: $max-width;
+  margin: 0 auto;
+}
+
+// ── Section header ─────────────────────────────────────────────
+.header {
+  display: flex;
+  align-items: center;
+  gap: $space-4;
+  margin-bottom: $space-12;
+}
+
+.sectionNum {
+  font-family: $font-mono;
+  color: $color-accent;
+  font-size: $text-base;
+}
+
+.sectionTitle {
+  font-size: $text-2xl;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.line {
+  flex: 1;
+  height: 1px;
+  background: $color-border;
+}
+
+// ── Grid ───────────────────────────────────────────────────────
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: $space-6;
+}
+
+// ── Card ───────────────────────────────────────────────────────
+.card {
+  position: relative;
+  background: $color-bg-card;
+  border: 1px solid $color-border;
+  border-radius: $radius-md;
+  padding: $space-6;
+  display: flex;
+  flex-direction: column;
+  gap: $space-3;
+  transition: transform $transition-base, border-color $transition-base, box-shadow $transition-base;
+
+  &:hover {
+    transform: translateY(-4px);
+    border-color: rgb(var(--color-primary-glow) / 0.4);
+    box-shadow: 0 8px 32px rgb(var(--color-primary) / 0.2);
+  }
+
+  &.featured {
+    border-color: rgb(var(--color-accent) / 0.25);
+  }
+}
+
+.featuredBadge {
+  position: absolute;
+  top: $space-4;
+  right: $space-4;
+  font-size: $text-xs;
+  font-family: $font-mono;
+  color: $color-accent-warm;
+  background: rgb(var(--color-accent-warm) / 0.1);
+  border: 1px solid rgb(var(--color-accent-warm) / 0.25);
+  border-radius: 100px;
+  padding: 2px $space-3;
+}
+
+.cardTop {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: $space-2;
+}
+
+.folderIcon {
+  font-size: $text-2xl;
+  color: $color-accent;
+  line-height: 1;
+}
+
+.externalLink {
+  font-size: $text-xl;
+  color: $color-text-muted;
+  transition: color $transition-fast, transform $transition-fast;
+
+  &:hover {
+    color: $color-accent;
+    transform: translate(2px, -2px);
+  }
+}
+
+.cardName {
+  font-size: $text-lg;
+  font-weight: 600;
+}
+
+.cardDesc {
+  font-size: $text-sm;
+  color: $color-text-muted;
+  line-height: 1.7;
+  flex: 1;
+}
+
+.tags {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: $space-2;
+  margin-top: $space-2;
+
+  li {
+    font-family: $font-mono;
+    font-size: $text-xs;
+    color: $color-text-dim;
+    background: rgb(var(--color-primary) / 0.15);
+    border-radius: $radius-sm;
+    padding: 2px $space-3;
+  }
+}