From e89217aad8e227d7b7d6e12bb5bd97e4c8bce749 Mon Sep 17 00:00:00 2001 From: Alvalen Date: Wed, 15 Jan 2025 12:08:54 +0700 Subject: [PATCH] refactor: separating each section of pages in about --- app/about/components/about/about.jsx | 152 ++++++++ .../{ => about}/spotify/animation.jsx | 0 .../components/{ => about}/spotify/card.jsx | 0 .../components/{ => about}/spotify/fetch.js | 0 app/about/components/education.jsx | 344 +++++++++--------- app/about/components/experience.jsx | 67 +++- app/about/components/quote/quote.jsx | 126 ++++--- app/about/components/skills/skills.jsx | 219 ++++------- app/about/components/skills/stack.jsx | 20 +- app/about/components/skills/tools.jsx | 20 +- app/about/page.jsx | 334 ++--------------- app/projects/page.jsx | 5 +- components/Hr.jsx | 109 ++++-- 13 files changed, 672 insertions(+), 724 deletions(-) create mode 100644 app/about/components/about/about.jsx rename app/about/components/{ => about}/spotify/animation.jsx (100%) rename app/about/components/{ => about}/spotify/card.jsx (100%) rename app/about/components/{ => about}/spotify/fetch.js (100%) diff --git a/app/about/components/about/about.jsx b/app/about/components/about/about.jsx new file mode 100644 index 0000000..b83c315 --- /dev/null +++ b/app/about/components/about/about.jsx @@ -0,0 +1,152 @@ +import Image from "next/image"; +import Card from "./spotify/card"; +import { motion } from "framer-motion"; +import Me1 from "@/public/img/me1.jpg"; +import Me2 from "@/public/img/me2.jpg"; +import Me3 from "@/public/img/me3.jpg"; +import Hr from "@/components/Hr"; + +function Title() { + return ( +
+
+
+

Who Am I?

+
+
+ ); +} + +export default function About() { + return ( + <> + + <div className="relative mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10"> + <div className="flex justify-center items-start flex-col mb-5 "> + <div className="images relative w-full aspect-square"> + <div className="absolute top-28 left-10 w-[50%] aspect-square grayscale hover:grayscale-0 transition-all ease duration-300"> + <motion.div + initial={{ opacity: 0, scale: 0.5, x: 100 }} + whileInView={{ + opacity: 1, + scale: 1, + x: 0, + }} + className="w-full h-full"> + <Image + src={Me1} + alt="Alvalens" + layout="fill" + objectFit="cover" + placeholder="blur" + /> + </motion.div> + </div> + <div className="absolute top-16 right-28 w-[30%] aspect-square grayscale hover:grayscale-0 transition-all ease duration-300"> + <motion.div + initial={{ + opacity: 0, + scale: 0.5, + x: -100, + }} + whileInView={{ + opacity: 1, + scale: 1, + x: 0, + }} + transition={{ delay: 0.3 }} + className="w-full h-full"> + <Image + src={Me2} + alt="Alvalens" + layout="fill" + objectFit="cover" + placeholder="blur" + /> + </motion.div> + </div> + <div className="absolute bottom-16 right-20 w-[40%] aspect-square grayscale hover:grayscale-0 transition-all ease duration-300"> + <motion.div + initial={{ + opacity: 0, + scale: 0.5, + x: -100, + }} + whileInView={{ + opacity: 1, + scale: 1, + x: 0, + }} + transition={{ + delay: 0.5, + }} + className="w-full h-full"> + <Image + src={Me3} + alt="Alvalens" + layout="fill" + objectFit="cover" + placeholder="blur" + /> + </motion.div> + </div> + </div> + </div> + <motion.div + className="flex justify-center items-start flex-col mb-5 md:px-10" + initial={{ + opacity: 0, + x: 200, + }} + whileInView={{ + opacity: 1, + x: 0, + }} + transition={{ + delay: 0.5, + + type: "spring", + }}> + <h2 className="text-2xl font-bold tracking-wider mb-3"> + Alvalen Shafelbilyunazra + </h2> + <p className="text-gray-600 text-justify title text-lg"> + Hey there, I’m Alvalen Shafelbilyunazra, a + <span className="text-black font-medium"> + {" "} + tech enthusiast + </span>{" "} + and + <span className="text-black font-medium"> + {" "} + aspiring Web Developer. + </span>{" "} + Originating from Pasuruan, East Java, Indonesia, + I’m currently embarking on a fascinating journey + at{" "} + <span className="text-black font-medium"> + Universitas Negeri Malang, + </span>{" "} + where I’m pursuing my degree in{" "} + <span className="text-black font-medium"> + Informatics Engineering. + </span>{" "} + My passion for technology and coding knows no bounds. + Beyond the world of coding, I find myself deeply + immersed in the realms of design, Game Development, and + the fascinating universe of AI. I believe that in + today’s fast-paced digital landscape, being a + <span className="text-black font-medium"> + {" "} + lifelong learner + </span>{" "} + is not just a choice, but a necessity. Let’s + connect and explore this ever-evolving world of tech + together! + </p> + <Card /> + </motion.div> + </div> + </> + ); +} diff --git a/app/about/components/spotify/animation.jsx b/app/about/components/about/spotify/animation.jsx similarity index 100% rename from app/about/components/spotify/animation.jsx rename to app/about/components/about/spotify/animation.jsx diff --git a/app/about/components/spotify/card.jsx b/app/about/components/about/spotify/card.jsx similarity index 100% rename from app/about/components/spotify/card.jsx rename to app/about/components/about/spotify/card.jsx diff --git a/app/about/components/spotify/fetch.js b/app/about/components/about/spotify/fetch.js similarity index 100% rename from app/about/components/spotify/fetch.js rename to app/about/components/about/spotify/fetch.js diff --git a/app/about/components/education.jsx b/app/about/components/education.jsx index f61f956..c506c46 100644 --- a/app/about/components/education.jsx +++ b/app/about/components/education.jsx @@ -1,192 +1,200 @@ import Image from "next/image"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faMedal } from "@fortawesome/free-solid-svg-icons"; - +import { motion } from "framer-motion"; import Me4 from "@/public/img/me4.jpeg"; +function Wrapper({ children }) { + return ( + <div className="mx-auto container gap-10 p-10 grid grid-cols-1 my-10 "> + <motion.div + className="flex justify-center items-start flex-col mb-5 " + initial={{ + opacity: 0, + x: -200, + }} + whileInView={{ + opacity: 1, + x: 0, + }} + transition={{ + delay: 0.5, + + type: "spring", + }}> + {children} + </motion.div> + </div> + ); +} + export default function Education() { return ( - <section className="grid gap-8 md:gap-12"> - <div className="text-center space-y-2"> - <h1 className="text-3xl md:text-4xl font-bold tracking-tighter"> - Education - </h1> - <p className="text-muted-foreground max-w-[800px] mx-auto"> - Get to know more about my educational background. - </p> - </div> - <div className="grid gap-8 md:gap-12"> - <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> - <div className="px-5"> - <div className="font-medium text-lg"> - 2022 - Present + <Wrapper> + <section className="grid gap-8 md:gap-12"> + <div className="text-center space-y-2"> + <h1 className="text-3xl md:text-4xl font-bold tracking-tighter"> + Education + </h1> + <p className="text-muted-foreground max-w-[800px] mx-auto"> + Get to know more about my educational background. + </p> + </div> + <div className="grid gap-8 md:gap-12"> + <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> + <div className="px-5"> + <div className="font-medium text-lg"> + 2022 - Present + </div> + <div> + <h2 className="font-semibold text-xl"> + Universitas Negeri Malang + </h2> + <h3 className="text-md font-normal mb-3"> + S1 Teknik Informatika | Computer Science + </h3> + <div className="gap-4 mb-4 flex items-stretch md:h-[300px] xl:h-[400px]"> + <div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group"> + <Image + src={Me4} + width={400} + height={225} + alt="University" + className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out" + /> + </div> + <div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group"> + <Image + src={Me4} + width={400} + height={225} + alt="University" + className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out" + /> + </div> + <div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group"> + <Image + src={Me4} + width={400} + height={225} + alt="University" + className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out" + /> + </div> + </div> + <div className="flex items-center gap-2"> + <p className="text-justify"> + Aspiring to be a software engineer, I am + currently pursuing a bachelor’s + degree in computer science at + Universitas Negeri Malang. Fascinated by + the world of technology, I am eager to + learn and explore new things in the + field of computer science. + </p> + </div> + {/* add gpa in a style */} + <div className="flex flex-wrap gap-2 mt-4 text-sm"> + <div className="bg-gray-300 text-black px-2 py-1 rounded-2xl"> + GPA: 3.9 out of 4 + </div> + </div> + </div> </div> - <div> - <h2 className="font-semibold text-xl"> - Universitas Negeri Malang + <div className="flex flex-col justify-start px-5 md:px-0"> + <h2 className="font-semibold text-xl mt-7"> + Achievements </h2> - <h3 className="text-md font-normal mb-3"> - S1 Teknik Informatika | Computer Science - </h3> - <div className="gap-4 mb-4 flex items-stretch md:h-[300px] xl:h-[400px]"> - <div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group"> - <Image - src={Me4} - width={400} - height={225} - alt="University" - className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out" + <p className="text-md font-normal mb-3 md:mb-12"> + Some of my achievements during my study. + </p> + <div className="flex items-center gap-4 mb-4"> + <div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground"> + <FontAwesomeIcon + icon={faMedal} + className="text-white h-5 w-5" /> </div> - <div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group"> - <Image - src={Me4} - width={400} - height={225} - alt="University" - className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out" + <div> + <h3 className="font-medium"> + Special Award | Gold Medal | Incubation + Opportunity + </h3> + <p className="text-sm"> + Indonesia Inventor Day 2024 (IID) | Aug + 2024 + </p> + </div> + </div> + <div className="flex items-center gap-4 mb-4"> + <div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground"> + <FontAwesomeIcon + icon={faMedal} + className="text-white h-5 w-5" /> </div> - <div className="flex-[1] transition-all duration-300 ease-in-out hover:flex-[3] group"> - <Image - src={Me4} - width={400} - height={225} - alt="University" - className="rounded-lg w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out" + <div> + <h3 className="font-medium"> + 3rd place (Bronze Medal) + </h3> + <p className="text-sm"> + Student Digital Innovation Competition + (LIDM) | Jun 2024 + </p> + </div> + </div> + <div className="flex items-center gap-4 mb-4"> + <div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground"> + <FontAwesomeIcon + icon={faMedal} + className="text-white h-5 w-5" /> </div> - </div> - <div className="flex items-center gap-2"> - <p className="text-justify"> - Aspiring to be a software engineer, I am - currently pursuing a bachelor’s degree - in computer science at Universitas Negeri - Malang. Fascinated by the world of - technology, I am eager to learn and explore - new things in the field of computer science. - </p> - </div> - {/* add gpa in a style */} - <div className="flex flex-wrap gap-2 mt-4 text-sm"> - <div className="bg-gray-300 text-black px-2 py-1 rounded-2xl"> - GPA: 3.9 out of 4 + <div> + <h3 className="font-medium"> + 3rd place (Bronze Medal) + </h3> + <p className="text-sm"> + Fesmaro UI/UX Design | Jun 2024 + </p> </div> </div> - </div> - </div> - <div className="flex flex-col justify-start px-5 md:px-0"> - <h2 className="font-semibold text-xl mt-7"> - Achievements - </h2> - <p className="text-md font-normal mb-3 md:mb-12"> - Some of my achievements during my study. - </p> - <div className="flex items-center gap-4 mb-4"> - <div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground"> - <FontAwesomeIcon - icon={faMedal} - className="text-white h-5 w-5" - /> + <div className="flex items-center gap-4 mb-5"> + <div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground"> + <FontAwesomeIcon + icon={faMedal} + className="text-white h-5 w-5" + /> + </div> + <div> + <h3 className="font-medium">Finalist</h3> + <p className="text-sm"> + 36th National Student Science Week + (PIMNAS) | Nov 2023 + </p> + </div> </div> - <div> - <h3 className="font-medium"> - Special Award | Gold Medal | Incubation - Opportunity - </h3> - <p className="text-sm"> - Indonesia Inventor Day 2024 (IID) | Aug 2024 - </p> - </div> - </div> - <div className="flex items-center gap-4 mb-4"> - <div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground"> - <FontAwesomeIcon - icon={faMedal} - className="text-white h-5 w-5" - /> - </div> - <div> - <h3 className="font-medium"> - 3rd place (Bronze Medal) - </h3> - <p className="text-sm"> - Student Digital Innovation Competition - (LIDM) | Jun 2024 - </p> - </div> - </div> - <div className="flex items-center gap-4 mb-4"> - <div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground"> - <FontAwesomeIcon - icon={faMedal} - className="text-white h-5 w-5" - /> - </div> - <div> - <h3 className="font-medium"> - 3rd place (Bronze Medal) - </h3> - <p className="text-sm"> - Fesmaro UI/UX Design | Jun 2024 - </p> - </div> - </div> - <div className="flex items-center gap-4 mb-5"> - <div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground"> - <FontAwesomeIcon - icon={faMedal} - className="text-white h-5 w-5" - /> - </div> - <div> - <h3 className="font-medium">Finalist</h3> - <p className="text-sm"> - 36th National Student Science Week (PIMNAS) - | Nov 2023 - </p> - </div> - </div> - <div className="flex items-center gap-4 mb-5"> - <div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground"> - <FontAwesomeIcon - icon={faMedal} - className="text-white h-5 w-5" - /> - </div> - <div> - <h3 className="font-medium"> - 3rd place (Bronze Medal) - </h3> - <p className="text-sm"> - FORKAFEST 3.0 Web Development competition | - Jan 2023 - </p> + <div className="flex items-center gap-4 mb-5"> + <div className="aspect-square w-10 rounded-full bg-black flex items-center justify-center text-primary-foreground"> + <FontAwesomeIcon + icon={faMedal} + className="text-white h-5 w-5" + /> + </div> + <div> + <h3 className="font-medium"> + 3rd place (Bronze Medal) + </h3> + <p className="text-sm"> + FORKAFEST 3.0 Web Development + competition | Jan 2023 + </p> + </div> </div> </div> </div> </div> - </div> - </section> - ); -} - -function GraduationCapIcon(props) { - return ( - <svg - {...props} - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - fill="none" - stroke="currentColor" - strokeWidth="2" - strokeLinecap="round" - strokeLinejoin="round"> - <path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" /> - <path d="M22 10v6" /> - <path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" /> - </svg> + </section> + </Wrapper> ); } diff --git a/app/about/components/experience.jsx b/app/about/components/experience.jsx index b66bd3f..be50447 100644 --- a/app/about/components/experience.jsx +++ b/app/about/components/experience.jsx @@ -1,7 +1,66 @@ +import Hr from "@/components/Hr"; +import { motion } from "framer-motion"; + +function Title() { + return ( + <div className="mt-16 flex flex-col justify-start items-center w-full pl-10 md:pl-32"> + <div className="flex justify-center items-center flex-col my-5 self-start"> + <Hr variant="long"></Hr> + <motion.h1 + className="text-3xl font-bold mt-3" + initial={{ + opacity: 0, + x: -200, + }} + whileInView={{ + opacity: 1, + x: 0, + }} + transition={{ + delay: 0.7, + + type: "spring", + }}> + Profesional Experience + </motion.h1> + </div> + </div> + ); +} + +function Wrapper({ children }) { + return ( + <div className="mx-auto container gap-10 p-10 grid grid-cols-1 my-10 "> + <motion.div + className="flex justify-center items-start flex-col mb-5 " + initial={{ + opacity: 0, + x: -200, + }} + whileInView={{ + opacity: 1, + x: 0, + }} + transition={{ + delay: 0.5, + + type: "spring", + }}> + <section className="grid gap-8 md:gap-12"> + <div className="relative after:absolute after:inset-y-2 after:w-1 after:bg-gray-700 after:left-[-4px] md:after:left-1 lg:after:left-2 xl:after:left-3 grid gap-8 md:gap-12 pl-6 md:pl-8"> + {children} + </div> + </section> + </motion.div> + </div> + ); +} + export default function Experience() { return ( - <section className="grid gap-8 md:gap-12"> - <div className="relative after:absolute after:inset-y-2 after:w-1 after:bg-gray-700 after:left-[-4px] md:after:left-1 lg:after:left-2 xl:after:left-3 grid gap-8 md:gap-12 pl-6 md:pl-8"> + <> + <Title/> + <Wrapper> <div className="grid gap-4 relative"> <div className="aspect-square w-5 bg-black rounded-full absolute left-0 translate-x-[-29.5px] z-10" /> <div className="font-medium text-lg">2023 - Present</div> @@ -99,7 +158,7 @@ export default function Experience() { </div> </div> </div> - </div> - </section> + </Wrapper> + </> ); } diff --git a/app/about/components/quote/quote.jsx b/app/about/components/quote/quote.jsx index 8b53c35..4d86610 100644 --- a/app/about/components/quote/quote.jsx +++ b/app/about/components/quote/quote.jsx @@ -3,6 +3,30 @@ import "./style.css"; import { motion } from "framer-motion"; import { useIntersectionObserver } from "./useIntersectionObserver"; +function Wrapper({ children }) { + return ( + <div className="min-h-[80vh] mx-auto container p-10 grid grid-cols-1 mt-10 "> + <motion.div + className="flex justify-center items-center flex-col mb-5 " + initial={{ + opacity: 0, + scale: 0.9, + }} + whileInView={{ + opacity: 1, + scale: 1, + }} + transition={{ + delay: 0.6, + duration: 2, + ease: [0.22, 1, 0.36, 1], + }}> + {children} + </motion.div> + </div> + ); +} + export default function Quote() { const text1 = '"There are no limits to what you can accomplish'.split(" "); const text2 = 'except the limits you place on your own thinking."'.split( @@ -11,53 +35,59 @@ export default function Quote() { const [ref, isIntersecting] = useIntersectionObserver(); return ( - <div ref={ref} className="text-center"> - <h3 className="text-[2rem]"> - {text1.map((word, index) => ( - <motion.span - key={index} - initial={{ - opacity: 0, - filter: "blur(4px)", - scale: 0.92, - }} - animate={{ - opacity: isIntersecting ? 1 : 0, - filter: isIntersecting ? "blur(0px)" : "blur(4px)", - scale: isIntersecting ? 1 : 0.92, - }} - transition={{ - delay: isIntersecting ? index * 0.1 : 0, - duration: 0.5, - }}> - {word}{" "} - </motion.span> - ))} - </h3> - <h3 className="text-xl"> - {text2.map((word, index) => ( - <motion.span - key={index + text1.length} - initial={{ - opacity: 0, - filter: "blur(4px)", - scale: 0.92, - }} - animate={{ - opacity: isIntersecting ? 1 : 0, - filter: isIntersecting ? "blur(0px)" : "blur(4px)", - scale: isIntersecting ? 1 : 0.92, - }} - transition={{ - delay: isIntersecting - ? (text1.length + index) * 0.1 - : 0, - duration: 0.5, - }}> - {word}{" "} - </motion.span> - ))} - </h3> - </div> + <Wrapper> + <div ref={ref} className="text-center"> + <h3 className="text-[2rem]"> + {text1.map((word, index) => ( + <motion.span + key={index} + initial={{ + opacity: 0, + filter: "blur(4px)", + scale: 0.92, + }} + animate={{ + opacity: isIntersecting ? 1 : 0, + filter: isIntersecting + ? "blur(0px)" + : "blur(4px)", + scale: isIntersecting ? 1 : 0.92, + }} + transition={{ + delay: isIntersecting ? index * 0.1 : 0, + duration: 0.5, + }}> + {word}{" "} + </motion.span> + ))} + </h3> + <h3 className="text-xl"> + {text2.map((word, index) => ( + <motion.span + key={index + text1.length} + initial={{ + opacity: 0, + filter: "blur(4px)", + scale: 0.92, + }} + animate={{ + opacity: isIntersecting ? 1 : 0, + filter: isIntersecting + ? "blur(0px)" + : "blur(4px)", + scale: isIntersecting ? 1 : 0.92, + }} + transition={{ + delay: isIntersecting + ? (text1.length + index) * 0.1 + : 0, + duration: 0.5, + }}> + {word}{" "} + </motion.span> + ))} + </h3> + </div> + </Wrapper> ); } diff --git a/app/about/components/skills/skills.jsx b/app/about/components/skills/skills.jsx index ef4a44d..cd1dea2 100644 --- a/app/about/components/skills/skills.jsx +++ b/app/about/components/skills/skills.jsx @@ -1,33 +1,64 @@ +import { motion } from "framer-motion"; +import Stack from "./stack"; +import Tools from "./tools"; + +function Wrapper({ children }) { + return ( + <div className="mx-auto container gap-4 p-10 grid grid-cols-1 mt-10"> + <motion.div + className="flex justify-center items-center flex-col mb-5 " + initial={{ + opacity: 0, + x: -200, + }} + whileInView={{ + opacity: 1, + x: 0, + }} + transition={{ + delay: 0.5, + type: "spring", + }}> + {children} + </motion.div> + </div> + ); +} + export default function Skills() { return ( - <section className="grid gap-8 md:gap-12"> - <div className="text-center space-y-2"> - <h2 className="text-3xl font-bold mt-3 text-black"> - Skills and Expertise - </h2> - <p className="text-muted-foreground max-w-[800px] mx-auto"> - Explore some skills I'm proficient in to deliver high-quality - solutions. - </p> - </div> - <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 md:gap-8"> - <div className="flex flex-col items-center gap-2"> - <CodepenIcon className="w-12 h-12" /> - <div className="font-medium">Web Development</div> - </div> - <div className="flex flex-col items-center gap-2"> - <WebhookIcon className="w-12 h-12" /> - <div className="font-medium">REST API</div> - </div> - <div className="flex flex-col items-center gap-2"> - <ActivityIcon className="w-12 h-12" /> - <div className="font-medium">Machine Learning</div> - </div> - <div className="flex flex-col items-center gap-2"> - <MobileIcon className="w-12 h-12" /> - <div className="font-medium">Mobile Development</div> - </div> - {/* <div className="flex flex-col items-center gap-2"> + <> + <Wrapper> + <section className="grid gap-8 md:gap-12"> + <div className="text-center space-y-2"> + <h2 className="text-3xl font-bold mt-3 text-black"> + Skills and Expertise + </h2> + <p className="text-muted-foreground max-w-[800px] mx-auto"> + Explore some skills I'm proficient in to + deliver high-quality solutions. + </p> + </div> + <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 md:gap-8"> + <div className="flex flex-col items-center gap-2"> + <CodepenIcon className="w-12 h-12" /> + <div className="font-medium">Web Development</div> + </div> + <div className="flex flex-col items-center gap-2"> + <WebhookIcon className="w-12 h-12" /> + <div className="font-medium">REST API</div> + </div> + <div className="flex flex-col items-center gap-2"> + <ActivityIcon className="w-12 h-12" /> + <div className="font-medium">Machine Learning</div> + </div> + <div className="flex flex-col items-center gap-2"> + <MobileIcon className="w-12 h-12" /> + <div className="font-medium"> + Mobile Development + </div> + </div> + {/* <div className="flex flex-col items-center gap-2"> <CloudIcon className="w-12 h-12" /> <div className="font-medium">Cloud Computing</div> </div> @@ -43,8 +74,14 @@ export default function Skills() { <PackageIcon className="w-12 h-12" /> <div className="font-medium">Product Management</div> </div> */} + </div> + </section> + </Wrapper> + <div className=" mx-auto container gap-4 p-10 grid grid-cols-1 md:grid-cols-2 mt-10 mb-24"> + <Stack /> + <Tools /> </div> - </section> + </> ); } @@ -87,130 +124,6 @@ function CodepenIcon(props) { ); } - -function BarChartIcon(props) { - return ( - <svg - {...props} - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - fill="none" - stroke="currentColor" - strokeWidth="2" - strokeLinecap="round" - strokeLinejoin="round"> - <line x1="12" x2="12" y1="20" y2="10" /> - <line x1="18" x2="18" y1="20" y2="4" /> - <line x1="6" x2="6" y1="20" y2="16" /> - </svg> - ); -} - -function CloudIcon(props) { - return ( - <svg - {...props} - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - fill="none" - stroke="currentColor" - strokeWidth="2" - strokeLinecap="round" - strokeLinejoin="round"> - <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" /> - </svg> - ); -} - -function ComputerIcon(props) { - return ( - <svg - {...props} - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - fill="none" - stroke="currentColor" - strokeWidth="2" - strokeLinecap="round" - strokeLinejoin="round"> - <rect width="14" height="8" x="5" y="2" rx="2" /> - <rect width="20" height="8" x="2" y="14" rx="2" /> - <path d="M6 18h2" /> - <path d="M12 18h6" /> - </svg> - ); -} - -function PackageIcon(props) { - return ( - <svg - {...props} - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - fill="none" - stroke="currentColor" - strokeWidth="2" - strokeLinecap="round" - strokeLinejoin="round"> - <path d="m7.5 4.27 9 5.15" /> - <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" /> - <path d="m3.3 7 8.7 5 8.7-5" /> - <path d="M12 22V12" /> - </svg> - ); -} - -function ProjectorIcon(props) { - return ( - <svg - {...props} - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - fill="none" - stroke="currentColor" - strokeWidth="2" - strokeLinecap="round" - strokeLinejoin="round"> - <path d="M5 7 3 5" /> - <path d="M9 6V3" /> - <path d="m13 7 2-2" /> - <circle cx="9" cy="13" r="3" /> - <path d="M11.83 12H20a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.17" /> - <path d="M16 16h2" /> - </svg> - ); -} - -function TypeIcon(props) { - return ( - <svg - {...props} - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - fill="none" - stroke="currentColor" - strokeWidth="2" - strokeLinecap="round" - strokeLinejoin="round"> - <polyline points="4 7 4 4 20 4 20 7" /> - <line x1="9" x2="15" y1="20" y2="20" /> - <line x1="12" x2="12" y1="4" y2="20" /> - </svg> - ); -} - function WebhookIcon(props) { return ( <svg diff --git a/app/about/components/skills/stack.jsx b/app/about/components/skills/stack.jsx index 216a7b8..fb9232c 100644 --- a/app/about/components/skills/stack.jsx +++ b/app/about/components/skills/stack.jsx @@ -1,6 +1,22 @@ +import { motion } from "framer-motion"; + export default function Stack() { return ( - <> + <motion.div + className="flex justify-center items-center flex-col mb-5 " + initial={{ + opacity: 0, + x: -200, + }} + whileInView={{ + opacity: 1, + x: 0, + }} + transition={{ + delay: 0.5, + + type: "spring", + }}> <h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.3rem] lg:tracking-[.5rem] uppercase "> Language & Framework </h2> @@ -23,6 +39,6 @@ export default function Stack() { <span className="text-black font-bold">Laravel</span> |{" "} <span className="text-black font-medium">Python</span> </p> - </> + </motion.div> ); } \ No newline at end of file diff --git a/app/about/components/skills/tools.jsx b/app/about/components/skills/tools.jsx index 6b6d10a..16121e6 100644 --- a/app/about/components/skills/tools.jsx +++ b/app/about/components/skills/tools.jsx @@ -1,6 +1,22 @@ +import { motion } from "framer-motion"; + export default function Tools() { return ( - <> + <motion.div + className="flex justify-start items-center flex-col mb-5 " + initial={{ + opacity: 0, + x: 200, + }} + whileInView={{ + opacity: 1, + x: 0, + }} + transition={{ + delay: 0.6, + + type: "spring", + }}> <h2 className="text-2xl md:text-xl font-normal mb-3 md:tracking-[.3rem] lg:tracking-[.5rem] uppercase"> Tools </h2> @@ -21,6 +37,6 @@ export default function Tools() { </span>{" "} |{" "} </p> - </> + </motion.div> ); } diff --git a/app/about/page.jsx b/app/about/page.jsx index de726f6..24ab8f2 100644 --- a/app/about/page.jsx +++ b/app/about/page.jsx @@ -3,23 +3,20 @@ import { useEffect } from "react"; import { motion } from "framer-motion"; import Button from "@/components/Button"; import Image from "next/legacy/image"; -import FixedButon from "@/components/FixedButton"; +import FixedButton from "@/components/FixedButton"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronLeft } from "@fortawesome/free-solid-svg-icons"; -import Card from "./components/spotify/card.jsx"; import Quote from "./components/quote/quote.jsx"; import Skills from "./components/skills/skills.jsx"; -import Tools from "./components/skills/tools.jsx"; -import Stack from "./components/skills/stack.jsx"; import Experience from "./components/experience.jsx"; import Education from "./components/education.jsx"; // images -import Me1 from "@/public/img/me1.jpg"; -import Me2 from "@/public/img/me2.jpg"; -import Me3 from "@/public/img/me3.jpg"; +import Hero from "@/public/img/me2.jpg"; + import Hr from "@/components/Hr"; +import About from "./components/about/about.jsx"; export default function Page() { useEffect(() => { @@ -29,13 +26,14 @@ export default function Page() { return ( <> <main className="overflow-hidden"> - <FixedButon href="/#about"> + <FixedButton href="/#about"> <FontAwesomeIcon icon={faChevronLeft} className="text-black pr-10" /> - </FixedButon> - <div className="relative h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col mb-10 overflow-hidden"> + </FixedButton> + <div className="relative h-screen gap-4 p-10 flex justify-center items-center flex-col mb-10 overflow-hidden"> + {/* hero */} <div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 "> <motion.div initial={{ scale: 1 }} @@ -43,8 +41,8 @@ export default function Page() { transition={{ ease: "circOut", duration: 1 }} className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 "> <Image - src={Me2} - alt="Alvalens" + src={Hero} + alt="Alvalen Shafel" layout="fill" objectFit="cover" placeholder="blur" @@ -52,7 +50,7 @@ export default function Page() { </motion.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 pt-4 backdrop-filter backdrop-blur-sm md:backdrop-blur-none bg-gray-100 bg-opacity-50 md:bg-transparent md:pt-0"> - <h1 className="md:bg-white bg-transparent lg:bg-transparent bg-opacity-50 md-px-0 text-black text-5xl md:text-8xl font-bold"> + <h1 className="md:bg-white bg-transparent lg:bg-transparent bg-opacity-50 md:px-0 text-black text-5xl md:text-8xl font-bold"> About Me </h1> <Hr /> @@ -78,312 +76,28 @@ export default function Page() { </motion.div> </div> </div> - <div className="mt-10 flex flex-col justify-start items-center w-full pl-10 md:pl-32"> - <div className="flex justify-center items-center flex-col my-5 self-start "> - <div className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"></div> - <div className="bg-gray-700 w-28 h-1 rounded-full translate-x-12"></div> - <h1 className="text-3xl font-bold mt-3">Who Am I?</h1> - </div> - </div> - <div className="relative w-screen mx-auto container gap-4 px-10 grid grid-cols-1 md:grid-cols-2 mb-10"> - <div className="flex justify-center items-start flex-col mb-5 "> - <div className="images relative w-full aspect-square"> - <div className="absolute top-28 left-10 w-[50%] aspect-square grayscale hover:grayscale-0 transition-all ease duration-300"> - <motion.div - initial={{ opacity: 0, scale: 0.5, x: 100 }} - whileInView={{ - opacity: 1, - scale: 1, - x: 0, - }} - className="w-full h-full"> - <Image - src={Me1} - alt="Alvalens" - layout="fill" - objectFit="cover" - placeholder="blur" - /> - </motion.div> - </div> - <div className="absolute top-16 right-28 w-[30%] aspect-square grayscale hover:grayscale-0 transition-all ease duration-300"> - <motion.div - initial={{ - opacity: 0, - scale: 0.5, - x: -100, - }} - whileInView={{ - opacity: 1, - scale: 1, - x: 0, - }} - transition={{ delay: 0.3 }} - className="w-full h-full"> - <Image - src={Me2} - alt="Alvalens" - layout="fill" - objectFit="cover" - placeholder="blur" - /> - </motion.div> - </div> - <div className="absolute bottom-16 right-20 w-[40%] aspect-square grayscale hover:grayscale-0 transition-all ease duration-300"> - <motion.div - initial={{ - opacity: 0, - scale: 0.5, - x: -100, - }} - whileInView={{ - opacity: 1, - scale: 1, - x: 0, - }} - transition={{ - delay: 0.5, - }} - className="w-full h-full"> - <Image - src={Me3} - alt="Alvalens" - layout="fill" - objectFit="cover" - placeholder="blur" - /> - </motion.div> - </div> - </div> - </div> - <motion.div - className="flex justify-center items-start flex-col mb-5 md:px-10" - initial={{ - opacity: 0, - x: 200, - }} - whileInView={{ - opacity: 1, - x: 0, - }} - transition={{ - delay: 0.5, + {/* end hero */} - type: "spring", - }}> - <h2 className="text-2xl font-bold tracking-wider mb-3"> - Alvalen Shafelbilyunazra - </h2> - <p className="text-gray-600 text-justify title text-lg"> - Hey there, I’m Alvalen Shafelbilyunazra, a - <span className="text-black font-medium"> - {" "} - tech enthusiast - </span>{" "} - and - <span className="text-black font-medium"> - {" "} - aspiring Web Developer. - </span>{" "} - Originating from Pasuruan, East Java, Indonesia, - I’m currently embarking on a fascinating - journey at{" "} - <span className="text-black font-medium"> - Universitas Negeri Malang, - </span>{" "} - where I’m pursuing my degree in{" "} - <span className="text-black font-medium"> - Informatics Engineering. - </span>{" "} - My passion for technology and coding knows no - bounds. Beyond the world of coding, I find myself - deeply immersed in the realms of design, Game - Development, and the fascinating universe of AI. I - believe that in today’s fast-paced digital - landscape, being a - <span className="text-black font-medium"> - {" "} - lifelong learner - </span>{" "} - is not just a choice, but a necessity. Let’s - connect and explore this ever-evolving world of tech - together! - </p> - <Card /> - </motion.div> - </div> + {/* about */} + <About /> + {/* end about */} {/* skills */} - <div className=" w-screen mx-auto container gap-4 p-10 grid grid-cols-1 mt-10"> - <motion.div - className="flex justify-center items-center flex-col mb-5 " - initial={{ - opacity: 0, - x: -200, - }} - whileInView={{ - opacity: 1, - x: 0, - }} - transition={{ - delay: 0.5, - - type: "spring", - }}> - <Skills /> - </motion.div> - </div> - - <div className=" w-screen mx-auto container gap-4 p-10 grid grid-cols-1 md:grid-cols-2 mt-10 mb-24"> - <motion.div - className="flex justify-center items-center flex-col mb-5 " - initial={{ - opacity: 0, - x: -200, - }} - whileInView={{ - opacity: 1, - x: 0, - }} - transition={{ - delay: 0.5, - - type: "spring", - }}> - <Stack /> - </motion.div> - <motion.div - className="flex justify-start items-center flex-col mb-5 " - initial={{ - opacity: 0, - x: 200, - }} - whileInView={{ - opacity: 1, - x: 0, - }} - transition={{ - delay: 0.6, - - type: "spring", - }}> - <Tools /> - </motion.div> - </div> + <Skills /> + {/* end skills */} {/* experience */} - <div className="mt-16 flex flex-col justify-start items-center w-full pl-10 md:pl-32"> - <div className="flex justify-center items-center flex-col my-5 self-start "> - <motion.div - className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start" - initial={{ - opacity: 0, - x: -100, - }} - whileInView={{ - opacity: 1, - x: 0, - }} - transition={{ - delay: 0.5, - - type: "spring", - }}></motion.div> - <motion.div - className="bg-gray-700 w-28 h-1 rounded-full" - initial={{ - opacity: 0, - x: 200, - }} - whileInView={{ - opacity: 1, - x: -50, - }} - transition={{ - delay: 0.5, - - type: "spring", - }}></motion.div> - <motion.h1 - className="text-3xl font-bold mt-3" - initial={{ - opacity: 0, - x: -200, - }} - whileInView={{ - opacity: 1, - x: 0, - }} - transition={{ - delay: 0.7, - - type: "spring", - }}> - Profesional Experience - </motion.h1> - </div> - </div> - - <div className="w-screen mx-auto container gap-10 p-10 grid grid-cols-1 my-10 "> - <motion.div - className="flex justify-center items-start flex-col mb-5 " - initial={{ - opacity: 0, - x: -200, - }} - whileInView={{ - opacity: 1, - x: 0, - }} - transition={{ - delay: 0.5, - - type: "spring", - }}> - <Experience /> - </motion.div> - </div> + <Experience /> + {/* end experience */} {/* Education */} - <div className="w-screen mx-auto container gap-10 p-10 grid grid-cols-1 my-10 "> - <motion.div - className="flex justify-center items-start flex-col mb-5 " - initial={{ - opacity: 0, - x: -200, - }} - whileInView={{ - opacity: 1, - x: 0, - }} - transition={{ - delay: 0.5, + <Education /> + {/* end Education */} - type: "spring", - }}> - <Education /> - </motion.div> - </div> + {/* Quote */} + <Quote /> + {/* end Quote */} - <div className="min-h-[80vh] w-screen mx-auto container p-10 grid grid-cols-1 mt-10 "> - <motion.div - className="flex justify-center items-center flex-col mb-5 " - initial={{ - opacity: 0, - scale: 0.9, - }} - whileInView={{ - opacity: 1, - scale: 1, - }} - transition={{ - delay: 0.6, - duration: 2, - ease: [0.22, 1, 0.36, 1], - }}> - <Quote /> - </motion.div> - </div> </main> </> ); diff --git a/app/projects/page.jsx b/app/projects/page.jsx index 83b16f7..f51c2c0 100644 --- a/app/projects/page.jsx +++ b/app/projects/page.jsx @@ -84,8 +84,7 @@ export default function Page() { </div> <div className="mt-10 flex flex-col justify-start items-center w-full pl-10 md:pl-32"> <div className="flex justify-center items-center flex-col my-5 self-start "> - <div className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start"></div> - <div className="bg-gray-700 w-28 h-1 rounded-full translate-x-12"></div> + <Hr variant="long"></Hr> <h1 className="text-3xl font-bold mt-3">Hightlight</h1> </div> </div> @@ -207,7 +206,7 @@ export default function Page() { </div> <div className="mt-16 flex flex-col justify-start items-center w-full pl-10 md:pl-32"> <div className="flex justify-start items-start flex-col my-5 self-start "> - <Hr /> + <Hr variant="long"></Hr> <motion.h1 className="text-3xl font-bold mt-3" initial={{ diff --git a/components/Hr.jsx b/components/Hr.jsx index f0d301a..d257215 100644 --- a/components/Hr.jsx +++ b/components/Hr.jsx @@ -1,38 +1,79 @@ import { motion } from "framer-motion"; - -export default function Hr() { +import PropTypes from "prop-types"; +export default function Hr({ variant }) { 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: -45, - }} - 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> + <> + {variant === "long" ? ( + <> + <motion.div + className="bg-gray-700 w-28 h-1 rounded-full mb-3 self-start" + initial={{ + opacity: 0, + x: -100, + }} + whileInView={{ + opacity: 1, + x: 0, + }} + transition={{ + delay: 0.3, + type: "spring", + }}></motion.div> + <motion.div + className="bg-gray-700 w-28 h-1 rounded-full" + initial={{ + opacity: 0, + x: 200, + }} + whileInView={{ + opacity: 1, + x: -50, + }} + transition={{ + delay: 0.4, + type: "spring", + }}></motion.div> + </> + ) : ( + <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: -45, + }} + 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> + )} + </> ); } + +Hr.propTypes = { + variant: PropTypes.oneOf(["short", "long"]), +}; + +Hr.defaultProps = { + variant: "short", +};