- transitions working (slightly) when navigating to contact form and vice-verse
This commit is contained in:
parent
6965be57e2
commit
294ddf90da
@ -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>
|
||||
|
||||
@ -17,8 +17,8 @@ const ContactForm = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<form className="flex justify-center" onSubmit={handleSubmit(handleFormSubmission, handleFormError)}>
|
||||
<div className="w-full">
|
||||
<form className="flex flex-row justify-center w-full" onSubmit={handleSubmit(handleFormSubmission, handleFormError)}>
|
||||
<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" />
|
||||
|
||||
@ -35,27 +35,15 @@ const navigationContent = [
|
||||
}
|
||||
/>
|
||||
},
|
||||
{
|
||||
name: contentValues.about.name,
|
||||
url: '#about',
|
||||
content: <Content
|
||||
title='About'
|
||||
heroImgSrc={backgroundPic}
|
||||
description={contentValues.about.description}
|
||||
/>
|
||||
},
|
||||
{
|
||||
name: contentValues.contact.name,
|
||||
url: '#contact',
|
||||
content: <Content
|
||||
title='Contact'
|
||||
heroImgSrc=''
|
||||
description={contentValues.contact.description}
|
||||
innerChildren={
|
||||
<ContactForm/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
// {
|
||||
// name: contentValues.about.name,
|
||||
// url: '#about',
|
||||
// content: <Content
|
||||
// title='About'
|
||||
// heroImgSrc={backgroundPic}
|
||||
// description={contentValues.about.description}
|
||||
// />
|
||||
// },
|
||||
];
|
||||
|
||||
export default navigationContent;
|
||||
@ -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,15 +51,31 @@ 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'>
|
||||
<div id="landing-section" ref={landingSectionRef} className='h-full w-full'>
|
||||
{!showModal && <div className='tablet:w-full flex flex-row justify-center h-full bg-cover bg-black bg-opacity-30'>
|
||||
{/* <Image src={backgroundPic} alt="record background"/> */}
|
||||
<div className='w-1/2 flex flex-col justify-center text-center'>
|
||||
{/* <FontAwesomeIcon width={25} height={50} icon={faGem} className="fas fa-gem" style={{ color: "red" }} /> */}
|
||||
<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='flex flex-row justify-center space-x-2'>
|
||||
@ -90,5 +114,24 @@ export default function Home() {
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user