feat: About us section finished by mendodevv · Pull Request #60 · binarybrains-club/Hacktion

mendodevv · 2025-06-03T01:45:38Z

Issue que soluciona: #47

Esta PR introduce la sección "Acerca de Nosotros" para el sitio del Hacktion.
Los cambios notables en la estructura del proyecto/código son los siguientes:

Se creó el componente "AboutUs.astro" en la carpeta /src/components.
Se agregó la imagen del Hacktion 2024 en la carpeta /public.
En el archivo "index.astro", se importó el componente del about us, se agregó su etiqueta par que fuese visible en el sitio y se le posicionó en el centro.

Antes:

Despues:

¿Hay algún aspecto particular que los revisores deban tener presente al analizar este pull
request?
Si, la verdad es mi primera vez trabajando con Astro y Tailwind, no se si la parte de la responsividad de la sección es la adecuada. De cualquier modo quedo al pendiente de cualquier observación
¿Esta solicitud incluye pruebas, ejemplos o una forma de validar los cambios realizados?
Con correr "deno task dev" para poder ver la página en local se podrán visualizar los cambios.

Lista de verificación

Pruebas superadas
Documentación actualizada

Gracias por ver esta solicitud, cualquier observación se tomará en cuenta :)

EGAMAGZ · 2025-06-03T02:23:16Z

De primera vista me agrada, lo que veo 7u7. Ahorita lo revisare con detalle. No olvides formatear el codigo con deno fmt

EGAMAGZ · 2025-06-03T22:21:15Z

src/components/AboutUs.astro

+        <div class="w-full h-full rounded-lg bg-white border-1 border-black shadow-[5px_5px_rgba(0,0,0)]">
+            <img src="/Hacktion/bbhacktion.jpg" alt="Hacktion Logo" class="w-full h-full object-cover rounded-lg" />
+            <div class="absolute bottom-0 left-0 w-full h-[8vh] bg-[#00823A] p-3 rounded-b-lg border-2 border-black items-center flex">
+                <p class="text-white text-xl font-light">Hacktion 2024 - Wizeline CDMX</p>
+            </div>
+        </div>


Recomiendo el uso del Componente Image Card que se encuentra en src/components/ui/ImageCard.tsx del framework de componentes que estamos haciendo uso Neobrutalism

EGAMAGZ · 2025-06-03T22:21:59Z

src/components/AboutUs.astro

+const { class: className } = Astro.props;
+---
+
+<div class={`flex flex-col md:flex-row w-11/12 md:w-3/5 h-auto gap-y-3 md:gap-x-1 mx-auto ${className}`}>


Suggested change

<div class={`flex flex-col md:flex-row w-11/12 md:w-3/5 h-auto gap-y-3 md:gap-x-1 mx-auto ${className}`}>

<div class={`flex flex-col md:flex-row w-11/12 md:w-3/5 h-auto gap-y-3 md:gap-x-1 mx-auto ${className ?? ""}`}>

Para en caso de que no se pase ninguna clase no genere un "undefined"

EGAMAGZ · 2025-06-03T22:23:27Z

src/components/AboutUs.astro

+const { class: className } = Astro.props;
+---
+
+<div class={`flex flex-col md:flex-row w-11/12 md:w-3/5 h-auto gap-y-3 md:gap-x-1 mx-auto ${className}`}>


Suggested change

<div class={`flex flex-col md:flex-row w-11/12 md:w-3/5 h-auto gap-y-3 md:gap-x-1 mx-auto ${className}`}>

<section class={`flex flex-col md:flex-row w-11/12 md:w-3/5 h-auto gap-y-3 md:gap-x-1 mx-auto ${className}`}>

Recomendacion de uso de section por temas de html semantico

EGAMAGZ · 2025-06-03T22:23:53Z

src/components/AboutUs.astro

+
+<div class={`flex flex-col md:flex-row w-11/12 md:w-3/5 h-auto gap-y-3 md:gap-x-1 mx-auto ${className}`}>
+    <div class="w-full md:w-1/2">
+        <h1 class="text-6xl">Acerca de nosotros</h1>


Suggested change

<h1 class="text-6xl">Acerca de nosotros</h1>

<h2 class="text-6xl">Acerca de nosotros</h2>

Recomendacion por temas de HTML Semantico y estar dentro de un section

EGAMAGZ · 2025-06-04T02:14:17Z

src/components/AboutUs.astro

+---
+const { class: className } = Astro.props;
+---


