diff --git a/src/app/(portfolio)/about/page.tsx b/src/app/(portfolio)/about/page.tsx
index ffbcdc5..ba65fbc 100644
--- a/src/app/(portfolio)/about/page.tsx
+++ b/src/app/(portfolio)/about/page.tsx
@@ -4,13 +4,15 @@
import { Avatar, Box, CircleOcticon, Heading, PageLayout, Text, Timeline } from "@primer/react";
import { BetterSystemStyleObject } from "@primer/react/lib/sx";
import {ChevronRightIcon} from "@primer/octicons-react";
+import { ReactNode } from "react";
// Intern Imports
import ProfilePicture from "@/content/img/profile-picture.png";
import { SkillsPart } from "@/components/AboutComponents/Skills";
import { ExperiencePart } from "@/components/AboutComponents/Experience";
-import { ReactNode } from "react";
import { AboutMyEducation } from "@/components/AboutComponents/Education";
+import { VolunteeringExperience } from "@/components/AboutComponents/Volunteering";
+import {MyInvestment} from "@/components/AboutComponents/Investment";
// Rendering page
export default function AboutPage(){
@@ -28,7 +30,7 @@ export default function AboutPage(){
-
+
@@ -101,7 +103,7 @@ function AboutSection({id, title, children}: {id: string, title: string, childre
{title}
-
+
{children}
@@ -124,31 +126,38 @@ function AboutMePart(){
I'm a french student with a passion for technology, arts and entrepreuneurship.
My main goals are to become a DevOps Engineer, to create my own company and contribute to the society as a whole.
I'm interested in many things (if not a lot), but for the most part, it's about:
-
- {aboutMeInteterestsArray.map((interest, index) => {
- return(
-
-
-
-
-
- {interest}
-
-
- )
- })
- }
-
-
-
- Meanwhile, you can see me on many projects as a contributor, a project manager or as a leader.
- I might also be a speaker at some events, a mentor for some students.
- But don't worry, I'm not a workaholic.
-
-
- I also have some hobbies like writing & reading stories (mostly fantasy and sci-fi), creating & playing video games,
- listening to music (mostly Blues/Jazz and Lo-Fi) and experimenting with new technologies.
+
+
+
+ {aboutMeInteterestsArray.map((interest, index) => {
+ return(
+
+
+
+
+
+ {interest}
+
+
+ )
+ })
+ }
+
+
+
+
+ Meanwhile, you can see me on many projects as a contributor, a project manager or as a leader.
+ I might also be a speaker at some events, a mentor for some students.
+ But don't worry, I'm not a workaholic.
+
+
+ I also have some hobbies like writing & reading stories (mostly fantasy and sci-fi), creating & playing video games,
+ listening to music (mostly Blues/Jazz and Lo-Fi) and experimenting with new technologies.
+
+
+
+
)
@@ -186,8 +195,9 @@ function EducationPart(){
)
}
-// The VolunteeringPart is the part containing the volunteering timeline.
-function VolunteeringPart(){
+// The VolunteeringAndInvestmentPart is the part containing the volunteering boxes
+// and my investments.
+function VolunteeringAndInvestmentPart(){
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const volunteeringPartStyle: BetterSystemStyleObject = {
@@ -199,18 +209,19 @@ function VolunteeringPart(){
}
return(
-
- Hey There! What did I volunteer again?
+
+
+
)
}
-// Some useful components when writing the about page
+// Some useful components while writing the about page
function SeparatingSlash({separatingColor}: {separatingColor?: string}){
return(
- /
+ /
)
}
diff --git a/src/components/AboutComponents/Education/Education.tsx b/src/components/AboutComponents/Education/Education.tsx
index e89ab05..691d8a8 100644
--- a/src/components/AboutComponents/Education/Education.tsx
+++ b/src/components/AboutComponents/Education/Education.tsx
@@ -40,7 +40,7 @@ export default function AboutMyEducation(){
diploma="General Certificate of Secondary Education"
grade="middle-school"
school="Marcel Pagnol, France"
- years={[2019, 2022]}
+ years={[2019, 2015]}
mention={"Very Good mention"}
/>
diff --git a/src/components/AboutComponents/Experience/Experience.tsx b/src/components/AboutComponents/Experience/Experience.tsx
index 3870fd9..2c2201f 100644
--- a/src/components/AboutComponents/Experience/Experience.tsx
+++ b/src/components/AboutComponents/Experience/Experience.tsx
@@ -35,7 +35,7 @@ export default function ExperiencePart(){
-
+
@@ -45,7 +45,7 @@ export default function ExperiencePart(){
)
}
-// Experienceard Component
+// ExperienceCard Component
function ExperienceCard({
jobTitle,
company,
diff --git a/src/components/AboutComponents/Investment/Investment.tsx b/src/components/AboutComponents/Investment/Investment.tsx
new file mode 100644
index 0000000..e8ca9d6
--- /dev/null
+++ b/src/components/AboutComponents/Investment/Investment.tsx
@@ -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(
+
+
+
+ My Investment
+
+
+
+
+
+
+
+ Conferences
+
+
+ I attended the following conferences, either digitally or physically.
+
+
+
+
+
+ {
+ investmentInConference.map((investmentEvent, investmentIndex) => {
+ return(
+
+ )
+ })
+ }
+
+
+
+
+
+ School Events
+
+
+ I either participated or helped organize the following school events.
+
+
+
+
+
+ {
+ investmentInSchoolEvents.map((investmentEvent, investmentIndex) => {
+ return(
+
+ )
+ })
+ }
+
+
+
+
+ )
+}
+
+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(
+
+
+ {content.url ? (
+
+ {content.name}
+
+ ) : (
+ {content.name}
+ )}
+ {content.description}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/AboutComponents/Investment/index.ts b/src/components/AboutComponents/Investment/index.ts
new file mode 100644
index 0000000..402352a
--- /dev/null
+++ b/src/components/AboutComponents/Investment/index.ts
@@ -0,0 +1 @@
+export { default as MyInvestment } from "./Investment";
\ No newline at end of file
diff --git a/src/components/AboutComponents/Investment/src/investment.json b/src/components/AboutComponents/Investment/src/investment.json
new file mode 100644
index 0000000..5905d7a
--- /dev/null
+++ b/src/components/AboutComponents/Investment/src/investment.json
@@ -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."
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/components/AboutComponents/Skills/Categories/CloudTech/CloudTech.tsx b/src/components/AboutComponents/Skills/Categories/CloudTech/CloudTech.tsx
index 677ce97..02fa5ba 100644
--- a/src/components/AboutComponents/Skills/Categories/CloudTech/CloudTech.tsx
+++ b/src/components/AboutComponents/Skills/Categories/CloudTech/CloudTech.tsx
@@ -22,7 +22,7 @@ export default function CloudTechCategory(){
skillName={"Shell"} /** We cheat a bit here, but shush */
displayName={"Kubernetes"}
skillLevel={40}
- skillDescription={"It speaks for itself, the administration of Linux systems. (Including RHEL)"}
+ skillDescription={"Kubernetes, K8S or Kube."}
/>
- {title}
- {description}
+
+ {title}
+ {description}
+
{children}
diff --git a/src/components/AboutComponents/Skills/Skills.tsx b/src/components/AboutComponents/Skills/Skills.tsx
index 6a2c464..d8f0804 100644
--- a/src/components/AboutComponents/Skills/Skills.tsx
+++ b/src/components/AboutComponents/Skills/Skills.tsx
@@ -1,9 +1,9 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
// NextJS Imports
-import {Box, Heading, Link, ProgressBar, TabNav, Text, Tooltip, Truncate} from "@primer/react";
+import {Box, Heading, TabNav} from "@primer/react";
import { BetterSystemStyleObject } from "@primer/react/lib/sx";
-import { useEffect, useState, useCallback, useRef, ReactNode, MutableRefObject, RefObject } from "react";
+import { useEffect, useState, useCallback, useRef, RefObject } from "react";
import { usePathname, useSearchParams } from "next/navigation";
// Intern Imports
@@ -125,7 +125,7 @@ export default function SkillsPart(){
{ // This is the sub-page when the user is on the programming languages skills
// Or when the user just arrived
- (searchParams.get('skill') === 'programming-languages' || searchParams.get('skill') == null) &&
+ (searchParams.get('skill') === 'programming-languages' || searchParams.get('skill') == null) &&
}
{ // This is the sub-page when the user is on the sysadmin skills
searchParams.get('skill') === 'sysadmin' &&
@@ -148,11 +148,13 @@ function SkillPanel({
panelSetter,
SkillComponent,
refVariable,
+ isdefaultPane,
}: {
skill: string,
panelSetter: (panel: string) => void,
SkillComponent: typeof ProgrammingCategory,
- refVariable: RefObject | null | undefined
+ refVariable: RefObject | null | undefined,
+ isdefaultPane?: boolean
}) {
// We're setting the current selected panel with the current showed skill
panelSetter(skill);
@@ -163,8 +165,10 @@ function SkillPanel({
behavior: "smooth"
}
- if (refVariable?.current){
- refVariable?.current.scrollIntoView(scrollIntoViewProps)
+ if (!isdefaultPane){
+ if (refVariable?.current){
+ refVariable?.current.scrollIntoView(scrollIntoViewProps)
+ }
}
// eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/src/components/AboutComponents/Volunteering/Volunteering.tsx b/src/components/AboutComponents/Volunteering/Volunteering.tsx
new file mode 100644
index 0000000..7f1139a
--- /dev/null
+++ b/src/components/AboutComponents/Volunteering/Volunteering.tsx
@@ -0,0 +1,74 @@
+// NextJS Imports
+import { Box, Heading, Link } from "@primer/react";
+import { BetterSystemStyleObject } from "@primer/react/lib/sx";
+
+
+export default function VolunteeringExperience(){
+
+ const volunteeringExperienceStyle: BetterSystemStyleObject = {
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ alignItems: "start",
+ color: "text.primary",
+ width: "100%",
+ maxWidth: "100%",
+ padding: 20,
+ backgroundColor: "canvas.default",
+ }
+
+ return(
+
+
+
+ My Volunteering
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+function VolunteeringCard({
+ association,
+ occupiedFunction,
+ date
+}: {
+ association: string,
+ occupiedFunction: string,
+ date: string
+}){
+
+ const volunteeringCardStyle: BetterSystemStyleObject = {
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "start",
+ alignItems: "start",
+ color: "text.primary",
+ backgroundColor: "canvas.inset",
+ padding: 15,
+ margin: 4,
+ maxWidth: "100%",
+ }
+
+ return(
+
+
+ {association}
+ {date}
+
+
+ {occupiedFunction}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/AboutComponents/Volunteering/index.ts b/src/components/AboutComponents/Volunteering/index.ts
new file mode 100644
index 0000000..68ecd0c
--- /dev/null
+++ b/src/components/AboutComponents/Volunteering/index.ts
@@ -0,0 +1 @@
+export {default as VolunteeringExperience} from "./Volunteering";
\ No newline at end of file