feat: Migrated previous web page from Angular to Astro

README.md

@@ -1,50 +1,42 @@
-# Astro Starter Kit: Minimal
+# Binary Brains
 
-```sh
-npm create astro@latest -- --template minimal
-```
+Página web para el club de desarrollo de software Binary Brains.
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
+## Tecnologías
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+- [Astro](https://astro.build/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Deno](https://deno.com/)
+- [Tabler Icons](https://tabler-icons.io/)
 
-## 🚀 Project Structure
+## Comandos
 
-Inside of your Astro project, you'll see the following folders and files:
+**Ejecutar el servidor de desarrollo**
 
-```text
-/
-├── public/
-├── src/
-│   └── pages/
-│       └── index.astro
-└── package.json
+```bash
+deno task dev
 ```
 
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page
-is exposed as a route based on its file name.
+**Formatear el código**
 
-There's nothing special about `src/components/`, but that's where we like to put
-any Astro/React/Vue/Svelte/Preact components.
+```bash
+deno fmt
+```
 
-Any static assets, like images, can be placed in the `public/` directory.
+**Verificar el código**
 
-## 🧞 Commands
+```bash
+deno lint
+```
 
-All commands are run from the root of the project, from a terminal:
+**Construir el sitio web**
 
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
+```bash
+deno task build
+```
 
-## 👀 Want to learn more?
+**Previsualizar el sitio web**
 
-Feel free to check [our documentation](https://docs.astro.build) or jump into
-our [Discord server](https://astro.build/chat).
+```bash
+deno task preview
+```

data/events/bb-101.md

@@ -0,0 +1,32 @@
+---
+title: "BB-101"
+link: "https://untalbry.notion.site/BB-101-1a07125838b9805f95a2f5baa926963d?pvs=74"
+address: "Unidad Profesional Interdisciplinaria de Ingeniería y Ciencias Sociales y Administrativas"
+imagePath: "/images/events/bb-101.jpg"
+eventDates: [
+    {
+        date: "2025-03-27",
+        start: "13:00",
+        end: "15:00",
+    },
+    {
+        date: "2025-04-03",
+        start: "13:00",
+        end: "15:00"
+    }
+]
+---
+
+El evento BB-101, que se llevará a cabo en la Unidad Profesional
+Interdisciplinaria de Ingeniería Ciencias Sociales Administrativas (UPIICSA) del
+20 de febrero al 8 de mayo de 2025, está diseñado para atraer entre 100 y 300
+participantes interesados en el mundo de la informática y la programación. Este
+seminario de introducción ofrece un programa integral que abarca desde los
+conceptos básicos de programación hasta temas avanzados como desarrollo web e
+inteligencia artificial. A lo largo de diez sesiones, los asistentes aprenderán
+a través de un enfoque práctico que incluye la creación de proyectos propios y
+la colaboración en grupo, fomentando así el aprendizaje autodidacta y el
+intercambio de conocimientos. Con un itinerario que incluye lenguajes como C y
+Python, así como herramientas de desarrollo y fundamentos de inteligencia
+artificial, BB-101 promete ser una experiencia enriquecedora para todos los
+participantes.

data/events/binary-talks-2.md

@@ -0,0 +1,21 @@
+---
+title: "Binary Talks"
+link: "https://lu.ma/BinaryTalks"
+address: "Unidad Profesional Interdisciplinaria de Ingeniería y Ciencias Sociales y Administrativas"
+imagePath: "/images/events/binary-talks-2.webp"
+eventDates: [
+  {
+    date: "2023-10-10",
+    start: "10:00",
+    end: "11:00",
+  }
+]
+---
+
+Binary Brains trae nuevamente a diversos ponentes tales como Brujería Tech,
+DevCaress, Ingesaurio, Arelys Reyes y más. A su vez vendrán varias empresas y
+comunidades a los cuales podrás participar en sus actividades pensadas para que
+pases un momento divertido mientras aprendes. De preferencia trae tu laptop para
+que puedas estar al tanto de diversos talleres que se estarán llevando acabo
+donde podrás aprender de inteligencia artificial, Machine learning, Hacking
+ético y de más .a. Puedes agregar aquí información relevante.

data/repositories/100-dias-10-proyectos.md

@@ -0,0 +1,21 @@
+---
+title: '100 dias 10 proyectos'
+technologies:
+- "HTML"
+- "CSS"
+- "JS"
+- "Java"
+- "Arduino"
+- "MySQL"
+- "React"
+- "Python"
+- "Spring"
+- "TS"
+link: "https://github.com/xVrzBx/100Days100Proyects"
+imagePath: "/images/repositories/100-dias.gif"
+---
+
+En este desafío harémos un proyecto de software todos los días para mejorar
+nuestras habilidades técnicas como desarrolladores BACKEND y FRONTEND,
+lograrémos estos objetivos practicando todos los días porque la práctica hace al
+maestro.

data/repositories/BB-101-c.md

@@ -0,0 +1,15 @@
+---
+title: 'BB101'
+link: 'https://github.com/casco613/BB-101'
+technologies:
+- 'C'
+- 'Makefile'
+imagePath: "/images/repositories/bb-101.jpg"
+---
+
+La biblioteca BB-101 es un conjunto de funciones en C diseñadas para facilitar
+la entrada de datos del usuario, para el curso de introducción de BB-101.
+Proporciona una interfaz sencilla para obtener diferentes tipos de datos,
+incluyendo enteros, números de punto flotante, caracteres y cadenas. Además,
+incluye una función para realizar preguntas de sí/no, lo que permite una
+interacción más dinámica con el usuario.

src/components/EventCard.astro

@@ -0,0 +1,87 @@
+---
+import IconMapPin from './icons/IconMapPin.astro';
+
+interface Props {
+  title: string;
+  link: string;
+  address: string;
+  eventDates: {
+    date: string;
+    start: string;
+    end: string;
+  };
+  imagePath: string;
+  content?: string;
+}
+
+const { title, link, address, eventDates, imagePath, content } = Astro.props;
+
+const date = new Date(`${eventDates.date}T12:00:00-06:00`);
+
+const month = Intl.DateTimeFormat("es", { month: "short" }).format(date).toUpperCase();
+const day = Intl.DateTimeFormat("es", { day: "2-digit" }).format(date);
+const wholeDate = Intl.DateTimeFormat("es", { weekday: "long", day: "2-digit", month: "long" }).format(date);
+
+---
+<a
+  href={link}
+  target="_blank"
+  rel="noopener noreferrer"
+  class="flex justify-center no-underline w-[90%] lg:w-1/2"
+>
+  <article class="rounded-lg card">
+    <img
+      class="w-full rounded-lg aspect-16/9 object-cover"
+      src={imagePath}
+      alt={title}
+    >
+    <div class="px-6 py-4">
+      <header class="flex justify-between mb-2 text-xl font-bold">
+        <h3 class="text-[#4CA4CA]">{title}</h3>
+      </header>
+      <div
+        class="grid grid-cols-[40px_1fr] lg:grid-cols-[40px_1fr_40px_1fr] gap-4 items-start"
+      >
+        <!-- Fecha -->
+        <div
+          class="flex flex-col justify-center items-center size-10 rounded-lg border-2 border-solid border-[#353C4B]"
+        >
+          <div
+            class="text-xs px-2 text-[#B1D9EB] bg-[#353C4B] flex-1 rounded-t-md"
+          >
+            {month}
+          </div>
+          <div
+            class="w-full px-2 text-xs flex justify-center text-[#B1D9EB] bg-[#1A2130] flex-1 rounded-b-md"
+          >
+            {day}
+          </div>
+        </div>
+        <div class="flex flex-col">
+          <time class="text-xs text-[#B1D9EB]" datetime={eventDates.date}
+          >{wholeDate}</time>
+          <span class="text-xs text-[#B1D9EB]">{eventDates.start} a {
+              eventDates.end
+            }</span>
+        </div>
+
+        <!-- Ubicacion -->
+        <div
+          class="flex flex-col justify-center items-center border-2 border-solid border-[rgba(255,255,255,0.16)] rounded-lg px-3 text-[#B1D9EB] size-10"
+        >
+          <IconMapPin class="size-5" />
+        </div>
+        <div class="flex flex-col">
+          <address class="text-xs text-[#B1D9EB] not-italic">
+            {address}
+          </address>
+        </div>
+      </div>
+      <div class="text-base my-4 text-[#B1D9EB]">
+        <p>
+          {content}
+        </p>
+      </div>
+    </div>
+  </article>
+</a>

src/components/Navbar.astro

@@ -0,0 +1,23 @@
+<nav class="p-6 fixed top-0 left-0 w-full bg-[#060513] z-10">
+  <div
+    class="flex flex-col lg:flex-row w-[75%] mx-auto justify-between items-center gap-4 lg:gap-0"
+  >
+    <img src="images/logo.svg" alt="Binary Brains logo" class="h-12">
+    <div
+      class="flex flex-col md:flex-row md:gap-16 lg:items-start md:items-end lg:ml-6"
+    >
+      <a href="#inicio" class="text-white font-extralight hover:text-[#5CCDFF]">
+        <span class="text-[#4BA2C9]">01-</span> Bienvenida</a>
+      <a
+        href="#eventos"
+        class="text-white font-extralight hover:text-[#5CCDFF]"
+      >
+        <span class="text-[#4BA2C9]">02-</span> Eventos próximos</a>
+      <a
+        href="#repositorios"
+        class="text-white font-extralight hover:text-[#5CCDFF]"
+      >
+        <span class="text-[#4BA2C9]">03-</span> Repositorios populares</a>
+    </div>
+  </div>
+</nav>