add skills

Author: octapereyra

src/components/Footer.astro

@@ -10,8 +10,7 @@ const currentYear = new Date().getFullYear()
   >
     <span class="text-sm sm:text-center text-zinc-800/90 dark:text-zinc-200/90"
       >© {currentYear}
-      <a href="https://midu.dev/" class="hover:underline">Octavio Pereyra</a>.
-      Casi todos los derechos reservados
+      Octavio Pereyra. Casi todos los derechos reservados
     </span>
     <ul
       class="flex flex-wrap items-center mt-3 text-sm font-medium dark:text-white/90 sm:mt-0"

src/components/Header.astro

@@ -3,9 +3,9 @@ import ThemeToggle from './ThemeToggle.astro'
 
 const navItems = [
   {
-    title: 'Experiencia',
-    label: 'experiencia',
-    url: '/#experiencia',
+    title: 'Skills',
+    label: 'skills',
+    url: '/#skills',
   },
   {
     title: 'Proyectos',

src/components/Skills.astro

@@ -0,0 +1,46 @@
+---
+import Java from './icons/Java.astro'
+import Angular from './icons/Angular.astro'
+import NodeJS from './icons/NodeJS.astro'
+import Typescript from './icons/Typescript.astro'
+import Sql from './icons/Sql.astro'
+import DotNet from './icons/DotNet.astro'
+
+const SKILLS = [
+  {
+    lang: 'Java',
+    icon: Java,
+  },
+  {
+    lang: '.NET',
+    icon: DotNet,
+  },
+  {
+    lang: 'Angular',
+    icon: Angular,
+  },
+  {
+    lang: 'NodeJS',
+    icon: NodeJS,
+  },
+  {
+    lang: 'Typescript',
+    icon: Typescript,
+  },
+  {
+    lang: 'SQL',
+    icon: Sql,
+  },
+]
+---
+
+<div class="flex flex-row justify-between items-center gap-8">
+  {
+    SKILLS.map((skill) => (
+      <div class="flex flex-col justify-center items-center gap-3 ">
+        <skill.icon class="w-9 h-12" />
+        <span class="text-base">{skill.lang}</span>
+      </div>
+    ))
+  }
+</div>

src/pages/index.astro

@@ -2,9 +2,9 @@
 import Layout from '@/layouts/Layout.astro'
 
 import AboutMe from '@/components/AboutMe.astro'
-import Briefcase from '@/components/icons/Briefcase.astro'
+import Keyboard from '@/components/icons/Keyboard.astro'
 import CodeIcon from '@/components/icons/Code.astro'
-import Experience from '@/components/Experience.astro'
+import Skills from '@/components/Skills.astro'
 import ProfileCheck from '@/components/icons/ProfileCheck.astro'
 import Projects from '@/components/Projects.astro'
 import SectionContainer from '@/components/SectionContainer.astro'
@@ -21,15 +21,15 @@ import Hero from '@/components/Hero.astro'
     </SectionContainer>
   </main>
   <div class="space-y-24">
-    <!-- <SectionContainer id="experiencia">
+    <SectionContainer id="skills">
       <h2
         class="flex items-center mb-6 text-3xl font-semibold gap-x-3 text-black/80 dark:text-white"
       >
-        <Briefcase class="size-8" />
-        Experiencia laboral
+        <Keyboard class="size-8" />
+        Skills
       </h2>
-      <Experience />
-    </SectionContainer> -->
+      <Skills />
+    </SectionContainer>
 
     <SectionContainer id="proyectos">
       <h2