| import { useState, useEffect, useRef } from 'react' |
| import { motion, AnimatePresence } from 'framer-motion' |
| import { FiTerminal, FiX, FiMinus, FiMaximize2 } from 'react-icons/fi' |
| import resumePDF from '../assets/Resume.pdf' |
|
|
| const PROFILE = { |
| name: 'Parthib Karak', |
| title: 'Software & AI Engineer', |
| location: 'West Bengal, India', |
| college: 'IEM Kolkata (B.Tech CSE)', |
| cgpa: '8.9', |
| email: 'parthibkarak2004@gmail.com', |
| github: 'https://github.com/babaiii07', |
| linkedin: 'https://www.linkedin.com/in/parthib-karak', |
| leetcode: 'https://leetcode.com/u/Parthib_007', |
| } |
|
|
| const COMMANDS = { |
| help: { |
| desc: 'Show all available commands', |
| run: () => [ |
| { type: 'title', text: '📋 Available Commands' }, |
| { type: 'divider' }, |
| { type: 'cmd', text: 'whoami → Who is Parthib?' }, |
| { type: 'cmd', text: 'skills → Technical skill stack' }, |
| { type: 'cmd', text: 'projects → Featured AI projects' }, |
| { type: 'cmd', text: 'experience → Work experience' }, |
| { type: 'cmd', text: 'education → Academic background' }, |
| { type: 'cmd', text: 'contact → Get in touch' }, |
| { type: 'cmd', text: 'resume → Download resume' }, |
| { type: 'cmd', text: 'leetcode → DSA stats' }, |
| { type: 'cmd', text: 'hire → Why hire Parthib?' }, |
| { type: 'cmd', text: 'clear → Clear terminal' }, |
| { type: 'cmd', text: 'help → Show this menu' }, |
| { type: 'divider' }, |
| { type: 'info', text: '💡 Tip: Use ↑ ↓ arrow keys for command history' }, |
| ], |
| }, |
| whoami: { |
| desc: 'Who is Parthib?', |
| run: () => [ |
| { type: 'title', text: '👤 Parthib Karak' }, |
| { type: 'divider' }, |
| { type: 'kv', key: 'Role ', value: 'Software & AI Engineer' }, |
| { type: 'kv', key: 'Location', value: 'West Bengal, India' }, |
| { type: 'kv', key: 'College ', value: 'IEM Kolkata — B.Tech CSE' }, |
| { type: 'kv', key: 'CGPA ', value: '8.9 / 10.0' }, |
| { type: 'kv', key: 'Status ', value: '🟢 Open to Opportunities' }, |
| { type: 'divider' }, |
| { type: 'text', text: 'Building production-grade AI systems that don\'t break in the' }, |
| { type: 'text', text: 'real world. Specialising in RAG, multi-agent systems, and LLM' }, |
| { type: 'text', text: 'engineering with LangChain, LangGraph, and Groq.' }, |
| ], |
| }, |
| skills: { |
| desc: 'Technical skill stack', |
| run: () => [ |
| { type: 'title', text: '🛠️ Technical Skills' }, |
| { type: 'divider' }, |
| { type: 'category', text: 'AI / ML / LLMs' }, |
| { type: 'tags', items: ['LangChain', 'LangGraph', 'Groq', 'RAG', 'AutoGen', 'HuggingFace', 'Transformers'] }, |
| { type: 'category', text: 'Backend' }, |
| { type: 'tags', items: ['FastAPI', 'Django', 'Go / Gin', 'REST APIs', 'WebSockets'] }, |
| { type: 'category', text: 'Databases & Vector Stores' }, |
| { type: 'tags', items: ['MongoDB', 'MySQL', 'FAISS', 'ChromaDB', 'Pinecone'] }, |
| { type: 'category', text: 'Languages' }, |
| { type: 'tags', items: ['Python', 'JavaScript', 'TypeScript', 'Go', 'C++'] }, |
| { type: 'category', text: 'Tools & DevOps' }, |
| { type: 'tags', items: ['Docker', 'Git', 'GitHub', 'Postman', 'VS Code'] }, |
| ], |
| }, |
| projects: { |
| desc: 'Featured AI projects', |
| run: () => [ |
| { type: 'title', text: '🚀 Featured Projects' }, |
| { type: 'divider' }, |
| { type: 'proj', num: '01', name: 'Healthcare Chatbot', tech: 'RAG · Pinecone · LangChain · Groq', url: 'https://parthib07-multiagent-healthcare-chatbot.hf.space' }, |
| { type: 'proj', num: '02', name: 'AI Virtual Dev POD', tech: 'Multi-Agent · LangGraph · ChromaDB', url: 'https://agnik28-ai-virtual-pod.hf.space/' }, |
| { type: 'proj', num: '03', name: 'Virtual Research Assistant', tech: 'AutoGen · Groq · MySQL', url: 'https://parthib07-virtual-research-paper-assistant.hf.space/' }, |
| { type: 'proj', num: '04', name: 'OwnGPT', tech: 'FastAPI · LangGraph · MongoDB · Google Auth', url: 'https://parthib07-owngpt-v2.hf.space' }, |
| { type: 'proj', num: '05', name: 'CodeFusion', tech: 'DeepSeek AI · FastAPI · React', url: 'https://codefusion-v2-parthib.onrender.com' }, |
| { type: 'proj', num: '06', name: 'AnySITE', tech: 'FastAPI · React · AI Models', url: 'https://anysite-vibecoding-parthib.onrender.com' }, |
| { type: 'divider' }, |
| { type: 'info', text: '🔗 Run "contact" to connect or visit GitHub for source code' }, |
| ], |
| }, |
| experience: { |
| desc: 'Work experience', |
| run: () => [ |
| { type: 'title', text: '💼 Work Experience' }, |
| { type: 'divider' }, |
| { type: 'kv', key: 'Company ', value: 'BAAR Technologies' }, |
| { type: 'kv', key: 'Role ', value: 'Jr. Automation Engineer' }, |
| { type: 'kv', key: 'Type ', value: 'Full-time' }, |
| { type: 'kv', key: 'Period ', value: 'Feb 2026 – Mar 2026 · 2 mos' }, |
| { type: 'kv', key: 'Location', value: 'Kolkata, West Bengal · On-site' }, |
| { type: 'text', text: '' }, |
| { type: 'text', text: '→ Built automation-driven backend systems using Python & Django' }, |
| { type: 'text', text: '→ Managed high-performance databases with Microsoft SQL Server' }, |
| { type: 'text', text: '→ Developed scalable APIs and optimised SQL queries & procedures' }, |
| { type: 'text', text: '→ Collaborated cross-functionally to deliver reliable automation solutions' }, |
| ], |
| }, |
| education: { |
| desc: 'Academic background', |
| run: () => [ |
| { type: 'title', text: '🎓 Education' }, |
| { type: 'divider' }, |
| { type: 'kv', key: 'Degree ', value: 'B.Tech — Computer Science & Engineering' }, |
| { type: 'kv', key: 'College ', value: 'Institute of Engineering & Management, Kolkata' }, |
| { type: 'kv', key: 'CGPA ', value: '8.9 / 10.0' }, |
| { type: 'kv', key: 'Year ', value: '2021 – 2025' }, |
| { type: 'divider' }, |
| { type: 'kv', key: 'Class XII', value: '93.6% — Kapsit High School (2021)' }, |
| { type: 'kv', key: 'Class X ', value: '84.5% — Kamarpukur RKM School (2019)' }, |
| ], |
| }, |
| contact: { |
| desc: 'Get in touch', |
| run: () => [ |
| { type: 'title', text: '📬 Contact Parthib' }, |
| { type: 'divider' }, |
| { type: 'link', label: 'Email ', value: 'parthibkarak2004@gmail.com', href: 'mailto:parthibkarak2004@gmail.com' }, |
| { type: 'link', label: 'LinkedIn', value: 'linkedin.com/in/parthib-karak', href: 'https://www.linkedin.com/in/parthib-karak' }, |
| { type: 'link', label: 'GitHub ', value: 'github.com/babaiii07', href: 'https://github.com/babaiii07' }, |
| { type: 'link', label: 'LeetCode', value: 'leetcode.com/u/Parthib_007', href: 'https://leetcode.com/u/Parthib_007' }, |
| { type: 'divider' }, |
| { type: 'info', text: '💌 Available for freelance, internship & full-time roles' }, |
| ], |
| }, |
| resume: { |
| desc: 'Download resume', |
| run: () => { |
| setTimeout(() => { window.open(resumePDF, '_blank') }, 300) |
| return [ |
| { type: 'title', text: '📄 Resume' }, |
| { type: 'divider' }, |
| { type: 'success', text: '✅ Opening resume in a new tab...' }, |
| { type: 'info', text: '📥 Download will start automatically' }, |
| ] |
| }, |
| }, |
| leetcode: { |
| desc: 'DSA stats', |
| run: () => [ |
| { type: 'title', text: '⚡ LeetCode Stats' }, |
| { type: 'divider' }, |
| { type: 'kv', key: 'Profile ', value: 'leetcode.com/u/Parthib_007' }, |
| { type: 'kv', key: 'Solved ', value: '500+ Problems' }, |
| { type: 'kv', key: 'Strength', value: 'Arrays · DP · Graphs · Trees · Strings' }, |
| { type: 'divider' }, |
| { type: 'text', text: '→ Strong DSA foundation for system design & optimization' }, |
| { type: 'text', text: '→ Active in competitive programming contests' }, |
| ], |
| }, |
| hire: { |
| desc: 'Why hire Parthib?', |
| run: () => [ |
| { type: 'title', text: '🌟 Why Hire Parthib?' }, |
| { type: 'divider' }, |
| { type: 'text', text: '✦ Builds production-ready AI — not just demos' }, |
| { type: 'text', text: '✦ Specialised in RAG, Agents, LangChain & LangGraph' }, |
| { type: 'text', text: '✦ 500+ LeetCode — strong algorithmic foundations' }, |
| { type: 'text', text: '✦ CGPA 8.9 — academic excellence under real workload' }, |
| { type: 'text', text: '✦ End-to-end: from LLM to Docker to production deploy' }, |
| { type: 'text', text: '✦ Fast learner, self-driven, ships things that work' }, |
| { type: 'divider' }, |
| { type: 'success', text: '🚀 Ready to contribute from day one — run "contact" to connect!' }, |
| ], |
| }, |
| clear: { |
| desc: 'Clear terminal', |
| run: () => null, |
| }, |
| } |
|
|
| function renderLine(line, i) { |
| const base = { fontSize: '0.78rem', lineHeight: 1.7, fontFamily: 'var(--font-mono)' } |
|
|
| switch (line.type) { |
| case 'title': |
| return <div key={i} style={{ ...base, color: '#a78bfa', fontWeight: 700, marginTop: 4 }}>{line.text}</div> |
| case 'divider': |
| return <div key={i} style={{ ...base, color: 'rgba(99,102,241,0.3)', margin: '2px 0' }}>{'─'.repeat(44)}</div> |
| case 'kv': |
| return ( |
| <div key={i} style={{ ...base, display: 'flex', gap: 8 }}> |
| <span style={{ color: '#64748b', minWidth: 80 }}>{line.key}</span> |
| <span style={{ color: '#e2e8f0' }}>{line.value}</span> |
| </div> |
| ) |
| case 'text': |
| return <div key={i} style={{ ...base, color: '#94a3b8' }}>{line.text || '\u00A0'}</div> |
| case 'info': |
| return <div key={i} style={{ ...base, color: '#38bdf8' }}>{line.text}</div> |
| case 'success': |
| return <div key={i} style={{ ...base, color: '#4ade80', fontWeight: 600 }}>{line.text}</div> |
| case 'cmd': |
| return <div key={i} style={{ ...base, color: '#94a3b8' }}>{line.text}</div> |
| case 'category': |
| return <div key={i} style={{ ...base, color: '#06b6d4', fontWeight: 600, marginTop: 6 }}>{line.text}</div> |
| case 'tags': |
| return ( |
| <div key={i} style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 4 }}> |
| {line.items.map((t, j) => ( |
| <span key={j} style={{ |
| fontSize: '0.68rem', fontFamily: 'var(--font-mono)', |
| background: 'rgba(99,102,241,0.12)', border: '1px solid rgba(99,102,241,0.2)', |
| color: '#a78bfa', borderRadius: 4, padding: '1px 7px', |
| }}>{t}</span> |
| ))} |
| </div> |
| ) |
| case 'proj': |
| return ( |
| <div key={i} style={{ ...base, display: 'flex', gap: 8, alignItems: 'baseline' }}> |
| <span style={{ color: '#6366f1', minWidth: 24 }}>{line.num}</span> |
| <span style={{ color: '#f0f4ff', fontWeight: 600, minWidth: 160 }}>{line.name}</span> |
| <span style={{ color: '#64748b', fontSize: '0.68rem' }}>{line.tech}</span> |
| {line.url && ( |
| <a href={line.url} target="_blank" rel="noopener noreferrer" |
| style={{ color: '#38bdf8', fontSize: '0.68rem', textDecoration: 'none', marginLeft: 4 }}>↗ live</a> |
| )} |
| </div> |
| ) |
| case 'link': |
| return ( |
| <div key={i} style={{ ...base, display: 'flex', gap: 8 }}> |
| <span style={{ color: '#64748b', minWidth: 80 }}>{line.label}</span> |
| <a href={line.href} target="_blank" rel="noopener noreferrer" |
| style={{ color: '#38bdf8', textDecoration: 'none' }} |
| onMouseEnter={e => e.target.style.textDecoration = 'underline'} |
| onMouseLeave={e => e.target.style.textDecoration = 'none'}> |
| {line.value} |
| </a> |
| </div> |
| ) |
| default: |
| return null |
| } |
| } |
|
|
| export default function Terminal() { |
| const [open, setOpen] = useState(false) |
| const [input, setInput] = useState('') |
| const [history, setHistory] = useState([]) |
| const [cmdHistory, setCmdHistory] = useState([]) |
| const [histIdx, setHistIdx] = useState(-1) |
| const inputRef = useRef(null) |
| const bottomRef = useRef(null) |
|
|
| |
| useEffect(() => { |
| if (open && history.length === 0) { |
| setHistory([{ |
| type: 'welcome', |
| lines: [ |
| { type: 'title', text: '⚡ Parthib\'s Portfolio Terminal' }, |
| { type: 'divider' }, |
| { type: 'text', text: 'Welcome, recruiter! Type "help" to see all commands.' }, |
| { type: 'text', text: 'Explore my profile interactively below.' }, |
| { type: 'divider' }, |
| { type: 'info', text: '→ Try: whoami · skills · projects · hire · resume' }, |
| ], |
| }]) |
| } |
| }, [open]) |
|
|
| useEffect(() => { |
| if (open) { |
| setTimeout(() => inputRef.current?.focus(), 80) |
| } |
| }, [open]) |
|
|
| useEffect(() => { |
| bottomRef.current?.scrollIntoView({ behavior: 'smooth' }) |
| }, [history]) |
|
|
| const runCommand = (raw) => { |
| const cmd = raw.trim().toLowerCase() |
| if (!cmd) return |
|
|
| setCmdHistory(prev => [cmd, ...prev]) |
| setHistIdx(-1) |
|
|
| if (cmd === 'clear') { |
| setHistory([]) |
| return |
| } |
|
|
| const def = COMMANDS[cmd] |
| const outputLines = def ? def.run() : [ |
| { type: 'text', text: `bash: ${cmd}: command not found` }, |
| { type: 'info', text: 'Type "help" to see available commands.' }, |
| ] |
|
|
| setHistory(prev => [ |
| ...prev, |
| { type: 'entry', cmd, lines: outputLines || [] }, |
| ]) |
| } |
|
|
| const handleKey = (e) => { |
| if (e.key === 'Enter') { |
| runCommand(input) |
| setInput('') |
| } else if (e.key === 'ArrowUp') { |
| e.preventDefault() |
| const next = Math.min(histIdx + 1, cmdHistory.length - 1) |
| setHistIdx(next) |
| setInput(cmdHistory[next] ?? '') |
| } else if (e.key === 'ArrowDown') { |
| e.preventDefault() |
| const next = Math.max(histIdx - 1, -1) |
| setHistIdx(next) |
| setInput(next === -1 ? '' : cmdHistory[next] ?? '') |
| } |
| } |
|
|
| return ( |
| <> |
| {/* Floating Toggle Button */} |
| <motion.button |
| onClick={() => setOpen(v => !v)} |
| style={{ |
| position: 'fixed', bottom: 28, right: 28, zIndex: 9998, |
| width: 52, height: 52, borderRadius: '50%', |
| background: 'linear-gradient(135deg, #6366f1, #06b6d4)', |
| border: 'none', cursor: 'pointer', |
| display: 'flex', alignItems: 'center', justifyContent: 'center', |
| color: '#fff', fontSize: '1.25rem', |
| boxShadow: '0 8px 32px rgba(99,102,241,0.55), 0 2px 8px rgba(0,0,0,0.4)', |
| }} |
| whileHover={{ scale: 1.1, boxShadow: '0 12px 40px rgba(99,102,241,0.7)' }} |
| whileTap={{ scale: 0.95 }} |
| title="Open Portfolio Terminal" |
| aria-label="Open terminal" |
| > |
| <motion.span |
| animate={{ rotate: open ? 90 : 0 }} |
| transition={{ duration: 0.25 }} |
| style={{ display: 'flex' }} |
| > |
| {open ? <FiX size={22} /> : <FiTerminal size={22} />} |
| </motion.span> |
| </motion.button> |
| |
| {/* Terminal Window */} |
| <AnimatePresence> |
| {open && ( |
| <motion.div |
| initial={{ opacity: 0, y: 40, scale: 0.95 }} |
| animate={{ opacity: 1, y: 0, scale: 1 }} |
| exit={{ opacity: 0, y: 40, scale: 0.95 }} |
| transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }} |
| style={{ |
| position: 'fixed', bottom: 90, right: 28, zIndex: 9997, |
| width: 'min(600px, calc(100vw - 32px))', |
| height: 'min(480px, 60vh)', |
| background: 'rgba(8,10,26,0.97)', |
| backdropFilter: 'blur(24px)', |
| borderRadius: 16, |
| border: '1px solid rgba(99,102,241,0.3)', |
| boxShadow: '0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(99,102,241,0.1)', |
| display: 'flex', flexDirection: 'column', |
| overflow: 'hidden', |
| }} |
| onClick={() => inputRef.current?.focus()} |
| > |
| {/* Title Bar */} |
| <div style={{ |
| display: 'flex', alignItems: 'center', gap: 8, |
| padding: '10px 16px', |
| background: 'rgba(99,102,241,0.06)', |
| borderBottom: '1px solid rgba(99,102,241,0.15)', |
| flexShrink: 0, |
| }}> |
| <div style={{ display: 'flex', gap: 6 }}> |
| {['#f43f5e', '#f59e0b', '#4ade80'].map((c, i) => ( |
| <div key={i} style={{ width: 11, height: 11, borderRadius: '50%', background: c, opacity: 0.85, cursor: i === 0 ? 'pointer' : 'default' }} |
| onClick={i === 0 ? () => setOpen(false) : undefined} /> |
| ))} |
| </div> |
| <div style={{ |
| flex: 1, textAlign: 'center', |
| fontSize: '0.72rem', fontFamily: 'var(--font-mono)', |
| color: '#475569', letterSpacing: '0.05em', |
| }}> |
| <FiTerminal size={11} style={{ display: 'inline', marginRight: 5, verticalAlign: 'middle' }} /> |
| parthib@portfolio ~ zsh |
| </div> |
| <button onClick={() => setOpen(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#475569', display: 'flex' }}> |
| <FiX size={14} /> |
| </button> |
| </div> |
| |
| {/* Output Area */} |
| <div style={{ |
| flex: 1, overflowY: 'auto', padding: '12px 16px', |
| scrollbarWidth: 'thin', scrollbarColor: 'rgba(99,102,241,0.3) transparent', |
| }}> |
| {history.map((entry, ei) => ( |
| <div key={ei} style={{ marginBottom: 10 }}> |
| {entry.type === 'entry' && ( |
| <div style={{ |
| display: 'flex', gap: 6, alignItems: 'baseline', |
| fontSize: '0.78rem', fontFamily: 'var(--font-mono)', |
| marginBottom: 4, |
| }}> |
| <span style={{ color: '#4ade80' }}>parthib</span> |
| <span style={{ color: '#475569' }}>@portfolio</span> |
| <span style={{ color: '#38bdf8' }}>~</span> |
| <span style={{ color: '#64748b' }}>$</span> |
| <span style={{ color: '#e2e8f0' }}>{entry.cmd}</span> |
| </div> |
| )} |
| {entry.lines?.map((line, li) => renderLine(line, li))} |
| </div> |
| ))} |
| <div ref={bottomRef} /> |
| </div> |
| |
| {/* Input Row */} |
| <div style={{ |
| display: 'flex', alignItems: 'center', gap: 8, |
| padding: '10px 16px', |
| borderTop: '1px solid rgba(99,102,241,0.12)', |
| background: 'rgba(0,0,0,0.2)', |
| flexShrink: 0, |
| }}> |
| <span style={{ fontSize: '0.78rem', fontFamily: 'var(--font-mono)', color: '#4ade80', flexShrink: 0 }}>parthib</span> |
| <span style={{ fontSize: '0.78rem', fontFamily: 'var(--font-mono)', color: '#475569', flexShrink: 0 }}>@portfolio</span> |
| <span style={{ fontSize: '0.78rem', fontFamily: 'var(--font-mono)', color: '#38bdf8', flexShrink: 0 }}>~</span> |
| <span style={{ fontSize: '0.78rem', fontFamily: 'var(--font-mono)', color: '#64748b', flexShrink: 0 }}>$</span> |
| <input |
| ref={inputRef} |
| value={input} |
| onChange={e => setInput(e.target.value)} |
| onKeyDown={handleKey} |
| placeholder="type a command..." |
| autoComplete="off" |
| spellCheck={false} |
| style={{ |
| flex: 1, background: 'none', border: 'none', outline: 'none', |
| fontFamily: 'var(--font-mono)', fontSize: '0.78rem', |
| color: '#e2e8f0', caretColor: '#a78bfa', |
| }} |
| /> |
| <span style={{ |
| width: 8, height: 15, background: '#6366f1', borderRadius: 1, |
| animation: 'blink-cursor 0.8s step-end infinite', flexShrink: 0, |
| }} /> |
| </div> |
| </motion.div> |
| )} |
| </AnimatePresence> |
| </> |
| ) |
| } |
|
|
