Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-14 16:51:33 +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": { "eslint-plugin-react-hooks": {
"version": "2.5.1", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.5.1.tgz", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-3.0.0.tgz",
"integrity": "sha512-Y2c4b55R+6ZzwtTppKwSmK/Kar8AdLiC2f9NADCuxbcTgPPg41Gyqa6b9GppgXSvCtkRw43ZE86CT5sejKC6/g==", "integrity": "sha512-EjxTHxjLKIBWFgDJdhKKzLh5q+vjTFrqNZX36uIxWS4OfyXe5DawqPj3U5qeJ1ngLwatjzQnmR0Lz0J0YH3kxw==",
"dev": true "dev": true
}, },
"eslint-scope": { "eslint-scope": {

2
package.json
View File

@ -52,7 +52,7 @@
"eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2", "eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0", "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", "postcss-cli": "^7.1.0",
"tailwindcss": "^1.2.0" "tailwindcss": "^1.2.0"
} }

4
public/index.html
View File

@ -25,9 +25,13 @@
<title>Reactive Resume</title> <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 --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> <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" /> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head> </head>

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

@ -38,7 +38,11 @@ const App = () => {
<LeftSidebar /> <LeftSidebar />
<div className="z-0 h-screen col-span-3 flex justify-center items-center overflow-scroll"> <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()} {renderTemplate()}
</div> </div>
</div> </div>

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

@ -31,7 +31,7 @@ const LeftSidebar = () => {
const { state, dispatch } = context; const { state, dispatch } = context;
const { data } = state; const { data } = state;
const [currentTab, setCurrentTab] = useState('Languages'); const [currentTab, setCurrentTab] = useState('Profile');
const onChange = (key, value) => { const onChange = (key, value) => {
dispatch({ dispatch({
type: 'on_input', type: 'on_input',
@ -74,7 +74,7 @@ const LeftSidebar = () => {
return ( return (
<div <div
id="leftSidebar" 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} /> <TabBar tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
<div className="px-6">{renderTabs()}</div> <div className="px-6">{renderTabs()}</div>

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

@ -45,7 +45,7 @@ const RightSidebar = () => {
return ( return (
<div <div
id="rightSidebar" 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} /> <TabBar tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
<div className="px-6">{renderTabs()}</div> <div className="px-6">{renderTabs()}</div>