update age :(
This commit is contained in:
+107
-76
@@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Flashlight, FlashlightOff, Twitter, Github } from 'lucide-react'
|
||||
import CordycepsImage from './assets/cordyceps.png'
|
||||
import { Flashlight, FlashlightOff, Twitter, Github } from "lucide-react";
|
||||
import CordycepsImage from "./assets/cordyceps.png";
|
||||
import MusicComponent from "./components/MusicComponent";
|
||||
import TVComponent from "./components/TVComponent";
|
||||
|
||||
@@ -13,8 +13,7 @@ export default function MouseFlashlight() {
|
||||
// Detect touch device on component mount
|
||||
useEffect(() => {
|
||||
const isTouchCapable =
|
||||
"ontouchstart" in window ||
|
||||
navigator.maxTouchPoints > 0;
|
||||
"ontouchstart" in window || navigator.maxTouchPoints > 0;
|
||||
|
||||
setIsTouchDevice(isTouchCapable);
|
||||
}, []);
|
||||
@@ -95,7 +94,9 @@ export default function MouseFlashlight() {
|
||||
window.addEventListener("mouseleave", windowMouseLeave);
|
||||
|
||||
// Add mobile event listeners
|
||||
window.addEventListener("touchstart", windowTouchStart, { passive: false });
|
||||
window.addEventListener("touchstart", windowTouchStart, {
|
||||
passive: false,
|
||||
});
|
||||
window.addEventListener("touchmove", windowTouchMove, { passive: false });
|
||||
window.addEventListener("touchend", windowTouchEnd);
|
||||
} else {
|
||||
@@ -129,84 +130,114 @@ export default function MouseFlashlight() {
|
||||
onTouchEnd={handleTouchEnd}
|
||||
>
|
||||
<div className="min-h-screen flex flex-col justify-center items-center mx-auto">
|
||||
<div className="border border-white border-solid p-2 rounded-lg w-full sm:w-[500px] mb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="ml-2" onClick={() => setIsFlashlightEnabled(!isFlashlightEnabled)}>
|
||||
{
|
||||
isFlashlightEnabled ? <Flashlight /> : <FlashlightOff />
|
||||
}
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold">welcome !</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border border-white border-solid rounded-lg w-full sm:w-[500px]">
|
||||
<div className="grid grid-cols-1 xs:grid-cols-2 p-2">
|
||||
<div className="mx-auto">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold italic opacity-95 inline">alex, 17</h1>
|
||||
<img src="https://storage.alexav.gg/content/picturev2.jpg" width="150" className="rounded-md" alt="Profile" />
|
||||
|
||||
<div className="pt-2">
|
||||
<MusicComponent />
|
||||
<a href="https://last.fm/user/lulawex" target="_blank" className="hover:underline w-fit opacity-50">
|
||||
powered by last.fm
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-auto">
|
||||
<h1 className="font-bold text-2xl italic">what i do</h1>
|
||||
<p>
|
||||
qa @ <a href="https://medal.tv" target="_blank" rel="noopener noreferrer" className="hover:underline">medal.tv</a>, game, code
|
||||
</p>
|
||||
|
||||
<h1 className="font-bold text-2xl italic">obsessed with</h1>
|
||||
<p>
|
||||
tlou, twd, rdr
|
||||
</p>
|
||||
|
||||
<h1 className="font-bold text-2xl italic">watching</h1>
|
||||
<TVComponent />
|
||||
|
||||
|
||||
<h1 className="font-bold text-2xl italic">socials</h1>
|
||||
<div className="space-x-2">
|
||||
<a href="https://twitter.com/carlgrimesdupe" target="_blank" rel="noopener noreferrer">
|
||||
<Twitter className="inline" />
|
||||
</a>
|
||||
<a href="https://github.com/azpha" target="_blank" rel="noopener noreferrer">
|
||||
<Github className="inline" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border border-white border-solid p-2 rounded-lg w-full sm:w-[500px] mb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div
|
||||
className="ml-2"
|
||||
onClick={() => setIsFlashlightEnabled(!isFlashlightEnabled)}
|
||||
>
|
||||
{isFlashlightEnabled ? <Flashlight /> : <FlashlightOff />}
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold">welcome !</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border border-white border-solid rounded-lg w-full sm:w-[500px]">
|
||||
<div className="grid grid-cols-1 xs:grid-cols-2 p-2">
|
||||
<div className="mx-auto">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold italic opacity-95 inline">
|
||||
alex, 18
|
||||
</h1>
|
||||
<img
|
||||
src="https://storage.alexav.gg/content/picturev2.jpg"
|
||||
width="150"
|
||||
className="rounded-md"
|
||||
alt="Profile"
|
||||
/>
|
||||
|
||||
<div className="pt-2">
|
||||
<MusicComponent />
|
||||
<a
|
||||
href="https://last.fm/user/lulawex"
|
||||
target="_blank"
|
||||
className="hover:underline w-fit opacity-50"
|
||||
>
|
||||
powered by last.fm
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-auto">
|
||||
<h1 className="font-bold text-2xl italic">what i do</h1>
|
||||
<p>
|
||||
qa @{" "}
|
||||
<a
|
||||
href="https://medal.tv"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:underline"
|
||||
>
|
||||
medal.tv
|
||||
</a>
|
||||
, game, code
|
||||
</p>
|
||||
|
||||
<h1 className="font-bold text-2xl italic">obsessed with</h1>
|
||||
<p>tlou, twd, rdr</p>
|
||||
|
||||
<h1 className="font-bold text-2xl italic">watching</h1>
|
||||
<TVComponent />
|
||||
|
||||
<h1 className="font-bold text-2xl italic">socials</h1>
|
||||
<div className="space-x-2">
|
||||
<a
|
||||
href="https://twitter.com/carlgrimesdupe"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Twitter className="inline" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/azpha"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Github className="inline" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isFlashlightEnabled && (
|
||||
<>
|
||||
<div
|
||||
className={`absolute inset-0 bg-black pointer-events-none transition-opacity duration-300 ${
|
||||
isActive ? "opacity-95" : "opacity-0"
|
||||
}`}
|
||||
style={{
|
||||
maskImage: `radial-gradient(circle ${isTouchDevice ? "12rem" : "8rem"} at ${pointerPosition.x}px ${pointerPosition.y}px, transparent 0%, black 100%)`,
|
||||
WebkitMaskImage: `radial-gradient(circle ${isTouchDevice ? "12rem" : "8rem"} at ${pointerPosition.x}px ${pointerPosition.y}px, transparent 0%, black 100%)`,
|
||||
}}
|
||||
<div
|
||||
className={`absolute inset-0 bg-black pointer-events-none transition-opacity duration-300 ${
|
||||
isActive ? "opacity-95" : "opacity-0"
|
||||
}`}
|
||||
style={{
|
||||
maskImage: `radial-gradient(circle ${isTouchDevice ? "12rem" : "8rem"} at ${pointerPosition.x}px ${pointerPosition.y}px, transparent 0%, black 100%)`,
|
||||
WebkitMaskImage: `radial-gradient(circle ${isTouchDevice ? "12rem" : "8rem"} at ${pointerPosition.x}px ${pointerPosition.y}px, transparent 0%, black 100%)`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none z-20"
|
||||
style={{
|
||||
maskImage: `radial-gradient(circle ${isTouchDevice ? "12rem" : "8rem"} at ${pointerPosition.x}px ${pointerPosition.y}px, black 0%, transparent 100%)`,
|
||||
WebkitMaskImage: `radial-gradient(circle ${isTouchDevice ? "12rem" : "8rem"} at ${pointerPosition.x}px ${pointerPosition.y}px, black 0%, transparent 100%)`,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={CordycepsImage}
|
||||
className="absolute bottom-0"
|
||||
alt="Cordyceps"
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none z-20"
|
||||
style={{
|
||||
maskImage: `radial-gradient(circle ${isTouchDevice ? "12rem" : "8rem"} at ${pointerPosition.x}px ${pointerPosition.y}px, black 0%, transparent 100%)`,
|
||||
WebkitMaskImage: `radial-gradient(circle ${isTouchDevice ? "12rem" : "8rem"} at ${pointerPosition.x}px ${pointerPosition.y}px, black 0%, transparent 100%)`,
|
||||
}}
|
||||
>
|
||||
<img src={CordycepsImage} className="absolute bottom-0" alt="Cordyceps" />
|
||||
</div>
|
||||
<audio loop autoPlay={true} src={"/clicker-sounds.mp3"} />
|
||||
</div>
|
||||
<audio loop autoPlay={true} src={"/clicker-sounds.mp3"} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user