From b47d976e2d391b492c672d06d18ba064272170f4 Mon Sep 17 00:00:00 2001
From: Shea Stevens <63370427+swstevens@users.noreply.github.com>
Date: Mon, 17 Jun 2024 11:40:19 -0700
Subject: [PATCH] work for multiple pages in portfolio site

---
 src/components/Portfolio.tsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/Portfolio.tsx b/src/components/Portfolio.tsx
index 5f25c17..5d3201f 100644
--- a/src/components/Portfolio.tsx
+++ b/src/components/Portfolio.tsx
@@ -1,29 +1,30 @@
 import React from "react";
 import About from "./About";
+import { useState } from "react";
 
 const Portfolio = ()=> {
+    const [activePage, setActivePage] = useState('');
+    const setActive = (page:string) => {
+        setActivePage(page)
+    };
+    const isActive = (page:string) => {
+        return activePage == page;
+    };
     return (
-        // <div>
-        // <div style={styles.verticalTextBox}>
-        //     <p style={styles.verticalText}><em>SHEA STEVENS</em></p>
-        // </div>
-        // <div style={styles.navbar}>
-        //     <p><em>some text</em></p>
-        // </div>
-        // </div>
-
         <div className={'parent'} style={styles.parent}>
             <div style={styles.variableColumn}>
             <div style={styles.fixedColumnLeft}>
                 <p style={styles.text}>SHEA_STEVENS</p>
             </div>
             <div style={styles.variableColumnInside}>
-                <About/>
+                {isActive('About') && <About/>}
             </div>
             </div>
             <div style={styles.fixedColumn}>
                 <img src="assets/headspin-square-unscreen.gif" alt="my head" style={styles.headspin}/>
                 <p>That's Me!</p>
+                <p style={styles.hyperlink} onClick={() => setActive('About')}><u>About Me</u></p>
+                <p style={styles.hyperlink} onClick={() => setActive('')}><u>Home</u></p>
             </div>
         </div>
     )
@@ -139,4 +140,9 @@ const styles: StyleSheetCSS = {
         textAlign: 'center',
         flexDirection: 'column',
     },
+    hyperlink: {
+        color: 'blue',
+        cursor: 'pointer',
+        paddingTop: '16px',
+    }
 };
\ No newline at end of file