Projects Changes

SathyaSeelanG · Nov 1, 2024 · b84ed7b · b84ed7b
1 parent 0276993
commit b84ed7b
Show file tree

Hide file tree

Showing 11 changed files with 344 additions and 58 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,16 +1,37 @@
-import "./App.css";
-import Home from "./pages/Home";
-import ReactGA from 'react-ga';
-import React, {useEffect} from 'react'
+// import "./App.css";
+// import Home from "./pages/Home";
+// import ReactGA from 'react-ga';
+// import React, { useEffect } from 'react'
 
-function App() {
-  useEffect(() => {
-    ReactGA.initialize('G-SW2KGM0L12');
-    ReactGA.pageview(window.location.pathname + window.location.search)
-    },[]);
+// function App() {
+//   useEffect(() => {
+//     ReactGA.initialize('G-SW2KGM0L12');
+//     ReactGA.pageview(window.location.pathname + window.location.search)
+//   }, []);
+//   return (
+//     <Home />
+//   );
+// }
+
+// export default App;
+// src/App.js
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
+import Home from './pages/Home'; // Adjust path based on your structure
+// import Projects from './pages/Projects';
+import ProjectCard from './pages/projects';
+
+const App = () => {
   return (
-      <Home />
+    <Router>
+
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/projects" element={<ProjectCard />} />
+      </Routes>
+    </Router>
+
   );
-}
+};
 
 export default App;
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
@@ -0,0 +1,80 @@
+/* src/components/Header.css */
+.Nav {
+    background: transparent;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 10;
+}
+
+.NavLinkHome {
+    color: rgb(119, 119, 121);
+    display: flex;
+    font-size: 1.2rem;
+    align-items: center;
+    height: 100%;
+    cursor: pointer;
+}
+
+.NavLinkHome:hover {
+    color: #f6f6f6;
+}
+
+.NavLink {
+    color: rgb(119, 119, 121);
+    display: flex;
+    font-size: 1.2rem;
+    align-items: center;
+    height: 100%;
+    cursor: pointer;
+}
+
+.NavLink:hover {
+    color: black;
+}
+
+.Logo img {
+    width: 47px;
+    height: 47px;
+    border-radius: 50%;
+}
+
+.Bars {
+    display: none;
+    color: #fff;
+    font-size: 1.8rem;
+    cursor: pointer;
+}
+
+@media screen and (max-width: 768px) {
+    .Bars {
+        display: block;
+    }
+
+    .NavMenu {
+        display: none;
+    }
+}
+
+.NavMenu {
+    display: flex;
+    align-items: center;
+    margin-right: -24px;
+}
+
+.menu-item+.menu-item {
+    margin-left: 1rem;
+}
+
+.NavBtn {
+    display: flex;
+    align-items: center;
+    margin-right: 24px;
+}
+
+@media screen and (max-width: 768px) {
+    .NavBtn {
+        display: none;
+    }
+}
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -1,25 +1,34 @@
+
 import React from "react";
-import { Nav, Logo, NavLink, Bars, NavMenu, NavBtn } from "./HeaderElements";
 import logoImage from '../../assets/Images/SSlogo.jpg';
