add snap scroll

apps/about-me/src/pages/index.tsx

@@ -9,6 +9,7 @@ import {
   FaGithub,
   FaLinkedin
 } from 'react-icons/fa';
+import { ReactNode } from "react";
 
 const circle = cva("absolute rounded-full border -z-10", {
   variants: {
@@ -26,7 +27,7 @@ const circle = cva("absolute rounded-full border -z-10", {
     },
     color: {
       back: "border-pink-50",
-      fore: "border-rose-300",
+      fore: "border-amber-300",
     }
   },
   defaultVariants: {
@@ -49,41 +50,58 @@ const Shapes = () => <div className="absolute flex items-center justify-center">
   <Circle size={4} />
 </div>
 
-const Brief = () => <article className="relative w-screen flex flex-col justify-center items-center overflow-hidden text-center min-h-screen gap-2">
+const Article: React.FC<{ children?: ReactNode }> = ({ children }) => <article
+  className="relative w-screen flex flex-col justify-center items-center overflow-hidden text-center min-h-screen gap-2">
+  {children}
+</article>
+
+const Brief = () => <Article>
   {/*Avatar*/}
   <div className="flex justify-center items-center">
     <Shapes />
     <div className="rounded-full w-[200px] h-[200px] overflow-hidden flex justify-center">
       <div className="flex justify-center items-center">
         <Image
-          src="/assets/myself.jpg"
+          src="/assets/avatarRL.jpeg"
           width={512}
           height={512}
           alt="Hung's avatar" />
       </div>
     </div>
   </div>
-  <h1 className="text-3xl semi-bold z-10">
+  <h1 className="text-gray-700 text-3xl semi-bold z-10">
     Hung Tran
   </h1>
-  <h1 className="text-3xl tracking-wider z-10">
+  <h1 className="text-gray-400 text-xl tracking-widest z-10 uppercase">
     Software Engineer
   </h1>
-</article>
+</Article>
 
-const About = () => <article className="flex gap-4">
-  This is my about section
-</article>
+const SectionHeader: React.FC<{ text?: string, children?: ReactNode }> = ({ text, children }) => <h1
+  className="text-xl text-gray-600 tracking-widest">
+  {text}
+  {children}
+</h1>
 
-const Experience = () => <article>
+const ImageDisplay = () => <div>
+
+</div>
+const About = () => <Article>
+  <SectionHeader>About</SectionHeader>
+</Article>
+
+const Experience = () => <Article>
+  <SectionHeader>Experience</SectionHeader>
   Some stub content while this is not propagated yet
-</article>
+</Article>
 
-const Blog = () => <article>
+const Blog = () => <Article>
+  <SectionHeader>Blogs</SectionHeader>
   lol
-</article>
+</Article>
 
-const Projects = () => <article className="flex flex-col">
+const Projects = () => <Article >
+  <SectionHeader>Projects</SectionHeader>
   <span>
     I was about to type Lorem Ipsum until I realize I could not even remember the content
     of the first sentence.
@@ -112,7 +130,7 @@ const Projects = () => <article className="flex flex-col">
     I was about to type Lorem Ipsum until I realize I could not even remember the content
     of the first sentence.
   </span>
-</article>
+</Article>
 
 
 const NavbarItem: React.FC<{
@@ -120,37 +138,62 @@ const NavbarItem: React.FC<{
   link: string;
   children: React.ReactNode
 }> = ({ text, link, children }) => <Link className="group" href={link}>
-  <button className="flex flex-col items-center justify-center flex-flex-col p-2 group-hover:cursor-pointer">
+  <button className="flex flex-col items-center justify-center flex-flex-col p-2 group-hover:cursor-pointer group">
     {children}
     {/*<span className="group-hover:visible invisible">{text}</span>*/}
   </button>
 </Link>
 
+
+const iconCva = cva("transition-colors", {
+  variants: {
+    theme: {
+      light: "group-hover:fill-gray-700 fill-gray-400"
+    }
+  },
+  defaultVariants: {
+    theme: "light"
+  }
+});
+
 const Navbar = () => <div className="flex justify-center items-center w-full z-50 sticky top-0 left-0 backdrop-blur-md h-8">
   <div className="w-11/12 max-w-screen-lg flex items-center gap-4">
     <div className="flex flex-row justify-center items-center gap-1">
-      <NavbarItem text="GitHub" link="https://github.com/pegasust"><FaGithub /></NavbarItem>
-      <NavbarItem text="LinkedIn" link="https://linkedin.com/in/hung-tran-1963bb205/"><FaLinkedin /></NavbarItem>
+      <NavbarItem text="GitHub" link="https://github.com/pegasust"><FaGithub className={iconCva()} /></NavbarItem>
+      <NavbarItem text="LinkedIn" link="https://linkedin.com/in/hung-tran-1963bb205/"><FaLinkedin className={iconCva()} /></NavbarItem>
     </div>
-    <span className="text-gray-400 animate-pulse">Hung Tran</span>
+    <Link href="#brief">
+      <span className="transition-colors hover:text-amber-400 text-amber-400/50 animate-pulse">Hung Tran</span>
+    </Link>
   </div>
 </div>
 
 
 const Home: NextPage = () => {
   return (
-    <main className="z-0 flex flex-col justify-center items-center bg-pink-50/0 min-h-screen antialiased">
+    <main className="overflow-x-hidden z-0 flex flex-col overflow-y-scroll h-screen
+        items-center bg-pink-50/20 min-h-screen antialiased snap-y snap-proximity">
       <Head>
         <title>Hung Tran</title>
         <meta name="description" content="Personal website about Hung Tran and my homelab Felia" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Navbar />
+      <section id="brief" className="snap-start">
         <Brief />
+      </section>
+      <section id="about" className="snap-start">
         <About />
+      </section>
+      <section id="experience" className="snap-start">
         <Experience />
+      </section>
+      <section id="blog" className="snap-start">
         <Blog />
+      </section>
+      <section id="projects" className="snap-start">
         <Projects />
+      </section>
     </main>
   );
 };