Suggested change

---

const { class: className } = Astro.props;

---

---

interface Props {

className?: string;

}

const { className } = Astro.props;

---

Puedes definir de una vez los props a recibir

EGAMAGZ · 2025-06-11T02:50:19Z

@mendodevv , sigue esta PR activa?

mendodevv · 2025-06-11T03:35:27Z

@EGAMAGZ ya hice push de las correcciones, quedo al pendiente de cualquier cosa

EGAMAGZ · 2025-06-11T18:39:52Z

No olvides el uso de deno fmt para darle formato a todo el codigo realizado :D

EGAMAGZ · 2025-06-11T18:43:56Z

src/pages/index.astro

 <BaseLayout title="Hacktion">
  <main class="">
-    asd
+    <Aboutus className="mx-auto"/>


Suggested change

<Aboutus className="mx-auto"/>

<section class="flex flex-col items-stretch md:flex-row w-11/12 md:w-3/5 h-auto gap-y-3 md:gap-x-3 mx-auto">

<div class="w-full md:w-1/2">

<h2 class="text-6xl">Acerca de nosotros</h2>

<p class="text-gray-500 font-normal">Hacktion es un hackathon hecha por la comunidad de Notion Campus Leaders

en colaboración con muchas otras comunidades de desarrollo. <br>

<br>

Busca crear un espacio donde personas que van adentrando a la informática

puedan experimentar su primer hackathon aprendiendo de la mano de grandes

mentores y poniendo a prueba para poder resolver problemas de alto impacto</p>

</div>

<ImageCard

className="w-2/5 h-auto mx-auto bg-[#00823A]"

caption="Hacktion 2024 - Wizeline CDMX"

imageUrl="/Hacktion/bbhacktion.jpg"

></ImageCard>

</section>

De preferencia dejalo en index.astro al no ser algo que se reutilice y por su "sencilles" mejor dejarlo en la pagina principal de una vez

mendodevv · 2025-06-11T19:30:54Z

Listo, moví el código al index y usé el deno format, quedo al pendiente de cualquier otra corrección :D

EGAMAGZ · 2025-06-17T02:10:41Z

Al reducir el tamaño de la pagina se rompe la seccion. Por fa considera diferentes tamaños de pantalla principalmente dispositivos moviles, tablet y laptop

mendodevv · 2025-06-17T04:10:04Z

Pantallas grandes:

Pantallas medianas:

Pantallas chicas:

¿Queda mejor de esta manera?

EGAMAGZ · 2025-06-18T00:59:43Z

Cuando sea de ese tamaño, pequeño, que se reduzca de tamaño el titulo y trata de que el imagecard abarque el 100% (quitando el espacio del padding/margin de la pagina) de ancho

EGAMAGZ · 2025-06-18T01:00:34Z

Junto a eso, agrega más espacio entre el "Acerca de Nosotros" y el texto

EGAMAGZ · 2025-06-18T01:02:36Z

src/pages/index.astro

+      <div class="w-full md:w-1/2">
+        <h2 class="text-6xl">Acerca de nosotros</h2>
+        <p class="text-gray-500 font-normal">
+          Hacktion es un hackathon hecha por la comunidad de Notion Campus Leaders en colaboración
+          con muchas otras comunidades de desarrollo. <br>
+          <br>
+          Busca crear un espacio donde personas que van adentrando a la informática puedan
+          experimentar su primer hackathon aprendiendo de la mano de grandes mentores y poniendo a
+          prueba para poder resolver problemas de alto impacto
+        </p>
+      </div>


Suggested change

<div class="w-full md:w-1/2">

<h2 class="text-6xl">Acerca de nosotros</h2>

<p class="text-gray-500 font-normal">

Hacktion es un hackathon hecha por la comunidad de Notion Campus Leaders en colaboración

con muchas otras comunidades de desarrollo. <br>

<br>

Busca crear un espacio donde personas que van adentrando a la informática puedan

experimentar su primer hackathon aprendiendo de la mano de grandes mentores y poniendo a

prueba para poder resolver problemas de alto impacto

</p>

</div>

<div class="w-full md:w-1/2">

<h2 class="text-6xl">Acerca de nosotros</h2>

<div class="text-gray-500 font-normal space-y-4">

<p>

Hacktion es un hackathon hecha por la comunidad de Notion Campus Leaders en colaboración

con muchas otras comunidades de desarrollo.

</p>

<p>

