added project pages, updated page for FAM.

components/Nav.tsx

@@ -1,14 +1,16 @@
 "use client";
 
+import Link from "next/link";
+
 
 type Props = {
   section: string;
-  setSection: (s: string) => void;
+  subtitle?: string;
 };
 
-const items = ["profile", "projects"];
+const items = ["profile", "project"];
 
-export default function Nav({ section, setSection }: Props) {
+export default function Nav({ section, subtitle }: Props) {
   return (
     <nav
       style={{
@@ -21,10 +23,9 @@ export default function Nav({ section, setSection }: Props) {
       }}>
 
       {items.map((item) => (
-
+      <Link key={item} href={"/" + item}>
         <button
-          key={item}
-          onClick={() => setSection(item)}
+          
           style={{
             background: section === item ? "var(--surface)" : "transparent",
             color: section === item ? "var(--accent)" : "var(--muted)",
@@ -50,9 +51,11 @@ export default function Nav({ section, setSection }: Props) {
 
           <span style={{ opacity: 0.4, marginRight: 6 }}></span>
           {item}
-        </button>
+        </button></Link>
       ))}
 
+      <p>{subtitle}</p>
+
     </nav>
   );
 }

components/ProfileMore.tsx

@@ -18,6 +18,22 @@ export default function ProfileMore() {
     setMorePosition(morePosition + 1);
   }
 
+  function handleEnter(){
+      if (delayTimer) return;
+        setHovered(true);        
+        let timer = window.setTimeout(() => {
+                handleSectionExpand();
+            }, 500);
+            setDelayTimer(timer);
+  }
+  
+  function handleLeave() {
+     if (delayTimer){
+                clearTimeout(delayTimer);
+                setDelayTimer(null);
+            }
+            setHovered(false);
+  }
   return (
       <div 
       className="more-section-container"      
@@ -63,22 +79,19 @@ export default function ProfileMore() {
         })}
       
       <div {...handlers} className={`drop-handle ${wiggling ? "wiggle" : ""}`}
-       onMouseEnter={() => {
-        if (delayTimer) return;
-        setHovered(true);
-        
-        let timer = window.setTimeout(() => {
-                handleSectionExpand();
-            }, 500);
-            setDelayTimer(timer);
-            
-       }}
-       onMouseLeave={() => {
-            if (delayTimer){
+       onMouseEnter={
+            () => handleEnter()
+       }
+       onMouseLeave={() => handleLeave()}
+        onTouchStart={
+            () => handleEnter()
+        }
+        onTouchEnd={()=>handleLeave()}
+        onClick={() => {
+             if (delayTimer){
                 clearTimeout(delayTimer);
-                setDelayTimer(null);
-            }
-            setHovered(false);
+             }
+            handleSectionExpand();
         }}
        style={{ 
         opacity: morePosition < PROFILE.moreSections.length ? 1.0 : 0.0,

components/ProjectCard.tsx

@@ -3,6 +3,8 @@
 import { useEffect, useRef, useState } from "react";
 import type { Project } from "@/data/content";
 import SimpleGallery from "./SimpleGallery";
+import Link from "next/link";
+import { relative } from "path";
 
 
 type Props = {
@@ -143,10 +145,27 @@ export default function ProjectCard({ project, visible, selected = false, setSel
         </p>
      
        {contentRef.current && project.images && project.images.length > 0 && (
-        <SimpleGallery images={project.images} videos={project.videos} title={project.title}
-         />
+        <SimpleGallery images={project.images} videos={project.videos} title={project.title} />        
       )}
-        
+        <Link
+        className="expand-on-hover-button"
+        style={{
+          fontFamily: "var(--mono)",
+          fontSize: 15,
+          color: "var(--fg)",
+          border: `1px solid ${hovered ? "var(--accent)" : "var(--border)"}`,
+          backgroundColor: "var(--bg)",
+          height: "3em",
+          display: "block",
+          alignContent: "center",
+          alignItems: "center",
+          textAlign: "center",
+          width: "10em",
+          borderRadius: "var(--radius-md)",
+          position: "absolute",
+          right: "1em",
+          bottom: "1em"
+        }} href={"/project/"+project.slug} >See More</Link>
       </div>
     );
       }