Merge pull request #7 from modeitsch/visual-enhancements

feat: Add visual enhancements

Author: modeitsch

src/app.css

@@ -117,25 +117,47 @@ html.dark ::-webkit-scrollbar-thumb:hover {
   background-color: rgb(107, 114, 128);
 }
 
-/* Code blocks */
+/* Code blocks with syntax highlighting */
 pre {
   background-color: rgb(17, 24, 39);
   color: rgb(229, 231, 235);
-  padding: 1rem;
-  border-radius: 0.5rem;
+  padding: 1.25rem;
+  border-radius: 0.75rem;
   overflow-x: auto;
+  border: 1px solid rgb(55, 65, 81);
+  position: relative;
+  font-size: 0.9rem;
+  line-height: 1.6;
 }
 
 html.dark pre {
-  background-color: rgb(31, 41, 55);
+  background-color: rgb(17, 24, 39);
+  border-color: rgb(55, 65, 81);
+}
+
+/* Code block with language label */
+pre[class*="language-"]::before {
+  content: attr(class);
+  position: absolute;
+  top: 0;
+  right: 0.75rem;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgb(156, 163, 175);
+  background: rgb(31, 41, 55);
+  border-radius: 0 0.5rem 0 0.5rem;
 }
 
 code {
   background-color: rgb(243, 244, 246);
   color: rgb(37, 99, 235);
-  padding: 0.125rem 0.25rem;
-  border-radius: 0.25rem;
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.375rem;
   font-size: 0.875rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
 html.dark code {
@@ -147,6 +169,84 @@ pre code {
   background-color: transparent;
   color: rgb(229, 231, 235);
   padding: 0;
+  font-size: inherit;
+}
+
+/* Syntax highlighting colors */
+.prose pre code .comment,
+pre code .comment {
+  color: rgb(107, 114, 128);
+  font-style: italic;
+}
+
+.prose pre code .keyword,
+pre code .keyword {
+  color: rgb(249, 115, 22);
+}
+
+.prose pre code .string,
+pre code .string {
+  color: rgb(52, 211, 153);
+}
+
+.prose pre code .number,
+pre code .number {
+  color: rgb(251, 191, 36);
+}
+
+.prose pre code .function,
+pre code .function {
+  color: rgb(96, 165, 250);
+}
+
+.prose pre code .class-name,
+pre code .class-name {
+  color: rgb(244, 114, 182);
+}
+
+.prose pre code .operator,
+pre code .operator {
+  color: rgb(167, 139, 250);
+}
+
+.prose pre code .punctuation,
+pre code .punctuation {
+  color: rgb(156, 163, 175);
+}
+
+/* Line numbers for code blocks (optional via data attribute) */
+pre[data-line-numbers] {
+  padding-left: 3.5rem;
+  counter-reset: line;
+}
+
+pre[data-line-numbers] code {
+  counter-increment: line;
+}
+
+pre[data-line-numbers] code::before {
+  content: counter(line);
+  position: absolute;
+  left: 0;
+  width: 2.5rem;
+  text-align: right;
+  padding-right: 0.75rem;
+  color: rgb(75, 85, 99);
+  border-right: 1px solid rgb(55, 65, 81);
+}
+
+/* Code block copy button area (for future enhancement) */
+pre:hover::after {
+  content: 'Code';
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.65rem;
+  color: rgb(107, 114, 128);
+  background: rgb(31, 41, 55);
+  border-radius: 0.25rem;
+  opacity: 0.5;
 }
 
 /* Modern animations */
@@ -377,6 +477,105 @@ html.dark .glass {
   opacity: 1;
 }
 
+/* Animated gradient border for cards */
+.gradient-border {
+  position: relative;
+  background: linear-gradient(var(--card-bg, white), var(--card-bg, white)) padding-box,
+              linear-gradient(135deg,
+                rgb(37, 99, 235),
+                rgb(147, 51, 234),
+                rgb(236, 72, 153),
+                rgb(37, 99, 235)
+              ) border-box;
+  border: 2px solid transparent;
+  background-size: 100% 100%, 300% 300%;
+  animation: gradient-border-shift 4s ease infinite;
+}
+
+html.dark .gradient-border {
+  --card-bg: rgb(31, 41, 55);
+}
+
+@keyframes gradient-border-shift {
+  0%, 100% {
+    background-position: 0% 0%, 0% 50%;
+  }
+  50% {
+    background-position: 0% 0%, 100% 50%;
+  }
+}
+
+/* Image hover effects */
+.image-hover {
+  overflow: hidden;
+  position: relative;
+}
+
+.image-hover img {
+  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.3s ease;
+}
+
+.image-hover:hover img {
+  transform: scale(1.05);
+}
+
+.image-hover::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+    rgba(147, 51, 234, 0.15) 0%,
+    transparent 50%
+  );
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.image-hover:hover::after {
+  opacity: 1;
+}
+
+/* Profile image glow effect */
+.profile-glow {
+  position: relative;
+}
+
+.profile-glow::before {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  background: linear-gradient(135deg,
+    rgb(37, 99, 235),
+    rgb(147, 51, 234),
+    rgb(236, 72, 153),
+    rgb(37, 99, 235)
+  );
+  background-size: 300% 300%;
+  animation: profile-glow-rotate 3s linear infinite;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: -1;
+}
+
+.profile-glow:hover::before {
+  opacity: 1;
+}
+
+@keyframes profile-glow-rotate {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
 /* Character animation styles */
 .char {
   display: inline-block;