feat: add theme constants and animation variants

2026-02-21 20:02:00 +08:00
parent 5a93fbb047
commit 7f9aad4965
1 changed files with 78 additions and 0 deletions
@@ -321,3 +321,81 @@ export const SOCIAL_LINKS = [
  { name: 'LinkedIn', href: '#', icon: 'Linkedin' },
  { name: 'GitHub', href: '#', icon: 'Github' },
 ] as const;
+
+// Theme Constants
+export const THEME = {
+  colors: {
+    dark: {
+      DEFAULT: '#0A0A0A',
+      secondary: '#1A1A1A',
+      tertiary: '#2A2A2A',
+    },
+    tech: {
+      blue: '#00D9FF',
+      purple: '#A855F7',
+      cyan: '#06B6D4',
+    },
+    text: {
+      primary: '#FFFFFF',
+      secondary: '#A0A0A0',
+      disabled: '#606060',
+    },
+  },
+  gradients: {
+    primary: 'linear-gradient(135deg, #00D9FF 0%, #A855F7 100%)',
+    dark: 'linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%)',
+    glow: 'radial-gradient(circle, #00D9FF20 0%, transparent 70%)',
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+    '2xl': '48px',
+    '3xl': '64px',
+  },
+  borderRadius: {
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+    full: '9999px',
+  },
+  animation: {
+    fast: '150ms',
+    standard: '300ms',
+    slow: '500ms',
+    verySlow: '1000ms',
+  },
+  breakpoints: {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+  },
+} as const;
+
+// Animation Variants for Framer Motion
+export const ANIMATION_VARIANTS = {
+  fadeInUp: {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -20 },
+  },
+  fadeInScale: {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.95 },
+  },
+  slideInLeft: {
+    initial: { opacity: 0, x: -20 },
+    animate: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: 20 },
+  },
+  slideInRight: {
+    initial: { opacity: 0, x: 20 },
+    animate: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: -20 },
+  },
+} as const;