diff --git a/src/App.tsx b/src/App.tsx index c3c7168..1a60976 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,7 @@ import { useState, useEffect } from 'react'; import { Terminal, Github, Mail, Layout, Cpu, Network, ExternalLink, ChevronRight, Activity, User } from 'lucide-react'; import './App.css'; - -// --- THEME CONFIGURATION --- -const THEMES = [ - { name: 'Blueprint Cyan', value: '#38bdf8', id: 'cyan' }, - { name: 'Drafting Yellow', value: '#fde047', id: 'yellow' }, - { name: 'Red Ink', value: '#f87171', id: 'red' }, - { name: 'Chalk White', value: '#f8fafc', id: 'white' } -]; +import { THEMES } from './themes'; // --- MOCK DATA --- const PROJECTS = [ @@ -45,14 +38,40 @@ const LAB_NOTES = [ ]; export default function App() { - const [activeTheme, setActiveTheme] = useState(THEMES[0]); + const [activeTheme] = useState(() => { + const idx = Math.floor(Math.random() * THEMES.length); + return THEMES[idx]; + }); const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); + const [hasClickedThemePill, setHasClickedThemePill] = useState(false); + const [showThemePillTooltip, setShowThemePillTooltip] = useState(false); // Update CSS variables for dynamic theming useEffect(() => { - document.documentElement.style.setProperty('--color-accent', activeTheme.value); - // Calculate a semi-transparent version for backgrounds/borders - document.documentElement.style.setProperty('--color-accent-muted', `${activeTheme.value}33`); + const root = document.documentElement; + + // Central palette + root.style.setProperty('--color-accent', activeTheme.colors.accent); + root.style.setProperty('--color-accent-muted', `${activeTheme.colors.accent}33`); + + root.style.setProperty('--bg-base', activeTheme.colors.bgBase); + root.style.setProperty('--bg-surface', activeTheme.colors.bgSurface); + root.style.setProperty('--bg-panel', activeTheme.colors.bgPanel); + + root.style.setProperty('--text-main', activeTheme.colors.textMain); + root.style.setProperty('--text-muted', activeTheme.colors.textMuted); + root.style.setProperty('--text-dim', activeTheme.colors.textDim); + + root.style.setProperty('--border-main', activeTheme.colors.borderMain); + root.style.setProperty('--grid-pattern', activeTheme.colors.gridPattern); + root.style.setProperty('--status-success', activeTheme.colors.statusSuccess); + + // Cat + root.style.setProperty('--cat-body', activeTheme.colors.bgBase); + root.style.setProperty('--cat-stroke', activeTheme.colors.catStroke); + root.style.setProperty('--cat-nose', activeTheme.colors.catNose); + root.style.setProperty('--cat-eyes', activeTheme.colors.catEyes); + root.style.setProperty('--heart-color', activeTheme.colors.heartColor); }, [activeTheme]); // Subtle interactive background effect @@ -64,77 +83,16 @@ export default function App() { return () => window.removeEventListener('mousemove', handleMouseMove); }, []); + // Auto-hide the "HAHA Made you click" tooltip + useEffect(() => { + if (!showThemePillTooltip) return; + const t = window.setTimeout(() => setShowThemePillTooltip(false), 1400); + return () => window.clearTimeout(t); + }, [showThemePillTooltip]); + return (
- {/* Global CSS for the dynamic theme and indie style */} - - {/* SVG Noise Filter for rough paper texture */} @@ -163,7 +121,7 @@ export default function App() {
- aditya_gupta // homelab + aditya_gupta // sortedcord {/* Hand-drawn annotation */}
@@ -173,22 +131,6 @@ export default function App() {
-
- theme_picker: -
- {THEMES.map(theme => ( -
-
-
github contact
@@ -197,9 +139,28 @@ export default function App() { {/* Hero Section */}
-
- - STATUS: ONLINE +
+ + + {showThemePillTooltip && ( +
+ HAHA Made you click +
+ )}

I engineer @@ -234,9 +195,6 @@ export default function App() { {/* System Overview Dashboard (Replaced Interactive Tiling Demo) */}
-
- [ SYSTEM_SPECS ] -

system_overview.sh diff --git a/src/theme.css b/src/theme.css index d61391d..15f6cd2 100644 --- a/src/theme.css +++ b/src/theme.css @@ -87,6 +87,35 @@ } .dot-grid { + position: fixed; + inset: 0; + pointer-events: none; +} + +.dot-grid::before { + content: ''; + position: fixed; + inset: 0; background-image: radial-gradient(var(--grid-pattern) 1px, transparent 1px); background-size: 24px 24px; + /* Lock Y so scroll never changes it; keep X drift via CSS variable. */ + background-position: var(--dot-grid-x, 0px) 0px; + will-change: background-position; + animation: dot-grid-drift-x 3s linear infinite; +} + +@keyframes dot-grid-drift-x { + from { + background-position: 0px 0px; + } + + to { + background-position: 24px 0px; + } +} + +@media (prefers-reduced-motion: reduce) { + .dot-grid::before { + animation: none; + } } \ No newline at end of file diff --git a/src/themes.ts b/src/themes.ts new file mode 100644 index 0000000..647b5bf --- /dev/null +++ b/src/themes.ts @@ -0,0 +1,259 @@ +export type Theme = { + id: string; + name: string; + variant: 'dark' | 'light'; + colors: { + accent: string; + bgBase: string; + bgSurface: string; + bgPanel: string; + textMain: string; + textMuted: string; + textDim: string; + borderMain: string; + gridPattern: string; + statusSuccess: string; + catStroke: string; + catNose: string; + catEyes: string; + heartColor: string; + cursor?: string; + }; +}; + +export const THEMES: Theme[] = [ + { + id: 'blueprint-default', + name: 'Blueprint (Default)', + variant: 'dark', + colors: { + accent: '#38bdf8', + bgBase: '#111113', + bgSurface: 'rgba(24, 24, 27, 0.4)', + bgPanel: 'rgba(9, 9, 11, 0.85)', + textMain: '#f4f4f5', + textMuted: '#a1a1aa', + textDim: '#52525b', + borderMain: '#27272a', + gridPattern: 'rgba(255, 255, 255, 0.08)', + statusSuccess: '#34d399', + catStroke: '#60a5fa', + catNose: '#f472b6', + catEyes: '#ffffff', + heartColor: '#f472b6', + }, + }, + { + id: 'acme-light', + name: 'Acme', + variant: 'light', + colors: { + accent: '#aeeeee', + bgBase: '#ffffea', + bgSurface: '#fcfcce', + bgPanel: '#ffffca', + textMain: '#000000', + textMuted: '#303030', + textDim: '#505050', + borderMain: '#303030', + gridPattern: 'rgba(0, 0, 0, 0.10)', + statusSuccess: '#cccc7c', + catStroke: '#000000', + catNose: '#303030', + catEyes: '#000000', + heartColor: '#303030', + cursor: '#000000', + }, + }, + { + id: 'ayaka-dark', + name: 'Ayaka', + variant: 'dark', + colors: { + accent: '#71ADE9', + bgBase: '#36283d', + bgSurface: 'rgba(54, 40, 61, 0.72)', + bgPanel: 'rgba(54, 40, 61, 0.88)', + textMain: '#cedaeb', + textMuted: '#9098a4', + textDim: 'rgba(206, 218, 235, 0.45)', + borderMain: 'rgba(206, 218, 235, 0.18)', + gridPattern: 'rgba(255, 255, 255, 0.08)', + statusSuccess: '#E59DB1', + catStroke: '#8BB8E9', + catNose: '#E1B4CE', + catEyes: '#FFFEFE', + heartColor: '#E1B4CE', + cursor: '#cedaeb', + }, + } + + , + { + id: 'borland', + name: 'Borland', + variant: 'dark', + colors: { + accent: '#96CBFE', + bgBase: '#0000A4', + bgSurface: 'rgba(0, 0, 164, 0.72)', + bgPanel: 'rgba(0, 0, 164, 0.88)', + textMain: '#FFFF4E', + textMuted: '#FFFFCC', + textDim: 'rgba(255, 255, 78, 0.45)', + borderMain: 'rgba(255, 255, 78, 0.22)', + gridPattern: 'rgba(255, 255, 255, 0.08)', + statusSuccess: '#A8FF60', + catStroke: '#C6C5FE', + catNose: '#FF73FD', + catEyes: '#FFFFFF', + heartColor: '#FF73FD', + cursor: '#FFFF4E', + }, + } + + , + { + id: 'catppuccin-latte', + name: 'Catppuccin Latte', + variant: 'light', + colors: { + accent: '#1E66F5', + bgBase: '#EFF1F5', + bgSurface: 'rgba(239, 241, 245, 0.72)', + bgPanel: 'rgba(239, 241, 245, 0.88)', + textMain: '#4C4F69', + textMuted: '#5C5F77', + textDim: 'rgba(76, 79, 105, 0.45)', + borderMain: 'rgba(76, 79, 105, 0.22)', + gridPattern: 'rgba(0, 0, 0, 0.08)', + statusSuccess: '#40A02B', + catStroke: '#5C5F77', + catNose: '#EA76CB', + catEyes: '#4C4F69', + heartColor: '#D20F39', + cursor: '#4C4F69', + }, + } + + , + { + id: 'dracula', + name: 'Dracula', + variant: 'dark', + colors: { + accent: '#BD93F9', + bgBase: '#282A36', + bgSurface: 'rgba(40, 42, 54, 0.72)', + bgPanel: 'rgba(40, 42, 54, 0.88)', + textMain: '#F8F8F2', + textMuted: 'rgba(248, 248, 242, 0.74)', + textDim: 'rgba(248, 248, 242, 0.45)', + borderMain: 'rgba(248, 248, 242, 0.18)', + gridPattern: 'rgba(255, 255, 255, 0.08)', + statusSuccess: '#50FA7B', + catStroke: '#BD93F9', + catNose: '#FF79C6', + catEyes: '#F8F8F2', + heartColor: '#FF79C6', + cursor: '#F8F8F2', + }, + } + + , + { + id: 'gruvbox', + name: 'Gruvbox', + variant: 'light', + colors: { + accent: '#458588', + bgBase: '#FBF1C7', + bgSurface: 'rgba(251, 241, 199, 0.72)', + bgPanel: 'rgba(251, 241, 199, 0.88)', + textMain: '#3C3836', + textMuted: '#7C6F64', + textDim: 'rgba(60, 56, 54, 0.45)', + borderMain: 'rgba(60, 56, 54, 0.22)', + gridPattern: 'rgba(0, 0, 0, 0.08)', + statusSuccess: '#98971A', + catStroke: '#3C3836', + catNose: '#B16286', + catEyes: '#3C3836', + heartColor: '#CC241D', + cursor: '#3C3836', + }, + } + + , + { + id: 'gruvbox-dark', + name: 'Gruvbox Dark', + variant: 'dark', + colors: { + accent: '#83A598', + bgBase: '#282828', + bgSurface: 'rgba(40, 40, 40, 0.72)', + bgPanel: 'rgba(40, 40, 40, 0.88)', + textMain: '#EBDBB2', + textMuted: '#A89984', + textDim: 'rgba(235, 219, 178, 0.45)', + borderMain: 'rgba(235, 219, 178, 0.18)', + gridPattern: 'rgba(255, 255, 255, 0.08)', + statusSuccess: '#B8BB26', + catStroke: '#83A598', + catNose: '#D3869B', + catEyes: '#EBDBB2', + heartColor: '#FB4934', + cursor: '#EBDBB2', + }, + } + + , + { + id: 'nord', + name: 'Nord', + variant: 'dark', + colors: { + accent: '#88C0D0', + bgBase: '#2E3440', + bgSurface: 'rgba(46, 52, 64, 0.72)', + bgPanel: 'rgba(46, 52, 64, 0.88)', + textMain: '#D8DEE9', + textMuted: '#E5E9F0', + textDim: 'rgba(216, 222, 233, 0.45)', + borderMain: 'rgba(216, 222, 233, 0.18)', + gridPattern: 'rgba(255, 255, 255, 0.08)', + statusSuccess: '#A3BE8C', + catStroke: '#81A1C1', + catNose: '#B48EAD', + catEyes: '#ECEFF4', + heartColor: '#BF616A', + cursor: '#D8DEE9', + }, + } + + , + { + id: 'rose-pine', + name: 'Rosé Pine', + variant: 'dark', + colors: { + accent: '#C4A7E7', + bgBase: '#191724', + bgSurface: 'rgba(25, 23, 36, 0.72)', + bgPanel: 'rgba(25, 23, 36, 0.88)', + textMain: '#E0DEF4', + textMuted: '#EBBCBA', + textDim: 'rgba(224, 222, 244, 0.45)', + borderMain: 'rgba(224, 222, 244, 0.18)', + gridPattern: 'rgba(255, 255, 255, 0.08)', + statusSuccess: '#9CCFD8', + catStroke: '#9CCFD8', + catNose: '#EB6F92', + catEyes: '#E0DEF4', + heartColor: '#EB6F92', + cursor: '#E0DEF4', + }, + } + +];