Skip to content

Commit 4af5bfd

Browse files
RikthepixelRikthepixel
committed
Make about more responsive
1 parent b813cf9 commit 4af5bfd

File tree

2 files changed

+28
-31
lines changed

2 files changed

+28
-31
lines changed

‎src/pages/_app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default function App({ Component, pageProps, router }: AppProps) {
4747
<Head>
4848
<title>Commit Rocket</title>
4949
</Head>
50-
<div className={"flex flex-col overflow-auto" + openSans.variable}>
50+
<div className={"flex flex-col overflow-auto " + openSans.variable}>
5151
<Header />
5252

5353
<AnimatePresence mode="wait">

‎src/pages/about.tsx‎

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,39 @@ import LinkButton from "@/components/controls/LinkButton";
55
import members, { IMember } from "@/assets/state/team";
66
import { Page } from "@/types/page";
77

8-
const Member = ({ image, name, title, text, links }: IMember) => (
9-
<div
10-
className="flex flex-col items-center gap-2 p-6 rounded-md shadow w-fit shadow-primary"
8+
const Member = ({ image, name, title, text, links, animate }: IMember & { animate: boolean; }) => (
9+
<motion.div
10+
variants={animate ? memberAnim : {}}
11+
className="flex flex-col items-center w-full max-w-full gap-2 p-4 rounded-md shadow motion-safe:transition-all sm:p-6 md:w-fit shadow-primary"
1112
aria-label="Member"
1213
>
13-
<img
14-
className="rounded-full shadow-md aspect-auto w-60 h-60"
15-
aria-label="Link"
16-
src={image.src}
17-
width={image.width}
18-
height={image.height}
19-
/>
20-
<div className="flex flex-col gap-2 text-center w-72">
21-
<p className="text-2xl font-semibold text-secondary" aria-label="Name">{name}</p>
22-
<p className="font-semibold text-primary" aria-label="Title / Role">{title}</p>
23-
<p className="text-fill-contrast" aria-label="Text">{text}</p>
14+
<div className="flex flex-col items-center max-w-full gap-2 sm:flex-row md:flex-col">
15+
<img
16+
className="object-cover w-40 h-40 rounded-full shadow-md aspect-auto md:w-60 md:h-60"
17+
aria-label="Link"
18+
src={image.src}
19+
width={image.width}
20+
height={image.height}
21+
/>
22+
<div className="flex flex-col max-w-full gap-2 py-4 text-center w-72 md:py-0">
23+
<p className="text-2xl font-semibold text-secondary" aria-label="Name">{name}</p>
24+
<p className="font-semibold text-primary" aria-label="Title / Role">{title}</p>
25+
<p className="text-fill-contrast " aria-label="Text">{text}</p>
26+
</div>
2427
</div>
25-
<div className="grid w-full grid-cols-2 gap-2" aria-label="Links">
28+
<div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2" aria-label="Links">
2629
{links.map((link, i) => (
2730
<LinkButton
2831
key={i}
2932
href={link.href}
3033
color="secondary"
3134
aria-label="Link"
32-
className="last-of-type:odd:col-span-2"
3335
>
3436
{link.name}
3537
</LinkButton>
3638
))}
3739
</div>
38-
</div>
40+
</motion.div>
3941
);
4042

4143
const membersContainerAnim = {
@@ -65,27 +67,27 @@ const AboutPage: Page = ({ initialLoad, reduceMotion }) => {
6567
<title>About - Commit Rocket</title>
6668
</Head>
6769
<main aria-labelledby="about" className="flex flex-col flex-1 w-full gap-4 pb-8 max-w-7xl">
68-
<h1 id="about" className="text-6xl font-bold text-center text-secondary">About</h1>
70+
<h1 id="about" className="text-4xl font-bold text-center lg:text-6xl text-secondary">About</h1>
6971
<section aria-labelledby="our-goal" className="flex flex-col gap-4">
7072
<h2
7173
id="our-goal"
72-
className="text-3xl text-center text-primary"
74+
className="text-2xl text-center lg:text-3xl text-primary"
7375
>
7476
Our Goal
7577
</h2>
76-
<p className="text-lg">
78+
<p className="lg:text-lg">
7779
Our main goal with Commit Rocket is to drive innovation and provide a modern and fast alternative to existing Git clients.
7880
We want to improve the user experience for developers by creating an open-source and cross-platform tool that is both feature-rich and beginner-friendly.
7981
</p>
8082
</section>
8183
<section aria-labelledby="why-another-git-client" className="flex flex-col gap-4">
8284
<h2
8385
id="why-another-git-client"
84-
className="text-3xl text-center text-primary"
86+
className="text-2xl text-center lg:text-3xl text-primary"
8587
>
8688
Why another Git client?
8789
</h2>
88-
<p className="text-lg">
90+
<p className="lg:text-lg">
8991
At Commit Rocket, we believe that the current generation of Git clients is outdated and slow.
9092
We want to change that by providing a sleek and fast client that meets the needs of today's developers.
9193
Our commitment to open-source development and cross-platform compatibility sets us apart from other clients in the market.
@@ -94,24 +96,19 @@ const AboutPage: Page = ({ initialLoad, reduceMotion }) => {
9496
<section aria-labelledby="why-another-git-client" className="flex flex-col gap-4 my-8">
9597
<h2
9698
id="why-another-git-client"
97-
className="text-3xl text-center text-primary"
99+
className="text-2xl text-center lg:text-3xl text-primary"
98100
>
99101
Team
100102
</h2>
101103
<motion.div
102-
className="flex justify-center gap-4"
104+
className="flex flex-wrap justify-center gap-4"
103105
aria-label="Members"
104106
initial="hidden"
105107
animate="show"
106108
variants={membersContainerAnim}
107109
>
108110
{members.map((member, i) => (
109-
<motion.div
110-
key={i}
111-
variants={(reduceMotion || initialLoad) ? {} : memberAnim}
112-
>
113-
<Member {...member} />
114-
</motion.div>
111+
<Member key={i} animate={!(reduceMotion || initialLoad)}{...member} />
115112
))}
116113
</motion.div>
117114
</section>

0 commit comments

Comments
 (0)