Clase 2

Componentes visuales.

Author: mouredev

README.md

@@ -10,14 +10,16 @@
 ### Proyecto realizado durante emisiones en directo desde [Twitch](https://twitch.tv/mouredev)
 > ##### Si consideras útil el curso, apóyalo haciendo "★ Star" en el repositorio. ¡Gracias!
 
-## Próxima Clase: 11/10/2023
+## Próxima Clase: Miércoles 18/10/2023
 ### ⏰ 20:00 (hora España) en directo desde [Twitch](https://twitch.tv/mouredev)
-### 🌐 Consulta el horario por país y crea un recordatorio desde [Discord](https://discord.gg/szCvz8xV?event=1159409862787211284)
+### 🌐 Consulta el horario por país y crea un recordatorio desde [Discord](https://discord.gg/mouredev?event=1161934670380933151)
 
 ## Clases anteriores
 
 ### Clase 1 (04/10/2023): Introducción, instalación y configuración ▶️ [Ver clase en vídeo](https://www.twitch.tv/videos/1942562640?t=00h18m05s)
 
+### Clase 2 (11/10/2023): Componentes visuales ▶️ [Ver clase en vídeo](https://www.twitch.tv/videos/1948407270?t=00h20m02s)
+
 ## Proyecto
 
 Durante el curso aprenderemos desarrollo web con Python puro utilizando el framework [Reflex](https://github.com/reflex-dev/reflex). Realizaremos un proyecto práctico que consistirá en desarrollar y publicar mi nueva web de links [moure.dev](https://moure.dev/) (añadiéndole muchas nuevas funcionalidades).
@@ -74,7 +76,7 @@ Si quieres unirte a nuestra comunidad de desarrollo, aprender programación de A
 ![GitHub Followers](https://img.shields.io/github/followers/mouredev?style=social)
 ![GitHub Followers](https://img.shields.io/github/stars/mouredev?style=social)
 
-Soy ingeniero de software desde hace más de 12 años. Desde hace 4 años combino mi trabajo desarrollando Apps con creación de contenido formativo sobre programación y tecnología en diferentes redes sociales como **[@mouredev](https://moure.dev)**.
+Soy ingeniero de software desde hace más de 13 años. Desde hace 5 años combino mi trabajo desarrollando Apps con creación de contenido formativo sobre programación y tecnología en diferentes redes sociales como **[@mouredev](https://moure.dev)**.
 
 ### En mi perfil de GitHub tienes más información
 

link_bio/link_bio/components/footer.py

@@ -0,0 +1,14 @@
+import reflex as rx
+import datetime
+
+
+def footer() -> rx.Component:
+    return rx.vstack(
+        rx.image(src="favicon.ico"),
+        rx.link(
+            f"© 2014-{datetime.date.today().year} MOUREDEV BY BRAIS MOURE V3.",
+            href="https://mouredev.com",
+            is_external=True
+        ),
+        rx.text("BUILDING SOFTWARE WITH ♥ FROM GALICIA TO THE WORLD.")
+    )

link_bio/link_bio/components/link_button.py

@@ -0,0 +1,9 @@
+import reflex as rx
+
+
+def link_button(text: str, url: str) -> rx.Component:
+    return rx.link(
+        rx.button(text),
+        href=url,
+        is_external=True
+    )

link_bio/link_bio/components/navbar.py

@@ -0,0 +1,15 @@
+import reflex as rx
+
+
+def navbar() -> rx.Component:
+    return rx.hstack(
+        rx.text(
+            "mouredev",
+            height="40px"
+        ),
+        position="sticky",
+        bg="blue",
+        padding_x="16px",
+        padding_y="8px",
+        z_index="999"
+    )

link_bio/link_bio/link_bio.py

@@ -1,12 +1,21 @@
 import reflex as rx
+from link_bio.components.navbar import navbar
+from link_bio.components.footer import footer
+from link_bio.views.header.header import header
+from link_bio.views.links.links import links
 
 
 class State(rx.State):
     pass
 
 
 def index() -> rx.Component:
-    return rx.text("Hola Reflex!", color="blue")
+    return rx.vstack(
+        navbar(),
+        header(),
+        links(),
+        footer()
+    )
 
 
 app = rx.App()

link_bio/link_bio/views/header/header.py

@@ -0,0 +1,13 @@
+import reflex as rx
+
+
+def header() -> rx.Component:
+    return rx.vstack(
+        rx.avatar(name="Brais Moure", size="xl"),
+        rx.text("@mouredev"),
+        rx.text("HOLA 👋🏼 MI NOMBRE ES BRAIS MOURE"),
+        rx.text("""Soy ingeniero de software desde hace más de 12 años.
+                Actualmente trabajo como freelance full-stack developer iOS y Android.
+                Además creo contenido formativo sobre programación y tecnología en redes.
+                Aquí podrás encontrar todos mis enlaces de interés. ¡Bienvenid@!""")
+    )

link_bio/link_bio/views/links/links.py

@@ -0,0 +1,12 @@
+import reflex as rx
+from link_bio.components.link_button import link_button
+
+
+def links() -> rx.Component:
+    return rx.vstack(
+        link_button("Twitch", "https://twitch.tv/mouredev"),
+        link_button("YouTube", "https://youtube.com/@mouredev"),
+        link_button("YouTube (canal secundario)",
+                    "https://youtube.com/@mouredevtv"),
+        link_button("Discord", "https://discrod.gg/mouredev")
+    )