JohnCosta27/JohnTech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added animation to experience component

Browse Source
This commit is contained in:
JohnCosta27
2022-04-22 10:28:14 +01:00
parent eddb2c15a0
commit 408ef7f2f7
3 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -1,17 +1,14 @@
{ {
"name": "john.tech", "name": "john.tech",
"version": "1.0.0", "version": "1.0.0",
"description": "", "description": "Personal website",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"start": "webpack serve",
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview" "preview": "vite preview"
}, },
"keywords": [],
"author": "John Costa", "author": "John Costa",
"license": "ISC",
"devDependencies": { "devDependencies": {
"@vitejs/plugin-react": "^1.3.0", "@vitejs/plugin-react": "^1.3.0",
"autoprefixer": "^10.4.4", "autoprefixer": "^10.4.4",

2
src/components/pages/Front.page.jsx
View File

@ -18,7 +18,7 @@ import Experience from "../sections/Experience";
// Component // Component
//============================================================ //============================================================
const DELAY = 1000; const DELAY = 0;
const FrontPage = () => { const FrontPage = () => {
return ( return (

47
src/components/sections/Experience.jsx
View File

@ -1,11 +1,20 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import clsx from "clsx";
const experienceTitle = ["Real Tutor", "Tensorcrypt", "SSC Website"] const experienceTitle = ["Real Tutor", "Tensorcrypt", "SSC Website"];
const experience = ["Hello", "World", "!"]; const experience = ["Hello", "World", "!"];
const Experience = () => { const Experience = () => {
const [currentSection, setCurrentSection] = useState(0); const [currentSection, setCurrentSection] = useState(0);
useEffect(() => console.log(currentSection), [currentSection]); const [animationClasses, setAnimationClasses] = useState("opacity-100");
const changeText = (index) => {
setAnimationClasses("opacity-0");
setTimeout(() => {
setAnimationClasses("opacity-100");
setCurrentSection(index);
}, 250);
};
return ( return (
<div className="w-full flex flex-col justify-center items-center bg-frost-200 py-12"> <div className="w-full flex flex-col justify-center items-center bg-frost-200 py-12">
@ -22,45 +31,44 @@ const Experience = () => {
<div className="w-8 h-8 flex justify-center items-center"> <div className="w-8 h-8 flex justify-center items-center">
<div <div
className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all" className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all"
onClick={() => setCurrentSection(0)} onClick={() => changeText(0)}
></div> ></div>
</div> </div>
<div className="w-8 h-8 flex justify-center items-center"> <div className="w-8 h-8 flex justify-center items-center">
<div <div
className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all" className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all"
onClick={() => setCurrentSection(1)} onClick={() => changeText(1)}
></div> ></div>
</div> </div>
<div className="w-8 h-8 flex justify-center items-center"> <div className="w-8 h-8 flex justify-center items-center">
<div <div
className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all" className="w-4 h-4 bg-frost-200 rounded-full z-20 hover:w-6 hover:h-6 transition-all"
onClick={() => setCurrentSection(2)} onClick={() => changeText(2)}
></div> ></div>
</div> </div>
<div className="w-1 h-full bg-blue-500 absolute rounded-full"></div> <div className="w-1 h-full bg-blue-500 absolute rounded-full"></div>
</div> </div>
<div className="w-24 h-full flex flex-col justify-between"> <div className="w-24 h-full flex flex-col justify-between">
<div <div className="h-8 flex items-center">
className="h-8 flex items-center"
onClick={() => setCurrentSection(0)}
>
<p className="text-md text-snow-storm-300">14/04/2022</p> <p className="text-md text-snow-storm-300">14/04/2022</p>
</div> </div>
<div <div className="h-8 flex items-center">
className="h-8 flex items-center"
onClick={() => setCurrentSection(1)}
>
<p className="text-md text-snow-storm-300">14/04/2022</p> <p className="text-md text-snow-storm-300">14/04/2022</p>
</div> </div>
<div <div className="h-8 flex items-center">
className="h-8 flex items-center"
onClick={() => setCurrentSection(2)}
>
<p className="text-md text-snow-storm-300">14/04/2022</p> <p className="text-md text-snow-storm-300">14/04/2022</p>
</div> </div>
</div> </div>
<div className="w-full h-full p-4 flex flex-col items-center gap-2"> <div className={clsx("w-full h-full p-4 flex flex-col items-center")}>
<h1 className="text-2xl text-snow-storm-100">{experienceTitle[currentSection]}</h1> <div
className={clsx(
"w-full flex flex-col items-center transition-all",
animationClasses
)}
>
<h1 className="text-2xl text-snow-storm-100">
{experienceTitle[currentSection]}
</h1>
<p className="text-md text-snow-storm-100"> <p className="text-md text-snow-storm-100">
{experience[currentSection]} {experience[currentSection]}
</p> </p>
@ -68,6 +76,7 @@ const Experience = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
}; };
export default Experience; export default Experience;