feat: set up basic project structure and initial styling

This commit initializes the project with a basic Next.js setup, including:
- Integration of `tailwindcss` and `tw-animate-css` for styling.
- Definition of a comprehensive color palette using CSS variables for both light and dark themes, supporting a theming system.
- Implementation of a custom `aurora` keyframe animation.
- Configuration of global CSS styles for `border` and `body` elements.
- Setup of `next.config.ts` with image optimization, performance enhancements, and security headers (X-Frame-Options, X-Content-Type-Options, Referrer-Policy).
- Update of `package.json` to include new dependencies for UI components (`class-variance-authority`, `clsx`, `lucide-react`, `motion`, `tailwind-merge`, `tailwindcss-animate`) and development tools (`@biomejs/biome`, `@tailwindcss/postcss`, `tw-animate-css`).
- Refinement of `app/layout.tsx` to include comprehensive metadata for SEO (title, description, keywords, authors, Open Graph, Twitter cards, robots), preconnect/dns-prefetch links for external resources, favicon, manifest, and mobile app meta tags.
- Restructuring of `app/page.tsx` to use dynamic imports for various sections (Hero, About, Skills, Experience, Projects, Contact, WorkModalities) to improve performance, and integration of `Squares` component for background effects.

This foundational commit prepares the application for further development by establishing a robust and performant base.

lib/usePortfolioData.ts

@@ -0,0 +1,93 @@
+import { useState, useEffect } from "react";
+
+interface PortfolioData {
+  personal: {
+    name: string;
+    title: string;
+    location: string;
+    email: string;
+    phone: string;
+    linkedin: string;
+    github: string;
+    summary: string;
+  };
+  experiences: Array<{
+    id: string;
+    title: string;
+    company: string;
+    period: string;
+    location: string;
+    type: string;
+    description: string;
+    achievements: string[];
+    technologies: string[];
+    featured: boolean;
+  }>;
+  projects: Array<{
+    id: string;
+    title: string;
+    description: string;
+    longDescription: string;
+    technologies: string[];
+    features: string[];
+    status: string;
+    demoUrl: string;
+    githubUrl: string;
+    imageUrl: string;
+    featured: boolean;
+    category: string;
+  }>;
+  skills: {
+    technical: Array<{
+      category: string;
+      icon: string;
+      color: string;
+      bgColor: string;
+      skills: string[];
+    }>;
+    soft: Array<{
+      skill: string;
+      level: number;
+    }>;
+  };
+  contact: {
+    email: string;
+    phone: string;
+    whatsapp: string;
+    linkedin: string;
+    github: string;
+    location: string;
+  };
+  social: Array<{
+    name: string;
+    url: string;
+    icon: string;
+  }>;
+}
+
+export function usePortfolioData() {
+  const [data, setData] = useState<PortfolioData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const response = await fetch("/portfolio-data.json");
+        if (!response.ok) {
+          throw new Error("Failed to load portfolio data");
+        }
+        const portfolioData: PortfolioData = await response.json();
+        setData(portfolioData);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
+  }, []);
+
+  return { data, loading, error };
+}

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))
+}