Skip to content

Commit fe7bb84

Browse files
rudietuesdaysrudietuesdays
committed
add team members to site
1 parent eede197 commit fe7bb84

5 files changed

Lines changed: 121 additions & 8 deletions

File tree

‎app/page.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ import Footer from "@/components/sections/footer"
1717
import Header from "@/components/sections/header"
1818
import Hero from "@/components/sections/hero"
1919
import OurWork from "@/components/sections/ourWork";
20+
import Team from "@/components/sections/team";
21+
22+
// background images
2023
import BgDark from "@/public/assets/images/bgDark";
2124
import BgLight from "@/public/assets/images/bgLight";
2225

@@ -29,7 +32,7 @@ export default function Home() {
2932
<Box
3033
_after={{
3134
backgroundImage: [mode?.colorMode === "dark" ? "url('/assets/images/orb-dark-2.png')" : "url('/assets/images/orb-light-2.png')", mode?.colorMode === "dark" ? "url('/assets/images/orb-dark-2.png')" : "url('/assets/images/orb-light-2.png')", mode?.colorMode === "dark" ? "url('/assets/images/orb-dark-1.png')" : "url('/assets/images/orb-light-1.png')"],
32-
backgroundPosition: ["top 26% right 10%", "top 26% right 10%", "top 40% right 0", "top 36% right 0", "top 40% right 0"],
35+
backgroundPosition: ["top 11% right 10%", "top 12% right 10%", "top 18% right 0", "top 18% right 0", "top 22% right 0"],
3336
backgroundRepeat: "no-repeat",
3437
backgroundSize: ["20%", "20%", "50%", "50%", "40%"],
3538
bottom: 0,
@@ -62,15 +65,18 @@ export default function Home() {
6265
</Container>
6366
</Box>
6467
<Container paddingBottom={12}>
65-
<Box marginTop={[30, 40, 160]}>
68+
<Box marginTop={[62, 40, 160]}>
6669
<About />
6770
</Box>
68-
<Box marginTop={[30, 40, 160]}>
71+
<Box marginTop={[62, 24, 28]}>
6972
<OurWork />
7073
</Box>
74+
<Box marginTop={[62, 40, 28]}>
75+
<Team />
76+
</Box>
7177
</Container>
7278
</Box>
73-
<Box marginTop={24}>
79+
<Box marginTop={[8, 12, 24]}>
7480
<Footer />
7581
</Box>
7682
</Box >

‎components/sections/about.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ export default function About() {
2525
return (
2626
<Flex
2727
color={textColor}
28-
direction={["column", "column", "row"]}
29-
gap={[12, 18, 40]}
28+
direction={["column", "column", "column", "column", "row"]}
29+
gap={[12, 20, 24]}
3030
>
31-
<Box maxW={360}>
31+
<Box maxW={["100%", "100%", "100%", "100%", 400]}>
3232
<Heading color={textColor}>
3333
Who we serve
3434
</Heading>

‎components/sections/ourWork.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { funnel, geist, geistMono } from "@/app/fonts";
2020
import { Heading } from "@/components/ui/heading";
2121
import { WorkCard } from "@/components/ui/workCard";
2222

23-
export default function About() {
23+
export default function OurWork() {
2424
const textColor = useColorModeValue("black", "white");
2525

2626
return (

‎components/sections/team.jsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
"use client"
2+
3+
// chakra ui imports
4+
import {
5+
Box,
6+
ClientOnly,
7+
Flex,
8+
List,
9+
Image,
10+
Text,
11+
} from "@chakra-ui/react";
12+
13+
import {
14+
useColorModeValue
15+
} from "@/components/ui/color-mode";
16+
17+
// fonts
18+
import { funnel, geist, geistMono } from "@/app/fonts";
19+
20+
// components
21+
import { Heading } from "@/components/ui/heading";
22+
import { TeamCard } from "@/components/ui/teamCard";
23+
24+
export default function Team() {
25+
const textColor = useColorModeValue("black", "white");
26+
27+
return (
28+
<Box>
29+
<Heading color={textColor}>
30+
Team Members
31+
</Heading>
32+
<List.Root listStyle="none">
33+
<List.Item marginTop={8}>
34+
<Flex alignItems="flex-start">
35+
<List.Indicator asChild marginTop={3}>
36+
<Image objectFit="contain" src="/assets/images/orb-light-2.png" width={[8, 8, 16]} />
37+
</List.Indicator>
38+
<TeamCard
39+
name="Harum"
40+
info="pronounced: ha-room, pronouns: they/them"
41+
about="Full-stack developer focused on JavaScript and Rust. Board experience with a reproductive health nonprofit and care work as an abortion doula."
42+
/>
43+
</Flex>
44+
</List.Item>
45+
<List.Item marginTop={8}>
46+
<Flex alignItems="flex-start">
47+
<List.Indicator asChild marginTop={3}>
48+
<Image objectFit="contain" src="/assets/images/orb-light-2.png" width={[8, 8, 16]} />
49+
</List.Indicator>
50+
<TeamCard
51+
name="Josh"
52+
info="pronouns: they/them"
53+
about="Two decades in software, architecture, networks, and systems for social justice. Builds secure communication platforms for organizers and journalists."
54+
/>
55+
</Flex>
56+
</List.Item>
57+
<List.Item marginTop={8}>
58+
<Flex alignItems="flex-start">
59+
<List.Indicator asChild marginTop={3}>
60+
<Image objectFit="contain" src="/assets/images/orb-light-2.png" width={[8, 8, 16]} />
61+
</List.Indicator>
62+
<TeamCard
63+
name="Morgan"
64+
info="pronouns: she/her"
65+
about="Project manager with two decades across construction, art, and education. Plans work from start to finish and clears blockers."
66+
/>
67+
</Flex>
68+
</List.Item>
69+
<List.Item marginTop={8}>
70+
<Flex alignItems="flex-start">
71+
<List.Indicator asChild marginTop={3}>
72+
<Image objectFit="contain" src="/assets/images/orb-light-2.png" width={[8, 8, 16]} />
73+
</List.Indicator>
74+
<TeamCard
75+
name="Rae"
76+
info="no pronouns"
77+
about="Full-stack developer and activist with a multimedia background. Specializes in bringing designs to life with front-end and full-stack JavaScript."
78+
/>
79+
</Flex>
80+
</List.Item>
81+
</List.Root>
82+
83+
</Box>
84+
)
85+
}

‎components/ui/teamCard.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// fonts
2+
import { funnel } from "@/app/fonts";
3+
4+
// chakra ui imports
5+
import { Box, Flex, Text } from "@chakra-ui/react";
6+
7+
// components imports
8+
import { Link } from "@/components/ui/link";
9+
10+
export const TeamCard = ({name, info, about}) => (
11+
<Flex flexDirection={["column", "column", "row"]} gap={[4, 4, 20]}>
12+
<Box minWidth={[30, 360]}>
13+
<Text className={funnel.className} fontSize="3xl" textDecoration="underline">
14+
{name}
15+
</Text>
16+
<Text>
17+
{info}
18+
</Text>
19+
</Box>
20+
<Text>{about}</Text>
21+
</Flex>
22+
)

0 commit comments

Comments
 (0)