Skip to content

Commit 93bef3c

Browse files
Raj4646Raj4646
authored
Code refactor - Gridx Portfolio (#126)
* improved code readability and responsive fixes * gridx code readability improvements
1 parent 7460b4b commit 93bef3c

File tree

3 files changed

+258
-249
lines changed

3 files changed

+258
-249
lines changed

‎app-examples/gridx_portfolio/gridx_portfolio/components/cards.py‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
import nextpy as xt
2+
3+
4+
def ProfileCard():
5+
return xt.box(
6+
xt.flex(
7+
xt.image(
8+
src="me.png",
9+
class_name="w-full max-w-[220px] md:max-w-[120px] xl:max-w-[220px] mb-4 md:mb-0 rounded-tl-3xl rounded-br-3xl",
10+
background="linear-gradient(90deg, #3c58e3 -15%, #c2ebff 58%, #5ab5e2 97%)",
11+
),
12+
xt.vstack(
13+
xt.box(
14+
xt.text("A WEB DEVELOPER", color="#BCBCBC", font_size="14px"),
15+
),
16+
xt.vstack(
17+
xt.text(
18+
"David" + "\n" + "Henderson.",
19+
font_size="36px",
20+
line_height="40px",
21+
color="#FFFFFF",
22+
),
23+
xt.box(
24+
xt.text(
25+
"I am a Web Designer based" + "\n" + "in san francisco.",
26+
color="#BCBCBC",
27+
font_size="14px",
28+
),
29+
),
30+
spacing="1em",
31+
),
32+
align_items="start",
33+
),
34+
class_name="flex flex-col md:flex-row items-center gap-[2rem]",
35+
spacing="2em",
36+
),
37+
xt.vstack(xt.image(src="icon.svg", width="45px"), align_items="end"),
38+
class_name="p-4 md:p-6 bg-gradient-to-r from-[#202020] via-[#191919] to-[#161616] rounded-3xl ",
39+
)
40+
41+
42+
def strip_card():
43+
return xt.box(
44+
xt.text(
45+
"LATEST WORK AND FEATURED", font_size="14px", class_name="text-[#BCBCBC]"
46+
),
47+
class_name="py-4 px-6 bg-gradient-to-r from-[#202020] via-[#191919] to-[#161616] rounded-3xl ",
48+
)
49+
50+
51+
def card_with_image_and_title(image_src, title, description):
52+
return xt.box(
53+
xt.vstack(
54+
xt.image(
55+
src=image_src,
56+
class_name="w-full max-w-[300px] md:max-w-[220px]",
57+
),
58+
xt.hstack(
59+
xt.box(
60+
xt.text(description, color="#BCBCBC", font_size="12px"),
61+
xt.text(title, font_size="20px"),
62+
),
63+
xt.image(src="icon.svg", width="45px"),
64+
justify_content="space-between",
65+
align_items="center",
66+
width="100%",
67+
),
68+
class_name="min-h-[280px] md:min-h-0 flex justify-between",
69+
spacing="1em",
70+
),
71+
class_name="p-4 md:p-6 bg-gradient-to-r from-[#202020] via-[#191919] to-[#161616] rounded-3xl ",
72+
)
73+
74+
75+
class ImageGalleryState(xt.State):
76+
image_paths = [
77+
"camera.png",
78+
"design-pencil.png",
79+
"color-filter.png",
80+
"dev-mode-phone.png",
81+
]
82+
83+
84+
def services_card():
85+
return xt.box(
86+
xt.vstack(
87+
xt.hstack(
88+
xt.foreach(
89+
ImageGalleryState.image_paths,
90+
lambda image_path: xt.image(
91+
src=image_path,
92+
class_name="w-full max-w-[40px] h-[40px]",
93+
),
94+
),
95+
p=["0.5rem", "0.5rem", "2rem", "2rem", "2rem"],
96+
width="100%",
97+
justify_content="space-between",
98+
align_items="center",
99+
),
100+
xt.hstack(
101+
xt.box(
102+
xt.text("SPECIALIZATION", color="#BCBCBC", font_size="12px"),
103+
xt.text("Services Offering", font_size="20px", color="#FFFFFF"),
104+
),
105+
xt.image(src="icon.svg", width="45px"),
106+
width="100%",
107+
justify_content="space-between",
108+
align_items="center",
109+
),
110+
justify_content="space-between",
111+
height="100%",
112+
spacing="1em",
113+
),
114+
class_name="p-4 md:p-6 bg-gradient-to-r from-[#202020] via-[#191919] to-[#161616] rounded-3xl h-full",
115+
)
116+
117+
118+
def experience_card():
119+
return xt.box(
120+
xt.flex(
121+
xt.vstack(
122+
xt.text("07", font_size="36px", line_height="40px", color="#FFFFFF"),
123+
xt.text(
124+
"YEARS" + "\n" + "EXPERIENCE",
125+
color="#BCBCBC",
126+
font_size="14px",
127+
),
128+
text_align="center",
129+
class_name="w-full md:w-auto lg:w-40 bg-gradient-to-r from-[#212121] via-[#222222] to-[#242424] rounded-3xl py-10 px-8",
130+
),
131+
xt.vstack(
132+
xt.text("+125", font_size="36px", line_height="40px", color="#FFFFFF"),
133+
xt.text(
134+
"CLIENTS" + "\n" + "WORLDWIDE",
135+
color="#BCBCBC",
136+
font_size="14px",
137+
),
138+
text_align="center",
139+
class_name="w-full md:w-auto lg:w-40 bg-gradient-to-r from-[#212121] via-[#222222] to-[#242424] rounded-3xl py-10 px-8",
140+
),
141+
xt.vstack(
142+
xt.text("+210", font_size="36px", line_height="40px", color="#FFFFFF"),
143+
xt.text(
144+
"TOTAL" + "\n" + "PROJECTS",
145+
color="#BCBCBC",
146+
font_size="14px",
147+
),
148+
text_align="center",
149+
class_name="w-full md:w-auto lg:w-40 bg-gradient-to-r from-[#212121] via-[#222222] to-[#242424] rounded-3xl py-10 px-8",
150+
),
151+
class_name="flex h-full flex-row flex-wrap items-center justify-between gap-6 md:gap-0 lg:justify-center lg:gap-4",
152+
),
153+
class_name="p-4 md:p-6 bg-gradient-to-r from-[#202020] via-[#191919] to-[#161616] rounded-3xl gap-4 lg:p-3",
154+
)
155+
156+
157+
def work_together_card():
158+
return xt.box(
159+
xt.box(
160+
xt.image(
161+
src="icon2.png",
162+
class_name="w-[37px] h-[76px] ml-6",
163+
),
164+
),
165+
xt.box(
166+
xt.vstack(
167+
xt.hstack(
168+
xt.box(
169+
xt.text("Let's", color="#FFFFFF"),
170+
xt.span("work ", color="#FFFFFF"),
171+
xt.span("together.", color="#5B78F6"),
172+
line_height="52px",
173+
font_size="44px",
174+
),
175+
xt.image(src="icon.svg", width="45px"),
176+
width="100%",
177+
justify_content="space-between",
178+
align_items="end",
179+
),
180+
align_items="start",
181+
),
182+
class_name="p-4 md:p-6",
183+
),
184+
class_name="bg-gradient-to-r from-[#202020] via-[#191919] to-[#161616] rounded-3xl flex flex-col justify-between ",
185+
)

‎app-examples/gridx_portfolio/gridx_portfolio/components/navbar.py‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import nextpy as xt
2+
3+
4+
class NavbarState(xt.State):
5+
links = [
6+
"Home",
7+
"About",
8+
"Works",
9+
"Contact",
10+
]
11+
12+
13+
def Navbar():
14+
return xt.box(
15+
xt.hstack(
16+
xt.image(src="logo.svg", width="90px"),
17+
xt.desktop_only(
18+
xt.hstack(
19+
xt.foreach(
20+
NavbarState.links,
21+
lambda links: xt.link(
22+
xt.text(links), src="#", _hover={"text_decoration": "none"}
23+
),
24+
),
25+
class_name="hidden md:flex gap-6 md:items-center md:space-x-6 text-white text-base ",
26+
spacing="1.5rem",
27+
),
28+
),
29+
xt.button(
30+
xt.center(
31+
"Lets Talk",
32+
bg="#323232",
33+
py="12px",
34+
px="2rem",
35+
class_name="hover:bg-white text-white hover:text-[#323232] text-sm font-semibold transition ease-in-out rounded-2xl",
36+
),
37+
variant="unstyled",
38+
color_scheme="none",
39+
),
40+
justify_content="space-between",
41+
align_items="center",
42+
),
43+
class_name="bg-[#0F0F0F] py-6 px-4 lg:px-48",
44+
width="100%",
45+
z_index="5",
46+
)

0 commit comments

Comments
 (0)