From f4cda2fe5defda31a47bdc78f5dd490588f9d6a0 Mon Sep 17 00:00:00 2001 From: Alvalen Date: Sat, 2 Sep 2023 11:12:47 +0700 Subject: [PATCH] [feat] about page layout finished --- app/(root)/layout.js | 19 +++ app/(root)/loading.js | 7 ++ app/{ => (root)}/page.js | 37 +++--- app/about/page.js | 256 ++++++++++++++++++++++++++++++++++++++- app/globals.css | 9 ++ app/layout.js | 1 - components/Navbar.js | 220 +++++++++++++++++++++++++-------- components/Sidebar.js | 21 ++-- package.json | 1 + pnpm-lock.yaml | 35 ++++++ public/next.svg | 1 - public/vercel.svg | 1 - 12 files changed, 521 insertions(+), 87 deletions(-) create mode 100644 app/(root)/layout.js create mode 100644 app/(root)/loading.js rename app/{ => (root)}/page.js (88%) delete mode 100644 public/next.svg delete mode 100644 public/vercel.svg diff --git a/app/(root)/layout.js b/app/(root)/layout.js new file mode 100644 index 0000000..ec2d245 --- /dev/null +++ b/app/(root)/layout.js @@ -0,0 +1,19 @@ +import "../globals.css"; +import Sidebar from "@/components/Sidebar"; +import { config } from "@fortawesome/fontawesome-svg-core"; +import "@fortawesome/fontawesome-svg-core/styles.css"; +config.autoAddCss = false; + +export const metadata = { + title: "Create Next App", + description: "Generated by create next app", +}; + +export default function RootLayout({ children }) { + return ( + <> + + {children} + + ); +} diff --git a/app/(root)/loading.js b/app/(root)/loading.js new file mode 100644 index 0000000..80435f8 --- /dev/null +++ b/app/(root)/loading.js @@ -0,0 +1,7 @@ +export default function Loading() { + return ( +
+

Loading...

+
+ ) +} \ No newline at end of file diff --git a/app/page.js b/app/(root)/page.js similarity index 88% rename from app/page.js rename to app/(root)/page.js index e591eb4..30b5bad 100644 --- a/app/page.js +++ b/app/(root)/page.js @@ -1,10 +1,12 @@ "use client"; -import React from "react"; import ReactFullpage from "@fullpage/react-fullpage"; import Image from "next/image"; -import "./globals.css"; +import "../globals.css"; +import {motion} from "framer-motion"; +import Link from "next/link"; // components import Button from "@/components/Button"; +import Me from "../../public/img/me.jpg"; // icons import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faGithub } from "@fortawesome/free-brands-svg-icons"; @@ -32,12 +34,12 @@ const MyPage = () => {
Alvalens
@@ -79,9 +81,13 @@ const MyPage = () => {
-
+
-
+

@@ -95,14 +101,15 @@ const MyPage = () => { A brief introduction about me and my interest.

+ +

-
+
@@ -125,7 +132,7 @@ const MyPage = () => {
-
+
@@ -137,7 +144,7 @@ const MyPage = () => {
-

+

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

@@ -151,7 +158,7 @@ const MyPage = () => { 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"> @@ -160,7 +167,7 @@ const MyPage = () => { 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"> { 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">
diff --git a/app/about/page.js b/app/about/page.js index e0f9180..503c0d3 100644 --- a/app/about/page.js +++ b/app/about/page.js @@ -1,8 +1,252 @@ - +"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"; export default function Page() { - return <> -
- -
- + // useEffect(() => { + // window.scrollTo(0, 0); + // }, []); + + return ( + <> +
+
+
+ +
+
+

+ About Me +

+
+
+
+
+

+ A brief introduction about me and my interest. +

+ { + window.scrollTo({ + top: 1000, + behavior: "smooth", + }); + }} + className=""> + + +
+
+
+
+
+
+

Who Am I?

+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+

+ Alvalen Shafelbilyunazra +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing + elit. Laborum, laudantium ad vel suscipit optio + nesciunt accusantium nulla! Similique sapiente, + tempora id laudantium eveniet adipisci perferendis + ad numquam sit hic fugiat? Lorem ipsum dolor sit + amet consectetur adipisicing elit. Iste assumenda + provident deserunt quos id, minus tempora atque eos + tenetur ut accusantium officiis itaque qui eum quas + harum? Nemo, ducimus quisquam. +

+
+
+ {/*
+
+
+
+

Tech Stack

+
+
*/} +
+
+

+ Language & Framework +

+

+ HTML |{" "} + CSS |{" "} + + Javascript + {" "} + |{" "} + + Typescript + {" "} + |{" "} + React{" "} + |{" "} + + NextJS + {" "} + |{" "} + + TailwindCSS + {" "} + |{" "} + + Bootstrap + {" "} + |{" "} + + NodeJS + {" "} + |{" "} + + ExpressJS + {" "} + |{" "} + + MongoDB + {" "} + |{" "} + MySQL{" "} + |{" "} + + Firebase + {" "} + |PHP{" "} + |{" "} + + Laravel + {" "} + |{" "} + + Python + +

+
+
+

+ Tools +

+

+ + Visual Studio Code + {" "} + |{" "} + + Jet Brains + {" "} + | Git{" "} + |{" "} + Github{" "} + |{" "} + + Figma + {" "} + |{" "} + + Adobe Photoshop + {" "} + |{" "} + + Adobe Premiere Pro + {" "} + |{" "} + + Adobe After Effect + {" "} + |{" "} +

+
+
+
+
+
+
+

+ Education & Experience +

+
+
+
+
+

+ Education | Universitas Negeri Malang +

+

+ Teknik Informatika | 2022 - Now +

+

+ + Lorem ipsum dolor sit amet consectetur adipisicing + elit. Vero voluptatibus tenetur dolor laudantium et + ipsum temporibus atque illo suscipit, quam iusto + reiciendis corrupti quibusdam architecto, labore + cupiditate non autem aliquid? +

+
+
+

+ Experience | Freelance Web Developer +

+

+ Fullstack Web Developer | 2023 - Now +

+

+ + Lorem ipsum dolor sit amet consectetur adipisicing + elit. Vero voluptatibus tenetur dolor laudantium et + ipsum temporibus atque illo suscipit, quam iusto + reiciendis corrupti quibusdam architecto, labore + cupiditate non autem aliquid? +

+
+
+
+ + ); } diff --git a/app/globals.css b/app/globals.css index 1a62bb6..24343ce 100644 --- a/app/globals.css +++ b/app/globals.css @@ -47,4 +47,13 @@ h1, h2, h3, h4, h5, h6 { .fp-watermark { display: none !important; +} + + +h2, h3, h4, h5, h6 { + @apply text-gray-600; +} + +span { + font-family: "Jost", sans-serif; } \ No newline at end of file diff --git a/app/layout.js b/app/layout.js index bbaa6ad..7d9f371 100644 --- a/app/layout.js +++ b/app/layout.js @@ -16,7 +16,6 @@ export default function RootLayout({ children }) { - {children} diff --git a/components/Navbar.js b/components/Navbar.js index 556e63e..812daac 100644 --- a/components/Navbar.js +++ b/components/Navbar.js @@ -1,5 +1,156 @@ "use client"; -import { useRef, useState } from "react"; +import { useRef, useState, useEffect } from "react"; +import { motion } from "framer-motion"; + +const NavItems = ({ isNavOpen }) => { +const [isMobile, setIsMobile] = useState(false); + const navVariant = { + open: (height = 1000) => ({ + clipPath: `circle(${height * 2 + 200}px at calc(100% - 40px) 40px)`, + transition: { + type: "spring", + stiffness: 20, + restDelta: 2, + }, + }), + closed: { + clipPath: "circle(0px at calc(100% - 120px) 35px)", + transition: { + delay: 0.5, + type: "spring", + stiffness: 400, + damping: 40, + }, + }, + }; +useEffect(() => { + const updateScreenWidth = () => { + setIsMobile(window.innerWidth <= 768); + }; + + // Initial check and event listener + updateScreenWidth(); + window.addEventListener("resize", updateScreenWidth); + + // Clean up the event listener on unmount + return () => { + window.removeEventListener("resize", updateScreenWidth); + }; +}, []); + +// Check screen width and adjust clipPath for smaller screens +if (isMobile) { + navVariant.closed = { + clipPath: "circle(0px at calc(100% - 35px) 35px)", // Adjusted value for mobile screens + transition: { + delay: 0.5, + type: "spring", + stiffness: 400, + damping: 40, + }, + }; +} else { + navVariant.closed = { + clipPath: "circle(0px at calc(100% - 120px) 35px)", + transition: { + delay: 0.5, + type: "spring", + stiffness: 400, + damping: 40, + }, + }; +} + const itemVariants = { + open: { + opacity: 1, + y: 0, + rotate: 0, + }, + closed: { + opacity: 0, + y: -40, + rotate: 0, + }, + }; + + + + + return ( + <> + +
+
+ {/* title */} + + Menu + + + + Home + + + + + About + + + + + Projects + + + + + Contact + + +
+
+ + + ); +}; const Navbar = () => { const navRef = useRef(null); @@ -20,67 +171,30 @@ const Navbar = () => { {/* toggler */}
+ className={`w-8 h-1 bg-black rounded-full transition-all ease-in duration-300 ${ + isNavOpen ? "opacity-0" : "" + }`}>
+ className={`w-8 h-1 bg-black rounded-full transition-all ease-in duration-300 ${ + isNavOpen + ? "-rotate-45 -translate-y-3 bg-white" + : "" + }`}>
{/* items */} - + ); }; export default Navbar; - -const NavItems = ({ isNavOpen, setIsNavOpen }) => { - const closeNav = () => { - setIsNavOpen(false); - }; - - return ( -
-
- {/* close buton */} -
- -
- -
-
- ); -}; diff --git a/components/Sidebar.js b/components/Sidebar.js index d5fdc0f..3dad3e6 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -6,21 +6,22 @@ import { faFolderOpen, faEnvelope, } from "@fortawesome/free-solid-svg-icons"; -const Sidebar = () => { + +const Sidebar = () => { const handleMoveToSection = (index) => { - fullpage_api.moveTo(index); - fullpage_api.getActiveSection(); + fullpage_api.moveTo(index); + fullpage_api.getActiveSection(); }; - const containIsActive = (index) => { - if (fullpage_api.getActiveSection().index === index) { - return "bg-gray-500"; - } - return ""; - }; + const containIsActive = (index) => { + if (fullpage_api.getActiveSection().index === index) { + return "bg-gray-500"; + } + return ""; + }; return ( -
+