README.md

README.md

@@ -1,12 +1,102 @@
-# React + Vite
+# Interactive Terminal Portfolio
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+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.
 
-Currently, two official plugins are available:
+## Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- 🖥️ Fully functional command-line interface
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- 📁 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
 
-## Expanding the ESLint configuration
+## Available Commands
 
-If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+- `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]