Back

Version 26

8/26/2024
/**
* 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);
csl_-homepage.web.val.run
Updated: August 26, 2024