Busca crear un espacio donde personas que van adentrando a la informática puedan

experimentar su primer hackathon aprendiendo de la mano de grandes mentores y poniendo a

prueba para poder resolver problemas de alto impacto.

</p>

</div>

</div>

Para evitar el uso de

mendodevv and others added 5 commits May 31, 2025 02:15

feat: create component for about us section

f8e1c9d

Merge branch 'binarybrains-upiicsa:main' into feature/about-us

45c2fd0

chore: create aboutus img container

1d76105

chore: finish about us section

11bf6e6

feat: make component responsive

dc5c84d

mendodevv changed the title ~~[FEAT] About us section finished~~ feat: About us section finished Jun 3, 2025

EGAMAGZ self-requested a review June 3, 2025 02:22

EGAMAGZ suggested changes Jun 3, 2025

View reviewed changes

EGAMAGZ suggested changes Jun 4, 2025

View reviewed changes

chore: corrections

22a8ada

EGAMAGZ suggested changes Jun 11, 2025

View reviewed changes

chore: add code to index and deno fmt

75e95f8

EGAMAGZ suggested changes Jun 18, 2025

View reviewed changes

EGAMAGZ merged commit 0abb4a8 into binarybrains-club:main Jun 18, 2025
3 checks passed

mendodevv mentioned this pull request Jun 18, 2025

chore: responsive & spacing update #64

Merged

	<div class={`flex flex-col md:flex-row w-11/12 md:w-3/5 h-auto gap-y-3 md:gap-x-1 mx-auto ${className}`}>
	<div class={`flex flex-col md:flex-row w-11/12 md:w-3/5 h-auto gap-y-3 md:gap-x-1 mx-auto ${className ?? ""}`}>

	<div class={`flex flex-col md:flex-row w-11/12 md:w-3/5 h-auto gap-y-3 md:gap-x-1 mx-auto ${className}`}>
	<section class={`flex flex-col md:flex-row w-11/12 md:w-3/5 h-auto gap-y-3 md:gap-x-1 mx-auto ${className}`}>

	<h1 class="text-6xl">Acerca de nosotros</h1>
	<h2 class="text-6xl">Acerca de nosotros</h2>

----
-const { class: className } = Astro.props;
----
+---
+interface Props {
+   className?: string;
+}
+const { className } = Astro.props;
+---

-    <Aboutus className="mx-auto"/>
+<section class="flex flex-col items-stretch md:flex-row w-11/12 md:w-3/5 h-auto gap-y-3 md:gap-x-3 mx-auto">
+    <div class="w-full md:w-1/2">
+        <h2 class="text-6xl">Acerca de nosotros</h2>
+        <p class="text-gray-500 font-normal">Hacktion es un hackathon hecha por la comunidad de Notion Campus Leaders
+        en colaboración con muchas otras comunidades de desarrollo. <br>
+        <br>
+        Busca crear un espacio donde personas que van adentrando a la informática
+        puedan experimentar su primer hackathon aprendiendo de la mano de grandes
+        mentores y poniendo a prueba para poder resolver problemas de alto impacto</p>
+    </div>
+    <ImageCard
+        className="w-2/5 h-auto mx-auto bg-[#00823A]"
+        caption="Hacktion 2024 - Wizeline CDMX"
+        imageUrl="/Hacktion/bbhacktion.jpg"
+    ></ImageCard>
+</section>

Comments

Conversation

mendodevv commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

EGAMAGZ commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

EGAMAGZ Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

EGAMAGZ Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

EGAMAGZ Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

EGAMAGZ Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

EGAMAGZ Jun 4, 2025

Choose a reason for hiding this comment

Uh oh!

EGAMAGZ commented Jun 11, 2025

Uh oh!

mendodevv commented Jun 11, 2025

Uh oh!

EGAMAGZ commented Jun 11, 2025

Uh oh!

EGAMAGZ Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

mendodevv commented Jun 11, 2025

Uh oh!

EGAMAGZ commented Jun 17, 2025

Uh oh!

mendodevv commented Jun 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

EGAMAGZ commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

EGAMAGZ commented Jun 18, 2025

Uh oh!

EGAMAGZ Jun 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mendodevv commented Jun 3, 2025 •

edited

Loading

EGAMAGZ commented Jun 3, 2025 •

edited

Loading

mendodevv commented Jun 17, 2025 •

edited

Loading

EGAMAGZ commented Jun 18, 2025 •

edited

Loading