update age :(
This commit is contained in:
+107
-76
@@ -1,6 +1,6 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { Flashlight, FlashlightOff, Twitter, Github } from 'lucide-react'
|
import { Flashlight, FlashlightOff, Twitter, Github } from "lucide-react";
|
||||||
import CordycepsImage from './assets/cordyceps.png'
|
import CordycepsImage from "./assets/cordyceps.png";
|
||||||
import MusicComponent from "./components/MusicComponent";
|
import MusicComponent from "./components/MusicComponent";
|
||||||
import TVComponent from "./components/TVComponent";
|
import TVComponent from "./components/TVComponent";
|
||||||
|
|
||||||
@@ -13,8 +13,7 @@ export default function MouseFlashlight() {
|
|||||||
// Detect touch device on component mount
|
// Detect touch device on component mount
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const isTouchCapable =
|
const isTouchCapable =
|
||||||
"ontouchstart" in window ||
|
"ontouchstart" in window || navigator.maxTouchPoints > 0;
|
||||||
navigator.maxTouchPoints > 0;
|
|
||||||
|
|
||||||
setIsTouchDevice(isTouchCapable);
|
setIsTouchDevice(isTouchCapable);
|
||||||
}, []);
|
}, []);
|
||||||
@@ -95,7 +94,9 @@ export default function MouseFlashlight() {
|
|||||||
window.addEventListener("mouseleave", windowMouseLeave);
|
window.addEventListener("mouseleave", windowMouseLeave);
|
||||||
|
|
||||||
// Add mobile event listeners
|
// Add mobile event listeners
|
||||||
window.addEventListener("touchstart", windowTouchStart, { passive: false });
|
window.addEventListener("touchstart", windowTouchStart, {
|
||||||
|
passive: false,
|
||||||
|
});
|
||||||
window.addEventListener("touchmove", windowTouchMove, { passive: false });
|
window.addEventListener("touchmove", windowTouchMove, { passive: false });
|
||||||
window.addEventListener("touchend", windowTouchEnd);
|
window.addEventListener("touchend", windowTouchEnd);
|
||||||
} else {
|
} else {
|
||||||
@@ -129,84 +130,114 @@ export default function MouseFlashlight() {
|
|||||||
onTouchEnd={handleTouchEnd}
|
onTouchEnd={handleTouchEnd}
|
||||||
>
|
>
|
||||||
<div className="min-h-screen flex flex-col justify-center items-center mx-auto">
|
<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="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="flex items-center justify-between">
|
||||||
<div className="ml-2" onClick={() => setIsFlashlightEnabled(!isFlashlightEnabled)}>
|
<div
|
||||||
{
|
className="ml-2"
|
||||||
isFlashlightEnabled ? <Flashlight /> : <FlashlightOff />
|
onClick={() => setIsFlashlightEnabled(!isFlashlightEnabled)}
|
||||||
}
|
>
|
||||||
</div>
|
{isFlashlightEnabled ? <Flashlight /> : <FlashlightOff />}
|
||||||
<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>
|
</div>
|
||||||
|
<h1 className="text-2xl font-bold">welcome !</h1>
|
||||||
|
</div>
|
||||||
</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 && (
|
{isFlashlightEnabled && (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className={`absolute inset-0 bg-black pointer-events-none transition-opacity duration-300 ${
|
className={`absolute inset-0 bg-black pointer-events-none transition-opacity duration-300 ${
|
||||||
isActive ? "opacity-95" : "opacity-0"
|
isActive ? "opacity-95" : "opacity-0"
|
||||||
}`}
|
}`}
|
||||||
style={{
|
style={{
|
||||||
maskImage: `radial-gradient(circle ${isTouchDevice ? "12rem" : "8rem"} at ${pointerPosition.x}px ${pointerPosition.y}px, transparent 0%, black 100%)`,
|
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%)`,
|
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
|
</div>
|
||||||
className="absolute inset-0 pointer-events-none z-20"
|
<audio loop autoPlay={true} src={"/clicker-sounds.mp3"} />
|
||||||
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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user