Skip to content

Commit 8bbe0eb

Browse files
mouredevmouredev
committed
Rebranding [WIP]
1 parent 3990e0d commit 8bbe0eb

17 files changed

+131
-72
lines changed

‎link_bio/assets/avatar.jpg

6.41 KB
Loading

‎link_bio/assets/css/styles.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
body {
2-
background-color: #0C151D;
2+
background-color: #1A1A1A;
3+
}
4+
5+
a:hover {
6+
color: #3EB0F9 !important;
37
}
48

59
@keyframes blinker {

‎link_bio/assets/icons/logo.png

-4.33 KB
Binary file not shown.

‎link_bio/assets/icons/logo_symbol.svg

+16
Loading

‎link_bio/assets/logo.svg

+19
Loading

‎link_bio/assets/logo_symbol.svg

+16
Loading

‎link_bio/link_bio/components/featured_link.py

+2-4
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,14 @@ def featured_link(featured: Featured) -> rx.Component:
99
rx.vstack(
1010
rx.image(
1111
src=featured.image,
12-
border_radius=Size.DEFAULT.value,
13-
background=Color.CONTENT.value,
12+
background=Color.PRIMARY.value,
1413
width="100%",
1514
height="auto",
1615
alt=f"Imagen destacada para: {featured.title}"
1716
),
1817
rx.text(
1918
featured.title,
20-
size=Spacing.VERY_SMALL.value,
21-
style=styles.button_body_style
19+
size=Spacing.VERY_SMALL.value
2220
),
2321
spacing=Spacing.SMALL.value,
2422
align_items="start",

‎link_bio/link_bio/components/footer.py

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
def footer() -> rx.Component:
1010
return rx.vstack(
1111
rx.image(
12-
src="/logo.png",
12+
src="/logo_symbol.svg",
1313
height=Size.VERY_BIG.value,
1414
width=Size.VERY_BIG.value,
1515
alt="Logotipo de MoureDev. Una \"eme\" entre llaves."
@@ -38,10 +38,10 @@ def footer() -> rx.Component:
3838
alt="Logo GitHub"
3939
),
4040
rx.text(
41-
"BUILDING SOFTWARE WITH ♥ FROM GALICIA TO THE WORLD.",
41+
"Building software with ♥ from Galicia to the world.",
4242
font_size=Size.MEDIUM.value,
4343
margin_top=Size.ZERO.value
44-
),
44+
)
4545
),
4646
href=const.REPO_URL,
4747
is_external=True
@@ -74,5 +74,5 @@ def footer() -> rx.Component:
7474
padding_bottom=Size.VERY_BIG.value,
7575
padding_x=Size.BIG.value,
7676
spacing=Spacing.ZERO.value,
77-
color=TextColor.FOOTER.value
77+
color=TextColor.LIGHT.value
7878
)

‎link_bio/link_bio/components/info_text.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@ def info_text(title: str, body: str) -> rx.Component:
1313
),
1414
f" {body}",
1515
font_size=Size.MEDIUM.value,
16-
color=TextColor.BODY.value
16+
color=TextColor.LIGHT.value
1717
)

‎link_bio/link_bio/components/link_button.py

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import reflex as rx
2+
from link_bio.styles.colors import Color
23
import link_bio.styles.styles as styles
34
from link_bio.styles.styles import Size, Spacing
45

