🚀 Terminal Portfolio

A unique, interactive terminal-styled portfolio website built with React, TypeScript, and Tailwind CSS. Experience a modern take on the classic terminal interface with smooth animations, clickable outputs, and comprehensive portfolio information.

✨ Features

🎯 Core Functionality

• Interactive Terminal Interface: Full terminal emulation with command history, auto-completion, and keyboard shortcuts
• Command System: Extensive set of commands to explore portfolio information
• Clickable Outputs: Interactive elements in command outputs (projects, links, contact info)
• Responsive Design: Works seamlessly on desktop and mobile devices
• Modern UI: Beautiful animations, gradients, and smooth transitions

🖥️ Terminal Features

• Command History: Navigate through previous commands with arrow keys
• Keyboard Shortcuts:
  • Ctrl + L: Clear terminal
  • Ctrl + C: Clear current command
  • ↑/↓: Navigate command history
  • Tab: Auto-completion (future feature)
• Typing Animation: Welcome banner with realistic typing effect
• Auto-focus: Terminal input automatically focuses for immediate interaction

📋 Available Commands

Command	Description
help	Show all available commands
about	Display personal information
skills	List technical skills by category
projects	Show featured projects with live demos
experience	Display work experience
education	Show educational background
contact	Display contact information
social	Show social media links
resume	Download resume/CV
clear	Clear terminal screen
ls	Alias for projects command
pwd	Show current "directory"
whoami	Display current user information
date	Show current date and time
echo	Echo back input text
banner	Display welcome banner
history	Show command history

🎨 UI Components

• Draggable Terminal Window: macOS-style window controls with minimize/maximize/fullscreen
• Dock: Animated dock with social links and project shortcuts
• Header Bar: System-style header with time, battery, and theme toggle
• Smooth Animations: Framer Motion powered animations throughout
• Dark Theme: Modern dark theme with zinc color palette

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/saikat709/terminal-portfolio.git
   cd terminal-portfolio

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser

   http://localhost:5174/terminal-portfolio/
   

Build for Production

npm run build

Deploy to GitHub Pages

npm run deploy

🛠️ Tech Stack

• Frontend Framework: React 19
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• UI Components: Radix UI
• Build Tool: Vite
• Icons: Lucide React
• Window Management: React RND

📁 Project Structure

src/
├── components/
│   ├── Terminal.tsx      # Main terminal component
│   ├── AppsDock.tsx      # Dock with social links
│   ├── Header.tsx        # System header bar
│   └── ui/               # Reusable UI components
├── pages/
│   └── Home.tsx          # Main page component
├── lib/
│   └── info.ts           # Portfolio data and commands
├── types/
│   └── *.ts              # TypeScript type definitions
└── utils/
    └── *.ts              # Utility functions

🎯 Usage Examples

Basic Navigation

help          # Show all commands
about         # Learn about me
skills        # See my technical skills

Explore Projects

projects      # View featured projects
ls            # Same as projects

Get in Touch

contact       # Contact information
social        # Social media links

Terminal Tricks

clear         # Clear screen
history       # Command history
whoami        # Current user
date          # Current time

🎨 Customization

Adding New Commands

1. Add command to commands object in src/lib/info.ts
2. Add case in executeCommand function in Terminal.tsx
3. Implement render function for the command output

Modifying Portfolio Data

Edit the data in src/lib/info.ts:

• Personal information
• Skills and technologies
• Projects and experience
• Contact details

Styling Changes

• Colors: Modify Tailwind classes in components
• Animations: Adjust Framer Motion properties
• Layout: Update component structure and CSS classes

🌟 Key Highlights

• Unique Concept: Terminal interface for portfolio presentation
• Interactive Experience: Clickable elements and smooth animations
• Modern Tech Stack: Latest React features with TypeScript
• Responsive Design: Works on all device sizes
• Performance Optimized: Fast loading with Vite bundler
• Accessible: Keyboard navigation and screen reader friendly

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by modern terminal interfaces and portfolio websites
• Built with love for the developer community
• Special thanks to the open-source ecosystem

---

Made with ❤️ by Saikat Islam

🌐 Live Demo • 🐙 GitHub