Skip to content

Commit 37bd079

Browse files
afgprogrammerafgprogrammer
committed
Fix design issue and add links
1 parent 410e17a commit 37bd079

File tree

4 files changed

+73
-33
lines changed

4 files changed

+73
-33
lines changed

‎src/_components/footer/Footer.tsx

+48-7
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,27 @@ import {
44
Container,
55
Divider,
66
Group,
7+
SimpleGrid,
78
Space,
89
Text,
910
Title,
1011
} from "@mantine/core";
1112
import { IconArrowUpRight } from "@tabler/icons-react";
13+
import Link from "next/link";
1214

1315
export default function SiteFooter() {
1416
return (
1517
<>
1618
<Box py={60} bg="gray.3" mt={80}>
1719
<Container size="lg">
18-
<Title order={2} fz={80} ta="center" fw={900} c="black" lh={1.2}>
20+
<Title
21+
order={2}
22+
fz={{ md: 80, xs: 48, base: 48 }}
23+
ta="center"
24+
fw={900}
25+
c="black"
26+
lh={1.2}
27+
>
1928
Want to create something{" "}
2029
<span style={{ color: "var(--mantine-color-gray-6)" }}>
2130
awesome?
@@ -47,20 +56,52 @@ export default function SiteFooter() {
4756
A freelance software developer base in Kabul.
4857
</Text>
4958
<Space h={50} />
50-
<Group grow>
51-
<Button variant="outline" color="gray" radius="xl" c="white">
59+
<SimpleGrid cols={{ lg: 4, xs: 2 }}>
60+
<Button
61+
variant="outline"
62+
component={Link}
63+
target="_blank"
64+
href="https://github.com/afgprogrammer"
65+
color="gray"
66+
radius="xl"
67+
c="white"
68+
>
5269
Github
5370
</Button>
54-
<Button variant="outline" color="gray" radius="xl" c="white">
71+
<Button
72+
variant="outline"
73+
component={Link}
74+
target="_blank"
75+
href="https://youtube.com/afgprogrammer"
76+
color="gray"
77+
radius="xl"
78+
c="white"
79+
>
5580
Youtube
5681
</Button>
57-
<Button variant="outline" color="gray" radius="xl" c="white">
82+
<Button
83+
variant="outline"
84+
component={Link}
85+
target="_blank"
86+
href="https://instagram.com/afgprogrammer"
87+
color="gray"
88+
radius="xl"
89+
c="white"
90+
>
5891
Instagram
5992
</Button>
60-
<Button variant="outline" color="gray" radius="xl" c="white">
93+
<Button
94+
variant="outline"
95+
component={Link}
96+
target="_blank"
97+
href="https://linkedin.com/in/afgprogrammer"
98+
color="gray"
99+
radius="xl"
100+
c="white"
101+
>
61102
Linked In
62103
</Button>
63-
</Group>
104+
</SimpleGrid>
64105
<Space h={50} />
65106
<Text c="gray" ta="center">
66107
©2024. Designed by afgprogrammer

‎src/_components/works/WorkSection.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Box, Button, Divider, Group, Space, Stack, Text } from "@mantine/core";
22
import { IconArrowRight, IconDownload } from "@tabler/icons-react";
3+
import Link from "next/link";
34

45
export default function WorkSection() {
56
return (
@@ -11,6 +12,8 @@ export default function WorkSection() {
1112
<Button
1213
variant="default"
1314
// color="black"
15+
component={Link}
16+
href={"/flutter"}
1417
size="lg"
1518
radius="xl"
1619
rightSection={<IconArrowRight />}

‎src/app/flutter/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export default function AboutMe() {
110110
<Grid>
111111
{examples.map((day) => {
112112
return (
113-
<GridCol span={4}>
113+
<GridCol span={{ lg: 4, sm: 6, xs: 12 }}>
114114
<Card radius="md" withBorder style={{ overflow: "hidden" }}>
115115
<CardSection>
116116
<Box>

‎src/app/page.tsx

+21-25
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default function Home() {
6060
<Box style={{ position: "relative" }}>
6161
<Title
6262
order={1}
63-
fz={20}
63+
fz={32}
6464
c={"light-dark(var(--mantine-color-dark-9), white)"}
6565
>
6666
Hey 👋🏼 I'm{" "}
@@ -72,35 +72,28 @@ export default function Home() {
7272
>
7373
Mohammad.
7474
</span>{" "}
75-
<br />
76-
<span
75+
<Space h={16} />
76+
<Text
77+
fz={{ lg: 85, sm: 65, xs: 45, base: 45 }}
78+
fw={900}
7779
style={{
78-
fontSize: 85,
79-
fontWeight: 900,
80-
letterSpacing: 1,
80+
lineHeight: "1.1",
8181
}}
8282
>
8383
Building the future with clean, efficient, and{" "}
84-
<Text
85-
variant="text"
86-
component="span"
87-
// gradient={{ from: "green", to: "blue", deg: 90 }}
88-
fz={85}
89-
fw={900}
84+
<span
9085
style={{
91-
// background: "linear-gradient(45deg, red, blue)",
92-
// backgroundClip: "text",
9386
color:
94-
"light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2))",
87+
"light-dark(var(--mantine-color-gray-5), var(--mantine-color-blue-2))",
9588
}}
9689
>
9790
scalable code.
98-
</Text>
99-
</span>
91+
</span>
92+
</Text>
10093
</Title>
10194
<Space h={20} />
10295
<Text
103-
fz={30}
96+
fz={{ lg: 30, xs: 26, base: 26 }}
10497
c="light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2))"
10598
>
10699
I care a lot about using design for positive impact and enjoy
@@ -121,26 +114,29 @@ export default function Home() {
121114
<Button
122115
variant="default"
123116
component={Link}
124-
href="#"
117+
href="https://github.com/afgprogrammer"
125118
radius="xl"
119+
target="_blank"
126120
leftSection={<IconBrandGithub size={18} />}
127121
>
128122
Github
129123
</Button>
130124
<Button
131125
variant="default"
132126
component={Link}
133-
href="#"
127+
href="https://youtube.com/afgprogrammer"
134128
radius="xl"
129+
target="_blank"
135130
leftSection={<IconBrandYoutube size={18} />}
136131
>
137132
Youtube
138133
</Button>
139134
<Button
140135
variant="default"
141136
component={Link}
142-
href="#"
137+
href="https://instagram.com/afgprogrammer"
143138
radius="xl"
139+
target="_blank"
144140
leftSection={<IconBrandInstagram size={18} />}
145141
>
146142
Instagram
@@ -155,12 +151,12 @@ export default function Home() {
155151
<Space h={150} />
156152
<Container size="xl" pos="relative">
157153
<Grid>
158-
<GridCol span={8}>
159-
<Title order={2} fz={65} fw={600}>
154+
<GridCol span={{ lg: 8 }}>
155+
<Title order={2} fz={{ lg: 65 }} fw={600}>
160156
Transforming ideas into elegant, functional digital solutions.
161157
</Title>
162158
</GridCol>
163-
<GridCol span={4}>
159+
<GridCol span={{ lg: 4 }}>
164160
<Space h={16} />
165161
<Text fz={18}>
166162
I'm a Full-Stack Software Developer living in Kabul 🇦🇫, and I
@@ -184,7 +180,7 @@ export default function Home() {
184180
</GridCol>
185181
</Grid>
186182
<Space h={150} />
187-
<WorkSection />
183+
{/* <WorkSection /> */}
188184
</Container>
189185
<SiteFooter />
190186
</>

0 commit comments

Comments
 (0)