@@ -23,13 +24,11 @@ def link_button(title: str,
2324
rx.vstack(
2425
rx.text(
2526
title,
26-
size=Spacing.SMALL.value,
27-
style=styles.button_title_style
27+
size=Spacing.SMALL.value
2828
),
2929
rx.text(
3030
body,
31-
size=Spacing.VERY_SMALL.value,
32-
style=styles.button_body_style
31+
size=Spacing.VERY_SMALL.value
3332
),
3433
align_items="start",
3534
spacing=Spacing.VERY_SMALL.value,
@@ -39,7 +38,9 @@ def link_button(title: str,
3938
align="center",
4039
width="100%"
4140
),
42-
border=f"{'2px' if highlight_color != None else '0px'} solid {highlight_color}",
41+
variant="solid",
42+
radius="none",
43+
background_color=highlight_color if highlight_color != None else Color.PRIMARY.value,
4344
class_name=styles.BOUNCEIN_ANIMATION if animated else None,
4445
on_click=rx.redirect(path=url, is_external=is_external)
4546
)

‎link_bio/link_bio/components/navbar.py

+8-5
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,18 @@
88
def navbar() -> rx.Component:
99
return rx.hstack(
1010
rx.link(
11-
rx.box(
12-
rx.text("moure", as_="span", color=Color.PRIMARY.value),
13-
rx.text("dev", as_="span", color=Color.SECONDARY.value),
14-
style=styles.navbar_title_style
11+
rx.next.image(
12+
src="/logo.svg",
13+
width="auto",
14+
height=Size.LARGE.value,
15+
justify="start",
16+
alt=f"MoureDev logo"
1517
),
1618
href=Route.INDEX.value
1719
),
1820
position="sticky",
19-
bg=Color.CONTENT.value,
21+
bg=Color.DARK.value,
22+
border_bottom="1px solid rgba(247, 247, 247, 0.2)",
2023
padding_x=Size.BIG.value,
2124
padding_y=Size.DEFAULT.value,
2225
z_index="999",

‎link_bio/link_bio/styles/colors.py

+6-8
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@
22

33

44
class Color(Enum):
5-
PRIMARY = "#14A1F0"
6-
SECONDARY = "#087ec4"
7-
BACKGROUND = "#0C151D"
8-
CONTENT = "#171F26"
9-
PURPLE = "#9146ff"
5+
LIGHT = "#F7F7F7"
6+
DARK = "#1A1A1A"
7+
PRIMARY = "#3EB0F9"
8+
PURPLE = "#7D00FE"
109
PRO = "#FF5500"
1110

1211

1312
class TextColor(Enum):
14-
HEADER = "#F1F2F4"
15-
BODY = "#C3C7CB"
16-
FOOTER = "#A3ABB2"
13+
LIGHT = "#F7F7F7"
14+
DARK = "#1A1A1A"

‎link_bio/link_bio/styles/fonts.py

+2-3
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@
33

44
class Font(Enum):
55
DEFAULT = "Poppins"
6-
TITLE = "Poppins"
7-
LOGO = "Comfortaa"
86

97

108
class FontWeight(Enum):
11-
LIGHT = "300"
9+
REGULAR = "400"
1210
MEDIUM = "500"
11+
BOLD = "800"

‎link_bio/link_bio/styles/styles.py

+36-33
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@
1111
# Sizes
1212

1313
STYLESHEETS = [
14-
"https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap",
15-
"https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap",
14+
"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;800&display=swap",
1615
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
1716
"/css/styles.css"
1817
]
@@ -43,53 +42,57 @@ class Spacing(Enum):
4342

4443
BASE_STYLE = {
4544
"font_family": Font.DEFAULT.value,
46-
"font_weight": FontWeight.LIGHT.value,
47-
"background_color": Color.BACKGROUND.value,
45+
"font_weight": FontWeight.REGULAR.value,
46+
"background_color": Color.DARK.value,
4847
rx.heading: {
49-
"color": TextColor.HEADER.value,
50-
"font_family": Font.TITLE.value,
48+
"color": TextColor.LIGHT.value,
49+
"font_family": Font.DEFAULT.value,
5150
"font_weight": FontWeight.MEDIUM.value
5251
},
52+
# rx.button: {
53+
# "width": "100%",
54+
# "height": "100%",
55+
# "padding": Size.SMALL.value,
56+
# "border_radius": Size.DEFAULT.value,
57+
# "color": TextColor.LIGHT.value,
58+
# "background_color": Color.DARK.value,
59+
# "white_space": "normal",
60+
# "text_align": "start",
61+
# "--cursor-button": "pointer",
62+
# "_hover": {
63+
# "background_color": Color.PRIMARY.value
64+
# }
65+
# },
5366
rx.button: {
5467
"width": "100%",
5568
"height": "100%",
56-
"padding": Size.SMALL.value,
57-
"border_radius": Size.DEFAULT.value,
58-
"color": TextColor.HEADER.value,
59-
"background_color": Color.CONTENT.value,
60-
"white_space": "normal",
61-
"text_align": "start",
62-
"--cursor-button": "pointer",
69+
"font_weight": FontWeight.MEDIUM.value,
70+
"cursor": "pointer",
71+
# "padding_x": "32px",
72+
# "padding_y": "16px",
73+
"white_space": "nowrap",
74+
"transition": "transform 0.05s ease",
75+
"color": Color.DARK.value,
76+
"border": f"1px solid {Color.LIGHT.value}",
77+
"box_shadow": f"3px 3px 0px 0px {Color.LIGHT.value}",
6378
"_hover": {
64-
"background_color": Color.SECONDARY.value
79+
"color": Color.LIGHT.value,
80+
"background": Color.DARK.value,
81+
"box_shadow": "none",
82+
"transform": "translate(3px, 3px)"
6583
}
6684
},
6785
rx.link: {
68-
"color": TextColor.BODY.value,
86+
"color": TextColor.LIGHT.value,
6987
"text_decoration": "none",
88+
""
7089
"_hover": {}
7190
}
7291
}
7392

74-
navbar_title_style = dict(
75-
font_family=Font.LOGO.value,
76-
font_weight=FontWeight.MEDIUM.value,
77-
font_size=Size.LARGE.value
78-
)
79-
8093
title_style = dict(
8194
width="100%",
8295
padding_top=Size.DEFAULT.value,
83-
font_size=Size.LARGE.value
84-
)
85-
86-
button_title_style = dict(
87-
font_family=Font.TITLE.value,
88-
font_weight=FontWeight.MEDIUM.value,
89-
color=TextColor.HEADER.value,
90-
)
91-
92-
button_body_style = dict(
93-
font_weight=FontWeight.LIGHT.value,
94-
color=TextColor.BODY.value
96+
font_size=Size.LARGE.value,
97+
font_weight=FontWeight.BOLD.value,
9598
)

‎link_bio/link_bio/views/courses_links.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ def courses_links() -> rx.Component:
1414
"Practica lógica con ejercicios y proyectos reales",
1515
"/icons/challenges.png",
1616
const.CODE_CHALLENGES_URL,
17-
highlight_color=Color.SECONDARY.value
17+
highlight_color=Color.PRIMARY.value
1818
),
1919
link_button(
2020
"JavaScript desde cero",

‎link_bio/link_bio/views/header.py

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import reflex as rx
22
import datetime
33
import link_bio.constants as const
4+
from link_bio.styles.fonts import FontWeight
45
from link_bio.styles.styles import Size, Spacing
56
from link_bio.styles.colors import Color, TextColor
67
from link_bio.components.link_icon import link_icon
@@ -37,8 +38,8 @@ def header(details=True) -> rx.Component:
3738
size=Spacing.MEDIUM_BIG.value,
3839
src="/avatar.jpg",
3940
radius="full",
40-
color=TextColor.BODY.value,
41-
bg=Color.CONTENT.value,
41+
color=TextColor.LIGHT.value,
42+
bg=Color.DARK.value,
4243
padding="2px",
4344
border=f"4px solid {Color.PRIMARY.value}"
4445
),
@@ -47,6 +48,7 @@ def header(details=True) -> rx.Component:
4748
rx.vstack(
4849
rx.heading(
4950
"Brais Moure",
51+
font_weight=FontWeight.BOLD.value,
5052
size=Spacing.BIG.value
5153
),
5254
rx.text(
@@ -104,11 +106,11 @@ def header(details=True) -> rx.Component:
104106
),
105107
rx.spacer(),
106108
info_text(
107-
"100+", "aplicaciones creadas"
109+
"150+", "aplicaciones creadas"
108110
),
109111
rx.spacer(),
110112
info_text(
111-
"2M+", "seguidores"
113+
"2.5M+", "seguidores"
112114
),
113115
width="100%"
114116
),
@@ -146,7 +148,7 @@ def header(details=True) -> rx.Component:
146148
Aquí podrás encontrar todos mis enlaces de interés ¡Bienvenid@!
147149
""",
148150
font_size=Size.DEFAULT.value,
149-
color=TextColor.BODY.value
151+
color=TextColor.LIGHT.value
150152
),
151153
width="100%",
152154
spacing=Spacing.BIG.value

‎link_bio/link_bio/views/index_links.py

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ def index_links() -> rx.Component:
2626
"/icons/code.svg",
2727
Route.COURSES.value,
2828
False,
29-
Color.SECONDARY.value
29+
Color.PRIMARY.value
3030
),
3131
link_button(
3232
"Twitch",
@@ -91,7 +91,7 @@ def index_links() -> rx.Component:
9191
link_button(
9292
"MoureDev",
9393
"Mi sitio web",
94-
"/icons/logo.png",
94+
"/icons/logo_symbol.svg",
9595
const.MOUREDEV_URL
9696
),
9797
link_button(

0 commit comments

Comments
 (0)