refactor(architecture): Se organizo y mejoro la arquitectura de la aplicacion, centralizando mejor cada seccion de la pagina

SECURITY.md

@@ -1,7 +1,7 @@
 ## Navegadores compatibles
 
 > [!IMPORTANT]
-> En el proyecto se ocupan componenetes nativos, haciendo ya facil su lectura en la mayotia de navegadores
+> En el proyecto se ocupan componentes nativos, haciendo ya facil su lectura en la mayoria de navegadores
 
 | Navegador             | Supported          |
 | --------------------- | ------------------ |

src/components/templates/Acerca.astro → src/components/ui/About/About.astro

@@ -1,5 +1,5 @@
 ---
-import { TabsAcerca } from "@/components/organisms/TabsAcerca";
+import { TabsAcerca } from "@/components/ui/About/TabsAbout.tsx";
 
 const { currentLocale } = Astro;
 ---

src/components/features/aboutMe/Items/ItemDataExperiencia.tsx → src/components/ui/About/Items/ItemExperience.tsx

@@ -5,9 +5,9 @@ import { motion } from "framer-motion";
 import type {
 	Experiences,
 	PropsLang,
-} from "@/interfaces/currentLang.interface";
+} from "@/interfaces/currentLang.interface.ts";
 
-export const ItemDataExperiencia = ({ currentLocale }: PropsLang) => {
+export const ItemExperience = ({ currentLocale }: PropsLang) => {
 	const [data, setData] = useState<Experiences[]>([]); // tipa tu array según tu DTO
 	const [loading, setLoading] = useState<boolean>(true);
 

src/components/features/aboutMe/Items/ItemDataHabilidades.tsx → src/components/ui/About/Items/ItemSkills.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useMemo, useState } from "react";
-import type { PropsLang } from "@/interfaces/currentLang.interface";
-import { dataTabsAcercaDeEN } from "@/utils/en/dataTabsAcercaDeEN";
-import { dataTabsAcercaDe } from "@/utils/es/dataTabsAcercaDe";
-import { dataTabsAcercaDeFR } from "@/utils/fr/dataTabsAcercaDeFR";
+import type { PropsLang } from "@/interfaces/currentLang.interface.ts";
+import { dataTabsAcercaDeEN } from "@/utils/en/dataTabsAboutmeEN";
+import { dataTabsAcercaDe } from "@/utils/es/dataTabsAboutme";
+import { dataTabsAcercaDeFR } from "@/utils/fr/dataTabsAboutmeFR";
 import { motion } from "framer-motion";
 
 const langTraduceData: Record<string, typeof dataTabsAcercaDe> = {
@@ -11,7 +11,7 @@ const langTraduceData: Record<string, typeof dataTabsAcercaDe> = {
 	fr: dataTabsAcercaDeFR,
 };
 
-export const ItemDataHabilidades = ({ currentLocale }: PropsLang) => {
+export const ItemSkills = ({ currentLocale }: PropsLang) => {
 	const [loadedImages, setLoadedImages] = useState<Record<string, boolean>>({});
 
 	const memorization = useMemo(

src/components/features/aboutMe/SobreMi.tsx → src/components/ui/About/Tabs/Aboutme.tsx

@@ -1,8 +1,8 @@
 import { getI18N } from "@/i18n";
-import type { PropsLang } from "@/interfaces/currentLang.interface";
+import type { PropsLang } from "@/interfaces/currentLang.interface.ts";
 import { motion } from "framer-motion";
 
-export const SobreMi = ({ currentLocale }: PropsLang) => {
+export const Aboutme = ({ currentLocale }: PropsLang) => {
 	const i18n = getI18N({ currentLocale });
 
 	return (

src/components/features/aboutMe/Educacion.tsx → src/components/ui/About/Tabs/Education.tsx

@@ -1,8 +1,8 @@
 import { getI18N } from "@/i18n";
-import type { PropsLang } from "@/interfaces/currentLang.interface";
+import type { PropsLang } from "@/interfaces/currentLang.interface.ts";
 import { motion } from "framer-motion";
 
-export const Educacion = ({ currentLocale }: PropsLang) => {
+export const Education = ({ currentLocale }: PropsLang) => {
 	const i18n = getI18N({ currentLocale });
 	return (
 		<div className="flex flex-col p-4">

src/components/features/aboutMe/Experiencia.tsx → src/components/ui/About/Tabs/Experience.tsx

@@ -1,8 +1,8 @@
-import { ItemDataExperiencia } from "@/components/features/aboutMe/Items/ItemDataExperiencia";
+import { ItemExperience } from "@/components/ui/About/Items/ItemExperience.tsx";
 import { getI18N } from "@/i18n";
 import type { PropsLang } from "@/interfaces/currentLang.interface";
 
-export const Experiencia = ({ currentLocale }: PropsLang) => {
+export const Experience = ({ currentLocale }: PropsLang) => {
 	const i18n = getI18N({ currentLocale });
 	return (
 		<div className="w-full flex flex-col">
@@ -13,7 +13,7 @@ export const Experiencia = ({ currentLocale }: PropsLang) => {
 
 			<div className="animate__animated animate__zoomIn">
 				<div className="flex flex-col hero-content gap-4 pt-4">
-					<ItemDataExperiencia currentLocale={currentLocale} />
+					<ItemExperience currentLocale={currentLocale} />
 				</div>
 			</div>
 		</div>

src/components/features/aboutMe/Habilidades.tsx → src/components/ui/About/Tabs/Skills.tsx

@@ -1,8 +1,8 @@
-import { ItemDataHabilidades } from "@/components/features/aboutMe/Items/ItemDataHabilidades";
+import { ItemSkills } from "@/components/ui/About/Items/ItemSkills.tsx";
 import { getI18N } from "@/i18n";
 import type { PropsLang } from "@/interfaces/currentLang.interface";
 
-export const Habilidades = ({ currentLocale }: PropsLang) => {
+export const Skills = ({ currentLocale }: PropsLang) => {
 	const i18n = getI18N({ currentLocale });
 	return (
 		<div className="w-full flex flex-col">
@@ -13,7 +13,7 @@ export const Habilidades = ({ currentLocale }: PropsLang) => {
 
 			<div className="animate__animated animate__zoomIn">
 				<div className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 p-4 gap-4">
-					<ItemDataHabilidades currentLocale={currentLocale} />
+					<ItemSkills currentLocale={currentLocale} />
 				</div>
 			</div>
 		</div>

src/components/organisms/TabsAcerca.tsx → src/components/ui/About/TabsAbout.tsx

@@ -1,11 +1,11 @@
 import { Briefcase, GraduationCap, PencilRuler, UserRound } from "lucide-react";
 import { useEffect, useState } from "react";
-import { Educacion } from "@/components/features/aboutMe/Educacion";
-import { Experiencia } from "@/components/features/aboutMe/Experiencia";
-import { Habilidades } from "@/components/features/aboutMe/Habilidades";
-import { SobreMi } from "@/components/features/aboutMe/SobreMi";
+import { Education } from "@/components/ui/About/Tabs/Education.tsx";
+import { Experience } from "@/components/ui/About/Tabs/Experience.tsx";
+import { Skills } from "@/components/ui/About/Tabs/Skills.tsx";
+import { Aboutme } from "@/components/ui/About/Tabs/Aboutme.tsx";
 import { getI18N } from "@/i18n";
-import type { PropsLang } from "@/interfaces/currentLang.interface";
+import type { PropsLang } from "@/interfaces/currentLang.interface.ts";
 
 export const TabsAcerca = ({ currentLocale }: PropsLang) => {
 	const [activeTab, setActiveTab] = useState<string>("experiencia");
@@ -119,15 +119,15 @@ export const TabsAcerca = ({ currentLocale }: PropsLang) => {
 			{/* Contenedor del contenido del tab con un ancho flexible */}
 			<div className="flex-1 w-full hero-content animate__animated animate__zoomIn">
 				{activeTab === "experiencia" && (
-					<Experiencia currentLocale={currentLocale} />
+					<Experience currentLocale={currentLocale} />
 				)}
 				{activeTab === "educacion" && (
-					<Educacion currentLocale={currentLocale} />
+					<Education currentLocale={currentLocale} />
 				)}
 				{activeTab === "habilidades" && (
-					<Habilidades currentLocale={currentLocale} />
+					<Skills currentLocale={currentLocale} />
 				)}
-				{activeTab === "sobreMi" && <SobreMi currentLocale={currentLocale} />}
+				{activeTab === "sobreMi" && <Aboutme currentLocale={currentLocale} />}
 			</div>
 		</div>
 	);

src/components/templates/Contacto.astro → src/components/ui/Contact/Contact.astro

@@ -1,5 +1,5 @@
 ---
-import { Form } from "@/components/features/contact/Form";
+import { Form } from "@/components/ui/Contact/Form";
 
 const { currentLocale } = Astro;
 ---

src/components/features/contact/Form.tsx → src/components/ui/Contact/Form.tsx

@@ -3,9 +3,12 @@ import { motion } from "framer-motion";
 import { Mail, Send, Github, Linkedin, MessageCircle } from "lucide-react";
 import { type FieldError, useForm } from "react-hook-form";
 import toast, { Toaster } from "react-hot-toast";
-import { useTheme } from "@/hooks/useTheme";
+import { useTheme } from "@/hooks/useTheme.ts";
 import { getI18N } from "@/i18n";
-import type { FormData, PropsLang } from "@/interfaces/currentLang.interface";
+import type {
+	FormData,
+	PropsLang,
+} from "@/interfaces/currentLang.interface.ts";
 import { contactSchema } from "@/schemas/contactSchema";
 
 export const Form = ({ currentLocale }: PropsLang) => {

src/components/templates/Header.astro → src/components/ui/Home/Home.astro

@@ -7,7 +7,7 @@ import {
 	MoveRight,
 	SquareArrowOutUpRight,
 } from "lucide-react";
-import { Bubble } from "@/components/atoms/Bubble";
+import { Bubble } from "@/components/ui/Bubble/Bubble";
 import { getI18N } from "@/i18n";
 import { Image } from "astro:assets";
 

src/components/organisms/Nav.tsx → src/components/ui/Navbar/Nav.tsx

@@ -1,10 +1,10 @@
 import { AnimatePresence, motion } from "framer-motion";
 import { Menu, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import { ItemsNav } from "@/components/features/navbar/ItemsNav";
-import { LangDrop } from "@/components/features/navbar/LangDrop";
-import { ThemeDrop } from "@/components/features/navbar/ThemeSwitch";
-import type { PropsLang } from "@/interfaces/currentLang.interface";
+import { ItemsNav } from "@/components/ui/Navbar/Items/ItemsNav.tsx";
+import { LangDrop } from "@/components/ui/Navbar/Items/LangDrop.tsx";
+import { ThemeDrop } from "@/components/ui/Navbar/Items/ThemeSwitch.tsx";
+import type { PropsLang } from "@/interfaces/currentLang.interface.ts";
 
 export const Nav = ({ currentLocale }: PropsLang) => {
 	const [isOpen, setIsOpen] = useState(false);

src/components/features/opinions/Items/CountryFlag.tsx → src/components/ui/Opinions/Items/CountryFlag.tsx

@@ -1,5 +1,5 @@
 import ReactCountryFlag from "react-country-flag";
-import type { CountryFlagProps } from "@/interfaces/currentLang.interface";
+import type { CountryFlagProps } from "@/interfaces/currentLang.interface.ts";
 
 export const CountryFlag = ({
 	countryCode,

src/components/templates/Opiniones.astro → src/components/ui/Opinions/Opiniones.astro

@@ -1,5 +1,5 @@
 ---
-import { Opinions } from "@/components/features/opinions/Opinions";
+import { Opinions } from "@/components/ui/Opinions/Opinions";
 
 const { currentLocale } = Astro;
 ---

src/components/features/opinions/Opinions.tsx → src/components/ui/Opinions/Opinions.tsx

@@ -6,8 +6,8 @@ import { getI18N } from "@/i18n";
 import type {
 	PropsLang,
 	Testimonial,
-} from "@/interfaces/currentLang.interface";
-import { CountryFlag } from "@/components/features/opinions/Items/CountryFlag";
+} from "@/interfaces/currentLang.interface.ts";
+import { CountryFlag } from "@/components/ui/Opinions/Items/CountryFlag.tsx";
 
 const containerVariants = {
 	hidden: { opacity: 0 },

src/components/features/opinions/sendOpinions.tsx → src/components/ui/Opinions/SendOpinions.tsx

@@ -3,14 +3,14 @@ import { AnimatePresence, motion } from "framer-motion";
 import { Briefcase, Globe, MessageSquare, Send, User } from "lucide-react";
 import { useId, useMemo, useState } from "react";
 import { type FieldError, useForm } from "react-hook-form";
-import { SubmittedOpinion } from "@/components/features/opinions/SubmittedOpinion";
+import { SubmittedOpinion } from "@/components/ui/Opinions/SubmittedOpinion.tsx";
 import { getI18N } from "@/i18n";
 import type {
 	FormOpinions,
 	PropsLang,
-} from "@/interfaces/currentLang.interface";
-import { opinionsSchema } from "@/schemas/opinionsSchema";
-import { countries } from "@/utils/countries";
+} from "@/interfaces/currentLang.interface.ts";
+import { opinionsSchema } from "@/schemas/opinionsSchema.ts";
+import { countries } from "@/utils/countries.ts";
 import ReactCountryFlag from "react-country-flag";
 
 export const SendOpinions = ({ currentLocale }: PropsLang) => {

src/components/features/opinions/SubmittedOpinion.tsx → src/components/ui/Opinions/SubmittedOpinion.tsx

@@ -1,7 +1,7 @@
 import { motion, type Variants } from "framer-motion";
 import { Check } from "lucide-react";
 import { getI18N } from "@/i18n";
-import type { PropsLang } from "@/interfaces/currentLang.interface";
+import type { PropsLang } from "@/interfaces/currentLang.interface.ts";
 
 const successVariants: Variants = {
 	hidden: { opacity: 0, scale: 0.8 },

src/components/ui/Opinions/send/SendOpinions.astro

@@ -0,0 +1,10 @@
+---
+import { SendOpinions } from "@/components/ui/Opinions/SendOpinions.tsx";
+
+const { currentLocale } = Astro;
+---
+
+<div
+    class="card not-first:isolate flex justify-center items-center w-full h-screen overflow-y-auto">
+    <SendOpinions client:load currentLocale={currentLocale} />
+</div>

src/components/features/projects/items/ItemDataProjects.tsx → src/components/ui/Projects/Items/ItemProjects.tsx

@@ -4,10 +4,7 @@ import { getI18N } from "@/i18n";
 import type { PropsLangWithData } from "@/interfaces/currentLang.interface";
 import { motion } from "framer-motion";
 
-export const ItemDataProjects = ({
-	currentLocale,
-	data,
-}: PropsLangWithData) => {
+export const ItemProjects = ({ currentLocale, data }: PropsLangWithData) => {
 	const [loadedImages, setLoadedImages] = useState<Record<string, boolean>>({});
 	const i18n = getI18N({ currentLocale });
 

src/components/templates/Proyectos.astro → src/components/ui/Projects/Projects.astro

@@ -1,5 +1,5 @@
 ---
-import { TabsProyectos } from "@/components/organisms/TabsProyectos";
+import { TabsProyectos } from "@/components/ui/Projects/TabsProjects";
 
 const { currentLocale } = Astro;
 ---

src/components/features/projects/Backend.tsx → src/components/ui/Projects/Tabs/Backend.tsx

@@ -1,12 +1,8 @@
-import { ItemDataProjects } from "@/components/features/projects/items/ItemDataProjects";
+import { ItemProjects } from "@/components/ui/Projects/Items/ItemProjects.tsx";
 import { getI18N } from "@/i18n";
-import type { PropsLangWithData } from "@/interfaces/currentLang.interface";
+import type { PropsLangWithData } from "@/interfaces/currentLang.interface.ts";
 
-export const Backend = ({
-	currentLocale,
-	data,
-	loading,
-}: PropsLangWithData) => {
+export const Backend = ({ currentLocale, data }: PropsLangWithData) => {
 	const i18n = getI18N({ currentLocale });
 	return (
 		<div className="w-full flex flex-col ">
@@ -16,11 +12,7 @@ export const Backend = ({
 
 			<div>
 				<div className="flex flex-col hero-content gap-4 pt-4 animate__animated animate__zoomIn">
-					<ItemDataProjects
-						currentLocale={currentLocale}
-						data={data}
-						loading={loading}
-					/>
+					<ItemProjects currentLocale={currentLocale} data={data} />
 				</div>
 			</div>
 		</div>

src/components/features/projects/Companies.tsx → src/components/ui/Projects/Tabs/Companies.tsx

@@ -1,12 +1,8 @@
-import { ItemDataProjects } from "@/components/features/projects/items/ItemDataProjects";
+import { ItemProjects } from "@/components/ui/Projects/Items/ItemProjects.tsx";
 import { getI18N } from "@/i18n";
-import type { PropsLangWithData } from "@/interfaces/currentLang.interface";
+import type { PropsLangWithData } from "@/interfaces/currentLang.interface.ts";
 
-export const Companies = ({
-	currentLocale,
-	data,
-	loading,
-}: PropsLangWithData) => {
+export const Companies = ({ currentLocale, data }: PropsLangWithData) => {
 	const i18n = getI18N({ currentLocale });
 	return (
 		<div className="w-full flex flex-col ">
@@ -16,11 +12,7 @@ export const Companies = ({
 
 			<div>
 				<div className="flex flex-col hero-content gap-4 pt-4 animate__animated animate__zoomIn">
-					<ItemDataProjects
-						currentLocale={currentLocale}
-						data={data}
-						loading={loading}
-					/>
+					<ItemProjects currentLocale={currentLocale} data={data} />
 				</div>
 			</div>
 		</div>