refactor: enhance Nord theme styles and update Tailwind configuration

app/globals.css

@@ -83,3 +83,72 @@ body {
 .nord-accent {
   color: var(--nord-accent);
 }
+
+
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

components.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
+  "style": "new-york",
   "rsc": true,
   "tsx": true,
   "tailwind": {
@@ -16,5 +16,6 @@
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
-  }
+  },
+  "iconLibrary": "lucide"
 }

lib/constants.ts

@@ -1,31 +0,0 @@
-export const NORD_COLORS: NordColors = {
-  bg: '#2E3440',
-  bgLight: '#3B4252',
-  bgLighter: '#434C5E',
-  bgLightest: '#4C566A',
-  text: '#D8DEE9',
-  textMuted: 'rgba(216, 222, 233, 0.6)',
-  accent: '#88C0D0',
-  blue: '#81A1C1',
-  darkBlue: '#5E81AC',
-  cyan: '#8FBCBB',
-  green: '#A3BE8C',
-  yellow: '#EBCB8B',
-  orange: '#D08770',
-  red: '#BF616A',
-  purple: '#B48EAD'
-};
-
-export const SKILLS: Record<string, string[]> = {
-  'Data & Analytics': ['Python', 'R', 'SQL', 'Statistical Analysis', 'Data Visualization', 'Business Intelligence'],
-  'Web Development': ['JavaScript', 'TypeScript', 'React', 'Next.js', 'HTML5', 'CSS3', 'Tailwind CSS'],
-  'Backend & Tools': ['Flask', 'Express', 'MongoDB', 'SQLite', 'Git', 'Linux'],
-  'Other': ['Java', 'LaTeX', 'Project Planning', 'Financial Analysis']
-};
-
-export const CERTIFICATES: string[] = [
-  'Google Data Analytics Professional Certificate',
-  'Google IT Support Professional Certificate',
-  'IT Security: Defense against the digital dark arts',
-  'Python for Data Science, AI & Development'
-];

package-lock.json

@@ -9,13 +9,13 @@
       "version": "0.1.0",
       "dependencies": {
         "@radix-ui/react-slot": "^1.1.0",
-        "class-variance-authority": "^0.7.0",
+        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.441.0",
         "next": "14.2.13",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "tailwind-merge": "^2.5.2",
+        "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {

package.json

@@ -11,13 +11,13 @@
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.0",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.441.0",
     "next": "14.2.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

tailwind.config.ts

@@ -11,30 +11,70 @@ const config: Config = {
   	extend: {
   		colors: {
   			nord: {
-          0: '#2E3440',
+  				'0': '#2E3440',
-          1: '#3B4252',
+  				'1': '#3B4252',
-          2: '#434C5E',
+  				'2': '#434C5E',
-          3: '#4C566A',
+  				'3': '#4C566A',
-          4: '#D8DEE9',
+  				'4': '#D8DEE9',
-          5: '#E5E9F0',
+  				'5': '#E5E9F0',
-          6: '#ECEFF4',
+  				'6': '#ECEFF4',
-          7: '#8FBCBB',
+  				'7': '#8FBCBB',
-          8: '#88C0D0',
+  				'8': '#88C0D0',
-          9: '#81A1C1',
+  				'9': '#81A1C1',
-          10: '#5E81AC',
+  				'10': '#5E81AC',
-          11: '#BF616A',
+  				'11': '#BF616A',
-          12: '#D08770',
+  				'12': '#D08770',
-          13: '#EBCB8B',
+  				'13': '#EBCB8B',
-          14: '#A3BE8C',
+  				'14': '#A3BE8C',
-          15: '#B48EAD',
+  				'15': '#B48EAD'
   			},
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			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))'
+  			}
   		},
   		borderRadius: {
   			lg: 'var(--radius)',
   			md: 'calc(var(--radius) - 2px)',
   			sm: 'calc(var(--radius) - 4px)'
   		}
-    },
+  	}
   },
   plugins: [require("tailwindcss-animate")],
 };