Added bouncing arrow in hero section

Author: hqasmei

Diff for: components/AboutSection.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import Image from "next/image"
 
 const skills = [
   { skill: "HTML" },
@@ -16,9 +17,8 @@ const skills = [
 
 const AboutSection = () => {
   return (
-    
     <section id="about">
-      <div className="my-28">
+      <div className="my-12 pt-12 md:pt-16 md:pb-48">
         <h1 className="text-center font-bold text-4xl">
           About Me
           <hr className="w-6 h-1 mx-auto my-4 bg-teal-500 border-0 rounded"></hr>
@@ -63,7 +63,7 @@ const AboutSection = () => {
           </div>
           <div className="text-center md:w-1/2 md:text-left">
             <h1 className="text-2xl font-bold mb-6">My Skills</h1>
-            <div className="flex flex-wrap flex-row justify-center md:justify-start">
+            <div className="flex flex-wrap flex-row justify-center z-10 md:justify-start">
               {skills.map((item, idx) => {
                 return (
                   <p
@@ -75,6 +75,13 @@ const AboutSection = () => {
                 )
               })}
             </div>
+            <Image
+              src="/hero-image.png"
+              alt=""
+              width={325}
+              height={325}
+              className="hidden md:block md:relative md:bottom-4 md:left-32 md:z-0"
+            />
           </div>
         </div>
       </div>

Diff for: components/HeroSection.tsx

@@ -1,41 +1,57 @@
+"use client" // this is a client component
 import React from "react"
 import Image from "next/image"
-
-
+import { Link } from "react-scroll/modules"
+import { HiArrowDown } from "react-icons/hi"
 
 const HeroSection = () => {
   return (
-    <section id="home" className="-top-12">
-      <div className="flex flex-col text-center items-center justify-center my-24 md:flex-row md:text-left">
-        <div className="md:w-1/2">
+    <section id="home">
+      <div className="flex flex-col text-center items-center justify-center animate-fadeIn animation-delay-2 my-10 py-16 sm:py-32 md:py-52 md:flex-row md:space-x-4 md:text-left">
+        <div className="md:mt-2 md:w-1/2">
           <Image
             src="/headshot.png"
             alt=""
-            width={300}
-            height={300}
-            className="rounded-full shadow-2xl mt-8"
+            width={325}
+            height={325}
+            className="rounded-full shadow-2xl"
           />
         </div>
-        <div className="mt-4 md:w-3/5">
-          <h1 className="text-4xl font-bold  md:text-6xl">
-            Hi, I&#39;m Hosna!
-          </h1>
-          <p className="text-lg mt-4 mb-6 md:pr-28 md:text-xl">
+        <div className="md:mt-2 md:w-3/5">
+          <h1 className="text-4xl font-bold mt-6 md:mt-0 md:text-7xl">Hi, I&#39;m Hosna!</h1>
+          <p className="text-lg mt-4 mb-6 md:text-2xl">
             I&#39;m a{" "}
             <span className="font-semibold text-teal-600">
               Software Engineer{" "}
             </span>
             based in Los Angeles, CA. Working towards creating software that
             makes life easier and more meaningful.
           </p>
-          <a
+          <Link
+            to="projects"
             className="text-neutral-100 font-semibold px-6 py-3 bg-teal-600 rounded shadow hover:bg-teal-700"
-            href="#projects"
+            activeClass="active"
+            spy={true}
+            smooth={true}
+            offset={-100}
+            duration={500}
           >
             Projects
-          </a>
+          </Link>
         </div>
       </div>
+      <div className="flex flex-row items-center text-center justify-center ">
+        <Link
+          to="about"
+          activeClass="active"
+          spy={true}
+          smooth={true}
+          offset={-100}
+          duration={500}
+        >
+          <HiArrowDown size={35} className="animate-bounce" />
+        </Link>
+      </div>
     </section>
   )
 }

Diff for: components/Navbar.tsx

@@ -1,30 +1,29 @@
 "use client" // this is a client component
 import React from "react"
 import { useState } from "react"
-
-import Link from "next/link"
+import { Link } from "react-scroll/modules"
 import { usePathname } from "next/navigation"
 import { useTheme } from "next-themes"
 import { RiMoonFill, RiSunLine } from "react-icons/ri"
 import { IoMdMenu, IoMdClose } from "react-icons/io"
 
 interface NavItem {
   label: string
-  id?: string
+  page: string
 }
 
 const NAV_ITEMS: Array<NavItem> = [
   {
     label: "Home",
-    id: "#home",
+    page: "home",
   },
   {
     label: "About",
-    id: "#about",
+    page: "about",
   },
   {
     label: "Projects",
-    id: "#projects",
+    page: "projects",
   },
 ]
 
@@ -38,7 +37,7 @@ export default function Navbar() {
       <div className="justify-between md:items-center md:flex">
         <div>
           <div className="flex items-center justify-between py-3 md:py-5 md:block">
-            <Link href="#home">
+            <Link to="home">
               <div className="container flex items-center space-x-2">
                 <h2 className="text-2xl font-bold">Hosna Qasmei</h2>
               </div>
@@ -60,21 +59,24 @@ export default function Navbar() {
               navbar ? "block" : "hidden"
             }`}
           >
-            <div className=" items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
+            <div className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
               {NAV_ITEMS.map((item, idx) => {
                 return (
-                  <a
+                  <Link
                     key={idx}
+                    to={item.page}
                     className={
-                      pathname == `${item.id}`
-                        ? "font-bold"
-                        : "block lg:inline-block text-neutral-900  hover:text-neutral-500 dark:text-neutral-100"
+                      "block lg:inline-block text-neutral-900  hover:text-neutral-500 dark:text-neutral-100"
                     }
-                    href={item.id}
+                    activeClass="active"
+                    spy={true}
+                    smooth={true}
+                    offset={-100}
+                    duration={500}
                     onClick={() => setNavbar(!navbar)}
                   >
                     {item.label}
-                  </a>
+                  </Link>
                 )
               })}
               {currentTheme === "dark" ? (

Diff for: components/ProjectsSection.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import Image from "next/image"
 import Link from "next/link"
+import SlideUp from "./SlideUp"
 import { BsGithub, BsArrowUpRightSquare } from "react-icons/bs"
 
 const projects = [
@@ -41,42 +42,45 @@ const ProjectsSection = () => {
         {projects.map((project, idx) => {
           return (
             <div key={idx}>
-              <div className="flex flex-col md:flex-row md:space-x-12">
-                <div className="md:w-1/2">
-                  <Link href={project.link}>
-                    <Image
-                      src={project.image}
-                      alt=""
-                      width={1000}
-                      height={1000}
-                      className="rounded-xl shadow-xl hover:opacity-90"
-                    />
-                  </Link>
-                </div>
-                <div className="mt-8 md:w-1/2">
-                  <h1 className="text-4xl font-bold mb-6">{project.name}</h1>
-                  <p className="text-xl leading-7 mb-4 text-neutral-600 dark:text-neutral-400">
-                    {project.description}
-                  </p>
-                  <div className="flex flex-row align-bottom space-x-4">
-                    <Link href={project.github} target="_blank">
-                      <BsGithub
-                        size={30}
-                        className="hover:-translate-y-1 transition-transform cursor-pointer"
-                      />
-                    </Link>
-                    <Link href={project.link} target="_blank">
-                      <BsArrowUpRightSquare
-                        size={30}
-                        className="hover:-translate-y-1 transition-transform cursor-pointer"
+              <SlideUp offset="-300px 0px -300px 0px">
+                <div className="flex flex-col  animate-slideUpCubiBezier animation-delay-2 md:flex-row md:space-x-12">
+                  <div className=" md:w-1/2">
+                    <Link href={project.link}>
+                      <Image
+                        src={project.image}
+                        alt=""
+                        width={1000}
+                        height={1000}
+                        className="rounded-xl shadow-xl hover:opacity-70"
                       />
                     </Link>
                   </div>
+                  <div className="mt-8 md:w-1/2">
+                    <h1 className="text-4xl font-bold mb-6">{project.name}</h1>
+                    <p className="text-xl leading-7 mb-4 text-neutral-600 dark:text-neutral-400">
+                      {project.description}
+                    </p>
+                    <div className="flex flex-row align-bottom space-x-4">
+                      <Link href={project.github} target="_blank">
+                        <BsGithub
+                          size={30}
+                          className="hover:-translate-y-1 transition-transform cursor-pointer"
+                        />
+                      </Link>
+                      <Link href={project.link} target="_blank">
+                        <BsArrowUpRightSquare
+                          size={30}
+                          className="hover:-translate-y-1 transition-transform cursor-pointer"
+                        />
+                      </Link>
+                    </div>
+                  </div>
                 </div>
-              </div>
+              </SlideUp>
             </div>
           )
         })}
+        
       </div>
     </section>
   )

Diff for: components/SlideUp.tsx

@@ -0,0 +1,36 @@
+"use client" // this is a client component
+
+import React, { useEffect, useRef, ReactNode } from "react"
+interface Props {
+  offset?: string
+  children?: ReactNode
+  // any props that come into the component
+}
+
+export default function SlideUp({ children, offset = "0px" }: Props) {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.remove("opacity-0")
+            entry.target.classList.add("animate-slideUpCubiBezier")
+          }
+        })
+      },
+      { rootMargin: offset }
+    )
+
+    if (ref.current) {
+      observer.observe(ref.current)
+    }
+  }, [ref])
+
+  return (
+    <div ref={ref} className="relative opacity-0">
+      {children}
+    </div>
+  )
+}

Diff for: package-lock.json

@@ -20,9 +20,11 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.7.1",
+    "react-scroll": "^1.8.9",
     "typescript": "4.9.4"
   },
   "devDependencies": {
+    "@types/react-scroll": "^1.8.6",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.4"