feat: implement initial fullstack portfolio application including dashboard, CMS, and analytics features.

2026-03-07 16:32:49 +07:00
commit bdd61d11d3
59 changed files with 11107 additions and 0 deletions
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -0,0 +1,121 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: "class",
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+  	extend: {
+  		colors: {
+			background: 'var(--color-background)',
+			foreground: 'var(--color-foreground)',
+			card: {
+				DEFAULT: 'var(--color-surface-elevated)',
+				foreground: 'var(--color-foreground)'
+			},
+			popover: {
+				DEFAULT: 'var(--color-surface-elevated)',
+				foreground: 'var(--color-foreground)'
+			},
+			primary: {
+				DEFAULT: 'var(--color-accent)',
+				foreground: 'var(--color-foreground)'
+			},
+			secondary: {
+				DEFAULT: 'var(--color-border)',
+				foreground: 'var(--color-foreground)'
+			},
+			muted: {
+				DEFAULT: 'var(--color-muted)',
+				foreground: 'var(--color-foreground-muted)'
+			},
+			accent: {
+				DEFAULT: 'var(--color-accent)',
+				foreground: 'var(--color-foreground)'
+			},
+			destructive: {
+				DEFAULT: 'hsl(var(--destructive))',
+				foreground: 'hsl(var(--destructive-foreground))'
+			},
+			border: 'var(--color-border)',
+			input: 'var(--color-border)',
+			ring: 'var(--color-accent)',
+			chart: {
+				'1': 'hsl(var(--chart-1))',
+				'2': 'hsl(var(--chart-2))',
+				'3': 'hsl(var(--chart-3))',
+				'4': 'hsl(var(--chart-4))',
+				'5': 'hsl(var(--chart-5))'
+			},
+			// Custom colors for your existing components
+			surface: 'var(--color-surface)',
+			'surface-elevated': 'var(--color-surface-elevated)',
+			'border-subtle': 'var(--color-border-subtle)',
+			'accent-glow': 'var(--color-accent-glow)',
+			'accent-dim': 'var(--color-accent-dim)',
+			subtle: 'var(--color-subtle)',
+			'foreground-muted': 'var(--color-foreground-muted)',
+			'foreground-subtle': 'var(--color-foreground-subtle)',
+		},
+  		fontFamily: {
+  			sans: [
+  				'var(--font-sans)',
+  				'system-ui',
+  				'sans-serif'
+  			],
+  			mono: [
+  				'var(--font-mono)',
+  				'monospace'
+  			],
+  			display: [
+  				'var(--font-display)',
+  				'system-ui',
+  				'sans-serif'
+  			]
+  		},
+  		animation: {
+  			'gradient-x': 'gradient-x 15s ease infinite',
+  			'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+  			float: 'float 6s ease-in-out infinite'
+  		},
+  		keyframes: {
+  			'gradient-x': {
+  				'0%, 100%': {
+  					'background-position': '0% 50%'
+  				},
+  				'50%': {
+  					'background-position': '100% 50%'
+  				}
+  			},
+  			float: {
+  				'0%, 100%': {
+  					transform: 'translateY(0px)'
+  				},
+  				'50%': {
+  					transform: 'translateY(-20px)'
+  				}
+  			}
+  		},
+  		backgroundImage: {
+			'grid-pattern': 'url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 32 32\' width=\'32\' height=\'32\' fill=\'none\' stroke=\'rgb(71 85 105 / 0.5)\'%3e%3cpath d=\'M0 .5H31.5V32\'/%3e%3c/svg%3e")'
+		},
+  		boxShadow: {
+			glow: '0 0 30px var(--color-accent-glow)',
+			'glow-lg': '0 0 60px var(--color-accent-glow)',
+			card: '0 4px 24px rgb(0 0 0 / 0.4)',
+			'card-hover': '0 8px 48px rgb(0 0 0 / 0.6)'
+		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		}
+  	}
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+
+export default config;