v.korobtsev/vkorobtsev-nextJs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[feat] animate home

Browse source
This commit is contained in:
Alvalen 2023-09-03 11:21:56 +07:00
parent 0be22beae3
commit f0fcfe6124
5 changed files with 293 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

286
app/(root)/page.js
View file

@ -2,11 +2,12 @@
import ReactFullpage from "@fullpage/react-fullpage"; import ReactFullpage from "@fullpage/react-fullpage";
import Image from "next/image"; import Image from "next/image";
import "../globals.css"; import "../globals.css";
import {motion} from "framer-motion"; import { motion } from "framer-motion";
import Link from "next/link"; import Link from "next/link";
// components // components
import Button from "@/components/Button"; import Button from "@/components/Button";
import Me from "../../public/img/me.jpg"; import Me from "../../public/img/me.jpg";
import Hr from "@/components/Hr";
// icons // icons
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons"; import { faGithub } from "@fortawesome/free-brands-svg-icons";
@ -31,8 +32,14 @@ const MyPage = () => {
render={({ state, fullpageApi }) => ( render={({ state, fullpageApi }) => (
<ReactFullpage.Wrapper> <ReactFullpage.Wrapper>
<div className="section"> <div className="section">
<div className="mx-auto container grid grid-cols-1 md:grid-cols-3 gap-4 p-10"> <div className="mx-auto container grid grid-cols-1 md:grid-cols-3 gap-4 p-10 overflow-hidden">
<div className="col-span-2 flex flex-col justify-center items-center md:items-start text-center md:text-start"> <motion.div
className="col-span-2 flex flex-col justify-center items-center md:items-start text-center md:text-start"
initial={{ x: -100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
type: "spring",
}}>
<div className="block md:hidden col-span-1 mx-auto my-10"> <div className="block md:hidden col-span-1 mx-auto my-10">
<div className="bg-slate-500 rounded-full h-60 w-60"> <div className="bg-slate-500 rounded-full h-60 w-60">
<Image <Image
@ -45,30 +52,65 @@ const MyPage = () => {
/> />
</div> </div>
</div> </div>
<h3 className="uppercase text-xl mb-3 font-normal text tracking-[.5rem] text-gray-500"> <motion.h3
className="uppercase text-xl mb-3 font-normal text tracking-[.5rem] text-gray-500"
initial={{ x: -100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.2,
type: "spring",
}}>
Alvalen Shafel Alvalen Shafel
</h3> </motion.h3>
<h1 className="text-black text-5xl md:text-8xl font-bold my-2 md:my-5"> <motion.h1
className="text-black text-5xl md:text-8xl font-bold my-2 md:my-5"
initial={{ x: -100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.3,
type: "spring",
}}>
Full Stack Developer Full Stack Developer
</h1> </motion.h1>
<p className="title text-md md:text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem]"> <motion.p
className="title text-md md:text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem]"
initial={{ x: -100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.4,
type: "spring",
}}>
A junior fullstack developer who A junior fullstack developer who
currently focused on Web Development. currently focused on Web Development.
Other than that, I also interested in Other than that, I also interested in
UX/UI Design, Mobile and AI Development. UX/UI Design, Mobile and AI Development.
I love to learn new things and always I love to learn new things and always
open to new opportunities. open to new opportunities.
</p> </motion.p>
<div className="buttons flex flex-row justify-center items-center space-x-4 mt-10"> <motion.div
className="buttons flex flex-row justify-center items-center space-x-4 mt-10"
initial={{ x: -100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.5,
type: "spring",
}}>
<Button variation="primary"> <Button variation="primary">
Download CV Download CV
</Button> </Button>
<Button variation="secondary"> <Button variation="secondary">
Contact Me Contact Me
</Button> </Button>
</div> </motion.div>
</div> </motion.div>
<div className="hidden md:flex col-span-1 mx-auto justify-center items-center "> <motion.div
className="hidden md:flex col-span-1 mx-auto justify-center items-center "
initial={{ x: 100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.7,
type: "spring",
}}>
<div className=" rounded-full h-auto w-auto aspect-square md:px-12"> <div className=" rounded-full h-auto w-auto aspect-square md:px-12">
<Image <Image
src="/img/me.jpg" src="/img/me.jpg"
@ -79,60 +121,124 @@ const MyPage = () => {
alt="Alvalens" alt="Alvalens"
/> />
</div> </div>
</div> </motion.div>
</div> </div>
</div> </div>
<div className="section"> <div className="section">
<div className="relative md:h-screen w-screen gap-4 flex justify-center items-center flex-col"> <div className="relative md:h-screen w-screen gap-4 flex justify-center items-center flex-col overflow-hidden">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 "> <div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.5 }} initial={{
animate={{ opacity: 1, scale: 1 }} x: 300,
transition={{ duration: 1 }} opacity: 0,
z: -100,
}}
whileInView={{
x: 0,
opacity: 1,
z: 0,
}}
transition={{
delay: 0.5,
type: "spring",
}}
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div> className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div>
</div> </div>
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10"> <div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 py-5">
<h1 className="text-black text-5xl md:text-8xl font-bold"> <motion.h1
className="text-black text-5xl md:text-8xl font-bold"
initial={{ x: -100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.1,
type: "spring",
}}>
About Me About Me
</h1> </motion.h1>
<div className="flex justify-center items-center flex-col my-5 "> <Hr />
<div className="bg-gray-700 w-20 h-1 rounded-full mb-2"></div> <motion.p
<div className="bg-gray-700 w-20 h-1 rounded-full translate-x-14"></div> className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5"
</div> initial={{ x: -100, opacity: 0 }}
<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5"> whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.2,
type: "spring",
}}>
A brief introduction about me and my A brief introduction about me and my
interest. interest.
</p> </motion.p>
<Link href="/about"> <motion.div
initial={{ y: 50, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
transition={{
delay: 0.3,
type: "spring",
}}>
<Button variation="primary"> <Button variation="primary">
<Link href="/about">
Learn More Learn More
</Button>
</Link> </Link>
</Button>
</motion.div>
</div> </div>
</div> </div>
</div> </div>
<div className="section"> <div className="section">
<div className="relative md:h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col"> <div className="relative md:h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col overflow-hidden">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 "> <div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div> <motion.div
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] "
initial={{
x: 300,
opacity: 0,
z: -100,
}}
whileInView={{
x: 0,
opacity: 1,
z: 0,
}}
transition={{
delay: 0.5,
type: "spring",
}}></motion.div>
</div> </div>
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10"> <div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10 overflow-hidden py-5">
<h1 className="text-black text-5xl md:text-8xl font-bold"> <motion.h1
className="text-black text-5xl md:text-8xl font-bold"
initial={{ x: -100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.1,
type: "spring",
}}>
My Projects My Projects
</h1> </motion.h1>
<div className="flex justify-center items-center flex-col my-5 "> <Hr />
<div className="bg-gray-700 w-20 h-1 rounded-full mb-2"></div> <motion.p
<div className="bg-gray-700 w-20 h-1 rounded-full translate-x-14"></div> className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5"
</div> initial={{ x: -100, opacity: 0 }}
<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5"> whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.2,
type: "spring",
}}>
This is some of my projects that I have This is some of my projects that I have
done and currently working on. done and currently working on.
</p> </motion.p>
<motion.div
initial={{ y: 50, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
transition={{
delay: 0.3,
type: "spring",
}}>
<Button variation="primary"> <Button variation="primary">
<Link href="/projects"> <Link href="/projects">
Learn More Learn More
</Link> </Link>
</Button> </Button>
</motion.div>
</div> </div>
</div> </div>
</div> </div>
@ -142,70 +248,118 @@ const MyPage = () => {
<div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div> <div className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></div>
</div> </div>
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10"> <div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
<h1 className="text-black text-5xl md:text-8xl font-bold"> <motion.h1
className="text-black text-5xl md:text-8xl font-bold"
initial={{ x: -100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.1,
type: "spring",
}}>
Get In Touch Get In Touch
</h1> </motion.h1>
<div className="flex justify-center items-center flex-col my-5 "> <Hr />
<div className="bg-gray-700 w-20 h-1 rounded-full mb-2"></div> <motion.p
<div className="bg-gray-700 w-20 h-1 rounded-full translate-x-14"></div> className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] md:mb-5"
</div> initial={{ x: -100, opacity: 0 }}
<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] md:mb-5"> whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.2,
type: "spring",
}}>
Feel free to contact me if you have any Feel free to contact me if you have any
questions or just want to say hi. questions or just want to say hi.
</p> </motion.p>
<p className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5"> <motion.p
className="title text-xl mt-4 tracking-wider text-gray-500 leading-[1.7rem] mb-5"
initial={{ x: -100, opacity: 0 }}
whileInView={{ x: 0, opacity: 1 }}
transition={{
delay: 0.3,
type: "spring",
}}>
alvalen.shafel04@gmail.com alvalen.shafel04@gmail.com
</p> </motion.p>
{/* icons */} {/* icons */}
<div className="flex justify-center items-center space-x-4"> <div className="flex justify-center items-center space-x-4">
<a <motion.a
href="#" href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"> className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
initial={{ y: 50, opacity: 0 }}
whileInView={{ y: 0, opacity: 1 }}
transition={{
y: { delay: 0.1 },
opacity: { delay: 0.2 },
}}>
<FontAwesomeIcon <FontAwesomeIcon
icon={faEnvelope} icon={faEnvelope}
className="text-3xl" className="text-3xl"
/> />
</a> </motion.a>
<a <motion.a
href="#" href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"> className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
y: { delay: 0.2 },
opacity: { delay: 0.3 },
}}>
<FontAwesomeIcon <FontAwesomeIcon
icon={faGithub} icon={faGithub}
className="text-3xl" className="text-3xl"
/> />
</a> </motion.a>
<a <motion.a
href="#" href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"> className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
y: { delay: 0.3 },
opacity: { delay: 0.4 },
}}>
<FontAwesomeIcon <FontAwesomeIcon
icon={faInstagram} icon={faInstagram}
className="text-3xl" className="text-3xl"
/> />
</a> </motion.a>
<a <motion.a
href="#" href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"> className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
y: { delay: 0.4 },
opacity: { delay: 0.5 },
}}>
<FontAwesomeIcon <FontAwesomeIcon
icon={faLinkedin} icon={faLinkedin}
className="text-3xl" className="text-3xl"
/> />
</a> </motion.a>
<a <motion.a
href="#" href="#"
className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"> className="flex justify-center items-center bg-gray-500 w-14 h-14 rounded-full text-gray-100 hover:bg-gray-400 transition-all ease-in-out duration-300"
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
y: { delay: 0.5 },
opacity: { delay: 0.6 },
}}>
<FontAwesomeIcon <FontAwesomeIcon
icon={faDiscord} icon={faDiscord}
className="text-3xl" className="text-3xl"
/> />
</a> </motion.a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</ReactFullpage.Wrapper> </ReactFullpage.Wrapper>
)} )}
{...fullpageOptions} // Pass fullpage options to the component {...fullpageOptions}
/> />
</div> </div>
); );

