feat: UX updates

.gitignore

@@ -1,4 +1,5 @@
 tmp
 node_modules
 package-lock.json
-.DS_Store
+.DS_Store
+fonts

shivam-tripathi.github.io/src/App.tsx

@@ -1,23 +1,12 @@
-import { useState } from "react";
-import TopNav from "./components/top-nav.tsx";
 import { MinimalSideNav } from "./components/side-nav.tsx";
 import Content from "./components/content.tsx";
 import './App.css';
 
 const App = ({ page }: { page: React.ComponentType }) => {
-  const isMobile = window.matchMedia("(max-width: 768px)").matches;
-  const [showSideNav, setShowSideNav] = useState(!isMobile);
-
-  const toggleSideNav = () => {
-    const nextShowSideNav = !showSideNav;
-    setShowSideNav(nextShowSideNav);
-  }
-
   return (
     <>
-      <TopNav toggleSideNav={toggleSideNav} />
       <div className="app">
-        {showSideNav ? <MinimalSideNav /> : null}
+        <MinimalSideNav />
         <Content Page={page} />
       </div>
     </>

shivam-tripathi.github.io/src/components/content.tsx

@@ -1,14 +1,26 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import './content.css';
+import { useLocation } from "react-router-dom";
 
-const Content = ({ Page }: { Page: React.ComponentType }) => (
-  <div className="content">
+const Content = ({ Page }: { Page: React.ComponentType }) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const { pathname } = useLocation();
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.scrollIntoView({ behavior: 'smooth' });
+      ref.current.scrollTo(0, 0);
+    }
+  }, [pathname]);
+
+  return <div className="content">
+    <div ref={ref}></div>
     <div className="content-body">
       <Page />
       <p style={{paddingTop: '100px'}}></p>
     </div>
-  </div>
-);
+  </div>;
+};
 
 export default Content;

shivam-tripathi.github.io/src/components/side-nav.tsx

