Files
portfolio/tailwind.config.ts
denshooter de3ef37b48
All checks were successful
Gitea CI / test-build (push) Successful in 11m36s
perf: remove framer-motion and lucide-react from critical path
- Remove framer-motion from Hero.tsx and HeaderClient.tsx, replace with CSS animations/transitions
- Replace lucide-react icons (Menu, X, Mail) with inline SVGs in HeaderClient.tsx
- Lazy-load About, Projects, Contact, Footer via dynamic() imports in ClientWrappers.tsx
- Defer ShaderGradient/BackgroundBlobs loading via requestIdleCallback in ClientProviders.tsx
- Remove AnimatePresence page wrapper that caused full re-renders
- Enable experimental.optimizeCss (critters) for critical CSS inlining
- Add fadeIn keyframe to Tailwind config for CSS-based animations

Homepage JS reduced from 563KB to 438KB (-125KB).
Eliminates ~39s main thread work from WebGL init and layout thrashing.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-03-04 11:13:10 +01:00

109 lines
2.8 KiB
TypeScript

// tailwind.config.ts
import type { Config } from "tailwindcss";
// tailwind.config.js
export default {
darkMode: "class", // Enables class-based dark mode
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./app/components/**/*.{js,ts,jsx,tsx}",
// Add other paths if necessary
],
theme: {
extend: {
keyframes: {
fadeIn: {
"0%": { opacity: "0", transform: "translateY(10px)" },
"100%": { opacity: "1", transform: "translateY(0)" },
},
},
animation: {
"fade-in": "fadeIn 0.5s ease-out",
},
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
card: {
DEFAULT: "var(--card)",
foreground: "var(--card-foreground)",
},
popover: {
DEFAULT: "var(--popover)",
foreground: "var(--popover-foreground)",
},
primary: {
DEFAULT: "var(--primary)",
foreground: "var(--primary-foreground)",
},
secondary: {
DEFAULT: "var(--secondary)",
foreground: "var(--secondary-foreground)",
},
muted: {
DEFAULT: "var(--muted)",
foreground: "var(--muted-foreground)",
},
accent: {
DEFAULT: "var(--accent)",
foreground: "var(--accent-foreground)",
},
destructive: {
DEFAULT: "var(--destructive)",
foreground: "var(--destructive-foreground)",
},
border: "var(--border)",
input: "var(--input)",
ring: "var(--ring)",
// Warm brown palette
cream: "#FAF8F3",
sand: "#EFEBE9",
brown: {
50: "#EFEBE9",
100: "#D7CCC8",
200: "#BCAAA4",
300: "#A1887F",
400: "#8D6E63",
500: "#795548",
600: "#6D4C41",
700: "#5D4037",
800: "#4E342E",
900: "#3E2723",
},
stone: {
50: "#FAFAF9",
100: "#F5F5F4",
200: "#E7E5E4",
300: "#D6D3D1",
400: "#A8A29E",
500: "#78716C",
600: "#57534E",
700: "#44403C",
800: "#292524",
900: "#1C1917",
},
liquid: {
mint: "#A7F3D0",
lavender: "#DDD6FE",
blue: "#BFDBFE",
rose: "#FECACA",
yellow: "#FDE68A",
peach: "#FED7AA",
pink: "#FBCFE8",
sky: "#BAE6FD",
lime: "#D9F99D",
coral: "#FCA5A5",
purple: "#E9D5FF",
teal: "#99F6E4",
amber: "#FDE047",
},
},
fontFamily: {
sans: ["var(--font-inter)", "sans-serif"],
serif: ["var(--font-playfair)", "Georgia", "serif"],
mono: ["var(--font-roboto-mono)", "Monaco", "Courier New", "monospace"],
},
},
},
plugins: [],
} satisfies Config;