/** * This script creates a minimalist homepage with a beautiful, animated gradient background. * It features a central business card for Carl Lange with a 3D flip animation on click. * The front of the card displays Carl's name and an animated subheading, while the back shows a humorous message and links. */ /** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const subheadings = [ "doing this for fun", "Donald Duck is my spirit animal", "🤙🤙🤙🤙🤙🤙🤙🤙", "talks a good game", "rather be playing tennis", "hey, this isn't a bouldering gym!", "should be outside", "an AI wrote these", ]; const [currentSubheading, setCurrentSubheading] = useState(0); const [isFlipped, setIsFlipped] = useState(false); useEffect(() => { // Shuffle the subheadings array for (let i = subheadings.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [subheadings[i], subheadings[j]] = [subheadings[j], subheadings[i]]; } const interval = setInterval(() => { setCurrentSubheading((prev) => (prev + 1) % subheadings.length); }, 3000); return () => clearInterval(interval); }, []); const handleClick = () => { setIsFlipped(!isFlipped); }; return (

e.stopPropagation()}>Carl Lange

{subheadings[currentSubheading]}

If I were a more interesting man, I'd have more links here

e.stopPropagation()}>toughsoles.ie e.stopPropagation()} > view source on val.town

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response( ` Carl Lange | redfloatplane.lol

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes float { 0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); } 25% { transform: translateY(-5px) rotateX(3deg) rotateY(4deg); } 75% { transform: translateY(5px) rotateX(-3deg) rotateY(-4deg); } } html, body { height: 100%; margin: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background: linear-gradient(-45deg, #ff6b6b, #4ecdc4, #45b7d1, #f7d794); background-size: 400% 400%; animation: gradientAnimation 15s ease infinite; color: #333; display: flex; justify-content: center; align-items: center; } .scene { perspective: 600px; } .card-container { animation: float 5s ease-in-out infinite; } .card { width: 300px; height: 180px; transition: transform 0.6s; transform-style: preserve-3d; cursor: pointer; position: relative; user-select: none; } .card.is-flipped { transform: rotateY(180deg); } .card__face { position: absolute; width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; transition: box-shadow 0.3s ease; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .card__face--front { background-color: rgba(255, 255, 255); } .card__face--back { background-color: rgba(255, 255, 255); transform: rotateY(180deg); } h1 { font-size: 2rem; margin-bottom: 0.5rem; } h1 a { color: #333; text-decoration: none; transition: color 0.3s ease; } h1 a:hover { color: #ff6b6b; } .animated-subheading { font-size: 1rem; font-weight: 300; height: 1.5em; margin: 0.5rem 0; opacity: 0.7; text-align: center; } .back-link { color: #333; text-decoration: none; font-size: 1rem; margin-top: 10px; transition: color 0.3s ease; } .back-link:hover { color: #ff6b6b; } .view-source { position: absolute; bottom: 5px; right: 5px; font-size: 0.5rem; color: #666; text-decoration: none; } .view-source:hover { text-decoration: underline; } `; export default server;