Web Site Building

Introduction

This is a page for capturing thing that are website related

Dark Mode

When looking at implementing this be aware there is system, light and dark usually. Only if you go incognito do does the get switched off. I think it is held in LocalStorage somewhere

Sites

Components

Aceternity is a good place for NextJS components. You get the code and can change the components yourself. [here]

Generating Gradients

Go here to generate your own gradient. [cssgradient

Tailwind I should know

I forget things and write them so I never need to remember again

h-screen is the screen
h-full is the container

Changing Flex Direction

So wanted to see how to do this dynamically. And finally settled on this. In this example it monitors to the child to be less than 50% and sets the flex direction appropiately based off isChildMoreThan50

    const containerRef = useRef<HTMLDivElement>(null);
    const childRef = useRef<HTMLDivElement>(null);

    const [isChildMoreThan50, setIsChildMoreThan50] = useState(false);
    const [childWidthPct, setChildWidthPct] = useState(0);

    const updateFlexDirection = () => {
        const container = containerRef.current;
        const child = childRef.current;

        if (!container || !child) return;

        const containerWidth = container.offsetWidth;
        const childWidth = child.offsetWidth;

        console.log("Container Width:", containerWidth);
        console.log("Child Width:", childWidth);

        // Update state based on size comparison
        setIsChildMoreThan50(childWidth > containerWidth * 0.5);
        setChildWidthPct((childWidth / containerWidth) * 100);
    };

    useEffect(() => {
        const resizeObserver = new ResizeObserver(() => {
            updateFlexDirection();
        });

        const container = containerRef.current;
        const child = childRef.current;

        if (container) resizeObserver.observe(container);
        if (child) resizeObserver.observe(child);

        // Initial calculation
        updateFlexDirection();

        // Cleanup
        return () => {
            resizeObserver.disconnect();
        };
    }, []);

Determining lg, md, sm

So this is done with copilot and here for reference

    // Detect screen size
    useEffect(() => {
        const mediaQuery = window.matchMedia("(max-width: 900px)"); // Tailwind's `sm` breakpoint
        const handleResize = () => setIsSmallScreen(mediaQuery.matches);

        // Set initial value
        handleResize();

        // Add event listener
        mediaQuery.addEventListener("change", handleResize);

        // Cleanup event listener
        return () => mediaQuery.removeEventListener("change", handleResize);
    }, []);

Lottie Buttons

Quite liked the lottie buttons but like most animation it will be boring once seen. Lottie waits for the state to be true.

    const [copied, setCopied] = useState<boolean>(false);

    const defaultOptions: Options = {
        loop: false,
        autoplay: false,
        animationData,
        rendererSettings: {
            preserveAspectRatio: "xMidYMid slice",
        },
    };

    return (

            <div className={`absolute -bottom-5 right-0 ${copied ? "block" : "block"}`}>
                <Lottie options={defaultOptions} isStopped={!copied} height={200} width={400} />
            </div>
...