27
app/about/page.js
View file

@ -23,7 +23,7 @@ export default function Page() {
<motion.div <motion.div
initial={{ opacity: 1, scale: 1 }} initial={{ opacity: 1, scale: 1 }}
animate={{ opacity: 1, scale: 1.6 }} animate={{ opacity: 1, scale: 1.6 }}
transition={{ duration: 1, ease: "easeInOut" }} transition={{ ease: "easeInOut" }}
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div> className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div>
</div> </div>
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10"> <div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
@ -70,7 +70,6 @@ export default function Page() {
scale: 1, scale: 1,
x: 0, x: 0,
}} }}
transition={{ duration: 1 }}
className="w-full h-full"> className="w-full h-full">
<Image <Image
src={Me1} src={Me1}
@ -93,7 +92,7 @@ export default function Page() {
scale: 1, scale: 1,
x: 0, x: 0,
}} }}
transition={{ delay: 0.3, duration: 1 }} transition={{ delay: 0.3}}
className="w-full h-full"> className="w-full h-full">
<Image <Image
src={Me2} src={Me2}
@ -118,7 +117,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.5, delay: 0.5,
duration: 1,
}} }}
className="w-full h-full"> className="w-full h-full">
<Image <Image
@ -144,7 +143,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.5, delay: 0.5,
duration: 1,
type: "spring", type: "spring",
}}> }}>
<h2 className="text-2xl font-bold tracking-wider mb-3"> <h2 className="text-2xl font-bold tracking-wider mb-3">
@ -207,7 +206,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.5, delay: 0.5,
duration: 1,
type: "spring", type: "spring",
}}> }}>
<h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.5rem] uppercase "> <h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.5rem] uppercase ">
@ -279,7 +278,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.6, delay: 0.6,
duration: 1,
type: "spring", type: "spring",
}}> }}>
<h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.5rem] uppercase"> <h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.5rem] uppercase">
@ -322,7 +321,7 @@ export default function Page() {
className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start" className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"
initial={{ initial={{
opacity: 0, opacity: 0,
x: -200, x: -100,
}} }}
whileInView={{ whileInView={{
opacity: 1, opacity: 1,
@ -330,7 +329,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.5, delay: 0.5,
duration: 1,
type: "spring", type: "spring",
}}></motion.div> }}></motion.div>
<motion.div <motion.div
@ -345,7 +344,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.5, delay: 0.5,
duration: 1,
type: "spring", type: "spring",
}}></motion.div> }}></motion.div>
<motion.h1 <motion.h1
@ -360,7 +359,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.7, delay: 0.7,
duration: 1,
type: "spring", type: "spring",
}}> }}>
Education &amp; Experience Education &amp; Experience
@ -380,7 +379,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.5, delay: 0.5,
duration: 1,
type: "spring", type: "spring",
}}> }}>
<h2 className="text-2xl font-bold mb-3"> <h2 className="text-2xl font-bold mb-3">
@ -415,7 +414,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.5, delay: 0.5,
duration: 1,
type: "spring", type: "spring",
}}> }}>
<h2 className="text-2xl font-bold mb-3"> <h2 className="text-2xl font-bold mb-3">
@ -453,7 +452,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.7, delay: 0.7,
duration: 1,
type: "spring", type: "spring",
}}> }}>
Get In Touch{" "} Get In Touch{" "}

