innocuous-symmetry/mikayla-dobson-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved animation function

Browse Source
This commit is contained in:
Mikayla Dobson
2023-06-12 08:52:08 -05:00
parent 45fce4eaf2
commit 5c8c5645c0
2 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/Navbar/index.tsx
View File

@@ -78,15 +78,15 @@ export default function Navbar() {
<InlineLogo customHookInstance={navbarColorShift} /> <InlineLogo customHookInstance={navbarColorShift} />
</Link> </Link>
<Link href="/about" onMouseOver={() => mouseOver('about')} onMouseOut={() => mouseOut('about')} className={`${colors.firstColor} rounded-lg transition-colors ease-out duration-${hoverState.about ? '[5000ms]' : '0'}`}> <Link href="/about" onMouseOver={() => mouseOver('about')} onMouseOut={() => mouseOut('about')} className={`${colors.firstColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.about ? '[5000ms]' : '0'}`}>
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>About</p> <p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>About</p>
</Link> </Link>
<Link href="/projects" onMouseOver={() => mouseOver("projects")} onMouseOut={() => mouseOut('projects')} className={`${colors.secondColor} rounded-lg transition-colors ease-out duration-${hoverState.projects ? '[5000ms]' : '0'}`}> <Link href="/projects" onMouseOver={() => mouseOver("projects")} onMouseOut={() => mouseOut('projects')} className={`${colors.secondColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.projects ? '[5000ms]' : '0'}`}>
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 hover:border-opacity-75 uppercase border-white border-2 p-2 rounded-lg border-opacity-50'>Projects</p> <p className='text-lg text-white text-opacity-80 hover:text-opacity-100 hover:border-opacity-75 uppercase border-white border-2 p-2 rounded-lg border-opacity-50'>Projects</p>
</Link> </Link>
<Link href="/contact" onMouseOver={() => mouseOver('projects')} onMouseOut={() => mouseOut('projects')} className={`${colors.thirdColor} rounded-lg transition-colors ease-out duration-${hoverState.contact ? '[5000ms]' : '0'}`}> <Link href="/contact" onMouseOver={() => mouseOver('contact')} onMouseOut={() => mouseOut('contact')} className={`${colors.thirdColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.contact ? '[5000ms]' : '0'}`}>
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>Contact</p> <p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>Contact</p>
</Link> </Link>
</div> </div>

8
tailwind.config.js
View File

@@ -7,6 +7,9 @@ module.exports = {
], ],
theme: { theme: {
extend: { extend: {
transitionTimingFunction: {
'quick-start': 'cubic-bezier(.17,.67,0,.89)',
},
backgroundImage: { backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'gradient-conic':
@@ -16,8 +19,13 @@ module.exports = {
'logo-throw-left': 'logoThrowLeft 1s ease forwards', 'logo-throw-left': 'logoThrowLeft 1s ease forwards',
'logo-throw-right': 'logoThrowRight 1s ease forwards', 'logo-throw-right': 'logoThrowRight 1s ease forwards',
'logo-throw-down': 'logoThrowDown 1s ease forwards', 'logo-throw-down': 'logoThrowDown 1s ease forwards',
'fade-in': 'fadeIn 1s ease forwards',
}, },
keyframes: { keyframes: {
fadeIn: {
'0%': { opacity: 0 },
'100%': { opacity: 1 }
},
logoThrowLeft: { logoThrowLeft: {
'0%': { transform: 'translateX(0)'}, '0%': { transform: 'translateX(0)'},
'100%': { transform: 'translateX(-56px)' } '100%': { transform: 'translateX(-56px)' }