updated styling and involvement panel

website-current/src/App.css

@@ -36,3 +36,10 @@
     transform: rotate(360deg);
   }
 }
+
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}

website-current/src/components/MainPage/IntroPanel/IntroPanelUtils.jsx

@@ -1 +1 @@
-export const MainPageIntroduction = `hello. i'm sravan tallapaka, currently studying computer science at the university of california, irvine. i wouldn't consider myself to be a genius, but tackling each unique yet exciting problem brings a sense of fulfillment in this journey of exploring computer science. luckily, as a voracious eater, this great hunger draws a parallel to learning a pleathora of concepts, stemming from fundamental ideas to modern views. maybe i'm being a bit too verbose here, but to put it shortly, i enjoy cs (nerd lol).`;
+export const MainPageIntroduction = `hello. i'm sravan tallapaka, currently studying computer science at the university of california, irvine. i wouldn't consider myself to be a genius, but tackling each unique yet exciting problem brings a sense of fulfillment in this journey of exploring computer science. luckily, as a voracious eater, this great hunger draws a parallel to learning a pleathora of concepts, stemming from fundamental ideas to modern views. maybe i'm being a bit too verbose here, but to put it shortly, i enjoy cs (lmao).`;

website-current/src/components/MainPage/InvolvementPanel/InvolvementPanel.jsx

@@ -1,12 +1,28 @@
 import { React } from "react";
 
-const InvolvementPanel = () => {
+import styles from "./InvolvementPanel.module.css";
+
+const InvolvementPanel = ({ name, pos, time, desc }) => {
   return (
     <div>
-      <h3>Involvement Panel</h3>
-      <h4>Involvement Name</h4>
-      <h6>Time commitment</h6>
-      <p>Description</p>
+      <div className={styles.container}>
+        <div className={styles.involvement_title}>
+          <h4>{name}</h4>
+        </div>
+        <div className={styles.involvement_pos}>
+          <h5>{pos}</h5>
+        </div>
+        <div className={styles.involvement_time}>
+          <h6>{time}</h6>
+        </div>
+        <div className={styles.involvement_desc}>
+          <ul>
+            {desc.map((d, index) => (
+              <li key={index}>{d}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
     </div>
   );
 };

website-current/src/components/MainPage/InvolvementPanel/InvolvementPanel.module.css

@@ -0,0 +1,40 @@
+.container {
+  border: 1px solid black;
+
+  text-align: right;
+  width: 100%;
+  margin-bottom: 5px;
+}
+
+.involvement_title {
+  font-size: 2em;
+  margin: auto;
+  padding: 5px;
+}
+
+.involvement_pos {
+  font-size: 1.6em;
+  margin: auto;
+  padding: 0px 5px 5px 5px;
+}
+
+.involvement_time {
+  font-size: 1.4em;
+  margin: auto;
+  padding: 0px 5px 5px 5px;
+}
+
+.involvement_desc {
+  border: 1px solid orange;
+}
+
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: normal;
+}
+
+ul {
+  direction: rtl;
+}

website-current/src/components/NavBar/NavBar.module.css

@@ -3,12 +3,11 @@
   text-decoration: none;
 
   margin: 3px;
-  padding: 5px;
 }
 
 .navbar {
   display: flex;
   flex-direction: row-reverse;
 
-  margin: 5px;
+  width: 100%;
 }

website-current/src/pages/MainPage/MainPage.jsx

@@ -5,12 +5,25 @@ import IntroPanel from "../../components/MainPage/IntroPanel/IntroPanel.jsx";
 import InvolvementPanel from "../../components/MainPage/InvolvementPanel/InvolvementPanel.jsx";
 import ProjectPanel from "../../components/MainPage/ProjectPanel/ProjectPanel.jsx";
 
+import { Info } from "./MainPageUtils.jsx";
+import styles from "./MainPage.module.css";
+
 const MainPage = () => {
   return (
     <div>
       <NavBar />
       <IntroPanel />
-      <InvolvementPanel />
+      <div className={styles.involvements}>
+        {Info.map((involvement, index) => (
+          <InvolvementPanel
+            key={index}
+            name={involvement.name}
+            pos={involvement.pos}
+            time={involvement.time}
+            desc={involvement.desc}
+          />
+        ))}
+      </div>
       <ProjectPanel />
     </div>
   );

website-current/src/pages/MainPage/MainPage.module.css

@@ -0,0 +1,5 @@
+.involvements {
+  width: 75vw;
+  margin: auto;
+  padding: 0;
+}

website-current/src/pages/MainPage/MainPageUtils.jsx

@@ -0,0 +1,23 @@
+export const Info = [
+  {
+    name: "Experian",
+    pos: "Consumer Information Services Intern",
+    time: "June 2022 - August 2022",
+    desc: [
+      "bicdbjc djkcbjkd djkbcdjkbc djcb dk lorem idjb dkcbkdj cd jdcbdkjcbd djkcdjk",
+      "bicdbjc djkcbjkd djkbcdjkbc djcb dk lorem idjb dkcbkdj cd jdcbdkjcbd djkcdjk",
+      "bicdbjc djkcbjkd djkbcdjkbc djcb dk lorem idjb dkcbkdj cd jdcbdkjcbd djkcdjk",
+      "Hi my name is mr tally",
+    ],
+  },
+  {
+    name: "testing",
+    pos: "tester",
+    time: "2022-2023",
+    desc: [
+      "bicdbjc djkcbjkd djkbcdjkbc djcb dk lorem idjb dkcbkdj cd jdcbdkjcbd djkcdjk",
+      "bicdbjc djkcbjkd djkbcdjkbc djcb dk lorem idjb dkcbkdj cd jdcbdkjcbd djkcdjk",
+      "bicdbjc djkcbjkd djkbcdjkbc djcb dk lorem idjb dkcbkdj cd jdcbdkjcbd djkcdjk",
+    ],
+  },
+];