103 lines
2.3 KiB
Markdown
103 lines
2.3 KiB
Markdown
# Interactive Terminal Portfolio
|
|
|
|
A modern, interactive terminal-style portfolio website built with React and Tailwind CSS. This project provides a unique way to showcase your skills, projects, and information through a familiar command-line interface.
|
|
|
|
## Features
|
|
|
|
- 🖥️ Fully functional command-line interface
|
|
- 📁 Virtual filesystem navigation
|
|
- 🎨 Beautiful and responsive design
|
|
- ⌨️ Command autocompletion with Tab
|
|
- 🖼️ Image viewing support
|
|
- 🎯 Custom commands and shortcuts
|
|
- 🌈 Modern UI with gradient backgrounds
|
|
- 🎮 Interactive ASCII art welcome screen
|
|
|
|
## Available Commands
|
|
|
|
- `ls` - List directory contents (alphabetically sorted)
|
|
- `cd [directory]` - Change directory
|
|
- `cat [file]` - Display file contents
|
|
- `view [image]` - Display image files
|
|
- `pwd` - Print working directory
|
|
- `clear` - Clear the terminal screen
|
|
- `help` - Display help information
|
|
- `date` - Show current date and time
|
|
|
|
## Shortcuts
|
|
|
|
- `Tab` - Autocomplete commands and paths
|
|
- `Ctrl+L` - Clear the terminal screen
|
|
|
|
## Directory Structure
|
|
|
|
```
|
|
/home/guest/
|
|
├── about.txt # Personal introduction
|
|
├── welcome.txt # Welcome message
|
|
├── projects/ # Project showcase
|
|
├── skills/ # Technical skills
|
|
├── contact/ # Contact information
|
|
├── images/ # Image assets
|
|
└── blog/ # Blog posts
|
|
```
|
|
|
|
## Technologies Used
|
|
|
|
- React.js
|
|
- Tailwind CSS
|
|
- JavaScript (ES6+)
|
|
- HTML5
|
|
- CSS3
|
|
|
|
## Getting Started
|
|
|
|
1. Clone the repository:
|
|
|
|
```bash
|
|
git clone https://github.com/yourusername/terminal-portfolio.git
|
|
```
|
|
|
|
2. Install dependencies:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Start the development server:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
4. Build for production:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
## Customization
|
|
|
|
1. Edit the filesystem structure in `src/data/filesystem.js`
|
|
2. Modify the styling in `src/index.css`
|
|
3. Update the terminal component in `src/components/Terminal.jsx`
|
|
4. Add your own images to the `public` directory
|
|
|
|
## Contributing
|
|
|
|
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
|
|
## License
|
|
|
|
This project is licensed under the MIT License - see the LICENSE file for details.
|
|
|
|
## Acknowledgments
|
|
|
|
- Inspired by Unix/Linux terminal interfaces
|
|
- Built with modern web technologies
|
|
- Designed for developer portfolios
|
|
|
|
---
|
|
|
|
Made with ❤️ by [Your Name]
|