FiRasel Terminal Portfolio

An interactive terminal-styled portfolio website with sound effects and animations

Live Demo • Features • Technologies • Getting Started • Contributing

🚀 Features

Terminal Emulation - Real terminal experience with command execution, history navigation (↑/↓), and auto-focus
Sound Effects - Immersive audio feedback for typing, commands, and errors using Howler.js
Interactive Commands - Browse projects, skills, experience, and contact information through CLI-style commands
Smooth Animations - Falling text effects, glassmorphism UI, and fluid transitions
3D Effects - Liquid background with animated blobs and depth
Modern Stack - Built with cutting-edge technologies: Next.js 16, React 19, and Tailwind CSS 4
Fully Responsive - Optimized for all screen sizes from mobile to desktop
Command History - Navigate through previous commands using arrow keys
Quick Actions - Click-to-execute buttons

🛠 Technologies

🎯 Getting Started

Installation

Clone the repository

git clone https://github.com/firasel/Terminal-Portfolio.git

Go to the project directory

cd Terminal-Portfolio

Install dependencies

npm install
# or
yarn install

Development

Start the development server

npm run dev
# or
yarn dev

Open http://localhost:3000 to view it in your browser.

Build for Production

npm run build
# or
yarn build

Start production server

npm start
# or
yarn start

📁 Project Structure

src/
├── app/                  # Next.js 16 App Router
│   ├── layout.tsx       # Root layout with metadata
│   └── page.tsx         # Home page
├── components/
│   ├── sound-control/   # Volume control widget
│   ├── terminal/        # Terminal emulator + command system
│   │   ├── commands.ts  # Command registry
│   │   ├── hooks/       # Custom hooks (terminal, history, sound)
│   │   └── templates/   # Output templates for commands
│   ├── text-drop/       # Falling text animation
│   └── liquid-background/ # Animated background
└── styles/
    └── globals.css      # Tailwind CSS v4 configuration

💻 Available Commands

Type these commands in the terminal:

help - Show all available commands
about - Learn about me
skills - View my skill set
projects - Browse my projects
experience - Work experience
pr [1-4] - Detailed project view
social - Social profiles
contact - Get in touch
clear - Clear the terminal
github / linkedin / leetcode - Open social links

🎨 Customization

To customize this portfolio for your own use:

Update personal information in src/components/terminal/templates/
Modify metadata in src/app/layout.tsx
Change color scheme in src/styles/globals.css
Update project links in src/components/terminal/templates/project-details.ts

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

📝 License

This project is MIT licensed.

🌟 Inspiration

Inspired by these amazing terminal portfolios:

👨‍💻 Author

Fi Rasel

Website: terminal.firasel.com
GitHub: @firasel
LinkedIn: firasel

If you found this project helpful, please consider giving it a ⭐️

Made with ❤️ by Fi Rasel

firasel/Terminal-Portfolio