added no pigeon zone
This commit is contained in:
parent
94b9eeea15
commit
150f16a3de
@ -6,6 +6,7 @@ import { InstagramFeed } from "./InstagramFeed";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { DepthMap } from "./DepthMap";
|
||||
import Image from "next/image";
|
||||
|
||||
export function TempPlaceholder() {
|
||||
const titleRef = useRef<HTMLHeadingElement | null>(null);
|
||||
@ -16,6 +17,8 @@ export function TempPlaceholder() {
|
||||
const baseBioFontSizeRef = useRef<number | null>(null);
|
||||
const [isEasterEggOpen, setIsEasterEggOpen] = useState(false);
|
||||
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
|
||||
const [isPigeonEggOpen, setIsPigeonEggOpen] = useState(false);
|
||||
const [pigeonMousePosition, setPigeonMousePosition] = useState({ x: 0, y: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
const measure = () => {
|
||||
@ -180,6 +183,59 @@ export function TempPlaceholder() {
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<AnimatePresence>
|
||||
{isPigeonEggOpen && (
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="fixed inset-0 z-50 bg-black/80"
|
||||
onClick={() => setIsPigeonEggOpen(false)}
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.7, x: '-50%', y: '-50%' }}
|
||||
animate={{ opacity: 1, scale: 1, x: '-50%', y: '-50%' }}
|
||||
exit={{ opacity: 0, scale: 0.7, x: '-50%', y: '-50%' }}
|
||||
transition={{
|
||||
duration: 0.4,
|
||||
ease: [0.16, 1, 0.3, 1]
|
||||
}}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
left: pigeonMousePosition.x,
|
||||
top: pigeonMousePosition.y,
|
||||
}}
|
||||
className="z-50 w-[90vw] max-w-[400px]"
|
||||
onMouseLeave={() => setIsPigeonEggOpen(false)}
|
||||
>
|
||||
<div className="relative bg-black rounded-lg overflow-hidden shadow-2xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
delay: 0.1,
|
||||
ease: [0.16, 1, 0.3, 1]
|
||||
}}
|
||||
className="relative w-full"
|
||||
>
|
||||
<Image
|
||||
src="/no_pigeons_zone.gif"
|
||||
alt="No pigeons zone"
|
||||
width={400}
|
||||
height={400}
|
||||
className="w-full h-auto"
|
||||
unoptimized
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<p className="mb-6 md:mb-8 text-base sm:text-lg text-gray-300">
|
||||
<strong>Who we are:</strong> artists and technical people, we're
|
||||
better at VFX than we are at web design, I promise.
|
||||
@ -307,6 +363,16 @@ export function TempPlaceholder() {
|
||||
help@biohazardvfx.com
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p
|
||||
onClick={(e) => {
|
||||
setPigeonMousePosition({ x: e.clientX, y: e.clientY });
|
||||
setIsPigeonEggOpen(true);
|
||||
}}
|
||||
className="text-xs text-gray-600 mt-4 cursor-pointer hover:text-gray-500 transition-colors"
|
||||
>
|
||||
No pigeons allowed in this zone
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@ export function middleware(request: NextRequest) {
|
||||
const { pathname } = request.nextUrl;
|
||||
|
||||
// Allow only the home page and Next.js internal routes
|
||||
if (pathname === '/' || pathname.startsWith('/_next') || pathname.startsWith('/favicon.') || pathname === '/OLIVER.jpeg' || pathname === '/OLIVER_depth.jpeg') {
|
||||
if (pathname === '/' || pathname.startsWith('/_next') || pathname.startsWith('/favicon.') || pathname === '/OLIVER.jpeg' || pathname === '/OLIVER_depth.jpeg' || pathname === '/no_pigeons_zone.gif') {
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user