From 7f9aad4965cf8bb34d6f26783f06bcd1330a4220 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Sat, 21 Feb 2026 20:02:00 +0800 Subject: [PATCH] feat: add theme constants and animation variants --- src/lib/constants.ts | 78 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) diff --git a/src/lib/constants.ts b/src/lib/constants.ts index beca0f8..5237893 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -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;