initial commit
This commit is contained in:
Zacharias-Brohn
+26
@@ -0,0 +1,26 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
AGENTS.md
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"tabWidth": 4
|
||||||
|
}
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## React Compiler
|
||||||
|
|
||||||
|
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
// Other configs...
|
||||||
|
|
||||||
|
// Remove tseslint.configs.recommended and replace with this
|
||||||
|
tseslint.configs.recommendedTypeChecked,
|
||||||
|
// Alternatively, use this for stricter rules
|
||||||
|
tseslint.configs.strictTypeChecked,
|
||||||
|
// Optionally, add this for stylistic rules
|
||||||
|
tseslint.configs.stylisticTypeChecked,
|
||||||
|
|
||||||
|
// Other configs...
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
// other options...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// eslint.config.js
|
||||||
|
import reactX from 'eslint-plugin-react-x'
|
||||||
|
import reactDom from 'eslint-plugin-react-dom'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
// Other configs...
|
||||||
|
// Enable lint rules for React
|
||||||
|
reactX.configs['recommended-typescript'],
|
||||||
|
// Enable lint rules for React DOM
|
||||||
|
reactDom.configs.recommended,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
// other options...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
```
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
+13
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>website</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+4787
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "website",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@tailwindcss/typography": "^0.5.19",
|
||||||
|
"@tailwindcss/vite": "^4.1.17",
|
||||||
|
"react": "^19.2.0",
|
||||||
|
"react-dom": "^19.2.0",
|
||||||
|
"react-markdown": "^10.1.0",
|
||||||
|
"remark-gfm": "^4.0.1",
|
||||||
|
"tailwindcss": "^4.1.17"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.39.1",
|
||||||
|
"@types/node": "^24.10.1",
|
||||||
|
"@types/react": "^19.2.5",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@vitejs/plugin-react": "^5.1.1",
|
||||||
|
"eslint": "^9.39.1",
|
||||||
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.24",
|
||||||
|
"globals": "^16.5.0",
|
||||||
|
"typescript": "~5.9.3",
|
||||||
|
"typescript-eslint": "^8.46.4",
|
||||||
|
"vite": "npm:rolldown-vite@7.2.5"
|
||||||
|
},
|
||||||
|
"overrides": {
|
||||||
|
"vite": "npm:rolldown-vite@7.2.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
+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;
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react(), tailwindcss()],
|
||||||
|
server: {
|
||||||
|
allowedHosts: ["zach-dev.cc"],
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user