From 6fd6b265061eed647d0c45e89a6e91cb5f97df27 Mon Sep 17 00:00:00 2001 From: Sravan Tallapaka Date: Mon, 21 Aug 2023 12:47:21 -0700 Subject: [PATCH] updated styling and involvement panel --- website-current/src/App.css | 7 ++++ .../MainPage/IntroPanel/IntroPanelUtils.jsx | 2 +- .../InvolvementPanel/InvolvementPanel.jsx | 26 +++++++++--- .../InvolvementPanel.module.css | 40 +++++++++++++++++++ .../src/components/NavBar/NavBar.module.css | 3 +- .../src/pages/MainPage/MainPage.jsx | 15 ++++++- .../src/pages/MainPage/MainPage.module.css | 5 +++ .../src/pages/MainPage/MainPageUtils.jsx | 23 +++++++++++ 8 files changed, 112 insertions(+), 9 deletions(-) create mode 100644 website-current/src/pages/MainPage/MainPageUtils.jsx diff --git a/website-current/src/App.css b/website-current/src/App.css index 74b5e05..6e465e7 100644 --- a/website-current/src/App.css +++ b/website-current/src/App.css @@ -36,3 +36,10 @@ transform: rotate(360deg); } } + +body { + margin: 0; + padding: 0; + width: 100%; + height: 100%; +} diff --git a/website-current/src/components/MainPage/IntroPanel/IntroPanelUtils.jsx b/website-current/src/components/MainPage/IntroPanel/IntroPanelUtils.jsx index 97137d4..4b01f6c 100644 --- a/website-current/src/components/MainPage/IntroPanel/IntroPanelUtils.jsx +++ b/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).`; diff --git a/website-current/src/components/MainPage/InvolvementPanel/InvolvementPanel.jsx b/website-current/src/components/MainPage/InvolvementPanel/InvolvementPanel.jsx index a676df1..d9cfebd 100644 --- a/website-current/src/components/MainPage/InvolvementPanel/InvolvementPanel.jsx +++ b/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 (
-

Involvement Panel

-

Involvement Name

-
Time commitment
-

Description

+
+
+

{name}

+
+
+
{pos}
+
+
+
{time}
+
+
+
    + {desc.map((d, index) => ( +
  • {d}
    • + ))} +
+
+
); }; diff --git a/website-current/src/components/MainPage/InvolvementPanel/InvolvementPanel.module.css b/website-current/src/components/MainPage/InvolvementPanel/InvolvementPanel.module.css index e69de29..7d4a34e 100644 --- a/website-current/src/components/MainPage/InvolvementPanel/InvolvementPanel.module.css +++ b/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; +} diff --git a/website-current/src/components/NavBar/NavBar.module.css b/website-current/src/components/NavBar/NavBar.module.css index 924c4f7..461800a 100644 --- a/website-current/src/components/NavBar/NavBar.module.css +++ b/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%; } diff --git a/website-current/src/pages/MainPage/MainPage.jsx b/website-current/src/pages/MainPage/MainPage.jsx index 5a69b7e..eb6dcc8 100644 --- a/website-current/src/pages/MainPage/MainPage.jsx +++ b/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 (
- +
+ {Info.map((involvement, index) => ( + + ))} +
); diff --git a/website-current/src/pages/MainPage/MainPage.module.css b/website-current/src/pages/MainPage/MainPage.module.css index e69de29..3dbd104 100644 --- a/website-current/src/pages/MainPage/MainPage.module.css +++ b/website-current/src/pages/MainPage/MainPage.module.css @@ -0,0 +1,5 @@ +.involvements { + width: 75vw; + margin: auto; + padding: 0; +} diff --git a/website-current/src/pages/MainPage/MainPageUtils.jsx b/website-current/src/pages/MainPage/MainPageUtils.jsx new file mode 100644 index 0000000..9ebafb1 --- /dev/null +++ b/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", + ], + }, +];