- transitions working (slightly) when navigating to contact form and vice-verse

components/content/carousel/index.tsx

@@ -31,7 +31,7 @@ const ContentCarousel = ({
                 </div>
                 <div className=" w-fit self-center pb-1 border-b-2 border-white">{portfolioData.title}</div>
                 <div>{portfolioData.description}</div>
-                {portfolioData.prototypeIframeURL && <div style={{height: 100, minHeight: '100%'}} className="my-4 flex flex-row justify-center">
+                {portfolioData.prototypeIframeURL && <div style={{minHeight: '100%'}} className="my-4 h-fit flex flex-row justify-center">
                     {/* {<embed
                         src={portfolioData.prototypeIframeURL}
                         style={{
@@ -42,7 +42,7 @@ const ContentCarousel = ({
                         }}
                     />} */}
                     {portfolioData.heroImgSrc && <Link className="w-full h-full align-middle flex flex-row justify-center" href={portfolioData.prototypeIframeURL} target="#">
-                        <div className="flex flex-col justify-center">
+                        <div className="flex flex-row justify-center">
                             <span>
                                 <div className="mb-8 w-full flex-row flex justify-center bg-white"><Image height={300} width={300} src={portfolioData.heroImgSrc} alt=""/></div>
                             </span>

components/form/ContactForm/index.tsx

@@ -17,8 +17,8 @@ const ContactForm = () => {
 
   return (
     <div>
-        <form className="flex justify-center" onSubmit={handleSubmit(handleFormSubmission, handleFormError)}>
+        <form className="flex flex-row justify-center w-full" onSubmit={handleSubmit(handleFormSubmission, handleFormError)}>
-          <div className="w-full">
+          <div className="flex flex-col justify-center h-full">
             <div className=' flex flex-col justify-between space-y-4 w-full'>
               <div className='flex flex-row space-x-2'>
                 <input placeholder='First Name' className='w-1/2' {...register('firstName', { required: true })} />
@@ -27,7 +27,7 @@ const ContactForm = () => {
                 {errors.lastName && <p>Last name is required.</p>}
               </div>
               <div className="flex flex-row w-full">
-                <textarea placeholder='Summary...' className="flex grow" {...register('summary')} />
+                <textarea placeholder='Summary...' className="flex grow h-52" {...register('summary')} />
                 {errors.summary && <p>Please enter a message for your Project Inquiry.</p>}
               </div>
               <input className="bg-blue-600" type="submit" />

lib/navigationContent.tsx

@@ -35,27 +35,15 @@ const navigationContent = [
       }
     />
   },
-  {
+  // {
-    name: contentValues.about.name,
+  //   name: contentValues.about.name,
-    url: '#about',
+  //   url: '#about',
-    content: <Content
+  //   content: <Content
-      title='About'
+  //     title='About'
-      heroImgSrc={backgroundPic}
+  //     heroImgSrc={backgroundPic}
-      description={contentValues.about.description}
+  //     description={contentValues.about.description}
-    />
+  //   />
-  },
+  // },
-  {
-    name: contentValues.contact.name,
-    url: '#contact',
-    content: <Content
-      title='Contact'
-      heroImgSrc=''
-      description={contentValues.contact.description}
-      innerChildren={
-        <ContactForm/>
-      }
-    />
-  }
 ];
 
 export default navigationContent;

pages/index.tsx

@@ -1,13 +1,20 @@
-import React, {useState} from 'react'
+import React, {useRef, useState} from 'react'
 import Image from 'next/image'
 import backgroundPic from '../public/unspash_image.jpg'
 import { Inter } from 'next/font/google'
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGem } from "@fortawesome/free-solid-svg-icons";
+import { faChevronCircleUp } from "@fortawesome/free-solid-svg-icons";
 import navigationContent from '../lib/navigationContent'
+import ContactForm from '@/components/form/ContactForm';
+import Footer from '@/components/footer';
+import Link from 'next/link';
 const inter = Inter({ subsets: ['latin'] })
 
 export default function Home() {
+  const contactFormSectionRef = useRef<Element>(null);
+  const landingSectionRef = useRef<Element>(null);
+  const [contactClicked, setContactClicked] = useState(false);
+
   const customStyles = {
     overlay: {
        backgroundColor: 'rgba(0, 0, 0, 0.6)'
@@ -32,10 +39,11 @@ export default function Home() {
   });
 
   const renderNav = (navData: Array<{name: string, url: string, content: (string | React.JSX.Element | null)}>) => {
+    
     return navData.map((data, idx) => (
       <span 
         onClick={() => {
-          setShowModal(true)
+          setShowModal(true);
           setModalData(data);
         }}
         key={idx}
@@ -43,52 +51,87 @@ export default function Home() {
       >
         <a href={data.url}>{data.name}</a>
       </span>
-    ));
+    )).concat([
+      <span 
+          onClick={async () => {
+            setContactClicked(true);
+            setTimeout(() => {
+              executeScrollToContact();
+            }, 10);
+          }}
+          key={navData.length}
+          className='p-4 border-white text-white border-2 hover:cursor-pointer hover:bg-white hover:bg-opacity-10'
+        >
+          <span>CONTACT</span>
+        </span>
+    ]);
   };
 
+  const executeScrollToContact = () => contactFormSectionRef.current?.scrollIntoView({behavior: 'smooth'});
+  const executeScrollToLandiing = () => landingSectionRef.current?.scrollIntoView({behavior: 'smooth'});
+
   return (
     <div className='relative h-full w-full flex-row justify-center'>
-      {!showModal && <div className='tablet:w-full flex flex-row justify-center h-full bg-cover bg-black bg-opacity-30'>
+      <div id="landing-section" ref={landingSectionRef} className='h-full w-full'>
-        {/* <Image src={backgroundPic} alt="record background"/> */}
+        {!showModal && <div className='tablet:w-full flex flex-row justify-center h-full bg-cover bg-black bg-opacity-30'>
-        <div className='w-1/2 flex flex-col justify-center text-center'>
+          {/* <Image src={backgroundPic} alt="record background"/> */}
-          {/* <FontAwesomeIcon width={25} height={50} icon={faGem} className="fas fa-gem" style={{ color: "red" }} /> */}
+          <div className='w-1/2 flex flex-col justify-center text-center'>
-          <div className="py-20 flex flex-col text-white border-white border-y-2 border-solid">
+            <div className="py-20 flex flex-col text-white border-white border-y-2 border-solid">
-            <div className='text-2xl'><h2>Okechi Onyeje</h2></div>
+              <div className='text-2xl'><h2>Okechi Onyeje</h2></div>
-            <div className='flex flex-row justify-center space-x-2'>
+              <div className='flex flex-row justify-center space-x-2'>
-              <span>Software Professional</span>
+                <span>Software Professional</span>
-              <span>|</span>
+                <span>|</span>
-              <span>
+                <span>
-                Application Artisan
+                  Application Artisan
-              </span>
+                </span>
-              <span>|</span>
+                <span>|</span>
-              <span>
+                <span>
-                Creative & Technology Evangilist
+                  Creative & Technology Evangilist
-              </span>
+                </span>
-            </div>
-          </div>
-          <div className='flex flex-row justify-center'>
-            <div className='flex flex-col'>
-              <div className='flex flex-row'>
-                {renderNav(navigationContent)}
               </div>
             </div>
-          </div>
-        </div>
-      </div>}
-      {showModal && (
-        <div className='justify-center flex flex-row bg-black bg-opacity-40'>
-          <div className="h-full w-full laptop:px-24 absolute z-10 p-10 overflow-y-auto">
             <div className='flex flex-row justify-center'>
-              <div className=" h-max w-3/4 z-20 bg-black bg-opacity-90 text-white rounded overflow-clip">
+              <div className='flex flex-col'>
-                <div className="w-full flex flex-row justify-end p-4">
+                <div className='flex flex-row'>
-                  <span className="cursor-pointer" onClick={() => setShowModal(false)}>X</span>
+                  {renderNav(navigationContent)}
                 </div>
-                {modalData.content}
               </div>
             </div>
           </div>
+        </div>}
+        {showModal && (
+          <div className='justify-center flex flex-row bg-black bg-opacity-40'>
+            <div className="h-full w-full laptop:px-24 absolute z-10 p-10 overflow-y-auto">
+              <div className='flex flex-row justify-center'>
+                <div className=" h-max w-3/4 z-20 bg-black bg-opacity-90 text-white rounded overflow-clip">
+                  <div className="w-full flex flex-row justify-end p-4">
+                    <span className="cursor-pointer" onClick={() => setShowModal(false)}>X</span>
+                  </div>
+                  {modalData.content}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+      {contactClicked && <div id='contact-form-section' ref={contactFormSectionRef} className='h-screen bg-black'>
+        <div className='h-full'>
+          <div className='flex flex-row h-full w-full justify-center'>
+            <div className='flex flex-col h-full w-full justify-center'>
+              <ContactForm/>
+            </div>
+            <span className="cursor-pointer" onClick={() => {
+              executeScrollToLandiing();
+              setTimeout(() => {
+                setContactClicked(false);
+              }, 10);
+            }}>
+                <FontAwesomeIcon width={25} height={50} icon={faChevronCircleUp} className="fas fa-chevron-circle-up" style={{ color: "white" }} />
+            </span>
+          </div>
         </div>
-      )}
+
+      </div>}
     </div>
   )
 }

yarn.lock

@@ -2074,6 +2074,11 @@ node-releases@^2.0.13:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
   integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==
 
+nodemailer@^6.9.7:
+  version "6.9.7"
+  resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-6.9.7.tgz#ec2f488f62ba1558e7b19239b62778df4a5c4397"
+  integrity sha512-rUtR77ksqex/eZRLmQ21LKVH5nAAsVicAtAYudK7JgwenEDZ0UIQ1adUGqErz7sMkWYxWTTU1aeP2Jga6WQyJw==
+
 nopt@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"