12
app/globals.css
View file

@ -69,8 +69,9 @@ td, th {
} }
[title]:hover:after { a[title]:hover:after {
margin-left: 10px; margin-left: -100px;
margin-top: -50px;
position: absolute; position: absolute;
content: attr(title); content: attr(title);
padding: 0.5rem; padding: 0.5rem;
@ -80,11 +81,6 @@ td, th {
color: #fff; color: #fff;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
font-size: 14px; font-size: 0.8rem;
}
[title]:hover:after {
opacity: 1;
transform: translateY(0);
} }

17
app/projects/page.js
View file

@ -8,6 +8,11 @@ import Image from "next/image";
import Me1 from "@/public/img/me1.jpg"; import Me1 from "@/public/img/me1.jpg";
import Me2 from "@/public/img/me2.jpg"; import Me2 from "@/public/img/me2.jpg";
import Me3 from "@/public/img/me3.jpg"; import Me3 from "@/public/img/me3.jpg";
const projects = () => {
[{ title: "React Chat WebApp"}]
};
export default function Page() { export default function Page() {
// useEffect(() => { // useEffect(() => {
// window.scrollTo(0, 0); // window.scrollTo(0, 0);
@ -21,7 +26,7 @@ export default function Page() {
<motion.div <motion.div
initial={{ opacity: 1, scale: 1 }} initial={{ opacity: 1, scale: 1 }}
animate={{ opacity: 1, scale: 1.6 }} animate={{ opacity: 1, scale: 1.6 }}
transition={{ duration: 1, ease: "easeInOut" }} transition={{ ease: "easeInOut" }}
className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div> className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]"></motion.div>
</div> </div>
<div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10"> <div className="z-10 w-full absolute md:w-auto md:left-[10%] top-[60%] md:top-1/3 col-span-2 flex flex-col justify-center items-start md:items-start text-start px-10">
@ -117,7 +122,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.5, delay: 0.5,
duration: 1,
}} }}
className="w-full h-full"> className="w-full h-full">
<Image <Image
@ -143,7 +148,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.5, delay: 0.5,
duration: 1,
type: "spring", type: "spring",
}}> }}>
<h2 className="text-2xl font-bold tracking-wider mb-3"> <h2 className="text-2xl font-bold tracking-wider mb-3">
@ -179,7 +184,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.5, delay: 0.5,
duration: 1,
type: "spring", type: "spring",
}}></motion.div> }}></motion.div>
<motion.div <motion.div
@ -194,7 +199,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.5, delay: 0.5,
duration: 1,
type: "spring", type: "spring",
}}></motion.div> }}></motion.div>
<motion.h1 <motion.h1
@ -209,7 +214,7 @@ export default function Page() {
}} }}
transition={{ transition={{
delay: 0.7, delay: 0.7,
duration: 1,
type: "spring", type: "spring",
}}> }}>
Other Note Worthy Projects Other Note Worthy Projects

38
components/Hr.jsx Normal file
View file

@ -0,0 +1,38 @@
import { motion } from "framer-motion";
export default function Hr() {
return (
<div className="flex justify-center items-center flex-col my-5 ">
<motion.div
className="bg-gray-700 w-20 h-1 rounded-full mb-2"
initial={{
opacity: 0,
x: -100,
}}
whileInView={{
opacity: 1,
x: 0,
}}
transition={{
delay: 0.2,
type: "spring",
}}></motion.div>
<motion.div
className="bg-gray-700 w-20 h-1 rounded-full "
initial={{
opacity: 0,
x: 150,
}}
whileInView={{
opacity: 1,
x: 40,
}}
transition={{
delay: 0.3,
type: "spring",
}}></motion.div>
</div>
);
}