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

logo concept

Browse Source
This commit is contained in:
Mikayla Dobson
2023-06-01 19:52:50 -05:00
parent 45c7f96067
commit 9636e9cc05
2 changed files with 96 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
app/logo/page.tsx Normal file
View File

@@ -0,0 +1,77 @@
'use client'
import { useEffect, useState } from "react";
import { DefaultColors } from "tailwindcss/types/generated/colors";
const LOOPING_ENABLED_ON_SECOND_LOGO = true;
const SHIFT_INTERVAL = 3000;
export default function LogoPage() {
const [circleColors, setCircleColors] = useState<{ [key: string]: typeof colorList[number] | "" }>({
firstColor: "",
secondColor: "",
thirdColor: "",
})
const colorList: (`bg-${keyof DefaultColors}` | `bg-${keyof DefaultColors}-${string}`)[] = [
"bg-purple-400",
"bg-purple-700",
"bg-sky-400",
"bg-sky-700",
"bg-blue-400",
"bg-pink-400",
"bg-pink-700",
];
function handleHover() {
const firstColor = colorList[Math.floor(Math.random() * colorList.length | 0)]
const secondColor = colorList[Math.floor(Math.random() * colorList.length | 0)]
const thirdColor = colorList[Math.floor(Math.random() * colorList.length | 0)]
setCircleColors({ firstColor, secondColor, thirdColor });
}
useEffect(() => handleHover, []);
useEffect(() => {
if (LOOPING_ENABLED_ON_SECOND_LOGO) {
const interval = setInterval(() => {
handleHover();
}, SHIFT_INTERVAL);
return () => clearInterval(interval);
}
}, [])
return (
<main>
<h1>Logo</h1>
<div id="venn-diagram-logo-container" className="flex w-full h-auto justify-center">
<div onMouseEnter={handleHover} onMouseOut={handleHover} className={`absolute flex flex-col z-40 items-center justify-center animate-logo-throw-left h-[150px] w-[150px] bg-opacity-75 ${circleColors.firstColor} transition-colors duration-[5000ms] ease rounded-full`}>
<p className="text-6xl font-bold opacity-100">M</p>
</div>
<div onMouseEnter={handleHover} onMouseOut={handleHover} className={`absolute flex flex-col items-center justify-center animate-logo-throw-down h-[150px] w-[150px] bg-opacity-75 ${circleColors.secondColor} transition-colors duration-[5000ms] ease rounded-full`}>
<p className="text-6xl font-bold opacity-100 z-50">C</p>
</div>
<div onMouseEnter={handleHover} onMouseOut={handleHover} className={`absolute flex flex-col items-center justify-center animate-logo-throw-right h-[150px] w-[150px] bg-opacity-75 ${circleColors.thirdColor} transition-colors duration-[5000ms] ease rounded-full`}>
<p className="text-6xl font-bold opacity-100">D</p>
</div>
</div>
<div id="inline-logo-container" className="flex w-full h-auto justify-center mt-[25rem]">
<div onMouseEnter={handleHover} onMouseOut={handleHover} className={`flex flex-col items-center justify-center h-[150px] w-[150px] bg-opacity-75 ${circleColors.firstColor} transition-colors duration-[5000ms] rounded-full`}>
<p className="text-6xl font-bold opacity-100">M</p>
</div>
<div onMouseEnter={handleHover} onMouseOut={handleHover} className={`flex flex-col -ml-8 items-center justify-center h-[150px] w-[150px] bg-opacity-75 ${circleColors.secondColor} transition-colors duration-[5000ms] rounded-full`}>
<p className="text-6xl font-bold opacity-100">C</p>
</div>
<div onMouseEnter={handleHover} onMouseOut={handleHover} className={`flex flex-col -ml-8 items-center justify-center h-[150px] w-[150px] bg-opacity-75 ${circleColors.thirdColor} transition-colors duration-[5000ms] rounded-full`}>
<p className="text-6xl font-bold opacity-100">D</p>
</div>
</div>
</main>
)
}

19
tailwind.config.js
View File

@@ -12,6 +12,25 @@ module.exports = {
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
animation: {
'logo-throw-left': 'logoThrowLeft 1s ease forwards',
'logo-throw-right': 'logoThrowRight 1s ease forwards',
'logo-throw-down': 'logoThrowDown 1s ease forwards',
},
keyframes: {
logoThrowLeft: {
'0%': { transform: 'translateX(0)'},
'100%': { transform: 'translateX(-56px)' }
},
logoThrowRight: {
'0%': { transform: 'translateX(0)'},
'100%': { transform: 'translateX(56px)' }
},
logoThrowDown: {
'0%': { transform: 'translateY(0)'},
'100%': { transform: 'translateY(80px)' }
},
}
},
},
plugins: [],