Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-14 08:42:08 +10:00
Code Issues Packages Projects Releases Wiki Activity

added entry animation to app

Browse Source
This commit is contained in:
Amruth Pillai
2020-03-27 18:04:26 +05:30
parent 980526ffbb
commit d3c6b23564
6 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -5544,9 +5544,9 @@
}
},
"eslint-plugin-react-hooks": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.5.1.tgz",
"integrity": "sha512-Y2c4b55R+6ZzwtTppKwSmK/Kar8AdLiC2f9NADCuxbcTgPPg41Gyqa6b9GppgXSvCtkRw43ZE86CT5sejKC6/g==",
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-3.0.0.tgz",
"integrity": "sha512-EjxTHxjLKIBWFgDJdhKKzLh5q+vjTFrqNZX36uIxWS4OfyXe5DawqPj3U5qeJ1ngLwatjzQnmR0Lz0J0YH3kxw==",
"dev": true
},
"eslint-scope": {

4
package.json
View File

@ -52,8 +52,8 @@
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.1",
"eslint-plugin-react-hooks": "^3.0.0",
"postcss-cli": "^7.1.0",
"tailwindcss": "^1.2.0"
}
}
}

4
public/index.html
View File

@ -25,9 +25,13 @@
<title>Reactive Resume</title>
<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>

6
src/components/App/App.js
View File

@ -38,7 +38,11 @@ const App = () => {
<LeftSidebar />
<div className="z-0 h-screen col-span-3 flex justify-center items-center overflow-scroll">
<div id="page" className="p-10 my-auto shadow-2xl">
<div
id="page"
className="animated fadeIn p-10 my-auto shadow-2xl"
style={{ animationDelay: '500ms' }}
>
{renderTemplate()}
</div>
</div>

4
src/components/LeftSidebar/LeftSidebar.js
View File

@ -31,7 +31,7 @@ const LeftSidebar = () => {
const { state, dispatch } = context;
const { data } = state;
const [currentTab, setCurrentTab] = useState('Languages');
const [currentTab, setCurrentTab] = useState('Profile');
const onChange = (key, value) => {
dispatch({
type: 'on_input',
@ -74,7 +74,7 @@ const LeftSidebar = () => {
return (
<div
id="leftSidebar"
className="z-10 py-6 h-screen bg-white col-span-1 shadow-2xl overflow-y-scroll"
className="animated slideInLeft z-10 py-6 h-screen bg-white col-span-1 shadow-2xl overflow-y-scroll"
>
<TabBar tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
<div className="px-6">{renderTabs()}</div>

2
src/components/RightSidebar/RightSidebar.js
View File

@ -45,7 +45,7 @@ const RightSidebar = () => {
return (
<div
id="rightSidebar"
className="z-10 py-6 h-screen bg-white col-span-1 shadow-2xl overflow-y-scroll"
className="animated slideInRight z-10 py-6 h-screen bg-white col-span-1 shadow-2xl overflow-y-scroll"
>
<TabBar tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
<div className="px-6">{renderTabs()}</div>