diff --git a/app/page.tsx b/app/page.tsx index 335e987..8a3fb25 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -93,13 +93,32 @@ function JsonArray({ items }: { items: string[] }) { ) } -type Phase = 'typing-whoami' | 'show-whoami' | 'typing-cat' | 'show-json' | 'done' +type IntroPhase = 'typing-whoami' | 'show-whoami' | 'typing-cat' | 'show-json' | 'done' interface HistoryEntry { command: string output: React.ReactNode + isTyping?: boolean } +const AboutJson = () => ( + 
+    
+      {'{'}{'\n'}
+      {'  '}"name":        ,{'\n'}
+      {'  '}"company":     ,{'\n'}
+      {'  '}"domain":      ,{'\n'}
+      {'  '}"role":        ,{'\n'}
+      {'  '}"experience":  ,{'\n'}
+      {'  '}"languages":   ,{'\n'}
+      {'  '}"frameworks":  ,{'\n'}
+      {'  '}"database":    ,{'\n'}
+      {'  '}"tools":       {'\n'}
+      {'}'}
+    
+
+) + type CommandResult = React.ReactNode | 'OPEN_GITHUB' | 'OPEN_WORK' | 'CLEAR' | 'FETCH_STATUS' const COMMANDS: Record CommandResult }> = { @@ -142,7 +161,7 @@ const COMMANDS: Record CommandResul } export default function Home() { - const [phase, setPhase] = useState('typing-whoami') + const [introPhase, setIntroPhase] = useState('typing-whoami') const [typedText, setTypedText] = useState('') const [showCursor, setShowCursor] = useState(true) const [inputValue, setInputValue] = useState('') @@ -166,14 +185,14 @@ export default function Home() { terminalRef.current.scrollTop = terminalRef.current.scrollHeight } }) - }, [phase, typedText, history, inputValue]) + }, [introPhase, typedText, history, inputValue]) // Focus input when done or loading finished useEffect(() => { - if (phase === 'done' && !isLoading && inputRef.current) { + if (introPhase === 'done' && !isLoading && inputRef.current) { inputRef.current.focus() } - }, [phase, isLoading]) + }, [introPhase, isLoading]) const fetchStatus = async () => { try { @@ -339,46 +358,48 @@ export default function Home() { } } - // Typing animation + // Typing animation for intro useEffect(() => { - if (phase === 'typing-whoami') { + if (introPhase === 'typing-whoami') { const cmd = 'whoami' if (typedText.length < cmd.length) { - const timer = setTimeout(() => setTypedText(cmd.slice(0, typedText.length + 1)), 80) + const timer = setTimeout(() => setTypedText(cmd.slice(0, typedText.length + 1)), 35) return () => clearTimeout(timer) } else { const timer = setTimeout(() => { - setPhase('show-whoami') + setHistory([{ command: 'whoami', output:
ravit
}]) + setIntroPhase('show-whoami') setTypedText('') - }, 300) + }, 80) return () => clearTimeout(timer) } } - if (phase === 'show-whoami') { - const timer = setTimeout(() => setPhase('typing-cat'), 600) + if (introPhase === 'show-whoami') { + const timer = setTimeout(() => setIntroPhase('typing-cat'), 150) return () => clearTimeout(timer) } - if (phase === 'typing-cat') { + if (introPhase === 'typing-cat') { const cmd = 'cat about.json' if (typedText.length < cmd.length) { - const timer = setTimeout(() => setTypedText(cmd.slice(0, typedText.length + 1)), 60) + const timer = setTimeout(() => setTypedText(cmd.slice(0, typedText.length + 1)), 25) return () => clearTimeout(timer) } else { const timer = setTimeout(() => { - setPhase('show-json') + setHistory(prev => [...prev, { command: 'cat about.json', output: }]) + setIntroPhase('show-json') setTypedText('') - }, 300) + }, 80) return () => clearTimeout(timer) } } - if (phase === 'show-json') { - const timer = setTimeout(() => setPhase('done'), 200) + if (introPhase === 'show-json') { + const timer = setTimeout(() => setIntroPhase('done'), 50) return () => clearTimeout(timer) } - }, [phase, typedText]) + }, [introPhase, typedText]) const cursor = showCursor ? '▋' : ' ' @@ -388,7 +409,7 @@ export default function Home() { @@ -407,11 +428,11 @@ export default function Home() { {/* Terminal Content */}
phase === 'done' && inputRef.current?.focus()} + onClick={() => introPhase === 'done' && inputRef.current?.focus()} className="flex-1 cursor-text overflow-y-auto scrollbar-terminal p-4 font-mono text-xs leading-relaxed sm:p-6 sm:text-sm" > - {/* Line 1: whoami */} - {phase === 'typing-whoami' && ( + {/* Typing animation for intro */} + {introPhase === 'typing-whoami' && (
~ $ @@ -420,57 +441,32 @@ export default function Home() {
)} - {(phase === 'show-whoami' || phase === 'typing-cat' || phase === 'show-json' || phase === 'done') && ( - <> -
- ~ - $ - whoami -
-
ravit
- - )} - - {/* Line 2: cat about.json */} - {phase === 'typing-cat' && ( -
- ~ - $ - {typedText} - {cursor} -
- )} - - {(phase === 'show-json' || phase === 'done') && ( + {introPhase === 'typing-cat' && ( <> + {history.map((entry, i) => ( +
0 ? 'mt-2' : ''}> +
+ ~ + $ + {entry.command} +
+ {entry.output} +
+ ))}
~ $ - cat about.json + {typedText} + {cursor}
- 
-                    
-                      {'{'}{'\n'}
-                      {'  '}"name":        ,{'\n'}
-                      {'  '}"company":     ,{'\n'}
-                      {'  '}"domain":      ,{'\n'}
-                      {'  '}"role":        ,{'\n'}
-                      {'  '}"experience":  ,{'\n'}
-                      {'  '}"languages":   ,{'\n'}
-                      {'  '}"frameworks":  ,{'\n'}
-                      {'  '}"database":    ,{'\n'}
-                      {'  '}"tools":       {'\n'}
-                      {'}'}
-                    
-
)} {/* Command history and interactive prompt */} - {phase === 'done' && ( + {(introPhase === 'show-whoami' || introPhase === 'show-json' || introPhase === 'done') && ( <> {history.map((entry, i) => ( -
+
0 ? 'mt-2' : ''}>
~ $ @@ -479,8 +475,8 @@ export default function Home() { {entry.output}
))} - {!isLoading && ( -
+ {introPhase === 'done' && !isLoading && ( +
0 ? 'mt-2' : ''}>
~ $