-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9b0b953
commit 9811ee9
Showing
11 changed files
with
324 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
142 changes: 142 additions & 0 deletions
142
src/components/AboutComponents/Investment/Investment.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| // NextJS Imports | ||
| import {Box, Heading, Link, Text} from "@primer/react"; | ||
| import { BetterSystemStyleObject } from "@primer/react/lib/sx"; | ||
|
|
||
| import InvestmentData from "./src/investment.json"; | ||
|
|
||
| interface investmentEventInterface { | ||
| id: string, | ||
| name: string, | ||
| category: string, | ||
| description: string, | ||
| url?: string | ||
| } | ||
|
|
||
|
|
||
| export default function MyInvestment(){ | ||
|
|
||
| const investmentExperienceStyle: BetterSystemStyleObject = { | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| justifyContent: "center", | ||
| alignItems: "start", | ||
| color: "text.primary", | ||
| width: "100%", | ||
| maxWidth: "100%", | ||
| padding: 20, | ||
| backgroundColor: "canvas.default", | ||
| } | ||
|
|
||
| const investmentInConference: investmentEventInterface[] = []; | ||
| const investmentInSchoolEvents: investmentEventInterface[] = []; | ||
|
|
||
| // We preload the content on different lists so that we can easily map them to the cards | ||
| InvestmentData.content.map((investmentEvent, investmentIndex) => { | ||
| if (investmentEvent.category === "conference"){ | ||
| // We add the investmentEvent object to the investmentInConference list | ||
| investmentInConference.push(investmentEvent); | ||
| } else if (investmentEvent.category === "school-event"){ | ||
| // We add the investmentEvent object to the investmentInSchoolEvents list | ||
| investmentInSchoolEvents.push(investmentEvent); | ||
| } else { | ||
| // We shouldn't be here, so we just throw a log with the content | ||
| console.log("We couldn't find the category for this investment event: ", investmentEvent, `with the index n°${investmentIndex}!`) | ||
| } | ||
| }) | ||
|
|
||
|
|
||
| return( | ||
| <Box id="About.Investment.Content.Holder" sx={investmentExperienceStyle}> | ||
| <Box id="About.Investment.Content.Headings" sx={{ml: 2, mb: 0, maxWidth: "100%"}}> | ||
| <Link href='#About.Investment.Content' sx={{color: "fg.default"}}> | ||
| <Heading as={"h3"} sx={{fontSize: 4, mr: 4}}> My Investment </Heading> | ||
| </Link> | ||
| </Box> | ||
| <Box id="About.Investment.Content.Experience" sx={{display: "flex", flexDirection: "row", justifyContent: "space-between", maxWidth: "100%", width: "100%"}}> | ||
| <Box id="About.Investment.Content.Experience.Conferences" sx={{display: "flex", flexDirection: "column", justifyContent: "space-between"}}> | ||
|
|
||
| <Box id="About.Investment.Content.Experience.Conferences.Headings"> | ||
| <Heading as={"h4"} sx={{fontSize: 3, ml: 4, mt: 4}}> | ||
| Conferences | ||
|
|
||
| <Text as={"p"} sx={{fontSize: 1, color: "fg.subtle", mt: 2, mb: 2, ml: 4, mr: 4}}> | ||
| I attended the following conferences, either digitally or physically. | ||
| </Text> | ||
| </Heading> | ||
| </Box> | ||
|
|
||
| <Box id="About.Investment.Content.Experience.Conferences.Content" sx={{mt: 2, mb: 2, ml: 4, mr: 4}}> | ||
| { | ||
| investmentInConference.map((investmentEvent, investmentIndex) => { | ||
| return( | ||
| <InvestmentCard key={investmentIndex} id="About.Investment.Content.Experience.Conferences.Content" type={investmentEvent.category} content={investmentEvent} /> | ||
| ) | ||
| }) | ||
| } | ||
| </Box> | ||
| </Box> | ||
| <Box id="About.Investment.Content.Experience.School-Events" sx={{display: "flex", flexDirection: "column", justifyContent: "space-between"}}> | ||
| <Box id="About.Investment.Content.Experience.School-Events.Headings"> | ||
| <Heading as={"h4"} sx={{fontSize: 3, ml: 4, mt: 4}}> | ||
| School Events | ||
|
|
||
| <Text as={"p"} sx={{fontSize: 1, color: "fg.subtle", mt: 2, mb: 2, ml: 4, mr: 4}}> | ||
| I either participated or helped organize the following school events. | ||
| </Text> | ||
| </Heading> | ||
| </Box> | ||
|
|
||
| <Box id="About.Investment.Content.Experience.School-Events.Content" sx={{mt: 2, mb: 2, ml: 4, mr: 4}}> | ||
| { | ||
| investmentInSchoolEvents.map((investmentEvent, investmentIndex) => { | ||
| return( | ||
| <InvestmentCard key={investmentIndex} id="About.Investment.Content.Experience.School-Events.Content" type={investmentEvent.category} content={investmentEvent} /> | ||
| ) | ||
| }) | ||
| } | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| function InvestmentCard({ | ||
| id, | ||
| type, | ||
| content | ||
| }: { | ||
| id: string, | ||
| type: string, | ||
| content: investmentEventInterface | ||
| }){ | ||
|
|
||
| const baseID = `${id}.${type}.${content.id}`; | ||
|
|
||
| const investmentCardStyle: BetterSystemStyleObject = { | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| justifyContent: "space-between", | ||
| alignItems: "start", | ||
| color: "text.primary", | ||
| backgroundColor: "canvas.inset", | ||
| padding: 15, | ||
| margin: 4, | ||
| maxWidth: "100%", | ||
| } | ||
|
|
||
| return( | ||
| <Box id={baseID} sx={investmentCardStyle}> | ||
| <Box> | ||
| {content.url ? ( | ||
| <Link href={content.url} sx={{color: "fg.default"}}> | ||
| <Heading as={"h4"} sx={{fontSize: 3, mr: 4}}>{content.name}</Heading> | ||
| </Link> | ||
| ) : ( | ||
| <Heading as={"h4"} sx={{fontSize: 3, mr: 4}}>{content.name}</Heading> | ||
| )} | ||
| <Heading as="h6" sx={{fontSize: 1, color: "fg.subtle", display: "flex", alignItems: "center", justifyContent: "start"}}>{content.description}</Heading> | ||
| </Box> | ||
| </Box> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default as MyInvestment } from "./Investment"; |
44 changes: 44 additions & 0 deletions
44
src/components/AboutComponents/Investment/src/investment.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| { | ||
| "content": [ | ||
| { | ||
| "id": "polycloud-mtp-2023", | ||
| "name": "PolyCloud Montpellier 2023", | ||
| "category": "conference", | ||
| "description": "PolyCloud Montpellier 2023 is a conference about cloud computing and its applications. It is organized by the Polytech Montpellier students.", | ||
| "url": "https://polycloud.fr/" | ||
| }, | ||
| { | ||
| "id": "google-io-2023", | ||
| "name": "Google I/O 2023", | ||
| "category": "conference", | ||
| "description": "Google I/O is an annual developer conference held by Google.", | ||
| "url": "https://io.google" | ||
| }, | ||
| { | ||
| "id": "google-next-23", | ||
| "name": "Google Next'23", | ||
| "category": "conference", | ||
| "description": "Google Next is an annual conference organized by Google.", | ||
| "url": "https://cloud.withgoogle.com/next" | ||
| }, | ||
| { | ||
| "id": "github-universe-2022", | ||
| "name": "Github Universe 2022", | ||
| "category": "conference", | ||
| "description": "Github Universe is an annual conference organized by Github.", | ||
| "url": "https://githubuniverse.com/" | ||
| }, | ||
| { | ||
| "id": "iut-beziers-jpo-2023", | ||
| "name": "JPO IUT Béziers", | ||
| "category": "school-event", | ||
| "description": "Open days of the IUT of Béziers." | ||
| }, | ||
| { | ||
| "id": "ffb-2023", | ||
| "name": "Festival Fantastique de Béziers (FFB) 2023", | ||
| "category": "school-event", | ||
| "description": "The Festival of Fantastic by the IUT of Béziers." | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.