Search for a command to run...
Hey there!
I'm an electronics engineer who's dabbled in a bit of everything, including full-stack development and web3 technologies. I love building cool stuff and am always looking to connect with other like-minded professionals. When I'm not tinkering with new projects, you can find me scouring the internet for the latest and greatest in tech.
No comments yet. Be the first to comment.
I had a simple question: Why do websites load lots of individual images instead of stitching them into one giant image and cropping out the pieces they need? At first glance, an image atlas sounds g
for (i = 0; i < numberOfElements; i++) { doSomethingWith(element[i]); } This works, but isn't very elegant. The Ruby way is much more elegant. elements.each do |element| do_something_with(ele
I needed to benchmark my laptop for local AI workloads — how fast can it transcribe audio? What LLMs can it run? Rather than spend a weekend hacking at it manually, I paired with Claude Code and treat
I was 30 seconds away from running malware on my machine. The attack vector? A fake coding interview from a "legitimate" blockchain company. Here's how a sophisticated scam operation almost got me, and why every developer needs to read this. The Setu...
"Why do you keep smiling?" My friend's puzzled voice cut through the theater's surround sound as yet another jump scare filled the screen. I hadn't even realized I was doing it. There I was, grinning like an idiot while a demon wreaked havoc on scree...
IDK, just some cool btn hover animation.
yoinked it from stream elements landing page.
import { css } from "@emotion/css";
import { useState } from "react";
const number_of_internal_squares = 10;
/**
* Btn is a functional component that renders a button with hover effects.
*
* @param {Object} props - The properties passed to the component.
* @param {string} props.bg_color - The background color of the button.
* @param {string} props.text_color - The color of the text in the button.
* @param {string} props.text - The text displayed in the button.
* @param {number} props.width - The width of the button.
* @param {number} props.height - The height of the button.
*
* @returns {JSX.Element} The rendered button component.
*/
function Btn(props) {
const bg_color = props.bg_color;
const text_color = props.text_color;
const text = props.text;
const [is_hover, setIsHover] = useState(false);
return (
<a
className={css`
width: ${props.width};
height: ${props.height};
color: ${text_color};
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: all 0.2s;
:hover {
cursor: pointer;
background-color: #000;
}
`}
onMouseEnter={() => setIsHover(true)}
onMouseLeave={() => setIsHover(false)}
>
<div
className={css`
position: fixed;
top: 45%;
left: 50% - ${props.width / 2}px;
display: flex;
flex-direction: column;
z-index: 11;
`}
>
<div
className={css`
font-size: 1.75em;
font-weight: bold;
text-transform: uppercase;
font-family: "Work Sans", sans-serif;
`}
>
{text}
</div>
<div
className={css`
font-size: 0.5em;
margin-top: ${is_hover ? "0px" : "40px"};
height: ${is_hover ? "0px" : "auto"};
overflow: hidden;
transition: all 0.3s ease 0s;
`}
>
Some other desctiption
</div>
<div
className={css`
margin-top: ${is_hover ? "-10px" : "20px"};
font-size: 3em;
font-weight: bold;
`}
>
→
</div>
</div>
{/* DON'T PANIC, the below line is just the range() function in python. */}
{[...Array(number_of_internal_squares).keys()].map((i) => {
return (
<span
className={css`
display: block;
position: absolute;
inset: ${i * 3.5}%;
background-color: ${bg_color};
opacity: ${is_hover ? (i != 9 ? (i == 0 ? 0 : 0.25) : 1) : 1};
transition: opacity 0.3s ease 0s;
`}
></span>
);
})}
</a>
);
}
export default Btn;