@@ -11,6 +11,7 @@ const MinimalSideNav = () => {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
+      paddingTop: '2rem',
     }}>
       {
         navigation.map(({description, path, icon}, index) => {

shivam-tripathi.github.io/src/components/top-nav.css

@@ -22,7 +22,7 @@
 .topNav a {
   color: inherit;
   text-decoration: none;
-	padding-left: 7.5vh;
+	padding-left: 2rem;
 }
 
 @media (max-width: 768px) {

shivam-tripathi.github.io/src/pages/about/index.tsx

@@ -3,14 +3,35 @@ import img from '../../assets/banyan.webp';
 import './about.css';
 
 const About = () => {
-	return <div className='about'>
-		<h1>About</h1>
-		<section style={{textAlign: 'center'}}>
-			<p>Hi, my name is Shivam Tripathi.</p>
+
+	const content = `
+Hello there!
+
+Welcome to my blog! My name is Shivam .
+
+Currently I have the privilege of leading the Search and Discovery team at Quizizz. Search and Discovery combines the power of product, design, data, engineering and applied machine learning to build experiences which help every educator find the right content at the right time with the right rigor across the world in their language and curriculum for their leaners.
+
+My journey with Quizizz began shortly before their seed funding round, and I've been fortunate to contribute to the platform's growth, scaling it to an impressive 70 million monthly active users as a part of the early team.
+
+Prior to my role in Search and Discovery, I had the opportunity to lead both the Content and Growth teams. I was part of the platform team in my early years. My professional journey has been both challenging and rewarding, allowing me to expand our engineering team from a modest 10 members to over 100 talented engineers.
+
+If you'd like to get in touch, please feel free to reach out to me at shivam [at] quizizz [dot] com. I'm always happy to connect with like-minded individuals and engage in stimulating conversations!
+`
+
+/* <p>Hi, my name is Shivam Tripathi.</p>
 			<p>Currently I live in Bengaluru, working at <a href="https://quizizz.com">Quizizz</a>. I lead the team for Search and Discovery. Previously, I led Content and Growth teams and was part of the platform team.<br/></p>
 			<p>I hold a bachelor's degree in Computer Science and Engineering from <a href="https://iitu.ac.in">Indian Institute of Information Technology Una</a>.</p>
 			<p>I joined Quizizz shortly before their seed funding round, where I contributed to building and scaling the product to reach 70 million monthly active users. Additionally, I supported the growth of the engineering team, expanding it from 10 to over 100 engineers.</p>
-			<p>You can reach out to me at shivam [at] quizizz [dot] com.</p>
+			<p>You can reach out to me at shivam [at] quizizz [dot] com.</p> */
+
+	return <div className='about'>
+		<h1>About</h1>
+		<section style={{textAlign: 'center'}}>
+			{
+				content.split('\n').map((line, index) => {
+					return <p key={index}>{line}</p>;
+				})
+			}
 		</section>
 		<section style={{ textAlign: 'center' }}>
 			<img src={img} className="heroimg" />

shivam-tripathi.github.io/src/pages/content-tree/content-tree.css

@@ -4,4 +4,5 @@ a {
 
 a:hover {
 	text-decoration: underline;
+	color: gray;
 }

shivam-tripathi.github.io/src/pages/content-tree/index.tsx

@@ -1,8 +1,11 @@
-import { getTree, getList } from "../../routes";
+import { Tree, CollapsibleList } from "../../routes";
 import './content-tree.css';
 
-const ContentTree = () => {
-	return <><h1>Index Tree</h1>{getList(getTree())}</>
+const ContentTree = ({ tree } : { tree: Tree }) => {
+	return <div className="content-tree">
+		<h1>Index Tree</h1>
+		<CollapsibleList subTree={tree} />
+	</div>;
 }
 
 export default ContentTree;

shivam-tripathi.github.io/src/pages/landing/index.tsx

@@ -1,14 +1,15 @@
 import ContentTree from '../content-tree';
 import imgUrl from '../../assets/banyan.webp'
 import './landing.css';
+import { getTree } from '../../routes';
 
 const Landing = () => {
   return (
     <div className='landing'>
       <h1> Kalpavriksha </h1>
       <h2> Musings on Life, Universe, and Everything </h2>
       <img src={imgUrl} className="heroimg"/>
-      <ContentTree />
+      <ContentTree tree={getTree()}/>
     </div>
   );
 };

shivam-tripathi.github.io/src/routes.tsx

@@ -19,7 +19,8 @@ import App from './App';
 import About from './pages/about';
 import Landing from './pages/landing';
 import { Link } from 'react-router-dom';
-import { CodeXml, Dice5, HomeIcon, Kanban, ListTree, Notebook, Star, User, Quote } from 'lucide-react';
+import { CodeXml, Dice5, HomeIcon, Kanban, ListTree, Notebook, Star, User, Quote, ChevronRight, ChevronDown } from 'lucide-react';
+import { useState } from 'react';
 
 const core = [
 	{
@@ -134,12 +135,6 @@ const routes = [
 	}
 ];
 
-export const contentTree = {
-	description: 'Tree',
-	path: '/content-tree',
-	icon: <ListTree/>,
-};
-
 export type Tree = { children: { [path: string]: Tree }, path?: string; element?: JSX.Element; description: string; };
 
 let _tree: Tree | null = null;
@@ -165,26 +160,54 @@ export function getTree() {
 	return tree;
 }
 
-export const blogPath = (path: string) => `/blog${path ?? ''}`;
+export const contentTree = {
+	description: 'Tree',
+	path: '/content-tree',
+	icon: <ListTree/>,
+	element: <App page={() => <CollapsibleList subTree={getTree()} />}/>,
+};
 
-export function getList(subTree: Tree) {
-	const collect: JSX.Element[] = [];
-	const row = <li key={subTree.path}>
-		{subTree.path ? <Link style={{textDecoration: 'none', color: 'var(--secondary)'}} to={blogPath(subTree.path) as string}>{subTree.description}</Link> : subTree.description}
-		{Object.keys(subTree.children).map(inner => getList(subTree.children[inner]))}
-	</li>;
-	collect.push(row);
-	return <ul key={subTree.path}>{collect}</ul>;
-}
+
+export const blogPath = (path: string) => `/blog${path ?? ''}`;
 
 const navigationDetails = (description: string) => {
-	const items = getList(getTree().children[description.toLowerCase()]);
-	return <><h1>{description}</h1>{items}</>;
+	const subTree = getTree().children[description.toLowerCase()];
+	return <><h1>{description}</h1><CollapsibleList subTree={subTree}/></>;
 }
 
 export const navigation = [
 	...core,
 	contentTree,
 ];
 
+export const CollapsibleList = ({ subTree }: { subTree: Tree }) => {
+	const collect: JSX.Element[] = [];
+	const [showChildren, setShowChildren] = useState(false);
+
+	let description;
+	const linkedContent = <Link to={blogPath(subTree?.path ?? '') as string}>{subTree.description}</Link>;
+	if (Object.keys(subTree.children ?? {}).length > 0) {
+		const listHeaderCSS = {display: 'flex', alignItems: 'center'};
+		if (showChildren) {
+			description = <div style={listHeaderCSS}><ChevronRight onClick={() => setShowChildren(false)}/>{linkedContent}</div>;
+		} else {
+			description = <div style={listHeaderCSS}><ChevronDown onClick={() => setShowChildren(true)}/>{linkedContent}</div>;
+		}
+	} else {
+		description = linkedContent;
+	}
+
+	const listStyle = { listStyleType: 'none' };
+
+	const row = <li key={subTree.path} style={listStyle}>
+		{description}
+		{Object.keys(subTree.children).map(inner => {
+			return <div style={{display: showChildren ? 'none' : 'inline' }}>{<CollapsibleList subTree={subTree.children[inner]} />}</div>;
+		})}
+	</li>;
+
+	collect.push(row);
+	return <ul key={subTree.path} style={listStyle}>{collect}</ul>;
+}
+
 export default routes;