diff --git a/client/src/App.scss b/client/src/App.module.scss similarity index 90% rename from client/src/App.scss rename to client/src/App.module.scss index c93f27f..43da845 100644 --- a/client/src/App.scss +++ b/client/src/App.module.scss @@ -66,8 +66,16 @@ } */ -.views-container { +.viewsContainer { height: 100vh; + font-family: 'Volkhov', serif; - + .scrollViewComponent { + color: black; + } } + + + + + diff --git a/client/src/App.tsx b/client/src/App.tsx index cf40bc9..5c96993 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,105 +1,103 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import { Element, scroller } from 'react-scroll'; -import './App.scss'; +import styles from './App.module.scss'; +import './common/styles.scss'; import Home from './pages/home'; - - +import About from './pages/about'; +import Blog from './pages/blog'; import NavBar from './common/components/NavBar' - - - import ScrollView from './common/components/ScrollView' - - -const routes = [ - "/", - "/about", - "/blog", - "/experiences", - "/resume", - "/contact", -] +// const routes = [ +// "/", +// "/about", +// "/blog", +// "/experiences", +// "/resume", +// "/contact", +// ] function App() { - - + const observer = useRef(null); + + const [currScrollView, setCurrScrollView] = useState(null); + + useEffect(() => { + const handleIntersection = (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setCurrScrollView(entry.target.id); + const newRoute = `#${entry.target.id}` + window.history.replaceState(null, null, newRoute); + } + }); + }; + + // Create an IntersectionObserver + observer.current = new IntersectionObserver(handleIntersection, { + root: null, + threshold: 1.0, + rootMargin: "128px", + }); + + // Get a list of elements to observe (replace with your element IDs) + const elementsToObserve = document.getElementsByClassName(styles.scrollViewComponent); + + // Start observing each element + Object.values(elementsToObserve).forEach((element) => { + observer.current?.observe(element); + }); + + // Clean up the observer when the component unmounts + return () => { + observer.current?.disconnect(); }; + }, []); // The empty dependency array ensures this effect runs once after initial render + + console.log(currScrollView); return ( -
- - +
+ + - - - - - + + + + + + + + +
); } export default App - - - - - -// // import React from 'react'; -// // import './GridBackground.css'; - -// function GridBackground() { - -// // Inside the GridBackground component - -// const generateGrid = (numCircles) => { -// const grid = []; -// for (let i = 0; i < numCircles; i++) { -// grid.push(
); -// } -// return grid; -// }; - -// const handleMouseMove = (e: MouseEvent) => { -// const circles = document.querySelectorAll('.circle') as NodeListOf; - -// const cursorX = e.clientX; -// const cursorY = e.clientY; - -// circles.forEach((circle) => { -// const circleX = circle.offsetLeft + circle.offsetWidth / 2; -// const circleY = circle.offsetTop + circle.offsetHeight / 2; -// const deltaX = cursorX - circleX; -// const deltaY = cursorY - circleY; -// // const angle = Math.atan2(deltaY, deltaX); -// const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2); - -// const maxDistance = 100; // Adjust this value to control the interaction range - -// if (distance < maxDistance) { -// const scale = 1 - distance / maxDistance; -// const transform = `translate(-50%, -50%) scale(${scale})`; -// circle.style.transform = transform; -// } else { -// circle.style.transform = 'translate(-50%, -50%) scale(1)'; -// } -// }); -// }; - - - -// window.addEventListener('mousemove', handleMouseMove); - -// // console.log('testing') - -// return ( -//
-// {generateGrid(500)} {/* Adjust the number of circles as needed */} -//
-// ); - -// } - -// export default GridBackground; diff --git a/client/src/common/components/ContentWrapper/ContentWrapper.module.scss b/client/src/common/components/ContentWrapper/ContentWrapper.module.scss new file mode 100644 index 0000000..43a8756 --- /dev/null +++ b/client/src/common/components/ContentWrapper/ContentWrapper.module.scss @@ -0,0 +1,11 @@ +.wrapper { + height: calc(100vh - 128px); + top: 128px; + width: 100vw; + position: relative; +} + +.wrapper.landingPage { + height: 100vh; + top: 0; +} \ No newline at end of file diff --git a/client/src/common/components/ContentWrapper/index.tsx b/client/src/common/components/ContentWrapper/index.tsx new file mode 100644 index 0000000..23b44d3 --- /dev/null +++ b/client/src/common/components/ContentWrapper/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import styles from './ContentWrapper.module.scss'; + +function ContentWrapper(props) { + return ( +
+ + {props.children} + +
+ ) +} + +export default ContentWrapper; \ No newline at end of file diff --git a/client/src/common/components/NavBar/NavBar.module.scss b/client/src/common/components/NavBar/NavBar.module.scss index f4704f3..94589e8 100644 --- a/client/src/common/components/NavBar/NavBar.module.scss +++ b/client/src/common/components/NavBar/NavBar.module.scss @@ -5,6 +5,7 @@ position: absolute; background: rgba($color: white, $alpha: 0.5); width: 100vw; + z-index: 100; font-family: 'Volkhov', serif; @@ -19,6 +20,10 @@ } +#navbarBrand { + transition: 1s; +} + // .navbar-text { // // font-family: 'Volkhov', serif; // // font-size: 24px; @@ -37,4 +42,26 @@ .scrollView + .sticky { padding-top: 96px; +} + +// .homePageBrand { +// // display: none; +// // visibility: hidden; +// font-size: 0; +// } + +// .navLinks { +// transition: 1s; +// } + +.navLink { + color: purple; + transition: 0.5s; +} + +.selectedNav { + transition: 0.5s; + text-shadow: -4px -2px 1px rgba(220, 20, 60, 0.8), 4px 2px 1px rgba(0, 255, 255, 0.8); + -webkit-text-stroke: 0.1px black; + // --bs-navbar-active-color: white; } \ No newline at end of file diff --git a/client/src/common/components/NavBar/index.tsx b/client/src/common/components/NavBar/index.tsx index 0ddc042..c2b162a 100644 --- a/client/src/common/components/NavBar/index.tsx +++ b/client/src/common/components/NavBar/index.tsx @@ -1,67 +1,82 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import styles from './NavBar.module.scss'; import Container from "react-bootstrap/Container"; import Nav from "react-bootstrap/Nav"; import Navbar from "react-bootstrap/Navbar"; -import NavDropdown from "react-bootstrap/NavDropdown"; +import Fade from "react-bootstrap/Fade"; -function NavBar() { +function NavBar(props) { - const handleScroll = () => { - if (window.scrollY >= (window.innerHeight - 128)) { - document.getElementById(styles.navbar)?.classList.add(styles.sticky); - } else { - document.getElementById(styles.navbar)?.classList.remove(styles.sticky); - } - }; + const [isHomePage, setIsHomePage] = useState(props.currRoute); - useEffect(() => { - window.addEventListener("scroll", handleScroll); - return () => window.removeEventListener("scroll", handleScroll); - }, []) + // console.log('from navbar, current route is', props.currRoute) - return ( - // + // const isHomePage = useRef(window.scrollY === 0); + + const applySticky = () => { + if (window.scrollY >= (window.innerHeight - 128)) { + document.getElementById(styles.navbar)?.classList.add(styles.sticky); + } else { + document.getElementById(styles.navbar)?.classList.remove(styles.sticky); + } + } + + useEffect(() => { + window.addEventListener("scroll", applySticky); + applySticky(); + return () => window.removeEventListener("scroll", applySticky); + }, []); + + // debugger; + // let isHomePage = window.scrollY === 0; + + + // console.log(isHomePage.current) + + const handleSelect = (selectedKey) => { + console.log('test', selectedKey); + } + + // debugger; + + return ( - Aditya Tapshalkar, + + + Aditya Tapshalkar, + + -