[ADD] Project descriptions

eolunas · Feb 8, 2024 · d0e15c2 · d0e15c2
1 parent 5613b96
commit d0e15c2
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 28 deletions.
diff --git a/src/components/Academic.astro b/src/components/Academic.astro
@@ -29,7 +29,10 @@ const EXPERIENCE = [
 
 <div class={`${className}`}>
   <h3
-    class="flex items-center justify-start gap-x-2 text-2xl font-semibold py-4 text-gray-700 dark:text-white"
+    class={`
+    flex items-center justify-center gap-x-2 text-4xl font-semibold py-4 text-gray-700
+    lg:justify-start 
+    dark:text-white`}
   >
     <BookIcon class="size-8" /> Educación
   </h3>

diff --git a/src/components/Experience.astro b/src/components/Experience.astro
@@ -42,7 +42,10 @@ const EXPERIENCE = [
 
 <div class={`${className}`}>
   <h3
-    class="flex items-center gap-x-2 text-2xl font-semibold py-4 text-gray-700 dark:text-white"
+    class={`
+    flex items-center justify-center gap-x-2 text-4xl font-semibold py-4 text-gray-700
+    lg:justify-start
+    dark:text-white`}
   >
     <ToolIcon class="size-8" /> Experiencia
   </h3>

diff --git a/src/components/Projects.astro b/src/components/Projects.astro
@@ -92,31 +92,38 @@ const TAGS = {
 const PROJECTS = [
   {
     title: "Publication App",
-    description: "Lorem ipsum ...",
+    description:
+      "Página web en la que se consumen datos de la API publica JsonPlaceHolder para obtener un listado de publicaciones y se muestran de manera organizada con scroll infinito y lazy loading, también se hace uso de las funciones de SSR proporcionadas por Next.js. El usuario puede ver en detalle, modificar y borrar las publicaciones, de la misma manera se pueden crear nuevas publicaciones que persisten de manera local.",
+    figma: null,
     link: "https://publication-page.vercel.app/",
     github: "https://github.com/eolunas/publication-web",
     image: "/eolunas-dev/projects/publication-web.webp",
     tags: [TAGS.NEXT, TAGS.TS, TAGS.TAILWIND],
   },
   {
     title: "Rick and Morty",
-    description: "Lorem ipsum ...",
+    description:
+      "Implementación de API pública del show Rick and Morty haciendo uso de todos los endpoint disponibles, para los cuales se crearon paginas independientes. De acuerdo a la localización del usuario el sistema de filtrado muestra opciones solo relacionadas con el endpoint de solicitud a la API, repositorio montado sobre GitHub Pages haciendo uso de GitHub Actions.",
+    figma: null,
     link: "https://eolunas.github.io/rickandmorty/",
     github: "https://github.com/eolunas/rickandmorty",
     image: "/eolunas-dev/projects/rick-and-morthy.webp",
     tags: [TAGS.REACT, TAGS.REACTROUTER, TAGS.BOOTSTRAP, TAGS.VITE],
   },
   {
     title: "My Day App",
-    description: "",
+    description:
+      "Implementación de las funcionalidades de aplicación para gestión de tareas, el usuario puede almacenar dichas tareas de manera local con una descripción, modificar las tareas haciendo doble click sobre ellas, categorizarlas como completadas, filtrarlas con un buscador por nombre o según su estado y hacer la eliminación individual o aquellas que se encuentren completadas. ",
+    figma: null,
     link: "https://eolunas.github.io/mydayapp/",
     github: "https://github.com/eolunas/mydayapp",
     image: "/eolunas-dev/projects/my-day-app.webp",
     tags: [TAGS.HTML, TAGS.CSS, TAGS.JS, TAGS.WEBPACK, TAGS.PLAYWRIGTH],
   },
   {
     title: "Smart Web Blind",
-    description: "",
+    description:
+      "Proyecto para control de persianas de forma automática mediante una aplicación web en cual se puede controlar de modo manual y configurar horarios en los cuales se abra o cierre a una posición especifica de forma automática, comunicación mediante protocolo HTTP usando placa Arduino y Ethernet Shield.",
     link: null,
     figma:
       "https://www.figma.com/file/Pml08ONq6TbMCq65bVEBOO/Smart-Blind-Web?type=design&node-id=0%3A1&mode=design&t=JA35QqGBV56mWZC4-1",
@@ -126,15 +133,19 @@ const PROJECTS = [
   },
   {
     title: "Travel Web",
-    description: "Lorem ipsum ...",
+    description:
+      "Landing page de una aplicación para reservaciones [solo maquetación] en la cual se implementa el uso de la última versión de la librería Tailwind-CSS y la configuración para el uso de darkmode.",
+    figma: null,
     link: "https://eolunas.github.io/travel-web/",
     github: "https://github.com/eolunas/travel-web",
     image: "/eolunas-dev/projects/travelweb.webp",
     tags: [TAGS.HTML, TAGS.TAILWIND, TAGS.JS],
   },
   {
     title: "Bomber-Chip Game",
-    description: "Lorem ipsum ...",
+    description:
+      "Videojuego basado en juegos del año 90 en el que se implementa lógica de coaliciones, escucha de eventos de teclado, score basado en tiempo y jugabilidad mediante vidas. Se implementa sistema de ajuste responsivo.",
+    figma: null,
     link: "https://eolunas.github.io/bomber-chip-game/",
     github: "https://github.com/eolunas/bomber-chip-game",
     image: "/eolunas-dev/projects/bomber-chip-game.webp",
@@ -152,19 +163,11 @@ const PROJECTS = [
     PROJECTS.map(({ title, description, link, github, image, tags }) => (
       <div
         class={`
-        w-full my-5
+        w-full my-5 
         flex flex-col items-center
-        md:w-1/2
+        md:w-1/2 md:px-5
         `}
       >
-        <h3 class="w-full text-left text-xl font-semibold mb-1 text-marrsgreen dark:text-carrigreen">
-          {title}
-        </h3>
-
-        <p class="w-full text-left text-lg mb-4 text-pretty text-black/70 dark:text-white ">
-          {description}
-        </p>
-
         <div class="relative flex justify-center">
           <div
             class={`
@@ -195,6 +198,13 @@ const PROJECTS = [
           />
         </div>
 
+        <h3 class="w-full text-left text-xl font-semibold mb-1 text-marrsgreen dark:text-carrigreen">
+          {title}
+        </h3>
+        <p class="w-full text-left text-xs mb-2 text-pretty text-black/70 dark:text-white md:text-sm">
+          {description}
+        </p>
+
         <ul class="w-full flex gap-x-2 flex-row flex-wrap mt-1 m-2">
           {tags.map((tag) => (
             <li>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,13 +1,16 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import PerfilIcon from "../icons/Perfil.astro";
+import CodeIcon from "../icons/Code.astro";
+import BlogIcon from "../icons/Blog.astro";
+import MessageIcon from "../icons/Message.astro";
 import SocialPill from "../icons/SocialPill.astro";
 import LinkedInIcon from "../icons/LinkedIn.astro";
 import DownloadIcon from "../icons/Download.astro";
 import GitHubIcon from "../icons/GitHub.astro";
 import MailIcon from "../icons/Mail.astro";
 import Experience from "../components/Experience.astro";
 import SectionContainer from "../components/SectionContainer.astro";
-import CodeIcon from "../icons/Code.astro";
 import Projects from "../components/Projects.astro";
 import Avatar from "../icons/Avatar";
 import Academic from "../components/Academic.astro";
@@ -98,11 +101,11 @@ import Academic from "../components/Academic.astro";
     <SectionContainer id="aboutme" class="pt-14">
       <h2
         class={`
-        text-black/70 text-3xl font-semibold my-1 py-4
-        flex items-center gap-x-2  
+        text-black/70 text-5xl font-semibold my-1 py-4
+        flex items-center justify-center gap-x-2  
         dark:text-white`}
       >
-        Sobre mi
+      <PerfilIcon class="size-10" /> Sobre mi
       </h2>
       <p
         class={`
@@ -121,18 +124,18 @@ import Academic from "../components/Academic.astro";
 
     <SectionContainer id="projects" class="pt-14">
       <h2
-        class="flex items-center gap-x-2 text-3xl font-semibold py-4 text-gray-700 dark:text-white"
+        class="flex items-center justify-center gap-x-2 text-5xl font-semibold py-4 text-gray-700 dark:text-white"
       >
-        <CodeIcon class="size-8" /> Proyectos
+        <CodeIcon class="size-10" /> Proyectos
       </h2>
       <Projects />
     </SectionContainer>
 
     <SectionContainer id="blog" class="pt-14">
       <h2
-        class="flex items-center gap-x-2 text-3xl font-semibold py-4 text-gray-700 dark:text-white"
+        class="flex items-center justify-center gap-x-2 text-5xl font-semibold py-4 text-gray-700 dark:text-white"
       >
-        Blog
+      <BlogIcon class="size-10" /> Blog
       </h2>
       <p class="text-white text-lg">
         Decripcion de 'How to do' algunos proyectos e informacion de interes.
@@ -141,9 +144,9 @@ import Academic from "../components/Academic.astro";
 
     <SectionContainer id="contact" class="pt-14">
       <h2
-        class="flex items-center gap-x-2 text-3xl font-semibold py-4 text-gray-700 dark:text-white"
+        class="flex items-center justify-center gap-x-2 text-5xl font-semibold py-4 text-gray-700 dark:text-white"
       >
-        Contacto
+      <MessageIcon class="size-10" /> Contacto
       </h2>
       <p class="text-white text-lg">
         Formulario de contacto e informacion relevante de redes.