feat: implement portfolio dashboard with skill, experience, and message management features

src/shared/components/wave-divider.tsx

@@ -0,0 +1,37 @@
+/**
+ * Decorative wave SVG between sections.
+ * `flip` mirrors the wave vertically.
+ * `fromColor` and `toColor` set the CSS fill accordingly.
+ */
+
+type WaveDividerProps = {
+  /** Fill color — use CSS variable or tailwind class value */
+  fill?: string;
+  /** Flip vertically (place at bottom of a dark section going to light) */
+  flip?: boolean;
+  className?: string;
+};
+
+export function WaveDivider({
+  fill = "var(--background)",
+  flip = false,
+  className = "",
+}: WaveDividerProps) {
+  return (
+    <div
+      className={`section-divider ${className}`}
+      style={{ transform: flip ? "rotate(180deg)" : undefined }}
+    >
+      <svg
+        viewBox="0 0 1440 58"
+        preserveAspectRatio="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0,0 C360,58 1080,0 1440,44 L1440,58 L0,58 Z"
+          fill={fill}
+        />
+      </svg>
+    </div>
+  );
+}