initial commit
This commit is contained in:
Zacharias-Brohn
+565
@@ -0,0 +1,565 @@
|
||||
import "./App.css";
|
||||
import { useState } from "react";
|
||||
import Markdown from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
|
||||
// Components
|
||||
import {
|
||||
AnimatedBackground,
|
||||
ProjectThumb,
|
||||
CascadeItem,
|
||||
FadeContainer,
|
||||
ScrollArea,
|
||||
} from "./components";
|
||||
|
||||
// Hooks
|
||||
import {
|
||||
useSystemDarkMode,
|
||||
useGitHubReadme,
|
||||
useGitHubRepoImages,
|
||||
} from "./hooks";
|
||||
|
||||
// Data
|
||||
import { profile, featuredProjects, allProjects, skills } from "./data";
|
||||
|
||||
// Utils
|
||||
import { stripHtmlFromMarkdown } from "./utils";
|
||||
|
||||
export default function PortfolioAboveTheFold() {
|
||||
const [active, setActive] = useState<number | null>(null);
|
||||
const [displayedProject, setDisplayedProject] = useState<number | null>(
|
||||
null,
|
||||
);
|
||||
const [isContentVisible, setIsContentVisible] = useState(true);
|
||||
const isDark = useSystemDarkMode();
|
||||
|
||||
// Handle project selection with fade transition
|
||||
const handleProjectSelect = (projectId: number) => {
|
||||
if (projectId === active) return;
|
||||
|
||||
// Start fade out
|
||||
setIsContentVisible(false);
|
||||
|
||||
// After fade out completes, update the project and fade in
|
||||
setTimeout(() => {
|
||||
setActive(projectId);
|
||||
setDisplayedProject(projectId);
|
||||
// Small delay to ensure state is set before fading in
|
||||
requestAnimationFrame(() => {
|
||||
setIsContentVisible(true);
|
||||
});
|
||||
}, 200); // Match the fade-out duration
|
||||
};
|
||||
|
||||
// Handle closing with fade transition
|
||||
const handleClose = () => {
|
||||
setIsContentVisible(false);
|
||||
setTimeout(() => {
|
||||
setActive(null);
|
||||
setDisplayedProject(null);
|
||||
requestAnimationFrame(() => {
|
||||
setIsContentVisible(true);
|
||||
});
|
||||
}, 200);
|
||||
};
|
||||
|
||||
// Combine all projects for lookup
|
||||
const allProjectsList = [...featuredProjects, ...allProjects];
|
||||
|
||||
// Get all repo URLs for fetching images
|
||||
const allRepos = allProjectsList.map((p) => p.repo);
|
||||
|
||||
// Fetch README images for all repos (for thumbnails)
|
||||
const repoImages = useGitHubRepoImages(allRepos);
|
||||
|
||||
// Get the active project's repo
|
||||
const activeProject = active
|
||||
? allProjectsList.find((p) => p.id === active)
|
||||
: null;
|
||||
const activeRepo = activeProject?.repo || null;
|
||||
|
||||
// Fetch README from GitHub for the active project
|
||||
const {
|
||||
content: readmeContent,
|
||||
isLoading: readmeLoading,
|
||||
error: readmeError,
|
||||
image: readmeImage,
|
||||
} = useGitHubReadme(activeRepo);
|
||||
|
||||
return (
|
||||
<main className="h-screen w-full flex items-center justify-center p-6 overflow-hidden relative">
|
||||
<AnimatedBackground
|
||||
palette={activeProject?.palette}
|
||||
isDark={isDark}
|
||||
/>
|
||||
<section className="relative max-w-[1100px] w-full h-[88vh] bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm border border-white/60 dark:border-slate-700/60 rounded-2xl shadow-2xl p-6 grid grid-cols-2 gap-6 items-stretch">
|
||||
<ScrollArea className="min-h-0" scrollbarOffset={12}>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<p className="text-sm uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
Hello, I'm
|
||||
</p>
|
||||
<h1 className="mt-2 text-[clamp(22px,3.6vw,40px)] leading-tight font-semibold text-gray-900 dark:text-white">
|
||||
{profile.name}
|
||||
</h1>
|
||||
<p className="mt-1 text-[clamp(14px,1.6vw,18px)] text-gray-600 dark:text-gray-300">
|
||||
{profile.role} • {profile.location}
|
||||
</p>
|
||||
|
||||
<p className="mt-6 text-[clamp(13px,1.2vw,16px)] text-gray-700 dark:text-gray-300 max-w-[38ch]">
|
||||
{profile.blurb}
|
||||
</p>
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<a
|
||||
href={profile.cv}
|
||||
className="inline-flex items-center gap-2 rounded-md px-4 py-2 border border-gray-200 dark:border-slate-600 shadow-sm text-sm font-medium text-gray-900 dark:text-white hover:shadow hover:-translate-y-0.5 transition-transform"
|
||||
>
|
||||
Download CV
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={`mailto:${profile.email}`}
|
||||
className="inline-flex items-center gap-2 rounded-md px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 text-sm font-medium hover:opacity-95 transition-opacity"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-2">
|
||||
<h3 className="text-xs uppercase text-gray-500 dark:text-gray-400 tracking-wide">
|
||||
Featured projects
|
||||
</h3>
|
||||
|
||||
<div className="mt-3 grid grid-cols-2 gap-3">
|
||||
{featuredProjects.map((p) => {
|
||||
const isActive = active === p.id;
|
||||
|
||||
return (
|
||||
// Wrapper div creates the gradient border effect
|
||||
<div
|
||||
key={p.id}
|
||||
className="group relative rounded-lg p-[2px] transition-all duration-200 shadow-sm hover:shadow-md hover:-translate-y-0.5 bg-white dark:bg-slate-800"
|
||||
>
|
||||
{/* Gradient border layer - always present, opacity controlled */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 rounded-lg transition-opacity duration-300 pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: p.gradient,
|
||||
opacity: isActive ? 1 : 0,
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={() =>
|
||||
handleProjectSelect(p.id)
|
||||
}
|
||||
className={`relative flex flex-col w-full rounded-[6px] overflow-hidden
|
||||
bg-white dark:bg-slate-800
|
||||
focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500`}
|
||||
aria-expanded={isActive}
|
||||
type="button"
|
||||
>
|
||||
{/* Gradient overlay that covers the entire button; becomes visible on hover. */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-[6px]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
p.gradient,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Slight dark layer to insure text contrast when gradient is visible */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 bg-black/0 group-hover:bg-black/25 transition-colors duration-300 pointer-events-none rounded-[6px]"
|
||||
/>
|
||||
|
||||
{/* Image fills width */}
|
||||
<div className="relative z-10 w-full h-24 overflow-hidden">
|
||||
<ProjectThumb
|
||||
src={
|
||||
(p.repo &&
|
||||
repoImages[
|
||||
p.repo
|
||||
]) ||
|
||||
p.image
|
||||
}
|
||||
alt={p.title}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Text below image */}
|
||||
<div className="relative z-10 text-left p-2">
|
||||
<div className="text-sm font-medium transition-colors duration-200 text-gray-900 dark:text-white group-hover:text-white">
|
||||
{p.title}
|
||||
</div>
|
||||
<div className="text-xs transition-colors duration-200 text-gray-500 dark:text-gray-400 group-hover:text-gray-100 line-clamp-2">
|
||||
{p.desc}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<h3 className="mt-4 text-xs uppercase text-gray-500 dark:text-gray-400 tracking-wide">
|
||||
All projects
|
||||
</h3>
|
||||
|
||||
<div className="mt-3 grid grid-cols-2 gap-3">
|
||||
{allProjects.map((p) => {
|
||||
const isActive = active === p.id;
|
||||
|
||||
return (
|
||||
// Wrapper div creates the gradient border effect
|
||||
<div
|
||||
key={p.id}
|
||||
className="group relative rounded-lg p-[2px] transition-all duration-200 shadow-sm hover:shadow-md hover:-translate-y-0.5 bg-white dark:bg-slate-800"
|
||||
>
|
||||
{/* Gradient border layer - always present, opacity controlled */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 rounded-lg transition-opacity duration-300 pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: p.gradient,
|
||||
opacity: isActive ? 1 : 0,
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={() =>
|
||||
handleProjectSelect(p.id)
|
||||
}
|
||||
className={`relative flex flex-col w-full rounded-[6px] overflow-hidden
|
||||
bg-white dark:bg-slate-800
|
||||
focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500`}
|
||||
aria-expanded={isActive}
|
||||
type="button"
|
||||
>
|
||||
{/* Gradient overlay that covers the entire button; becomes visible on hover. */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-[6px]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
p.gradient,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Slight dark layer to insure text contrast when gradient is visible */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 bg-black/0 group-hover:bg-black/25 transition-colors duration-300 pointer-events-none rounded-[6px]"
|
||||
/>
|
||||
|
||||
{/* Image fills width */}
|
||||
<div className="relative z-10 w-full h-24 overflow-hidden">
|
||||
<ProjectThumb
|
||||
src={
|
||||
(p.repo &&
|
||||
repoImages[
|
||||
p.repo
|
||||
]) ||
|
||||
p.image
|
||||
}
|
||||
alt={p.title}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Text below image */}
|
||||
<div className="relative z-10 text-left p-2">
|
||||
<div className="text-sm font-medium transition-colors duration-200 text-gray-900 dark:text-white group-hover:text-white">
|
||||
{p.title}
|
||||
</div>
|
||||
<div className="text-xs transition-colors duration-200 text-gray-500 dark:text-gray-400 group-hover:text-gray-100 line-clamp-2">
|
||||
{p.desc}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<div className="flex flex-col gap-4 min-h-0">
|
||||
<div className="flex-1 bg-white dark:bg-slate-800 rounded-lg border border-gray-100 dark:border-slate-700 overflow-hidden">
|
||||
<div className="w-full h-full flex items-center justify-center relative">
|
||||
{/* Project detail view */}
|
||||
<FadeContainer
|
||||
isVisible={
|
||||
displayedProject !== null &&
|
||||
isContentVisible
|
||||
}
|
||||
>
|
||||
{displayedProject && (
|
||||
<ScrollArea
|
||||
className="w-full h-full"
|
||||
scrollbarOffset={12}
|
||||
>
|
||||
<article>
|
||||
<CascadeItem
|
||||
delay={0}
|
||||
isVisible={isContentVisible}
|
||||
>
|
||||
<div className="w-full aspect-[4/3] rounded-lg overflow-hidden bg-gray-100 dark:bg-slate-700">
|
||||
<ProjectThumb
|
||||
src={
|
||||
readmeImage ||
|
||||
(allProjectsList.find(
|
||||
(p) =>
|
||||
p.id ===
|
||||
displayedProject,
|
||||
)?.image ??
|
||||
"")
|
||||
}
|
||||
alt={
|
||||
allProjectsList.find(
|
||||
(p) =>
|
||||
p.id ===
|
||||
displayedProject,
|
||||
)?.title ?? ""
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</CascadeItem>
|
||||
|
||||
<CascadeItem
|
||||
delay={75}
|
||||
isVisible={isContentVisible}
|
||||
>
|
||||
<div className="mt-4 flex items-start justify-between">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{
|
||||
allProjectsList.find(
|
||||
(p) =>
|
||||
p.id ===
|
||||
displayedProject,
|
||||
)?.title
|
||||
}
|
||||
</h2>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</CascadeItem>
|
||||
|
||||
<CascadeItem
|
||||
delay={150}
|
||||
isVisible={isContentVisible}
|
||||
>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{allProjectsList
|
||||
.find(
|
||||
(p) =>
|
||||
p.id ===
|
||||
displayedProject,
|
||||
)
|
||||
?.tags.map((t, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="text-xs px-2 py-1 bg-gray-100 dark:bg-slate-700 rounded-md text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</CascadeItem>
|
||||
|
||||
<CascadeItem
|
||||
delay={225}
|
||||
isVisible={isContentVisible}
|
||||
>
|
||||
<div className="mt-4">
|
||||
{readmeLoading && (
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Loading README...
|
||||
</div>
|
||||
)}
|
||||
{readmeError &&
|
||||
!readmeLoading && (
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300">
|
||||
{
|
||||
allProjectsList.find(
|
||||
(p) =>
|
||||
p.id ===
|
||||
displayedProject,
|
||||
)?.desc
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
{readmeContent &&
|
||||
!readmeLoading && (
|
||||
<div className="prose prose-sm dark:prose-invert max-w-none text-gray-700 dark:text-gray-300">
|
||||
<Markdown
|
||||
remarkPlugins={[
|
||||
remarkGfm,
|
||||
]}
|
||||
components={{
|
||||
code: ({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}) => {
|
||||
// Check if this code is inside a pre (fenced code block)
|
||||
// by checking if className exists or if it's multi-line
|
||||
const isCodeBlock =
|
||||
className ||
|
||||
(typeof children ===
|
||||
"string" &&
|
||||
children.includes(
|
||||
"\n",
|
||||
));
|
||||
|
||||
if (
|
||||
isCodeBlock
|
||||
) {
|
||||
return (
|
||||
<code
|
||||
className={`${className || ""} text-sm`}
|
||||
{...props}
|
||||
>
|
||||
{
|
||||
children
|
||||
}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
// Inline code
|
||||
return (
|
||||
<code
|
||||
className="bg-gray-200 dark:bg-slate-700 px-1.5 py-0.5 rounded text-sm font-mono"
|
||||
{...props}
|
||||
>
|
||||
{
|
||||
children
|
||||
}
|
||||
</code>
|
||||
);
|
||||
},
|
||||
pre: ({
|
||||
children,
|
||||
...props
|
||||
}) => (
|
||||
<pre
|
||||
className="bg-gray-100 dark:bg-slate-800 p-4 rounded-lg overflow-x-auto text-sm"
|
||||
{...props}
|
||||
>
|
||||
{
|
||||
children
|
||||
}
|
||||
</pre>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{stripHtmlFromMarkdown(
|
||||
readmeContent,
|
||||
)}
|
||||
</Markdown>
|
||||
</div>
|
||||
)}
|
||||
{!activeRepo &&
|
||||
!readmeLoading && (
|
||||
<p className="text-sm text-gray-700 dark:text-gray-300">
|
||||
{
|
||||
allProjectsList.find(
|
||||
(p) =>
|
||||
p.id ===
|
||||
displayedProject,
|
||||
)?.desc
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</CascadeItem>
|
||||
</article>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</FadeContainer>
|
||||
|
||||
{/* Empty state view */}
|
||||
<FadeContainer
|
||||
isVisible={
|
||||
displayedProject === null &&
|
||||
isContentVisible
|
||||
}
|
||||
>
|
||||
<div className="text-center max-w-[44ch] flex flex-col items-center justify-center h-full">
|
||||
<CascadeItem
|
||||
delay={0}
|
||||
isVisible={
|
||||
displayedProject === null &&
|
||||
isContentVisible
|
||||
}
|
||||
>
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Selected work
|
||||
</h2>
|
||||
</CascadeItem>
|
||||
|
||||
<CascadeItem
|
||||
delay={75}
|
||||
isVisible={
|
||||
displayedProject === null &&
|
||||
isContentVisible
|
||||
}
|
||||
>
|
||||
<p className="mt-3 text-sm text-gray-600 dark:text-gray-400">
|
||||
Click a project on the left to open
|
||||
a short preview.
|
||||
</p>
|
||||
</CascadeItem>
|
||||
|
||||
<CascadeItem
|
||||
delay={150}
|
||||
isVisible={
|
||||
displayedProject === null &&
|
||||
isContentVisible
|
||||
}
|
||||
>
|
||||
<div className="mt-6 flex justify-center gap-3"></div>
|
||||
</CascadeItem>
|
||||
</div>
|
||||
</FadeContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h4 className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">
|
||||
Skills
|
||||
</h4>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{skills.map((s, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="text-xs px-2 py-1 border border-gray-200 dark:border-slate-600 rounded-md text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
{s}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right text-xs text-gray-500 dark:text-gray-400">
|
||||
<div>Available for freelance & contract</div>
|
||||
<div className="mt-2">{profile.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pointer-events-none absolute bottom-6 right-6 text-[10px] text-gray-400 dark:text-gray-500">
|
||||
Built with React + Tailwind
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,237 @@
|
||||
import React, { useRef, useState, useEffect, useCallback } from "react";
|
||||
|
||||
interface ScrollAreaProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
fadeDelay?: number; // ms before scrollbar fades out
|
||||
scrollbarOffset?: number; // px to offset scrollbar to the right (into padding area)
|
||||
}
|
||||
|
||||
export default function ScrollArea({
|
||||
children,
|
||||
className = "",
|
||||
fadeDelay = 1000,
|
||||
scrollbarOffset = 0,
|
||||
}: ScrollAreaProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const thumbRef = useRef<HTMLDivElement>(null);
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const [isScrolling, setIsScrolling] = useState(false);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [isThumbHovered, setIsThumbHovered] = useState(false);
|
||||
const [thumbHeight, setThumbHeight] = useState(0);
|
||||
const [thumbTop, setThumbTop] = useState(0);
|
||||
const [canScroll, setCanScroll] = useState(false);
|
||||
const fadeTimeoutRef = useRef<number | null>(null);
|
||||
const dragStartRef = useRef({ y: 0, scrollTop: 0 });
|
||||
|
||||
// Check if content is scrollable and calculate thumb dimensions
|
||||
const updateScrollbar = useCallback(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const { scrollHeight, clientHeight, scrollTop } = container;
|
||||
const hasScroll = scrollHeight > clientHeight;
|
||||
setCanScroll(hasScroll);
|
||||
|
||||
if (hasScroll) {
|
||||
// Calculate thumb height as a proportion of visible content
|
||||
const ratio = clientHeight / scrollHeight;
|
||||
const minThumbHeight = 30;
|
||||
const calculatedHeight = Math.max(
|
||||
clientHeight * ratio,
|
||||
minThumbHeight,
|
||||
);
|
||||
setThumbHeight(calculatedHeight);
|
||||
|
||||
// Calculate thumb position
|
||||
const maxScrollTop = scrollHeight - clientHeight;
|
||||
const scrollRatio = scrollTop / maxScrollTop;
|
||||
const maxThumbTop = clientHeight - calculatedHeight;
|
||||
setThumbTop(scrollRatio * maxThumbTop);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Handle scroll events
|
||||
const handleScroll = useCallback(() => {
|
||||
updateScrollbar();
|
||||
setIsScrolling(true);
|
||||
|
||||
// Clear existing timeout
|
||||
if (fadeTimeoutRef.current) {
|
||||
clearTimeout(fadeTimeoutRef.current);
|
||||
}
|
||||
|
||||
// Set new timeout to hide scrollbar
|
||||
fadeTimeoutRef.current = window.setTimeout(() => {
|
||||
if (!isHovered && !isDragging) {
|
||||
setIsScrolling(false);
|
||||
}
|
||||
}, fadeDelay);
|
||||
}, [updateScrollbar, fadeDelay, isHovered, isDragging]);
|
||||
|
||||
// Handle mouse enter/leave
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
setIsHovered(true);
|
||||
updateScrollbar();
|
||||
}, [updateScrollbar]);
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
setIsHovered(false);
|
||||
if (!isDragging) {
|
||||
// Start fade timer when mouse leaves
|
||||
if (fadeTimeoutRef.current) {
|
||||
clearTimeout(fadeTimeoutRef.current);
|
||||
}
|
||||
fadeTimeoutRef.current = window.setTimeout(() => {
|
||||
setIsScrolling(false);
|
||||
}, fadeDelay);
|
||||
}
|
||||
}, [fadeDelay, isDragging]);
|
||||
|
||||
// Handle thumb drag
|
||||
const handleThumbMouseDown = useCallback((e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(true);
|
||||
dragStartRef.current = {
|
||||
y: e.clientY,
|
||||
scrollTop: containerRef.current?.scrollTop || 0,
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Handle track click (jump to position)
|
||||
const handleTrackClick = useCallback((e: React.MouseEvent) => {
|
||||
const container = containerRef.current;
|
||||
const track = e.currentTarget;
|
||||
if (!container || e.target === thumbRef.current) return;
|
||||
|
||||
const rect = track.getBoundingClientRect();
|
||||
const clickY = e.clientY - rect.top;
|
||||
const trackHeight = rect.height;
|
||||
const ratio = clickY / trackHeight;
|
||||
const maxScrollTop = container.scrollHeight - container.clientHeight;
|
||||
container.scrollTop = ratio * maxScrollTop;
|
||||
}, []);
|
||||
|
||||
// Global mouse move/up handlers for dragging
|
||||
useEffect(() => {
|
||||
if (!isDragging) return;
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const deltaY = e.clientY - dragStartRef.current.y;
|
||||
const { scrollHeight, clientHeight } = container;
|
||||
const maxScrollTop = scrollHeight - clientHeight;
|
||||
const trackHeight = clientHeight - thumbHeight;
|
||||
const scrollDelta = (deltaY / trackHeight) * maxScrollTop;
|
||||
|
||||
container.scrollTop = dragStartRef.current.scrollTop + scrollDelta;
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
setIsDragging(false);
|
||||
// Start fade timer after drag ends
|
||||
if (!isHovered) {
|
||||
fadeTimeoutRef.current = window.setTimeout(() => {
|
||||
setIsScrolling(false);
|
||||
}, fadeDelay);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
document.removeEventListener("mouseup", handleMouseUp);
|
||||
};
|
||||
}, [isDragging, thumbHeight, isHovered, fadeDelay]);
|
||||
|
||||
// Update scrollbar on mount and resize
|
||||
useEffect(() => {
|
||||
updateScrollbar();
|
||||
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
updateScrollbar();
|
||||
});
|
||||
resizeObserver.observe(container);
|
||||
|
||||
// Also observe children for content changes
|
||||
const mutationObserver = new MutationObserver(() => {
|
||||
updateScrollbar();
|
||||
});
|
||||
mutationObserver.observe(container, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
|
||||
return () => {
|
||||
resizeObserver.disconnect();
|
||||
mutationObserver.disconnect();
|
||||
};
|
||||
}, [updateScrollbar]);
|
||||
|
||||
// Cleanup timeout on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (fadeTimeoutRef.current) {
|
||||
clearTimeout(fadeTimeoutRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const showScrollbar = canScroll && (isHovered || isScrolling || isDragging);
|
||||
const isThumbExpanded = isThumbHovered || isDragging;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative ${className}`}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="h-full overflow-y-auto overflow-x-hidden"
|
||||
onScroll={handleScroll}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{/* Custom scrollbar track */}
|
||||
<div
|
||||
className="absolute top-0 w-2 h-full cursor-pointer"
|
||||
onClick={handleTrackClick}
|
||||
onMouseEnter={() => setIsThumbHovered(true)}
|
||||
onMouseLeave={() => setIsThumbHovered(false)}
|
||||
style={{
|
||||
right: `-${scrollbarOffset}px`,
|
||||
opacity: showScrollbar ? 1 : 0,
|
||||
transition: "opacity 200ms ease-out",
|
||||
pointerEvents: showScrollbar ? "auto" : "none",
|
||||
}}
|
||||
>
|
||||
{/* Scrollbar thumb */}
|
||||
<div
|
||||
ref={thumbRef}
|
||||
className="absolute right-0.5 rounded-full bg-gray-400/60 dark:bg-slate-500/60 hover:bg-gray-500/80 dark:hover:bg-slate-400/80 cursor-grab active:cursor-grabbing"
|
||||
style={{
|
||||
width: isThumbExpanded ? "6px" : "3px",
|
||||
height: `${thumbHeight}px`,
|
||||
top: `${thumbTop}px`,
|
||||
transition: isDragging
|
||||
? "width 150ms ease"
|
||||
: "width 150ms ease, background-color 150ms ease",
|
||||
}}
|
||||
onMouseDown={handleThumbMouseDown}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,736 @@
|
||||
import { useRef, useEffect, useCallback, useMemo } from "react";
|
||||
import {
|
||||
hexToRgb,
|
||||
rgbToHex,
|
||||
defaultPalette,
|
||||
type ColorPalette,
|
||||
} from "../utils";
|
||||
|
||||
interface Token {
|
||||
width: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface CodeLine {
|
||||
indent: number;
|
||||
tokens: Token[];
|
||||
y: number;
|
||||
totalWidth: number;
|
||||
complete: boolean;
|
||||
drawnChars: number;
|
||||
}
|
||||
|
||||
interface AnimatedBackgroundProps {
|
||||
/** Pre-computed color palette for code tokens */
|
||||
palette?: ColorPalette | null;
|
||||
/** Whether dark mode is active */
|
||||
isDark?: boolean;
|
||||
}
|
||||
|
||||
// Animated background that simulates code being typed
|
||||
export default function AnimatedBackground({
|
||||
palette = null,
|
||||
isDark = false,
|
||||
}: AnimatedBackgroundProps) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
|
||||
// Use provided palette or fall back to default
|
||||
const colors = palette ?? defaultPalette;
|
||||
|
||||
// Create a stable key for comparing palette changes
|
||||
const paletteKey = useMemo(() => {
|
||||
// Use the keyword color as a simple identifier for the palette
|
||||
return colors.keyword;
|
||||
}, [colors.keyword]);
|
||||
|
||||
const stateRef = useRef({
|
||||
animationId: 0,
|
||||
fadeOpacity: 1,
|
||||
isTyping: true,
|
||||
lines: [] as CodeLine[],
|
||||
currentLineIndex: 0,
|
||||
previousPaletteKey: paletteKey,
|
||||
isFading: false,
|
||||
fadeDirection: "out" as "out" | "in",
|
||||
currentBgColor: isDark ? "#0f172a" : "#f8fafc",
|
||||
targetBgColor: isDark ? "#0f172a" : "#f8fafc",
|
||||
});
|
||||
|
||||
const generateLines = useCallback(
|
||||
(colors: ColorPalette, canvasHeight: number) => {
|
||||
const lineHeight = 44;
|
||||
|
||||
const addGap = (): Token => ({ width: 1, color: "transparent" });
|
||||
|
||||
const randomToken = (): Token[] => {
|
||||
const types = [
|
||||
() => ({
|
||||
width: Math.floor(Math.random() * 8) + 3,
|
||||
color: colors.variable,
|
||||
}),
|
||||
() => ({
|
||||
width: Math.floor(Math.random() * 10) + 4,
|
||||
color: colors.string,
|
||||
}),
|
||||
() => ({
|
||||
width: Math.floor(Math.random() * 6) + 2,
|
||||
color: colors.number,
|
||||
}),
|
||||
() => ({
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.function,
|
||||
}),
|
||||
() => ({ width: 1, color: colors.punctuation }),
|
||||
];
|
||||
return [
|
||||
addGap(),
|
||||
types[Math.floor(Math.random() * types.length)](),
|
||||
];
|
||||
};
|
||||
|
||||
const generateLine = (y: number): CodeLine => {
|
||||
const patterns = [
|
||||
// Function definition with body start
|
||||
() => [
|
||||
{ width: 8, color: colors.keyword },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 10) + 6,
|
||||
color: colors.function,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
],
|
||||
// Variable declaration with complex expression
|
||||
() => [
|
||||
{ width: 5, color: colors.keyword },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 12) + 5,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 10) + 5,
|
||||
color: colors.function,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 14) + 6,
|
||||
color: colors.string,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 6) + 3,
|
||||
color: colors.number,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
],
|
||||
// Chained method calls
|
||||
() => [
|
||||
{
|
||||
width: Math.floor(Math.random() * 10) + 5,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.function,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 3,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.function,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.function,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
],
|
||||
// Return with object
|
||||
() => [
|
||||
{ width: 6, color: colors.keyword },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 10) + 5,
|
||||
color: colors.string,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 6) + 3,
|
||||
color: colors.number,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
],
|
||||
// Function call with multiple args
|
||||
() => [
|
||||
{
|
||||
width: Math.floor(Math.random() * 12) + 6,
|
||||
color: colors.function,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 10) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.string,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 6) + 3,
|
||||
color: colors.number,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
],
|
||||
// Comment (longer)
|
||||
() => [
|
||||
{ width: 2, color: colors.comment },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 30) + 20,
|
||||
color: colors.comment,
|
||||
},
|
||||
],
|
||||
// If statement with complex condition
|
||||
() => [
|
||||
{ width: 2, color: colors.keyword },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 3, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 6) + 3,
|
||||
color: colors.number,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 2, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.function,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
],
|
||||
// Object property with nested value
|
||||
() => [
|
||||
{
|
||||
width: Math.floor(Math.random() * 10) + 5,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 12) + 6,
|
||||
color: colors.string,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 6) + 3,
|
||||
color: colors.number,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
],
|
||||
// Import statement with multiple imports
|
||||
() => [
|
||||
{ width: 6, color: colors.keyword },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 10) + 5,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 4, color: colors.keyword },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 14) + 8,
|
||||
color: colors.string,
|
||||
},
|
||||
],
|
||||
// Arrow function
|
||||
() => [
|
||||
{ width: 5, color: colors.keyword },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 10) + 5,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{ width: 2, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.function,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
addGap(),
|
||||
{
|
||||
width: Math.floor(Math.random() * 8) + 4,
|
||||
color: colors.variable,
|
||||
},
|
||||
addGap(),
|
||||
{ width: 1, color: colors.punctuation },
|
||||
],
|
||||
];
|
||||
|
||||
const pattern =
|
||||
patterns[Math.floor(Math.random() * patterns.length)];
|
||||
let tokens = pattern();
|
||||
|
||||
const extraTokens = Math.floor(Math.random() * 4);
|
||||
for (let i = 0; i < extraTokens; i++) {
|
||||
tokens = [...tokens, ...randomToken()];
|
||||
}
|
||||
|
||||
const indent = Math.floor(Math.random() * 4);
|
||||
const totalWidth = tokens.reduce((sum, t) => sum + t.width, 0);
|
||||
|
||||
return {
|
||||
indent,
|
||||
tokens,
|
||||
y,
|
||||
totalWidth,
|
||||
complete: false,
|
||||
drawnChars: 0,
|
||||
};
|
||||
};
|
||||
|
||||
const lines: CodeLine[] = [];
|
||||
const numLines = Math.ceil(canvasHeight / lineHeight) + 2;
|
||||
for (let i = 0; i < numLines; i++) {
|
||||
lines.push(generateLine(i * lineHeight));
|
||||
}
|
||||
return lines;
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const state = stateRef.current;
|
||||
|
||||
// Set canvas dimensions first, before generating lines
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
// Update target background color when dark mode changes
|
||||
state.targetBgColor = isDark ? "#0f172a" : "#f8fafc";
|
||||
|
||||
const lineHeight = 44;
|
||||
const charWidth = 14;
|
||||
const indentWidth = charWidth * 4;
|
||||
const leftMargin = 120;
|
||||
const charsPerFrame = 12; // Fast typing - fills screen in ~1-2 seconds
|
||||
|
||||
// Check if palette changed
|
||||
const paletteChanged = state.previousPaletteKey !== paletteKey;
|
||||
state.previousPaletteKey = paletteKey;
|
||||
|
||||
// Initialize or trigger fade for palette change
|
||||
if (state.lines.length === 0) {
|
||||
state.lines = generateLines(colors, canvas.height);
|
||||
state.currentLineIndex = 0;
|
||||
state.isTyping = true;
|
||||
state.fadeOpacity = 1;
|
||||
} else if (paletteChanged) {
|
||||
state.isFading = true;
|
||||
state.fadeDirection = "out";
|
||||
}
|
||||
|
||||
// Draw function renders the current state without advancing animation
|
||||
const draw = () => {
|
||||
ctx.fillStyle = state.currentBgColor;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
const lines = state.lines;
|
||||
const currentLineIndex = state.currentLineIndex;
|
||||
|
||||
ctx.globalAlpha = state.fadeOpacity;
|
||||
|
||||
lines.forEach((line: CodeLine, lineIndex: number) => {
|
||||
if (lineIndex > currentLineIndex) return;
|
||||
|
||||
const charsToShow = line.drawnChars;
|
||||
if (charsToShow === 0) return;
|
||||
|
||||
let x = leftMargin + line.indent * indentWidth;
|
||||
let charCount = 0;
|
||||
|
||||
line.tokens.forEach((token: Token) => {
|
||||
if (charCount >= charsToShow) return;
|
||||
|
||||
const tokenCharsToShow = Math.min(
|
||||
token.width,
|
||||
charsToShow - charCount,
|
||||
);
|
||||
|
||||
if (token.color !== "transparent" && tokenCharsToShow > 0) {
|
||||
ctx.fillStyle = token.color;
|
||||
|
||||
const rectWidth = tokenCharsToShow * charWidth;
|
||||
const rectHeight = lineHeight * 0.45;
|
||||
const rectY = line.y + (lineHeight - rectHeight) / 2;
|
||||
|
||||
const radius = 3;
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x, rectY, rectWidth, rectHeight, radius);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
x += tokenCharsToShow * charWidth;
|
||||
charCount += token.width;
|
||||
});
|
||||
});
|
||||
|
||||
ctx.globalAlpha = 1;
|
||||
};
|
||||
|
||||
const animate = () => {
|
||||
// Smoothly interpolate background color
|
||||
const currentRgb = hexToRgb(state.currentBgColor);
|
||||
const targetRgb = hexToRgb(state.targetBgColor);
|
||||
if (currentRgb && targetRgb) {
|
||||
const lerpFactor = 0.08;
|
||||
const newR =
|
||||
currentRgb.r + (targetRgb.r - currentRgb.r) * lerpFactor;
|
||||
const newG =
|
||||
currentRgb.g + (targetRgb.g - currentRgb.g) * lerpFactor;
|
||||
const newB =
|
||||
currentRgb.b + (targetRgb.b - currentRgb.b) * lerpFactor;
|
||||
state.currentBgColor = rgbToHex(
|
||||
Math.round(newR),
|
||||
Math.round(newG),
|
||||
Math.round(newB),
|
||||
);
|
||||
}
|
||||
|
||||
ctx.fillStyle = state.currentBgColor;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Handle fading
|
||||
if (state.isFading) {
|
||||
if (state.fadeDirection === "out") {
|
||||
state.fadeOpacity -= 0.05;
|
||||
if (state.fadeOpacity <= 0) {
|
||||
state.fadeOpacity = 0;
|
||||
state.fadeDirection = "in";
|
||||
// Generate new lines with new palette
|
||||
state.lines = generateLines(colors, canvas.height);
|
||||
state.currentLineIndex = 0;
|
||||
state.isTyping = true;
|
||||
}
|
||||
} else {
|
||||
state.fadeOpacity += 0.05;
|
||||
if (state.fadeOpacity >= 1) {
|
||||
state.fadeOpacity = 1;
|
||||
state.isFading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const lines = state.lines;
|
||||
let currentLineIndex = state.currentLineIndex;
|
||||
|
||||
// Type characters on current line
|
||||
if (state.isTyping && currentLineIndex < lines.length) {
|
||||
const currentLine = lines[currentLineIndex];
|
||||
if (currentLine && !currentLine.complete) {
|
||||
currentLine.drawnChars += charsPerFrame;
|
||||
if (currentLine.drawnChars >= currentLine.totalWidth) {
|
||||
currentLine.drawnChars = currentLine.totalWidth;
|
||||
currentLine.complete = true;
|
||||
state.currentLineIndex++;
|
||||
currentLineIndex++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Draw all lines
|
||||
let cursorX = 0;
|
||||
let cursorY = 0;
|
||||
|
||||
ctx.globalAlpha = state.fadeOpacity;
|
||||
|
||||
lines.forEach((line: CodeLine, lineIndex: number) => {
|
||||
if (lineIndex > currentLineIndex) return;
|
||||
|
||||
const charsToShow = line.drawnChars;
|
||||
if (charsToShow === 0) return;
|
||||
|
||||
let x = leftMargin + line.indent * indentWidth;
|
||||
let charCount = 0;
|
||||
|
||||
line.tokens.forEach((token: Token) => {
|
||||
if (charCount >= charsToShow) return;
|
||||
|
||||
const tokenCharsToShow = Math.min(
|
||||
token.width,
|
||||
charsToShow - charCount,
|
||||
);
|
||||
|
||||
if (token.color !== "transparent" && tokenCharsToShow > 0) {
|
||||
ctx.fillStyle = token.color;
|
||||
|
||||
const rectWidth = tokenCharsToShow * charWidth;
|
||||
const rectHeight = lineHeight * 0.45;
|
||||
const rectY = line.y + (lineHeight - rectHeight) / 2;
|
||||
|
||||
const radius = 3;
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x, rectY, rectWidth, rectHeight, radius);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
x += tokenCharsToShow * charWidth;
|
||||
charCount += token.width;
|
||||
});
|
||||
|
||||
if (lineIndex === currentLineIndex) {
|
||||
cursorX = x;
|
||||
cursorY = line.y;
|
||||
}
|
||||
});
|
||||
|
||||
// Draw cursor
|
||||
if (currentLineIndex < lines.length) {
|
||||
ctx.fillStyle = colors.keyword;
|
||||
ctx.globalAlpha =
|
||||
state.fadeOpacity * (0.7 + Math.sin(Date.now() / 80) * 0.3);
|
||||
ctx.fillRect(
|
||||
cursorX,
|
||||
cursorY + lineHeight * 0.28,
|
||||
3,
|
||||
lineHeight * 0.45,
|
||||
);
|
||||
}
|
||||
|
||||
ctx.globalAlpha = 1;
|
||||
|
||||
// Continue animation only if typing, fading, or background is transitioning
|
||||
// When idle, the animation stops completely to save CPU.
|
||||
// Theme changes will restart the animation via the useEffect dependencies.
|
||||
const bgTransitioning =
|
||||
state.currentBgColor !== state.targetBgColor;
|
||||
if (
|
||||
currentLineIndex < lines.length ||
|
||||
state.isFading ||
|
||||
bgTransitioning
|
||||
) {
|
||||
state.animationId = requestAnimationFrame(animate);
|
||||
}
|
||||
// When animation is complete, we stop. The useEffect will restart
|
||||
// the animation if isDark or paletteKey changes.
|
||||
};
|
||||
|
||||
// Resize handler - updates canvas dimensions and redraws current state
|
||||
const resize = () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
// Redraw the current state after resize
|
||||
draw();
|
||||
};
|
||||
window.addEventListener("resize", resize);
|
||||
|
||||
// Start fresh animation
|
||||
cancelAnimationFrame(state.animationId);
|
||||
animate();
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", resize);
|
||||
cancelAnimationFrame(state.animationId);
|
||||
};
|
||||
}, [paletteKey, colors, generateLines, isDark]);
|
||||
|
||||
// Update target color when isDark prop changes
|
||||
useEffect(() => {
|
||||
const state = stateRef.current;
|
||||
state.targetBgColor = isDark ? "#0f172a" : "#f8fafc";
|
||||
}, [isDark]);
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="fixed inset-0 w-full h-full -z-10"
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
|
||||
interface CascadeItemProps {
|
||||
children: React.ReactNode;
|
||||
delay?: number;
|
||||
isVisible: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// CascadeItem: animates children with a fade-in + slide-down effect
|
||||
export default function CascadeItem({
|
||||
children,
|
||||
delay = 0,
|
||||
isVisible,
|
||||
className = "",
|
||||
}: CascadeItemProps) {
|
||||
return (
|
||||
<div
|
||||
className={`transition-all duration-300 ease-out ${className}`}
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? "translateY(0)" : "translateY(-12px)",
|
||||
transitionDelay: isVisible ? `${delay}ms` : "0ms",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import React from "react";
|
||||
|
||||
interface FadeContainerProps {
|
||||
children: React.ReactNode;
|
||||
isVisible: boolean;
|
||||
}
|
||||
|
||||
// FadeContainer: fades content in/out using CSS transitions only
|
||||
export default function FadeContainer({
|
||||
children,
|
||||
isVisible,
|
||||
}: FadeContainerProps) {
|
||||
return (
|
||||
<div
|
||||
className="transition-opacity duration-200 ease-out w-full h-full absolute inset-0 flex items-center justify-center p-6"
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
pointerEvents: isVisible ? "auto" : "none",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
interface ProjectThumbProps {
|
||||
src: string;
|
||||
alt: string;
|
||||
}
|
||||
|
||||
// ProjectThumb: simple image renderer (keeps image styling centralized)
|
||||
export default function ProjectThumb({ src, alt }: ProjectThumbProps) {
|
||||
return (
|
||||
<div className="w-full h-full overflow-hidden rounded-md">
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
className="w-full h-full object-cover object-top transition-transform duration-300 group-hover:scale-[1.03]"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
export { default as AnimatedBackground } from "./AnimatedBackground";
|
||||
export { default as ProjectThumb } from "./ProjectThumb";
|
||||
export { default as CascadeItem } from "./CascadeItem";
|
||||
export { default as FadeContainer } from "./FadeContainer";
|
||||
export { default as ScrollArea } from "../ScrollArea";
|
||||
@@ -0,0 +1,7 @@
|
||||
export {
|
||||
profile,
|
||||
featuredProjects,
|
||||
allProjects,
|
||||
skills,
|
||||
type Project,
|
||||
} from "./projects";
|
||||
@@ -0,0 +1,130 @@
|
||||
import {
|
||||
type ColorPalette,
|
||||
parseGradientColors,
|
||||
generatePaletteFromGradient,
|
||||
defaultPalette,
|
||||
} from "../utils";
|
||||
|
||||
export type Project = {
|
||||
id: number;
|
||||
title: string;
|
||||
image: string;
|
||||
gradient: string;
|
||||
tags: string[];
|
||||
desc: string;
|
||||
repo: string | null;
|
||||
/** Pre-computed color palette for the animated background */
|
||||
palette: ColorPalette;
|
||||
};
|
||||
|
||||
/** Compute palette from a gradient string at module load time */
|
||||
function computePalette(gradient: string): ColorPalette {
|
||||
const colors = parseGradientColors(gradient);
|
||||
if (colors) {
|
||||
return generatePaletteFromGradient(colors.color1, colors.color2);
|
||||
}
|
||||
return defaultPalette;
|
||||
}
|
||||
|
||||
export const profile = {
|
||||
name: "Zach Brohn",
|
||||
role: "Front- & Backend Engineer",
|
||||
blurb: "I design and build simple but functional interfaces for both the user and the developer.",
|
||||
location: "Stockholm, SE",
|
||||
email: "zach@zach-dev.cc",
|
||||
cv: "#",
|
||||
};
|
||||
|
||||
// Gradient constants for reuse in palette computation
|
||||
const gradients = {
|
||||
project1:
|
||||
"linear-gradient(135deg, rgba(96,165,250,0.9), rgba(124,58,237,0.9))",
|
||||
project2:
|
||||
"linear-gradient(135deg, rgba(52,211,153,0.9), rgba(6,182,212,0.9))",
|
||||
project3:
|
||||
"linear-gradient(135deg, rgba(251,113,133,0.9), rgba(249,115,22,0.9))",
|
||||
project4:
|
||||
"linear-gradient(135deg, rgba(168,85,247,0.9), rgba(236,72,153,0.9))",
|
||||
project5:
|
||||
"linear-gradient(135deg, rgba(34,197,94,0.9), rgba(52,211,153,0.9))",
|
||||
project6:
|
||||
"linear-gradient(135deg, rgba(59,130,246,0.9), rgba(14,165,233,0.9))",
|
||||
};
|
||||
|
||||
export const featuredProjects: Project[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: "ZShell - Linux Desktop Shell",
|
||||
image: "/images/project1.jpg",
|
||||
gradient: gradients.project1,
|
||||
tags: ["Qml", "C++", "JavaScript", "Linux"],
|
||||
desc: "A modern desktop shell built with Qt/Qml and Quickshell, for Wayland.",
|
||||
repo: "Zacharias-Brohn/z-bar-qt",
|
||||
palette: computePalette(gradients.project1),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Z-Cast - Application Launcher",
|
||||
image: "/images/project2.jpg",
|
||||
gradient: gradients.project2,
|
||||
tags: ["Python", "Fabric", "Linux"],
|
||||
desc: "A fast application launcher for Linux desktops, built with Python.",
|
||||
repo: "Zacharias-Brohn/Z-Cast",
|
||||
palette: computePalette(gradients.project2),
|
||||
},
|
||||
];
|
||||
|
||||
export const allProjects: Project[] = [
|
||||
{
|
||||
id: 3,
|
||||
title: "Neovim Configuration",
|
||||
image: "/images/project3.jpg",
|
||||
gradient: gradients.project3,
|
||||
tags: ["Lua", "Neovim", "Vimscript"],
|
||||
desc: "My personal Neovim configuration.",
|
||||
repo: "Zacharias-Brohn/nvimdots",
|
||||
palette: computePalette(gradients.project3),
|
||||
},
|
||||
// {
|
||||
// id: 4,
|
||||
// title: "Placeholder",
|
||||
// image: "/images/project4.jpg",
|
||||
// gradient: gradients.project4,
|
||||
// tags: ["Next.js", "Stripe", "PostgreSQL"],
|
||||
// desc: "Placeholder",
|
||||
// repo: null,
|
||||
// palette: computePalette(gradients.project4),
|
||||
// },
|
||||
// {
|
||||
// id: 5,
|
||||
// title: "Placeholder",
|
||||
// image: "/images/project5.jpg",
|
||||
// gradient: gradients.project5,
|
||||
// tags: ["React Native", "Figma", "iOS"],
|
||||
// desc: "Placeholder",
|
||||
// repo: null,
|
||||
// palette: computePalette(gradients.project5),
|
||||
// },
|
||||
// {
|
||||
// id: 6,
|
||||
// title: "Placeholder",
|
||||
// image: "/images/project6.jpg",
|
||||
// gradient: gradients.project6,
|
||||
// tags: ["Node.js", "GraphQL", "Redis"],
|
||||
// desc: "Placeholder",
|
||||
// repo: null,
|
||||
// palette: computePalette(gradients.project6),
|
||||
// },
|
||||
];
|
||||
|
||||
export const skills = [
|
||||
"JavaScript",
|
||||
"TypeScript",
|
||||
"Node.js",
|
||||
"React",
|
||||
"Java",
|
||||
"Python",
|
||||
"C++",
|
||||
"SQL",
|
||||
"Qt/Qml",
|
||||
];
|
||||
@@ -0,0 +1,3 @@
|
||||
export { useSystemDarkMode } from "./useSystemDarkMode";
|
||||
export { useGitHubReadme } from "./useGitHubReadme";
|
||||
export { useGitHubRepoImages } from "./useGitHubRepoImages";
|
||||
@@ -0,0 +1,136 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
// Extract first image from markdown content
|
||||
function extractFirstImage(
|
||||
markdown: string,
|
||||
repoPath: string,
|
||||
branch: string,
|
||||
): string | null {
|
||||
// Match markdown image syntax: 
|
||||
const mdImageRegex = /!\[[^\]]*\]\(([^)]+)\)/;
|
||||
// Match HTML img tags: <img src="url"
|
||||
const htmlImageRegex = /<img[^>]+src=["']([^"']+)["']/i;
|
||||
|
||||
const mdMatch = markdown.match(mdImageRegex);
|
||||
const htmlMatch = markdown.match(htmlImageRegex);
|
||||
|
||||
// Get the first match (whichever appears first in the content)
|
||||
let imageUrl: string | null = null;
|
||||
|
||||
if (mdMatch && htmlMatch) {
|
||||
imageUrl =
|
||||
markdown.indexOf(mdMatch[0]) < markdown.indexOf(htmlMatch[0])
|
||||
? mdMatch[1]
|
||||
: htmlMatch[1];
|
||||
} else if (mdMatch) {
|
||||
imageUrl = mdMatch[1];
|
||||
} else if (htmlMatch) {
|
||||
imageUrl = htmlMatch[1];
|
||||
}
|
||||
|
||||
if (!imageUrl) return null;
|
||||
|
||||
// If it's a relative URL, convert to raw GitHub URL
|
||||
if (!imageUrl.startsWith("http://") && !imageUrl.startsWith("https://")) {
|
||||
// Remove leading ./ or /
|
||||
const cleanPath = imageUrl.replace(/^\.?\//, "");
|
||||
imageUrl = `https://raw.githubusercontent.com/${repoPath}/${branch}/${cleanPath}`;
|
||||
}
|
||||
|
||||
return imageUrl;
|
||||
}
|
||||
|
||||
// Hook to fetch README from a GitHub repository
|
||||
export function useGitHubReadme(repo: string | null): {
|
||||
content: string | null;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
image: string | null;
|
||||
} {
|
||||
const [state, setState] = useState<{
|
||||
content: string | null;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
image: string | null;
|
||||
}>({ content: null, isLoading: false, error: null, image: null });
|
||||
const cache = useRef<
|
||||
Record<string, { content: string; image: string | null }>
|
||||
>({});
|
||||
|
||||
useEffect(() => {
|
||||
if (!repo) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check cache first
|
||||
if (cache.current[repo]) {
|
||||
setState({
|
||||
content: cache.current[repo].content,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
image: cache.current[repo].image,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
|
||||
// Try both main and master branches
|
||||
const fetchReadme = async () => {
|
||||
setState({
|
||||
content: null,
|
||||
isLoading: true,
|
||||
error: null,
|
||||
image: null,
|
||||
});
|
||||
|
||||
const branches = ["main", "master"];
|
||||
|
||||
for (const branch of branches) {
|
||||
if (cancelled) return;
|
||||
|
||||
try {
|
||||
const url = `https://raw.githubusercontent.com/${repo}/${branch}/README.md`;
|
||||
const response = await fetch(url);
|
||||
|
||||
if (response.ok && !cancelled) {
|
||||
const text = await response.text();
|
||||
const image = extractFirstImage(text, repo, branch);
|
||||
cache.current[repo] = { content: text, image };
|
||||
setState({
|
||||
content: text,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
image,
|
||||
});
|
||||
return;
|
||||
}
|
||||
} catch {
|
||||
// Try next branch
|
||||
}
|
||||
}
|
||||
|
||||
if (!cancelled) {
|
||||
setState({
|
||||
content: null,
|
||||
isLoading: false,
|
||||
error: "Could not load README",
|
||||
image: null,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
fetchReadme();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [repo]);
|
||||
|
||||
// Return null state when no repo is provided
|
||||
if (!repo) {
|
||||
return { content: null, isLoading: false, error: null, image: null };
|
||||
}
|
||||
|
||||
return state;
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
|
||||
// Extract first image from markdown content
|
||||
function extractFirstImage(
|
||||
markdown: string,
|
||||
repoPath: string,
|
||||
branch: string,
|
||||
): string | null {
|
||||
const mdImageRegex = /!\[[^\]]*\]\(([^)]+)\)/;
|
||||
const htmlImageRegex = /<img[^>]+src=["']([^"']+)["']/i;
|
||||
|
||||
const mdMatch = markdown.match(mdImageRegex);
|
||||
const htmlMatch = markdown.match(htmlImageRegex);
|
||||
|
||||
let imageUrl: string | null = null;
|
||||
|
||||
if (mdMatch && htmlMatch) {
|
||||
imageUrl =
|
||||
markdown.indexOf(mdMatch[0]) < markdown.indexOf(htmlMatch[0])
|
||||
? mdMatch[1]
|
||||
: htmlMatch[1];
|
||||
} else if (mdMatch) {
|
||||
imageUrl = mdMatch[1];
|
||||
} else if (htmlMatch) {
|
||||
imageUrl = htmlMatch[1];
|
||||
}
|
||||
|
||||
if (!imageUrl) return null;
|
||||
|
||||
if (!imageUrl.startsWith("http://") && !imageUrl.startsWith("https://")) {
|
||||
const cleanPath = imageUrl.replace(/^\.?\//, "");
|
||||
imageUrl = `https://raw.githubusercontent.com/${repoPath}/${branch}/${cleanPath}`;
|
||||
}
|
||||
|
||||
return imageUrl;
|
||||
}
|
||||
|
||||
// Hook to fetch README images for multiple repos (for thumbnails)
|
||||
export function useGitHubRepoImages(
|
||||
repos: (string | null)[],
|
||||
): Record<string, string> {
|
||||
const [images, setImages] = useState<Record<string, string>>({});
|
||||
const fetchedRepos = useRef<Set<string>>(new Set());
|
||||
|
||||
useEffect(() => {
|
||||
const reposToFetch = repos.filter(
|
||||
(repo): repo is string =>
|
||||
repo !== null &&
|
||||
!images[repo] &&
|
||||
!fetchedRepos.current.has(repo),
|
||||
);
|
||||
|
||||
if (reposToFetch.length === 0) return;
|
||||
|
||||
// Mark repos as being fetched
|
||||
reposToFetch.forEach((repo) => fetchedRepos.current.add(repo));
|
||||
|
||||
const fetchRepoImage = async (repo: string) => {
|
||||
const branches = ["main", "master"];
|
||||
|
||||
for (const branch of branches) {
|
||||
try {
|
||||
const url = `https://raw.githubusercontent.com/${repo}/${branch}/README.md`;
|
||||
const response = await fetch(url);
|
||||
|
||||
if (response.ok) {
|
||||
const text = await response.text();
|
||||
const image = extractFirstImage(text, repo, branch);
|
||||
if (image) {
|
||||
return { repo, image };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
} catch {
|
||||
// Try next branch
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// Fetch all repos in parallel
|
||||
Promise.all(reposToFetch.map(fetchRepoImage)).then((results) => {
|
||||
const newImages: Record<string, string> = {};
|
||||
results.forEach((result) => {
|
||||
if (result) {
|
||||
newImages[result.repo] = result.image;
|
||||
}
|
||||
});
|
||||
if (Object.keys(newImages).length > 0) {
|
||||
setImages((prev) => ({ ...prev, ...newImages }));
|
||||
}
|
||||
});
|
||||
}, [repos, images]);
|
||||
|
||||
return images;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
// Hook to detect system dark mode preference
|
||||
export function useSystemDarkMode(): boolean {
|
||||
const [isDark, setIsDark] = useState(
|
||||
() => window.matchMedia("(prefers-color-scheme: dark)").matches,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
const handler = (e: MediaQueryListEvent) => setIsDark(e.matches);
|
||||
mediaQuery.addEventListener("change", handler);
|
||||
return () => mediaQuery.removeEventListener("change", handler);
|
||||
}, []);
|
||||
|
||||
return isDark;
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
@import "tailwindcss";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
/* Hide scrollbars while keeping scroll functionality */
|
||||
* {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, Opera */
|
||||
}
|
||||
|
||||
/* Remove backticks that typography plugin adds around inline code */
|
||||
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before,
|
||||
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
/* Ensure code block backgrounds are visible */
|
||||
.prose pre {
|
||||
background-color: rgb(229 231 235) !important; /* gray-200 */
|
||||
color: rgb(31 41 55) !important; /* gray-800 */
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.prose pre {
|
||||
background-color: rgb(15 23 42) !important; /* slate-900 */
|
||||
color: rgb(226 232 240) !important; /* slate-200 */
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Dark mode color transitions
|
||||
* We use a custom property approach to add color transitions
|
||||
* without interfering with Tailwind's transition utilities
|
||||
*/
|
||||
@layer base {
|
||||
* {
|
||||
transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
fill 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
stroke 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Disable transitions on canvas */
|
||||
canvas {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Override to combine with Tailwind transition utilities */
|
||||
@layer utilities {
|
||||
.transition-transform {
|
||||
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
translate 200ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
scale 200ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
rotate 200ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
fill 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
stroke 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
fill 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
stroke 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.transition-opacity {
|
||||
transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
fill 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
stroke 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
color 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
fill 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
stroke 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import "./index.css";
|
||||
import App from "./App.tsx";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,235 @@
|
||||
// Helper functions for color interpolation and palette generation
|
||||
|
||||
export type RGB = { r: number; g: number; b: number };
|
||||
|
||||
export function hexToRgb(hex: string): RGB | null {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result
|
||||
? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16),
|
||||
}
|
||||
: null;
|
||||
}
|
||||
|
||||
export function rgbToHex(r: number, g: number, b: number): string {
|
||||
return (
|
||||
"#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("")
|
||||
);
|
||||
}
|
||||
|
||||
// Parse rgba() string to RGB + alpha
|
||||
export function parseRgba(
|
||||
rgba: string,
|
||||
): { r: number; g: number; b: number; a: number } | null {
|
||||
const match = rgba.match(
|
||||
/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/,
|
||||
);
|
||||
if (!match) return null;
|
||||
return {
|
||||
r: parseInt(match[1], 10),
|
||||
g: parseInt(match[2], 10),
|
||||
b: parseInt(match[3], 10),
|
||||
a: match[4] ? parseFloat(match[4]) : 1,
|
||||
};
|
||||
}
|
||||
|
||||
// Convert RGB to HSL
|
||||
export function rgbToHsl(
|
||||
r: number,
|
||||
g: number,
|
||||
b: number,
|
||||
): { h: number; s: number; l: number } {
|
||||
r /= 255;
|
||||
g /= 255;
|
||||
b /= 255;
|
||||
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
const l = (max + min) / 2;
|
||||
let h = 0;
|
||||
let s = 0;
|
||||
|
||||
if (max !== min) {
|
||||
const d = max - min;
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
|
||||
switch (max) {
|
||||
case r:
|
||||
h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
|
||||
break;
|
||||
case g:
|
||||
h = ((b - r) / d + 2) / 6;
|
||||
break;
|
||||
case b:
|
||||
h = ((r - g) / d + 4) / 6;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return { h: h * 360, s: s * 100, l: l * 100 };
|
||||
}
|
||||
|
||||
// Convert HSL to RGB
|
||||
export function hslToRgb(
|
||||
h: number,
|
||||
s: number,
|
||||
l: number,
|
||||
): { r: number; g: number; b: number } {
|
||||
h /= 360;
|
||||
s /= 100;
|
||||
l /= 100;
|
||||
|
||||
let r: number, g: number, b: number;
|
||||
|
||||
if (s === 0) {
|
||||
r = g = b = l;
|
||||
} else {
|
||||
const hue2rgb = (p: number, q: number, t: number) => {
|
||||
if (t < 0) t += 1;
|
||||
if (t > 1) t -= 1;
|
||||
if (t < 1 / 6) return p + (q - p) * 6 * t;
|
||||
if (t < 1 / 2) return q;
|
||||
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
|
||||
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
const p = 2 * l - q;
|
||||
r = hue2rgb(p, q, h + 1 / 3);
|
||||
g = hue2rgb(p, q, h);
|
||||
b = hue2rgb(p, q, h - 1 / 3);
|
||||
}
|
||||
|
||||
return {
|
||||
r: Math.round(r * 255),
|
||||
g: Math.round(g * 255),
|
||||
b: Math.round(b * 255),
|
||||
};
|
||||
}
|
||||
|
||||
// Interpolate between two colors
|
||||
export function lerpColor(color1: RGB, color2: RGB, t: number): RGB {
|
||||
return {
|
||||
r: Math.round(color1.r + (color2.r - color1.r) * t),
|
||||
g: Math.round(color1.g + (color2.g - color1.g) * t),
|
||||
b: Math.round(color1.b + (color2.b - color1.b) * t),
|
||||
};
|
||||
}
|
||||
|
||||
// Generate a color at a specific position along a gradient
|
||||
function getGradientColor(color1: RGB, color2: RGB, position: number): RGB {
|
||||
return lerpColor(color1, color2, position);
|
||||
}
|
||||
|
||||
// Adjust lightness of a color
|
||||
function adjustLightness(color: RGB, amount: number): RGB {
|
||||
const hsl = rgbToHsl(color.r, color.g, color.b);
|
||||
hsl.l = Math.max(0, Math.min(100, hsl.l + amount));
|
||||
return hslToRgb(hsl.h, hsl.s, hsl.l);
|
||||
}
|
||||
|
||||
// Adjust saturation of a color
|
||||
function adjustSaturation(color: RGB, amount: number): RGB {
|
||||
const hsl = rgbToHsl(color.r, color.g, color.b);
|
||||
hsl.s = Math.max(0, Math.min(100, hsl.s + amount));
|
||||
return hslToRgb(hsl.h, hsl.s, hsl.l);
|
||||
}
|
||||
|
||||
// Format RGB as rgba string
|
||||
function toRgba(color: RGB, alpha: number): string {
|
||||
return `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
|
||||
}
|
||||
|
||||
// Color palette type for the animated background
|
||||
export type ColorPalette = {
|
||||
keyword: string;
|
||||
string: string;
|
||||
function: string;
|
||||
variable: string;
|
||||
comment: string;
|
||||
punctuation: string;
|
||||
number: string;
|
||||
};
|
||||
|
||||
// Default palette for when no gradient colors are provided
|
||||
export const defaultPalette: ColorPalette = {
|
||||
keyword: "rgba(168, 85, 247, 0.7)", // Purple
|
||||
string: "rgba(34, 197, 94, 0.7)", // Green
|
||||
function: "rgba(59, 130, 246, 0.7)", // Blue
|
||||
variable: "rgba(239, 68, 68, 0.7)", // Red
|
||||
comment: "rgba(156, 163, 175, 0.6)", // Gray
|
||||
punctuation: "rgba(107, 114, 128, 0.5)", // Darker gray
|
||||
number: "rgba(249, 115, 22, 0.7)", // Orange
|
||||
};
|
||||
|
||||
// Generate a code color palette from two gradient colors
|
||||
export function generatePaletteFromGradient(
|
||||
color1: RGB,
|
||||
color2: RGB,
|
||||
): ColorPalette {
|
||||
// Create variations by interpolating between the two colors
|
||||
// and adjusting lightness/saturation
|
||||
|
||||
// Primary color (closer to color1)
|
||||
const primary = getGradientColor(color1, color2, 0.2);
|
||||
|
||||
// Secondary color (closer to color2)
|
||||
const secondary = getGradientColor(color1, color2, 0.8);
|
||||
|
||||
// Middle blend
|
||||
const middle = getGradientColor(color1, color2, 0.5);
|
||||
|
||||
// Lighter variation for highlights
|
||||
const light = adjustLightness(getGradientColor(color1, color2, 0.3), 15);
|
||||
|
||||
// Darker variation for comments
|
||||
const dark = adjustLightness(middle, -20);
|
||||
|
||||
// Desaturated for punctuation
|
||||
const desaturated = adjustSaturation(
|
||||
adjustLightness(middle, -10),
|
||||
-30,
|
||||
);
|
||||
|
||||
// Accent (shift towards color2 with more saturation)
|
||||
const accent = adjustSaturation(getGradientColor(color1, color2, 0.7), 10);
|
||||
|
||||
return {
|
||||
keyword: toRgba(primary, 0.8),
|
||||
string: toRgba(secondary, 0.75),
|
||||
function: toRgba(middle, 0.75),
|
||||
variable: toRgba(light, 0.7),
|
||||
comment: toRgba(dark, 0.5),
|
||||
punctuation: toRgba(desaturated, 0.5),
|
||||
number: toRgba(accent, 0.8),
|
||||
};
|
||||
}
|
||||
|
||||
// Parse gradient string and extract the two colors
|
||||
export function parseGradientColors(
|
||||
gradient: string,
|
||||
): { color1: RGB; color2: RGB } | null {
|
||||
// Match rgba colors in the gradient string
|
||||
const rgbaPattern =
|
||||
/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*[\d.]+)?\s*\)/g;
|
||||
const matches = [...gradient.matchAll(rgbaPattern)];
|
||||
|
||||
if (matches.length >= 2) {
|
||||
return {
|
||||
color1: {
|
||||
r: parseInt(matches[0][1], 10),
|
||||
g: parseInt(matches[0][2], 10),
|
||||
b: parseInt(matches[0][3], 10),
|
||||
},
|
||||
color2: {
|
||||
r: parseInt(matches[1][1], 10),
|
||||
g: parseInt(matches[1][2], 10),
|
||||
b: parseInt(matches[1][3], 10),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
export { stripHtmlFromMarkdown } from "./markdown";
|
||||
export {
|
||||
hexToRgb,
|
||||
rgbToHex,
|
||||
parseRgba,
|
||||
rgbToHsl,
|
||||
hslToRgb,
|
||||
lerpColor,
|
||||
generatePaletteFromGradient,
|
||||
parseGradientColors,
|
||||
defaultPalette,
|
||||
type RGB,
|
||||
type ColorPalette,
|
||||
} from "./color";
|
||||
@@ -0,0 +1,39 @@
|
||||
// Strip HTML tags from markdown content, preserving code blocks
|
||||
export function stripHtmlFromMarkdown(markdown: string): string {
|
||||
// First, normalize smart quotes (but NOT backticks - they're fine as-is)
|
||||
let result = markdown
|
||||
.replace(/[""]/g, '"') // Smart quotes to regular quotes
|
||||
.replace(/['']/g, "'"); // Smart single quotes
|
||||
|
||||
// Placeholder for code blocks
|
||||
const codeBlocks: string[] = [];
|
||||
|
||||
// Replace fenced code blocks (```...```) with placeholders
|
||||
result = result.replace(/```[\s\S]*?```/g, (match) => {
|
||||
codeBlocks.push(match);
|
||||
return `__CODE_BLOCK_${codeBlocks.length - 1}__`;
|
||||
});
|
||||
|
||||
// Replace inline code (`...`) with placeholders
|
||||
const inlineCode: string[] = [];
|
||||
result = result.replace(/`[^`]+`/g, (match) => {
|
||||
inlineCode.push(match);
|
||||
return `__INLINE_CODE_${inlineCode.length - 1}__`;
|
||||
});
|
||||
|
||||
// Remove HTML tags (but not their content for simple tags)
|
||||
// This handles both self-closing and paired tags
|
||||
result = result.replace(/<[^>]+>/g, "");
|
||||
|
||||
// Restore inline code
|
||||
inlineCode.forEach((code, i) => {
|
||||
result = result.replace(`__INLINE_CODE_${i}__`, code);
|
||||
});
|
||||
|
||||
// Restore code blocks
|
||||
codeBlocks.forEach((block, i) => {
|
||||
result = result.replace(`__CODE_BLOCK_${i}__`, block);
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
Reference in New Issue
Block a user