From f0fcfe61245cef6c91492b47686398fe7bd0fba5 Mon Sep 17 00:00:00 2001 From: Alvalen Date: Sun, 3 Sep 2023 11:21:56 +0700 Subject: [PATCH] [feat] animate home --- app/(root)/page.js | 298 ++++++++++++++++++++++++++++++++----------- app/about/page.js | 27 ++-- app/globals.css | 14 +- app/projects/page.js | 17 ++- components/Hr.jsx | 38 ++++++ 5 files changed, 293 insertions(+), 101 deletions(-) create mode 100644 components/Hr.jsx diff --git a/app/(root)/page.js b/app/(root)/page.js index 199f9bd..2bccf85 100644 --- a/app/(root)/page.js +++ b/app/(root)/page.js @@ -2,11 +2,12 @@ import ReactFullpage from "@fullpage/react-fullpage"; import Image from "next/image"; import "../globals.css"; -import {motion} from "framer-motion"; +import { motion } from "framer-motion"; import Link from "next/link"; // components import Button from "@/components/Button"; import Me from "../../public/img/me.jpg"; +import Hr from "@/components/Hr"; // icons import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faGithub } from "@fortawesome/free-brands-svg-icons"; @@ -31,8 +32,14 @@ const MyPage = () => { render={({ state, fullpageApi }) => (
-
-
+
+
{ />
-

+ Alvalen Shafel -

-

+ + Full Stack Developer -

-

+ + A junior fullstack developer who currently focused on Web Development. Other than that, I also interested in UX/UI Design, Mobile and AI Development. I love to learn new things and always open to new opportunities. -

-
+ + -
-
-
+ + +
{ alt="Alvalens" />
-
+
-
+
-
-

+
+ About Me -

-
-
-
-
-

+ +

+ A brief introduction about me and my interest. -

- + + - +
-
+
-
+
-
-

+
+ My Projects -

-
-
-
-
-

+ +

+ This is some of my projects that I have done and currently working on. -

- + + + +
@@ -142,70 +248,118 @@ const MyPage = () => {
-

+ Get In Touch -

-
-
-
-
-

+ +

+ Feel free to contact me if you have any questions or just want to say hi. -

-

+ + alvalen.shafel04@gmail.com -

+ {/* icons */}
- + 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 }, + }}> - + - + 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 }, + }}> - - + + 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 }, + }}> - - + + 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 }, + }}> - - + + 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 }, + }}> - +
)} - {...fullpageOptions} // Pass fullpage options to the component + {...fullpageOptions} /> ); diff --git a/app/about/page.js b/app/about/page.js index eed49f8..d7349da 100644 --- a/app/about/page.js +++ b/app/about/page.js @@ -23,7 +23,7 @@ export default function Page() {
@@ -70,7 +70,6 @@ export default function Page() { scale: 1, x: 0, }} - transition={{ duration: 1 }} className="w-full h-full">

@@ -207,7 +206,7 @@ export default function Page() { }} transition={{ delay: 0.5, - duration: 1, + type: "spring", }}>

@@ -279,7 +278,7 @@ export default function Page() { }} transition={{ delay: 0.6, - duration: 1, + type: "spring", }}>

@@ -322,7 +321,7 @@ export default function Page() { className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start" initial={{ opacity: 0, - x: -200, + x: -100, }} whileInView={{ opacity: 1, @@ -330,7 +329,7 @@ export default function Page() { }} transition={{ delay: 0.5, - duration: 1, + type: "spring", }}> Education & Experience @@ -380,7 +379,7 @@ export default function Page() { }} transition={{ delay: 0.5, - duration: 1, + type: "spring", }}>

@@ -415,7 +414,7 @@ export default function Page() { }} transition={{ delay: 0.5, - duration: 1, + type: "spring", }}>

@@ -453,7 +452,7 @@ export default function Page() { }} transition={{ delay: 0.7, - duration: 1, + type: "spring", }}> Get In Touch{" "} diff --git a/app/globals.css b/app/globals.css index e814308..4738127 100644 --- a/app/globals.css +++ b/app/globals.css @@ -69,8 +69,9 @@ td, th { } -[title]:hover:after { - margin-left: 10px; +a[title]:hover:after { + margin-left: -100px; + margin-top: -50px; position: absolute; content: attr(title); padding: 0.5rem; @@ -80,11 +81,6 @@ td, th { color: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - font-size: 14px; -} - -[title]:hover:after { - opacity: 1; - transform: translateY(0); - + font-size: 0.8rem; + } \ No newline at end of file diff --git a/app/projects/page.js b/app/projects/page.js index 09ccd7c..044bcca 100644 --- a/app/projects/page.js +++ b/app/projects/page.js @@ -8,6 +8,11 @@ import Image from "next/image"; import Me1 from "@/public/img/me1.jpg"; import Me2 from "@/public/img/me2.jpg"; import Me3 from "@/public/img/me3.jpg"; + +const projects = () => { + [{ title: "React Chat WebApp"}] +}; + export default function Page() { // useEffect(() => { // window.scrollTo(0, 0); @@ -21,7 +26,7 @@ export default function Page() {

@@ -117,7 +122,7 @@ export default function Page() { }} transition={{ delay: 0.5, - duration: 1, + }} className="w-full h-full">

@@ -179,7 +184,7 @@ export default function Page() { }} transition={{ delay: 0.5, - duration: 1, + type: "spring", }}> Other Note Worthy Projects diff --git a/components/Hr.jsx b/components/Hr.jsx new file mode 100644 index 0000000..84ab90e --- /dev/null +++ b/components/Hr.jsx @@ -0,0 +1,38 @@ +import { motion } from "framer-motion"; + +export default function Hr() { + return ( +
+ + +
+ ); +}