-const Header = ({ toggle }) => {
+import './Header.css'; // Import the CSS file
+import { Link } from "react-router-dom";
+
+import { Nav, Logo, NavLink, Bars, NavMenu, NavBtn } from "./HeaderElements";
+const Header = ({ toggle, home }) => {
   return (
     <div className="Container" style={{ padding: 0 }}>
-      <Nav>
-        <Logo to="/">
+      <nav className="Nav">
+        <div className="Logo">
           <img src={logoImage} alt="Header Logo" />
-        </Logo>
-        <NavMenu>
-          <NavLink className="menu-item" to="projects">
-            Projects
-          </NavLink>
-          <NavLink className="menu-item" to="about">
-            About
-          </NavLink>
-          <NavLink className="menu-item" to="skill">
-            Skills
-          </NavLink>
-        </NavMenu>
-        <NavBtn>
+        </div>
+        {home ? (
+          <div className="NavMenu">
+            <NavLink className={home ? "NavLinkHome menu-item" : "NavLink menu-item"} to="projects">
+              Projects
+            </NavLink>
+            <NavLink className={home ? "NavLinkHome menu-item" : "NavLink menu-item"} to="about">
+              About
+            </NavLink>
+            <NavLink className={home ? "NavLinkHome menu-item" : "NavLink menu-item"} to="skill">
+              Skills
+            </NavLink>
+          </div>) : (<div className="NavMenu">
+            <Link className={home ? "NavLinkHome menu-item" : "NavLink menu-item"} to="/">
+              Home
+            </Link>
+          </div>)}
+        <div className="NavBtn">
           <a
             className="btn PrimaryBtn"
             href="https://www.linkedin.com/in/sathya--seelan/"
@@ -28,9 +37,9 @@ const Header = ({ toggle }) => {
           >
             Connect With Me
           </a>
-        </NavBtn>
-        <Bars onClick={toggle} />
-      </Nav>
+        </div>
+        <div className="Bars" onClick={toggle} />
+      </nav>
     </div>
   );
 };

diff --git a/src/components/Header/HeaderElements.js b/src/components/Header/HeaderElements.js
@@ -12,15 +12,15 @@ export const Nav = styled.nav`
 `;
 
 export const NavLink = styled(ScrollLink)`
-  color: rgb(119, 119, 121);
+  ${'' /* color: rgb(119, 119, 121);
   display: flex;
   font-size: 1.2rem;
   align-items: center;
   height: 100%;
   cursor: pointer;
   &:hover {
     color: #f6f6f6;
-  }
+  } */}
 `;
 export const Logo = styled('div')`
   img {

diff --git a/src/components/Hero/Hero.js b/src/components/Hero/Hero.js
@@ -26,7 +26,7 @@ function Hero() {
   return (
     <main>
       <Dropdown isOpen={isOpen} toggle={toggle} />
-      <Header toggle={toggle} />
+      <Header toggle={toggle} home={true} />
       <HeroContainer>
         <HeroWrapper>
           <HeroLeft>

diff --git a/src/components/Projects/AllProjects.js b/src/components/Projects/AllProjects.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { ProjectList } from "../../data/ProjectData"; // Adjusted import path
+import ProjectCard from "./ProjectCard/ProjectCard"; // Adjust the import path as necessary
+
+function AllProjects() {
+    return (
+        <div>
+            <h1>All Projects</h1>
+            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+                {ProjectList.map((project, index) => (
+                    <ProjectCard key={index} project={project} />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default AllProjects;
diff --git a/src/components/Projects/Projects.js b/src/components/Projects/Projects.js
@@ -22,8 +22,17 @@ function Projects() {
         <div className="Container">
           <div className="SectionTitle">Projects</div>
           <ProjectCard />
+          <div style={{ display: "flex", justifyContent: "center", marginTop: "20px" }}>
+            <button
+              className="btn PrimaryBtn btn-shadow"
+              onClick={() => (window.location.href = "/projects")}
+            >
+              More Projects
+            </button>
+          </div>
         </div>
       </div>
+
     </>
   );
 }

diff --git a/src/components/SocialIcon/ScrollToTop.js b/src/components/SocialIcon/ScrollToTop.js
@@ -43,21 +43,17 @@ function ScrollToTop() {
 
         shouldRender &&
 
-        <Tooltip title='Scroll to top' placement='top' open={open} onOpen={() => setOpen(true)} onClose={() => setOpen(false)}>
-
+        <>
             <div style={{ backgroundColor: 'black', height: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                 <h1 style={{ color: 'white', fontWeight: 'bold', margin: '0' }}> &copy; 2024 [ Sathya Seelan G   ]</h1>
             </div>
 
-            {/* <div  style={{ backgroundColor:'black' , height:'50px'}} >
-    <h1 style={{ color: 'white', fontWeight: 'bold' }} >copy</h1>
-    <h3 >&copy; 2023 [ Sathya Seelan G   ]</h3>
-</div> */}
-
-            <StyledIconButton size='large' aria-label='scroll to top' onClick={handleClick} >
-                <StyledArrowIcon fontSize={40} />
-            </StyledIconButton>
-        </Tooltip>
+            <Tooltip title='Scroll to top' placement='top' open={open} onOpen={() => setOpen(true)} onClose={() => setOpen(false)}>
+                <StyledIconButton size='large' aria-label='scroll to top' onClick={handleClick} >
+                    <StyledArrowIcon fontSize={40} />
+                </StyledIconButton>
+            </Tooltip>
+        </>
     )
 }