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 { useEffect, useRef, useState } from "react";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
import { DepthMap } from "./DepthMap";
|
import { DepthMap } from "./DepthMap";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
export function TempPlaceholder() {
|
export function TempPlaceholder() {
|
||||||
const titleRef = useRef<HTMLHeadingElement | null>(null);
|
const titleRef = useRef<HTMLHeadingElement | null>(null);
|
||||||
@ -16,6 +17,8 @@ export function TempPlaceholder() {
|
|||||||
const baseBioFontSizeRef = useRef<number | null>(null);
|
const baseBioFontSizeRef = useRef<number | null>(null);
|
||||||
const [isEasterEggOpen, setIsEasterEggOpen] = useState(false);
|
const [isEasterEggOpen, setIsEasterEggOpen] = useState(false);
|
||||||
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
|
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
|
||||||
|
const [isPigeonEggOpen, setIsPigeonEggOpen] = useState(false);
|
||||||
|
const [pigeonMousePosition, setPigeonMousePosition] = useState({ x: 0, y: 0 });
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const measure = () => {
|
const measure = () => {
|
||||||
@ -180,6 +183,59 @@ export function TempPlaceholder() {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</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">
|
<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
|
<strong>Who we are:</strong> artists and technical people, we're
|
||||||
better at VFX than we are at web design, I promise.
|
better at VFX than we are at web design, I promise.
|
||||||
@ -307,6 +363,16 @@ export function TempPlaceholder() {
|
|||||||
help@biohazardvfx.com
|
help@biohazardvfx.com
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -5,7 +5,7 @@ export function middleware(request: NextRequest) {
|
|||||||
const { pathname } = request.nextUrl;
|
const { pathname } = request.nextUrl;
|
||||||
|
|
||||||
// Allow only the home page and Next.js internal routes
|
// 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();
|
return NextResponse.next();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user