Initialize Vue 3 portfolio site with Vite, Tailwind CSS, and GSAP. Add Docker support and GitHub Actions for deployment. Include essential project files, configurations, and a Product Requirements Document (PRD).

2026-04-22 12:20:58 -07:00
commit 8458694866
@@ -0,0 +1,100 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        ocean: {
+          // Derived from Logo Blue (#075985)
+          950: "#021526", // Deep midnight base
+          900: "#032d45", // Darker navy
+          800: "#054161", // Deep ocean
+          700: "#064e75", // Slightly darker than logo
+          600: "#075985", // [LOGO MATCH: Ocean Blue]
+          500: "#0ea5e9", // Bright accent
+        },
+        slate: {
+          ink: "#0f172a",  // Darker, cooler slate to match the new Ocean 950
+          mist: "#94a3b8", // Lightened for better contrast on dark blues
+        },
+        coast: {
+          teal: "#2dd4bf", // Keep for pop
+          deep: "#0d9488", 
+          sky: "#38bdf8",
+          foam: "#E0F2FE", // [LOGO MATCH: Seafoam/Sky]
+        },
+        sand: {
+          DEFAULT: "#D2B48C", // [LOGO MATCH: Sand]
+          warm: "#f3e1c7",    // Lighter tint for backgrounds/cards
+        },
+        sunset: {
+          gold: "#FB8524", // [LOGO MATCH: Sunset Gold]
+          amber: "#f59e0b",
+        },
+      },
+      // colors: {
+      //   ocean: {
+      //     950: "#0a1628",
+      //     900: "#0f2137",
+      //     800: "#152a45",
+      //     700: "#1c3554",
+      //     600: "#244468",
+      //   },
+      //   slate: {
+      //     ink: "#1e293b",
+      //     mist: "#64748b",
+      //   },
+      //   coast: {
+      //     teal: "#2dd4bf",
+      //     deep: "#0d9488",
+      //     sky: "#38bdf8",
+      //     foam: "#7dd3fc",
+      //   },
+      //   sand: {
+      //     DEFAULT: "#e8d5b7",
+      //     warm: "#f4e4c1",
+      //   },
+      //   sunset: {
+      //     gold: "#d4a574",
+      //     amber: "#f59e0b",
+      //   },
+      // },
+      fontFamily: {
+        sans: [
+          "DM Sans",
+          "system-ui",
+          "-apple-system",
+          "Segoe UI",
+          "Roboto",
+          "sans-serif",
+        ],
+        display: ["Outfit", "DM Sans", "system-ui", "sans-serif"],
+        mono: ["JetBrains Mono", "ui-monospace", "monospace"],
+      },
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+      },
+      boxShadow: {
+        glass: "0 8px 32px rgba(15, 33, 55, 0.12)",
+        "glass-dark": "0 8px 32px rgba(0, 0, 0, 0.35)",
+      },
+      animation: {
+        wave: "wave 18s ease-in-out infinite",
+        float: "float 6s ease-in-out infinite",
+      },
+      keyframes: {
+        wave: {
+          "0%, 100%": { transform: "translateX(0) scaleY(1)" },
+          "50%": { transform: "translateX(-4%) scaleY(1.02)" },
+        },
+        float: {
+          "0%, 100%": { transform: "translateY(0)" },
+          "50%": { transform: "translateY(-6px)" },
+        },
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config;