From 6d73cc52d57cd41030bfb7e71e1cdb2ffaaf52c0 Mon Sep 17 00:00:00 2001 From: Alvalen Date: Sat, 2 Sep 2023 21:23:37 +0700 Subject: [PATCH] [feat] animate about --- app/(root)/page.js | 19 +-- app/about/page.js | 261 +++++++++++++++++++++++++++++++++++------- app/globals.css | 5 + components/Navbar.js | 8 +- components/Sidebar.js | 12 +- public/img/me1.jpg | Bin 0 -> 2152502 bytes public/img/me2.jpg | Bin 0 -> 2828776 bytes public/img/me3.jpg | Bin 0 -> 709314 bytes 8 files changed, 248 insertions(+), 57 deletions(-) create mode 100644 public/img/me1.jpg create mode 100644 public/img/me2.jpg create mode 100644 public/img/me3.jpg diff --git a/app/(root)/page.js b/app/(root)/page.js index 30b5bad..138c571 100644 --- a/app/(root)/page.js +++ b/app/(root)/page.js @@ -17,9 +17,11 @@ import { faEnvelope } from "@fortawesome/free-solid-svg-icons"; const MyPage = () => { const fullpageOptions = { - lockAnchors: true, + // only define last anchor as contact + anchors: ["home", "about", "projects", "contact"], scrollingSpeed: 1000, licenseKey: "gplv3-license", + menu: "#sidebar", }; return ( @@ -46,7 +48,7 @@ const MyPage = () => {

Alvalen Shafel

-

+

Full Stack Developer

@@ -90,7 +92,7 @@ const MyPage = () => { className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw]">

-

+

About Me

@@ -102,9 +104,10 @@ const MyPage = () => { interest.

- + +
@@ -114,7 +117,7 @@ const MyPage = () => {
-

+

My Projects

@@ -137,7 +140,7 @@ const MyPage = () => {
-

+

Get In Touch

diff --git a/app/about/page.js b/app/about/page.js index 503c0d3..15b3a86 100644 --- a/app/about/page.js +++ b/app/about/page.js @@ -1,9 +1,15 @@ "use client"; -import { useEffect } from "react"; import Link from "next/link"; import { motion } from "framer-motion"; import Button from "@/components/Button"; import Image from "next/image"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faArrowRight } from "@fortawesome/free-solid-svg-icons"; + +// images +import Me1 from "@/public/img/me1.jpg"; +import Me2 from "@/public/img/me2.jpg"; +import Me3 from "@/public/img/me3.jpg"; export default function Page() { // useEffect(() => { // window.scrollTo(0, 0); @@ -17,7 +23,7 @@ export default function Page() {
@@ -56,37 +62,91 @@ export default function Page() {
-
- + + className="w-full h-full"> + Alvalens +
-
- +
+ + Alvalens +
-
- +
+ + Alvalens +
-
+

Alvalen Shafelbilyunazra

@@ -101,7 +161,7 @@ export default function Page() { tenetur ut accusantium officiis itaque qui eum quas harum? Nemo, ducimus quisquam.

-
+
{/*
@@ -111,7 +171,21 @@ export default function Page() {
*/}
-
+

Language & Framework

@@ -167,8 +241,22 @@ export default function Page() { Python

-
-
+ +

Tools

@@ -201,19 +289,75 @@ export default function Page() { {" "} |{" "}

-
+
-
-
-

+ + + Education & Experience -

+
-
+

Education | Universitas Negeri Malang

@@ -228,8 +372,22 @@ export default function Page() { reiciendis corrupti quibusdam architecto, labore cupiditate non autem aliquid?

-
-
+ +

Experience | Freelance Web Developer

@@ -244,8 +402,31 @@ export default function Page() { reiciendis corrupti quibusdam architecto, labore cupiditate non autem aliquid?

-
+
+ +
+ + + Get In Touch + + +
+ ); diff --git a/app/globals.css b/app/globals.css index 24343ce..963b6f7 100644 --- a/app/globals.css +++ b/app/globals.css @@ -24,6 +24,7 @@ html { body { font-family: 'Poppins', sans-serif !important; + color: black; } h1, h2, h3, h4, h5, h6 { @@ -56,4 +57,8 @@ h2, h3, h4, h5, h6 { span { font-family: "Jost", sans-serif; +} + +.active { + color: rgb(255, 235, 87); } \ No newline at end of file diff --git a/components/Navbar.js b/components/Navbar.js index 812daac..60026a3 100644 --- a/components/Navbar.js +++ b/components/Navbar.js @@ -6,11 +6,11 @@ const NavItems = ({ isNavOpen }) => { const [isMobile, setIsMobile] = useState(false); const navVariant = { open: (height = 1000) => ({ - clipPath: `circle(${height * 2 + 200}px at calc(100% - 40px) 40px)`, + clipPath: `circle(${height + 400}px at calc(100% - 40px) 40px)`, transition: { type: "spring", - stiffness: 20, - restDelta: 2, + stiffness: 400, + damping: 30, }, }), closed: { @@ -19,7 +19,7 @@ const [isMobile, setIsMobile] = useState(false); delay: 0.5, type: "spring", stiffness: 400, - damping: 40, + damping: 30, }, }, }; diff --git a/components/Sidebar.js b/components/Sidebar.js index 3dad3e6..0a90575 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -22,18 +22,20 @@ const Sidebar = () => { }; return (
-