alex/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix responsiveness, fix scrolling text

Browse Source
This commit is contained in:
Alex Frantz
2026-01-02 17:22:15 -05:00
parent c67b78a71d
commit a35ae89e4d
9 changed files with 34 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FantasyStatus.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export default function FantasyStatus() {
}, []);
return (
<div className="border border-white border-solid rounded-lg w-full sm:w-[500px] p-2">
<div className="border border-white border-solid rounded-lg w-full p-2">
<div className="mb-4 space-y-4">
<a
href="https://sleeper.com/leagues/1263620000418119680/matchup"
src/components/Overlay.tsx
-9
View File
@@ -8,15 +8,6 @@ export default function Overlay({
onClose: () => void;
}) {
return (
// <div onClick={onClose} className="fixed bg-black/50">
// <p
// onClick={onClose}
// className="absolute text-2xl font-bold top-4 right-4 bg-white text-black rounded-full p-2"
// >
// X
// </p>
// {children}
// </div>
<div onClick={onClose} className="fixed bg-black/50 w-full h-full z-1">
{children}
</div>
src/components/ScrollingText.tsx
-69
View File
@@ -1,69 +0,0 @@
import { useEffect, useRef } from "react";
const ScrollingText = ({
speed = 0.5,
size = "37",
text,
}: {
speed?: number;
size?: string;
text: string;
}) => {
const scrollContainerRef = useRef<HTMLDivElement>(null);
const contentRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const scrollContainer = scrollContainerRef.current;
const contentElement = contentRef.current;
if (!scrollContainer || !contentElement) return;
// Create a clone of the content element
const clone = contentElement.cloneNode(true) as HTMLDivElement;
scrollContainer.appendChild(clone);
let animationId: number;
let scrollPosition = 0;
const animate = () => {
if (!scrollContainer || !contentElement) return;
// Increment scroll position based on speed
scrollPosition += speed;
// Reset position when first element is scrolled out of view
if (scrollPosition >= contentElement.offsetWidth) {
scrollPosition = 0;
}
// Apply scroll position
scrollContainer.scrollLeft = scrollPosition;
animationId = requestAnimationFrame(animate);
};
animationId = requestAnimationFrame(animate);
return () => {
cancelAnimationFrame(animationId);
};
}, [speed, text]);
if (text) {
return (
<div
ref={scrollContainerRef}
className={`w-${size} overflow-hidden rounded-lg whitespace-nowrap`}
>
<div ref={contentRef} className="inline-block">
&nbsp;&nbsp;
<span className="text-xl font-medium text-white hover:underline">
{text}
</span>
</div>
</div>
);
}
};
export default ScrollingText;
src/components/info/MusicComponent.tsx
+16 -7
View File
@@ -1,5 +1,4 @@
import { useState, useEffect } from "react";
import ScrollingText from "../ScrollingText";
import type { LastFMMusicObject } from "../../utils/types";
export default function MusicComponent() {
@@ -28,13 +27,23 @@ export default function MusicComponent() {
if (music) {
return (
<div className="flex align-middle">
<img width="50" src={music.images[1]?.url} />
<div className="pl-2 max-w-25">
<ScrollingText size="24" speed={0.1} text={music.title} />
<p className="truncate">{music.artist}</p>
<a href="https://last.fm/user/lulawex" target="_blank">
<div className="flex flex-col">
<div className="flex align-middle">
<img width="50" src={music.images[1]?.url} />
<div className="pl-2 max-w-25">
<div className="overflow-hidden whitespace-nowrap">
<div className="inline-block animate-scroll-left">
<p>{music.title}</p>
</div>
</div>
<p className="truncate">{music.artist}</p>
</div>
</div>
<p className="hover:underline w-fit opacity-50">powered by last.fm</p>
</div>
</div>
</a>
);
} else {
if (failedFetch) {
src/components/modules/CountdownModule.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export default function CountdownModule() {
}, []);
return (
<div className="border border-white bg-blue-800 border-solid rounded-lg w-full sm:w-[500px] mb-4">
<div className="border border-white bg-blue-800 border-solid rounded-lg w-full mb-4">
<div className="flex items-center justify-between p-2">
<img
onClick={() => {
src/components/modules/InfoModule.tsx
+2 -9
View File
@@ -5,7 +5,7 @@ export default function InfoModule() {
return (
<div className="border border-white border-solid rounded-lg p-2">
<div className="flex flex-wrap justify-between p-2 space-y-2">
<div>
<div className="space-y-2">
<h1 className="text-2xl font-bold italic opacity-95">alex, 18</h1>
<img
src="https://storage.alexav.gg/content/6d87f5ac-e7f0-413c-84a6-6838e590b7d9.png"
@@ -14,13 +14,6 @@ export default function InfoModule() {
/>
<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>
@@ -38,7 +31,7 @@ export default function InfoModule() {
, game, code
</p>
<h1
className="italic opacity-50 font-semibold underline"
className="italic opacity-50 font-semibold select-text underline"
onClick={() => navigator.clipboard.writeText("alex@vierfrantz.com")}
>
alex@vierfrantz.com
src/components/modules/ScoreModule.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export default function ScoreModule({ type }: { type: "sabres" | "bills" }) {
}, []);
return (
<div className="border border-white border-solid rounded-lg w-full sm:w-[500px] mb-4">
<div className="border border-white border-solid rounded-lg w-full mb-4">
<div className="flex justify-between">
<div>
<img width="100" className="p-4" src={IMAGES[type]} />