feat: add currentcontributor's images and style on the tattle community page (#233)

Preetiaarya · web-flow · commit a0fbe1e45d68 · 2025-02-27T12:27:31.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/community/Maanas-Bhardwaj.mdx b/src/community/Maanas-Bhardwaj.mdx
@@ -0,0 +1,7 @@
+---
+img: ../images/community/maanas.jpg
+name: Maanas Bhardwaj
+role: Software Developer
+url: " https://github.com/maanasb01"
+isCurrentContributor: true
+---
diff --git a/src/community/aatman-vaidya.mdx b/src/community/aatman-vaidya.mdx
@@ -1,4 +1,5 @@
 ---
+img: ../images/community/prof_pic.jpg
 name: Aatman Vaidya
 role: Full stack Engineer
 url: "https://github.com/aatmanvaidya"
diff --git a/src/community/adhiraj-singh.mdx b/src/community/adhiraj-singh.mdx
@@ -2,5 +2,5 @@
 name: Adhiraj Singh
 role: Game Designer
 url: "https://www.linkedin.com/in/ubima/"
-isCurrentContributor: true
+isCurrentContributor: false
 ---
diff --git a/src/community/denny-george.mdx b/src/community/denny-george.mdx
@@ -1,4 +1,5 @@
 ---
+img: ../images/community/dp.jpg
 name: Denny George
 role: Product Engineer and Tech Lead
 url: "https://denntenna.github.io/"
diff --git a/src/community/kaustubha.mdx b/src/community/kaustubha.mdx
@@ -0,0 +1,7 @@
+---
+img: ../images/community/kaustubha.jpeg
+name: Kaustubha
+role: Counsel and Program Manager, Uli
+url: ""
+isCurrentContributor: true
+---
diff --git a/src/community/manisha.mdx b/src/community/manisha.mdx
@@ -0,0 +1,7 @@
+---
+img: ../images/community/manisha.jpeg
+name: Manisha Kumari
+role: Software Developer
+url: "https://github.com/Mahimahto"
+isCurrentContributor: true
+---
diff --git a/src/community/mitali-panganti.mdx b/src/community/mitali-panganti.mdx
@@ -2,5 +2,5 @@
 name: Mitali Panganti
 role: Illustrator
 url: "https://www.linkedin.com/in/mitali-panganti-ab7a80206/"
-isCurrentContributor: true
+isCurrentContributor: false
 ---
diff --git a/src/community/saakshita-prabhakar.mdx b/src/community/saakshita-prabhakar.mdx
@@ -2,5 +2,5 @@
 name: Saakshita Prabhakar
 role: UX / Visual Design Contributor
 url: "https://saakshita.com"
-isCurrentContributor: true
+isCurrentContributor: false
 ---
diff --git a/src/community/sudeep-duggal.mdx b/src/community/sudeep-duggal.mdx
@@ -2,5 +2,5 @@
 name: Sudeep Duggal
 role: Contributor, Data Science, Security, Accessibility
 url: "https://github.com/duggalsu"
-isCurrentContributor: true
+isCurrentContributor: false
 ---
diff --git a/src/community/swair-shah.mdx b/src/community/swair-shah.mdx
@@ -1,6 +1,6 @@
 ---
 name: Swair Shah
 role: ML Research Adviser
-isCurrentContributor: true
+isCurrentContributor: false
 url: "https://www.linkedin.com/in/swair-shah/"
 ---
diff --git a/src/community/tarunima-prabhakar.mdx b/src/community/tarunima-prabhakar.mdx
@@ -1,4 +1,5 @@
 ---
+img: ../images/community/tarunima.jpeg
 name: Tarunima Prabhakar
 role: Research and Project Lead
 url: "https://tarunima.com"
diff --git a/src/community/yash-budhwar.mdx b/src/community/yash-budhwar.mdx
@@ -2,5 +2,5 @@
 name: Yash Budhwar
 role: Operations and Strategy Associate
 url: "http://www.linkedin.com/in/yash-budhwar-495290a5"
-isCurrentContributor: true
+isCurrentContributor: false
 ---
diff --git a/src/community/yohan-mathew.mdx b/src/community/yohan-mathew.mdx
@@ -2,5 +2,5 @@
 name: Yohan Mathew
 role: DevOps and Automation
 url: "https://www.linkedin.com/in/ymathew/"
-isCurrentContributor: true
+isCurrentContributor: false
 ---
