Skip to content

Commit

Permalink
added framer-motion animations to these components.
Browse files Browse the repository at this point in the history
  • Loading branch information
@NekruzAsh
NekruzAsh committed Mar 31, 2024
1 parent 1f51077 commit ca88bea
Show file tree
Hide file tree
Showing 5 changed files with 222 additions and 51 deletions.
124 changes: 103 additions & 21 deletions app/components/About.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,60 @@
"use client";
import React from "react";
import Image from "next/image";
import Link from "next/link";
import "../globals.css";
import { FaGooglePlay } from "react-icons/fa";
import { motion, useAnimation } from "framer-motion";
import { useInView } from "react-intersection-observer";

const About = () => {
const { ref, inView } = useInView({
triggerOnce: true,
threshold: 1,
});

const lineVariants = {
hidden: { opacity: 0, x: 100 },
visible: { opacity: 1, x: 0, transition: { duration: 1.5 } },
};

const animation = useAnimation();

React.useEffect(() => {
if (inView) {
animation.start("visible");
}
}, [animation, inView]);

return (
<div id="about" className="w-full md:h-screen p-2 flex items-center py-16">
<div className="max-w-[1240px] m-auto md:grid grid-cols-3 gap-8">
<div className="col-span-2 md:pl-40 md:pr-40 pl-6 pr-6">
<h2 className="py-4 text-[#e8ddff] flex items-center">
<motion.h2
ref={ref}
animate={animation}
initial="hidden"
variants={{
visible: { opacity: 1, y: 0 },
hidden: { opacity: 0, y: 100 },
}}
transition={{ duration: 1 }}
className="py-4 text-[#e8ddff] flex items-center"
>
<span className="text-[#64feda]">01.&nbsp;</span> About Me
<hr className="border-[#251f41] border-t-1 ml-4 flex-grow" />
</h2>
<p className="py-2 text-[#aba6c4]">
</motion.h2>
<motion.p
ref={ref}
animate={animation}
initial="hidden"
variants={{
visible: { opacity: 1, y: 0 },
hidden: { opacity: 0, y: 100 },
}}
transition={{ duration: 1 }}
className="py-2 text-[#aba6c4]"
>
I'm a self-taught Software Developer with a passion for building
dynamic and responsive web applications. I love to learn new
technologies and apply them to my projects. Currently, I am learning
Expand All @@ -24,39 +65,80 @@ const About = () => {
experimenting with different AI language models
</span>{" "}
to better tailor them for my personal projects.
</p>
<p className="py-2 text-[#aba6c4]">
</motion.p>
<motion.p
className="py-2 text-[#aba6c4]"
ref={ref}
animate={animation}
initial="hidden"
variants={{
visible: { opacity: 1, y: 0 },
hidden: { opacity: 0, y: 100 },
}}
transition={{ duration: 1 }}
>
My coding journey began when I wrote my first line of HTML code in
8th grade during an after-school program in New York. I was
fascinated by the idea that I could create such beautiful software
using various programming languages. I was hooked. Those initial
lines of code evolved into a love for programming, driving me to
explore the intricate aspects of this craft.
</p>
<div className="py-2 text-[#aba6c4]">
<p>
Here are a few technologies I've been working with recently:
</p>
</motion.p>
<motion.div
className="py-2 text-[#aba6c4]"
ref={ref}
animate={animation}
initial="hidden"
variants={{
visible: { opacity: 1, y: 0 },
hidden: { opacity: 0, y: 100 },
}}
transition={{ duration: 1 }}
>
<p>Here are a few technologies I've been working with recently:</p>
<br />
<ul className="grid grid-cols-2 gap-y-1 gap-1 text-sm">
<li className="flex items-center"><FaGooglePlay className="text-[#64feda]" size={7}/>&nbsp;&nbsp;JavaScript (ES6+)</li>
<li className="flex items-center"><FaGooglePlay className="text-[#64feda]" size={7}/>&nbsp;&nbsp;Python</li>
<li className="flex items-center"><FaGooglePlay className="text-[#64feda]" size={7}/>&nbsp;&nbsp;React</li>
<li className="flex items-center"><FaGooglePlay className="text-[#64feda]" size={7}/>&nbsp;&nbsp;C++</li>
<li className="flex items-center"><FaGooglePlay className="text-[#64feda]" size={7}/>&nbsp;&nbsp;Node.js</li>
<li className="flex items-center"><FaGooglePlay className="text-[#64feda]" size={7}/>&nbsp;&nbsp;MongoDB</li>
</ul>
</div>
<ul className="grid grid-cols-2 gap-y-1 gap-1 text-sm">
<li className="flex items-center">
<FaGooglePlay className="text-[#64feda]" size={7} />
&nbsp;&nbsp;JavaScript (ES6+)
</li>
<li className="flex items-center">
<FaGooglePlay className="text-[#64feda]" size={7} />
&nbsp;&nbsp;Python
</li>
<li className="flex items-center">
<FaGooglePlay className="text-[#64feda]" size={7} />
&nbsp;&nbsp;React
</li>
<li className="flex items-center">
<FaGooglePlay className="text-[#64feda]" size={7} />
&nbsp;&nbsp;C++
</li>
<li className="flex items-center">
<FaGooglePlay className="text-[#64feda]" size={7} />
&nbsp;&nbsp;Node.js
</li>
<li className="flex items-center">
<FaGooglePlay className="text-[#64feda]" size={7} />
&nbsp;&nbsp;MongoDB
</li>
</ul>
</motion.div>
</div>

<div className="image-style shadow-lg items-center relative justify-center ml-20 md:ml-[-50px] mt-16">
<motion.div
className="image-style shadow-lg items-center relative justify-center ml-20 md:ml-[-50px] mt-16"
initial="hidden"
animate="visible"
variants={lineVariants}
>
<img
src="/images/authorimage.jpg"
quality={100}
className="rounded-md"
alt="picture of author"
/>
</div>
</motion.div>
</div>
</div>
);
Expand Down
66 changes: 51 additions & 15 deletions app/components/Projects.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,50 @@ import Link from "next/link";
import { useState } from "react";
import { FiGithub, FiExternalLink } from "react-icons/fi";
import "../globals.css";
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";
import { useAnimation } from "framer-motion";

const Projects = () => {
const [isFlipped, setIsFlipped] = useState(false);
const { ref, inView } = useInView({
triggerOnce: true,
threshold: 0.5,
rootMargin: "20px 40px 100px 60px",
});

const animation = useAnimation();

React.useEffect(() => {
if (inView) {
animation.start("visible");
}
}, [animation, inView]);

const textVariants = {
hidden: { opacity: 0, x: -100 },
visible: { opacity: 1, x: 0, transition: { duration: 2 } },
};

const LeftVariants = {
hidden: { opacity: 0, x: -100 },
visible: { opacity: 1, x: 0, transition: { duration: 3 } },
};

const RightVariants = {
hidden: { opacity: 0, x: -100 },
visible: { opacity: 1, x: 0, transition: { duration: 3 } },
};

return (
<div id="projects" className="w-full flex justify-center items-center">
<div className="max-w-[1240px] mx-auto px-2 py-20 lg:px-2 md:px-24 md:py-36 lg:py-16">
<div className="max-w-3xl">
<motion.div
className="max-w-3xl"
ref={ref}
animate={animation}
initial="hidden"
variants={textVariants}
>
<h2 className="text-[#e8ddff] pl-6 pr-6 md:pl-0 md:pr-0 py-4 mt-8 flex items-center">
<span className=" text-[#64feda]">02.&nbsp;</span> My Work
<hr className="border-[#251f41] border-t-1 ml-4 flex-grow" />
Expand All @@ -24,10 +60,10 @@ const Projects = () => {
ability to solve complex problems, work with different technologies,
and manage projects effectively.
</p>
</div>
</motion.div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Chat App */}
<div className="card md:w-[500px] w-84 md:h-[550px] h-[520px] bg-[#151030] rounded-sm shadow-lg">
<motion.div className="card md:w-[500px] w-84 md:h-[550px] h-[520px] bg-[#151030] rounded-sm shadow-lg">
<figure className="px-4 pt-4 md:px-6 md:pt-6">
<a href="https://chatapp-3a0e9.web.app/" target="_blank">
<img
Expand Down Expand Up @@ -81,11 +117,11 @@ const Projects = () => {
to authenticate users through Google accounts.
</p>
</div>
</div>
</motion.div>

{/* Quiz Gen */}

<div className="card md:w-[500px] w-84 md:h-[550px] h-[480px] rounded-sm bg-[#151030] shadow-lg">
<motion.div className="card md:w-[500px] w-84 md:h-[550px] h-[480px] rounded-sm bg-[#151030] shadow-lg">
<figure className="px-4 pt-4 md:px-6 md:pt-6">
<a href="https://nekruzash.github.io/QuizGenAI/" target="_blank">
<img
Expand Down Expand Up @@ -137,11 +173,11 @@ const Projects = () => {
generate questions based on the content.
</p>
</div>
</div>
</motion.div>

{/* Todo app */}

<div className="card md:w-[500px] w-84 md:h-[550px] h-[480px] rounded-sm bg-[#151030] shadow-lg">
<motion.div className="card md:w-[500px] w-84 md:h-[550px] h-[480px] rounded-sm bg-[#151030] shadow-lg">
<figure className="px-4 pt-4 md:px-6 md:pt-6">
<a
href="https://to-do-app-weld-seven.vercel.app/"
Expand Down Expand Up @@ -196,11 +232,11 @@ const Projects = () => {
using ternary operators and event handlers.
</p>
</div>
</div>
</motion.div>

{/* Forum Website */}

<div className="card md:w-[500px] w-84 md:h-[550px] h-[480px] rounded-sm bg-[#151030] shadow-lg">
<motion.div className="card md:w-[500px] w-84 md:h-[550px] h-[480px] rounded-sm bg-[#151030] shadow-lg">
<figure className="px-4 pt-4 md:px-6 md:pt-6">
<a href="https://forumwebsite.onrender.com" target="_blank">
<img
Expand Down Expand Up @@ -262,11 +298,11 @@ const Projects = () => {
Password: 1234
</p>
</div>
</div>
</motion.div>

{/* Amazon Affiliate */}

<div className="card md:w-[500px] w-84 md:h-[550px] h-[480px] rounded-sm bg-[#151030] shadow-lg">
<motion.div className="card md:w-[500px] w-84 md:h-[550px] h-[480px] rounded-sm bg-[#151030] shadow-lg">
<figure className="px-4 pt-4 md:px-6 md:pt-6">
<a
href="https://nekruzash.github.io/amazonaffiliate/"
Expand Down Expand Up @@ -321,11 +357,11 @@ const Projects = () => {
to rank higher in search results.
</p>
</div>
</div>
</motion.div>

{/* TicTacToe AI */}

<div className="card md:w-[500px] w-84 md:h-[550px] h-[480px] rounded-sm bg-[#151030] shadow-lg">
<motion.div className="card md:w-[500px] w-84 md:h-[550px] h-[480px] rounded-sm bg-[#151030] shadow-lg">
<figure className=" px-4 pt-4 md:px-6 md:pt-6">
<a
href="https://github.com/NekruzAsh/TicTacToeAI.git"
Expand Down Expand Up @@ -372,7 +408,7 @@ const Projects = () => {
for AI decision-making, considering different possible outcomes.
</p>
</div>
</div>
</motion.div>
</div>
</div>
</div>
Expand Down
57 changes: 47 additions & 10 deletions app/components/main.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,21 @@
"use client";
import React from "react";
import Link from "next/link";
import { motion } from "framer-motion";

import "../globals.css";

const main = () => {
const textVariants = {
hidden: { opacity: 0 },
visible: { opacity: 1, transition: { duration: 3 } },
};

const lineVariants = {
hidden: { opacity: 0, x: -200 },
visible: { opacity: 1, x: 0, transition: { duration: 1.5 } },
};

return (
<div
id="home"
Expand All @@ -16,32 +28,57 @@ const main = () => {
width="100%"
height="100%"
></iframe>
<div className=" bg-[#050817] bg-opacity-70 w-full h-full mx-auto p-4 flex justify-center items-center z-20 relative">
<div className=" bg-[#050817] bg-opacity-50 w-full h-full mx-auto p-4 flex justify-center items-center z-20 relative">
<div className="text-left mb-20">
<p className="text-[#64feda] text-[22px]">Hi, my name is</p>
<h1 className="py-4 md:text-[60px] text-[#e8ddff] font-bold">
<motion.p
className="text-[#64feda] text-[22px]"
initial="hidden"
animate="visible"
variants={textVariants}
>
Hi, my name is
</motion.p>
<motion.h1
className="py-4 md:text-[60px] text-[#e8ddff] font-bold"
initial="hidden"
animate="visible"
variants={textVariants}
>
Nekruz Ashrapov.
</h1>
<h1 className="md:text-[50px] text-[30px] text-[#aba6c4]">
</motion.h1>
<motion.h1
className="md:text-[50px] text-[30px] text-[#aba6c4]"
initial="hidden"
animate="visible"
variants={lineVariants}
>
I'm a Software Developer from New York.
</h1>
</motion.h1>

<div className="flex items-center mt-8 md:mt-12">
<a
<motion.a
href="https://github.com/NekruzAsh"
target="_blank"
className="button text-lg"
initial="hidden"
animate="visible"
variants={textVariants}
>
Check out my GitHub!
</a>
</motion.a>
</div>
<div className="flex flex-col transform translate-y-[200%] md:translate-y-[270%]">
<div className="scroll-button-wrapper">
<motion.div
className="scroll-button-wrapper"
initial="hidden"
animate="visible"
variants={textVariants}
>
<a href="/#about">
<div className="scroll-button"></div>
<div className="scroll-txt"></div>
</a>
</div>
</motion.div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit ca88bea

Please sign in to comment.