created homepage and two placeholders

swstevens · Jun 17, 2024 · a71891f · a71891f
1 parent b47d976
commit a71891f
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 8 deletions.
diff --git a/src/components/Desktop.tsx b/src/components/Desktop.tsx
@@ -28,7 +28,7 @@ const Desktop: React.FC<DesktopProps> = (props) => {
             icon: string
         };
     } = {
-        About: {
+        Portfolio: {
             key: 'About Me',
             icon: 'assets/windowExplorerIcon.png',
         },

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+export interface HomeProps {
+    setHome: () => void;
+    setAbout: () => void;
+    setExperience: () => void;
+    setProjects: () => void;
+}
+
+export const Home: React.FC<HomeProps>  = (props) => {
+    return (
+        <div style={{height: '100%', width: '100%', flexDirection: 'column', alignItems:'center', justifyContent: 'center'}}>
+            <div style={styles.half}>
+                <img src="assets/headspin-square-unscreen.gif" alt="my head" style={styles.headspin}/>
+            </div>
+            <div style={styles.half}>
+                <h1>SHEA STEVENS</h1>
+                <div>
+                <p style={styles.hyperlink} onClick={() => props.setHome()}><u>Home</u></p>
+                <p style={styles.hyperlink} onClick={() => props.setAbout()}><u>About Me</u></p>
+                <p style={styles.hyperlink} onClick={() => props.setExperience()}><u>Experience</u></p>
+                <p style={styles.hyperlink} onClick={() => props.setProjects()}><u>Projects</u></p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const styles: StyleSheetCSS = {
+    half: {
+        height: '50%',
+        width: '100%',
+        alignItems: 'center',
+        flexDirection: 'column',
+    },
+    hyperlink: {
+        color: 'blue',
+        cursor: 'pointer',
+        paddingLeft: '32px',
+        paddingRight: '32px',
+    }
+}
diff --git a/src/components/Portfolio.tsx b/src/components/Portfolio.tsx
@@ -1,17 +1,27 @@
 import React from "react";
 import About from "./About";
+import { Home } from "./Home";
 import { useState } from "react";
 
 const Portfolio = ()=> {
     const [activePage, setActivePage] = useState('');
     const setActive = (page:string) => {
-        setActivePage(page)
+        setActivePage(page);
     };
     const isActive = (page:string) => {
         return activePage == page;
     };
     return (
-        <div className={'parent'} style={styles.parent}>
+        <>
+        {isActive('') && 
+        <Home 
+            setHome={() => setActive('')}
+            setAbout={() => setActive('About')}
+            setExperience={() => setActive('Experience')}
+            setProjects={() => setActive('Projects')}
+        />}
+
+        {!isActive('') && <div className={'parent'} style={styles.parent}>
             <div style={styles.variableColumn}>
             <div style={styles.fixedColumnLeft}>
                 <p style={styles.text}>SHEA_STEVENS</p>
@@ -23,10 +33,16 @@ const Portfolio = ()=> {
             <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>
+                <div style={{height:'64px'}}></div>
                 <p style={styles.hyperlink} onClick={() => setActive('')}><u>Home</u></p>
+                <p style={styles.hyperlink} onClick={() => setActive('About')}><u>About Me</u></p>
+                <p style={styles.hyperlink} onClick={() => setActive('Experience')}><u>Experience</u></p>
+                <p style={styles.hyperlink} onClick={() => setActive('Projects')}><u>Projects</u></p>
+
+
             </div>
-        </div>
+        </div>}
+        </>
     )
 };
 
@@ -144,5 +160,5 @@ const styles: StyleSheetCSS = {
         color: 'blue',
         cursor: 'pointer',
         paddingTop: '16px',
-    }
+    },
 };
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
@@ -1,5 +1,5 @@
 import { TrackballControls } from "@react-three/drei";
-import React, { useEffect } from "react";
+import React, { useEffect, useState} from "react";
 
 export interface ToolbarProps {
     isMinimized: boolean,
@@ -10,7 +10,20 @@ export interface ToolbarProps {
 
 
 const Toolbar: React.FC<ToolbarProps> = (props) => {
-    const d = new Date();
+
+      const [d, setD] = useState(new Date());
+
+    useEffect(
+        () => {
+        const intervalId = setInterval(() => {
+
+            setD(new Date());
+        }, 60000);
+        return () => {
+            clearInterval(intervalId)
+        }
+        } 
+    )
     return (
         <div style={{width: '100%', paddingRight: '6px'}}>
             <div style={styles.tabContainerOuter}>