Adding Technologies section

src/components/Technologies.astro

@@ -0,0 +1,61 @@
+---
+import TailwindIcon from "./icons/Tailwind.astro";
+import NextJSIcon from "./icons/NextJS.astro";
+import HTMLIcon from "./icons/HTML.astro";
+import CSSIcon from "./icons/CSS.astro";
+import JavaScriptIcon from "./icons/JavaScript.astro";
+
+enum TechnologyType {
+  Frontend = 1,
+  Backend = 2,
+  Database = 3,
+  Other = 4,
+}
+const TECHNOLOGIES = [
+  {
+    name: 'JavaScript',
+    icon: JavaScriptIcon,
+    colorClasses: 'bg-yellow-500 dark:bg-yellow-300/40',
+    type: TechnologyType.Frontend
+  },
+  {
+    name: 'HTML',
+    icon: HTMLIcon,
+    colorClasses: 'bg-orange-600 dark:bg-orange-500/40',
+    type: TechnologyType.Frontend
+  },
+  {
+    name: 'CSS',
+    icon: CSSIcon,
+    colorClasses: 'bg-blue-500 dark:bg-blue-300/40',
+    type: TechnologyType.Frontend
+  },
+  {
+    name: "Tailwind",
+    icon: TailwindIcon,
+    colorClasses: "bg-blue-500 dark:bg-blue-500/40",
+    type: TechnologyType.Frontend,
+  },
+  {
+    name: "NextJS",
+    icon: NextJSIcon,
+    colorClasses: "bg-black dark:border-slate-600/20 border-2",
+    type: TechnologyType.Frontend,
+  },
+];
+---
+
+<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+  {
+    TECHNOLOGIES.map((technology) => (
+      <div
+        class={`flex flex-col items-center justify-center p-4 transition-all duration-300 ${technology.colorClasses} hover:scale-110 rounded-lg shadow-md`}
+      >
+        <technology.icon className="size-12" />
+        <span class="mt-2 text-sm font-semibold text-white">
+          {technology.name}
+        </span>
+      </div>
+    ))
+  }
+</div>

src/components/icons/CSS.astro

@@ -0,0 +1,11 @@
+<svg {...Astro.props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 520">
+  <path fill="#0c73b8" d="M41 460L0 0h451l-41 460-185 52"></path>
+  <path fill="#30a9dc" d="M226 472l149-41 35-394H226"></path>
+  <path
+    fill="#ecedee"
+    d="M226 208H94l5 57h127zm0-114H84l5 56h137zm0 261l-124-33 7 60 117 32z"
+  ></path>
+  <path
+    fill="#fff"
+    d="M226 265h69l-7 73-62 17v59l115-32 26-288H226v56h80l-6 58h-74z"></path>
+</svg>

src/components/icons/HTML.astro

@@ -0,0 +1,11 @@
+<svg {...Astro.props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 520">
+  <path fill="#e34f26" d="M41 460L0 0h451l-41 460-185 52"></path>
+  <path fill="#ef652a" d="M226 472l149-41 35-394H226"></path>
+  <path
+    fill="#ecedee"
+    d="M226 208h-75l-5-58h80V94H84l15 171h127zm0 147l-64-17-4-45h-56l7 89 117 32z"
+  ></path>
+  <path
+    fill="#fff"
+    d="M226 265h69l-7 73-62 17v59l115-32 16-174H226zm0-171v56h136l5-56z"></path>
+</svg>

src/components/icons/JavaScript.astro

@@ -0,0 +1,10 @@
+<svg
+  {...Astro.props}
+  xmlns="http://www.w3.org/2000/svg"
+  width="2500"
+  height="2500"
+  viewBox="0 0 1052 1052"
+  ><path fill="#f0db4f" d="M0 0h1052v1052H0z"></path><path
+    d="M965.9 801.1c-7.7-48-39-88.3-131.7-125.9-32.2-14.8-68.1-25.399-78.8-49.8-3.8-14.2-4.3-22.2-1.9-30.8 6.9-27.9 40.2-36.6 66.6-28.6 17 5.7 33.1 18.801 42.8 39.7 45.4-29.399 45.3-29.2 77-49.399-11.6-18-17.8-26.301-25.4-34-27.3-30.5-64.5-46.2-124-45-10.3 1.3-20.699 2.699-31 4-29.699 7.5-58 23.1-74.6 44-49.8 56.5-35.6 155.399 25 196.1 59.7 44.8 147.4 55 158.6 96.9 10.9 51.3-37.699 67.899-86 62-35.6-7.4-55.399-25.5-76.8-58.4-39.399 22.8-39.399 22.8-79.899 46.1 9.6 21 19.699 30.5 35.8 48.7 76.2 77.3 266.899 73.5 301.1-43.5 1.399-4.001 10.6-30.801 3.199-72.101zm-394-317.6h-98.4c0 85-.399 169.4-.399 254.4 0 54.1 2.8 103.7-6 118.9-14.4 29.899-51.7 26.2-68.7 20.399-17.3-8.5-26.1-20.6-36.3-37.699-2.8-4.9-4.9-8.7-5.601-9-26.699 16.3-53.3 32.699-80 49 13.301 27.3 32.9 51 58 66.399 37.5 22.5 87.9 29.4 140.601 17.3 34.3-10 63.899-30.699 79.399-62.199 22.4-41.3 17.6-91.3 17.4-146.6.5-90.2 0-180.4 0-270.9z"
+    fill="#323330"></path></svg
+>

src/pages/index.astro

@@ -9,8 +9,8 @@ import ProfileCheck from "@/components/icons/ProfileCheck.astro"
 import Projects from "@/components/Projects.astro"
 import SectionContainer from "@/components/SectionContainer.astro"
 import Hero from "@/components/Hero.astro"
+import Technologies from "@/components/Technologies.astro"
 import TitleSection from "@/components/TitleSection.astro"
----
 
 <Layout
   title="Porfolio de midudev - Desarrollador y Programador Web con 15 años de experiencia"
@@ -39,6 +39,16 @@ import TitleSection from "@/components/TitleSection.astro"
       <Projects />
     </SectionContainer>
 
+    <SectionContainer id="Tecnologias">
+      <h2
+        class="flex items-center mb-6 text-3xl font-semibold gap-x-3 text-black/80 dark:text-white"
+      >
+        <CodeIcon class="size-7" />
+        Tecnologias
+      </h2>
+      <Technologies />
+    </SectionContainer>
+
     <SectionContainer id="sobre-mi">
       <TitleSection>
         <ProfileCheck class="size-8" />