diff --git a/src/images/community/dp.jpg b/src/images/community/dp.jpg
diff --git a/src/images/community/kaustubha.jpeg b/src/images/community/kaustubha.jpeg
diff --git a/src/images/community/maanas.jpg b/src/images/community/maanas.jpg
diff --git a/src/images/community/manisha.jpeg b/src/images/community/manisha.jpeg
diff --git a/src/images/community/prof_pic.jpg b/src/images/community/prof_pic.jpg
diff --git a/src/images/community/tarunima.jpeg b/src/images/community/tarunima.jpeg
diff --git a/src/pages/community.js b/src/pages/community.js
@@ -6,6 +6,7 @@ import DefaultLayout from "../components/default-layout"
 import NarrowContentWrapper from "../components/atomic/layout/narrow-content-wrapper"
 import { PlainExternalLink } from "../components/atomic/TattleLinks"
 import { ExternalLink } from "react-feather"
+import { GatsbyImage, getImage } from 'gatsby-plugin-image'
 
 const ResponsiveGrid = ({ children }) => {
     const size = useContext(ResponsiveContext)
@@ -23,16 +24,45 @@ const ResponsiveGrid = ({ children }) => {
         </Grid>
     )
 }
-
-const CommunityMemberCard = ({ name, role, url }) => (
+const CommunityMemberCard = ({ img, name, role, url }) => (
     <Box
         width={"medium"}
         direction={"column"}
         pad={"small"}
         onClick={() => { }}
         hoverIndicator={true}
         focusIndicator={false}
+
+
     >
+        <div
+            style={{
+                width: "155px",
+                height: "155px",
+                overflow: "hidden",
+                filter: "grayscale(100%)",
+                transition: "filter 0.3s ease-in-out",
+                boxshadow: "0px 4px 10px rgba(0, 0, 2, 0.5)",
+                paddingBottom: "15px"
+
+            }}
+            onMouseEnter={(e) => (e.currentTarget.style.filter = "grayscale(0%)")}
+            onMouseLeave={(e) => (e.currentTarget.style.filter = "grayscale(100%)")}
+        >
+            <GatsbyImage
+                alt="community img"
+                objectFit="cover"
+                image={getImage(img)}
+                style={{
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    borderRadius: "50%"
+
+                }}
+            />
+        </div>
+
         <PlainExternalLink href={url} target={"_blank"}>
             <Box direction={"row"} align={"center"}>
                 <Heading level={3} margin={"none"} weight={500} color={"brand"}>
@@ -41,12 +71,14 @@ const CommunityMemberCard = ({ name, role, url }) => (
                 <Box flex={"grow"} />
                 {url && url.length != 0 && <ExternalLink size={16} />}
             </Box>
-            <Paragraph size={"small"}>{role}</Paragraph>
+            {/* <Paragraph size={"small"}>{role}</Paragraph> */}
+            <Paragraph size="small">{role}</Paragraph>
         </PlainExternalLink>
-    </Box>
-)
 
 
+    </Box >
+)
+
 const community = ({ data }) => {
     // const contributors = data.allMdx.nodes;
     const currentContributors = data.allMdx.nodes.filter(contributor => contributor.frontmatter.isCurrentContributor);
@@ -61,9 +93,11 @@ const community = ({ data }) => {
                     <ResponsiveGrid>
                         {currentContributors.map((contributor) => (
                             <CommunityMemberCard
+                                img={contributor.frontmatter.img}
                                 name={contributor.frontmatter.name}
                                 role={contributor.frontmatter.role}
                                 url={contributor.frontmatter.url}
+
                             />
                         ))}
                     </ResponsiveGrid>
@@ -74,6 +108,7 @@ const community = ({ data }) => {
                                 name={contributor.frontmatter.name}
                                 role={contributor.frontmatter.role}
                                 url={contributor.frontmatter.url}
+
                             />
                         ))}
                     </ResponsiveGrid>
@@ -86,9 +121,9 @@ const community = ({ data }) => {
                 </NarrowSection>
             </NarrowContentWrapper>
         </DefaultLayout>
+
     )
 }
-
 export default community
 
 export const query = graphql`query communityPage {
@@ -99,6 +134,11 @@ export const query = graphql`query communityPage {
     nodes {
       frontmatter {
         name
+        img {
+            childImageSharp {
+              gatsbyImageData(layout: FULL_WIDTH)
+            }
+        }
         role
         url
         isCurrentContributor

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`---`
	`2`	`+img: ../images/community/prof_pic.jpg`
`2`	`3`	`name: Aatman Vaidya`
`3`	`4`	`role: Full stack Engineer`
`4`	`5`	`url: "https://github.com/aatmanvaidya"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`---`
	`2`	`+img: ../images/community/dp.jpg`
`2`	`3`	`name: Denny George`
`3`	`4`	`role: Product Engineer and Tech Lead`
`4`	`5`	`url: "https://denntenna.github.io/"`