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

[feat] fill about content

Browse source
This commit is contained in:
Alvalen 2023-09-02 21:59:30 +07:00
parent 6d73cc52d5
commit 1c83ce9fac
2 changed files with 122 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

127
app/about/page.js
View file

@ -150,16 +150,40 @@ export default function Page() {
<h2 className="text-2xl font-bold tracking-wider mb-3"> <h2 className="text-2xl font-bold tracking-wider mb-3">
Alvalen Shafelbilyunazra Alvalen Shafelbilyunazra
</h2> </h2>
<p className="text-gray-600 text-justify"> <p className="text-gray-600 text-justify title text-lg">
Lorem ipsum dolor sit amet consectetur adipisicing Hey there, I&rsquo;m Alvalen Shafelbilyunazra, a
elit. Laborum, laudantium ad vel suscipit optio <span className="text-black font-medium">
nesciunt accusantium nulla! Similique sapiente, {" "}
tempora id laudantium eveniet adipisci perferendis tech enthusiast
ad numquam sit hic fugiat? Lorem ipsum dolor sit </span>{" "}
amet consectetur adipisicing elit. Iste assumenda and
provident deserunt quos id, minus tempora atque eos <span className="text-black font-medium">
tenetur ut accusantium officiis itaque qui eum quas {" "}
harum? Nemo, ducimus quisquam. aspiring Web Developer.
</span>{" "}
Originating from Pasuruan, East Java, Indonesia,
I&rsquo;m currently embarking on a fascinating
journey at{" "}
<span className="text-black font-medium">
Universitas Negeri Malang,
</span>{" "}
where I&rsquo;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&rsquo;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&rsquo;s
connect and explore this ever-evolving world of tech
together!
</p> </p>
</motion.div> </motion.div>
</div> </div>
@ -231,7 +255,8 @@ export default function Page() {
<span className="text-black font-medium"> <span className="text-black font-medium">
Firebase Firebase
</span>{" "} </span>{" "}
|<span className="text-black font-medium">PHP</span>{" "} |{" "}
<span className="text-black font-medium">PHP</span>{" "}
|{" "} |{" "}
<span className="text-black font-bold"> <span className="text-black font-bold">
Laravel Laravel
@ -338,11 +363,11 @@ export default function Page() {
duration: 1, duration: 1,
type: "spring", type: "spring",
}}> }}>
Education & Experience Education &amp; Experience
</motion.h1> </motion.h1>
</div> </div>
</div> </div>
<div className="w-screen mx-auto container gap-4 p-10 grid grid-cols-1 md:grid-cols-2 my-10"> <div className="w-screen mx-auto container gap-10 p-10 grid grid-cols-1 md:grid-cols-2 my-10 ">
<motion.div <motion.div
className="flex justify-center items-start flex-col mb-5 " className="flex justify-center items-start flex-col mb-5 "
initial={{ initial={{
@ -364,13 +389,18 @@ export default function Page() {
<h3 className="text-md font-medium mb-3 text-gray-500"> <h3 className="text-md font-medium mb-3 text-gray-500">
Teknik Informatika | 2022 - Now Teknik Informatika | 2022 - Now
</h3> </h3>
<p className="pl-3 text-gray-500 text-start relative"> <p className="pl-3 text-gray-500 relative text-justify">
<span className="before:border-s-2 before:absolute before:left-0 before:top-0 before:h-full before:border-gray-400 before:block before:w-2 before:content-'' text-justify"></span> <span className="before:border-s-2 before:absolute before:left-0 before:top-0 before:h-full before:border-gray-400 before:block before:w-2 before:content-'' "></span>
Lorem ipsum dolor sit amet consectetur adipisicing I&rsquo;m currently in my third semester at
elit. Vero voluptatibus tenetur dolor laudantium et Universitas Negeri Malang, majoring in Informatics
ipsum temporibus atque illo suscipit, quam iusto Engineering. This journey has been nothing short of
reiciendis corrupti quibusdam architecto, labore exhilarating, filled with countless opportunities to
cupiditate non autem aliquid? learn and grow. With a steadfast dedication to my
studies, I&rsquo;ve achieved a commendable GPA of
3.93. Throughout my academic journey, I&rsquo;ve
delved into various facets of computer science,
honing my skills in web development, programming,
and problem-solving.
</p> </p>
</motion.div> </motion.div>
<motion.div <motion.div
@ -394,39 +424,46 @@ export default function Page() {
<h3 className="text-md font-medium mb-3 text-gray-500"> <h3 className="text-md font-medium mb-3 text-gray-500">
Fullstack Web Developer | 2023 - Now Fullstack Web Developer | 2023 - Now
</h3> </h3>
<p className="pl-3 text-gray-500 text-start relative"> <p className="pl-3 text-gray-500 relative text-justify">
<span className="before:border-s-2 before:absolute before:left-0 before:top-0 before:h-full before:border-gray-400 before:block before:w-2 before:content-'' text-justify"></span> <span className="before:border-s-2 before:absolute before:left-0 before:top-0 before:h-full before:border-gray-400 before:block before:w-2 before:content-'' "></span>
Lorem ipsum dolor sit amet consectetur adipisicing My experience extends across various technologies,
elit. Vero voluptatibus tenetur dolor laudantium et with a primary focus on Next.js and Laravel.
ipsum temporibus atque illo suscipit, quam iusto I&rsquo;ve successfully completed three projects
reiciendis corrupti quibusdam architecto, labore using Next.js and Laravel. What sets me apart is my
cupiditate non autem aliquid? ability to adapt to different project requirements.
Whether working collaboratively as part of a team or
independently, I ensure that each project I
undertake meets high-quality standards and fulfills
the unique needs of clients.
</p> </p>
</motion.div> </motion.div>
</div> </div>
<div className="flex justify-center items-center flex-col mt-5 self-start min-h-[50vh] bg-gray-200"> <div className="flex justify-center items-center flex-col mt-5 self-start min-h-[50vh] bg-gray-200">
<Link href="/#contact"> <Link href="/#contact">
<motion.h1 <motion.h1
className="text-5xl font-bold mt-3 tracking-widest hover:underline" className="text-5xl font-bold mt-3 tracking-widest hover:underline"
initial={{ initial={{
opacity: 0, opacity: 0,
y: -200, y: -200,
}} }}
whileInView={{ whileInView={{
opacity: 1, opacity: 1,
y: 0, y: 0,
}} }}
transition={{ transition={{
delay: 0.7, delay: 0.7,
duration: 1, duration: 1,
type: "spring", type: "spring",
}}> }}>
Get In Touch <FontAwesomeIcon icon={faArrowRight} className="text-5xl ml-2" /> Get In Touch{" "}
</motion.h1> <FontAwesomeIcon
icon={faArrowRight}
className="text-5xl ml-2"
/>
</motion.h1>
</Link> </Link>
</div> </div>
</main> </main>
</> </>
); );

103
components/Navbar.js
View file

@ -1,6 +1,7 @@
"use client"; "use client";
import { useRef, useState, useEffect } from "react"; import { useRef, useState, useEffect } from "react";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import Link from "next/link";
const NavItems = ({ isNavOpen }) => { const NavItems = ({ isNavOpen }) => {
const [isMobile, setIsMobile] = useState(false); const [isMobile, setIsMobile] = useState(false);
@ -84,69 +85,45 @@ if (isMobile) {
animate={isNavOpen ? "open" : "closed"} animate={isNavOpen ? "open" : "closed"}
initial={false}> initial={false}>
<div className="relative backdrop-blur-sm opacity-95 flex flex-col items-center space-x-8 min-h-[100vh] bg-gray-700 min-w-[100vw] "> <div className="relative backdrop-blur-sm opacity-95 flex flex-col items-center space-x-8 min-h-[100vh] bg-gray-700 min-w-[100vw] ">
<div className="flex flex-col items-center space-y-8 my-auto mx-0"> <div className="flex flex-col items-center space-y-8 my-auto mx-0">
{/* title */} {/* title */}
<motion.h1 <motion.h1
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
transition={{ delay: 0.5, duration: 1 }} transition={{ delay: 0.5, duration: 1 }}
className="text-6xl font-bold text-white"> className="text-6xl font-bold text-white">
Menu Menu
</motion.h1> </motion.h1>
<motion.a <Link href="/">
href="#home" <div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1}>
className="text-2xl font-bold text-white" <motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}>
variants={itemVariants} Home
animate={isNavOpen ? "open" : "closed"} </motion.h2>
delay={1}> </div>
<motion.h2 </Link>
className="text-white" <Link href="/about">
variants={itemVariants} <div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1.2}>
animate={isNavOpen ? "open" : "closed"}> <motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}>
Home About
</motion.h2> </motion.h2>
</motion.a> </div>
<motion.a </Link>
href="#about" <Link href="/project">
className="text-2xl font-bold text-white" <div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1.3}>
variants={itemVariants} <motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}>
animate={isNavOpen ? "open" : "closed"} Projects
delay={1.2}> </motion.h2>
<motion.h2 </div>
className="text-white" </Link>
variants={itemVariants} <Link href="/contact">
animate={isNavOpen ? "open" : "closed"}> <div className="text-2xl font-bold text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"} delay={1.4}>
About <motion.h2 className="text-white" variants={itemVariants} animate={isNavOpen ? "open" : "closed"}>
</motion.h2> Contact
</motion.a> </motion.h2>
<motion.a </div>
href="#project" </Link>
className="text-2xl font-bold text-white" </div>
variants={itemVariants} </div>
animate={isNavOpen ? "open" : "closed"}
delay={1.3}>
<motion.h2
className="text-white"
variants={itemVariants}
animate={isNavOpen ? "open" : "closed"}>
Projects
</motion.h2>
</motion.a>
<motion.a
href="#contact"
className="text-2xl font-bold text-white"
variants={itemVariants}
animate={isNavOpen ? "open" : "closed"}
delay={1.4}>
<motion.h2
className="text-white"
variants={itemVariants}
animate={isNavOpen ? "open" : "closed"}>
Contact
</motion.h2>
</motion.a>
</div>
</div>
</motion.div> </motion.div>
</> </>
); );