From e3b91e1094f80f6bee79a3db6b0e61e3d9c37980 Mon Sep 17 00:00:00 2001 From: Leo Date: Mon, 24 Mar 2025 06:18:06 +0100 Subject: [PATCH] README.md --- README.md | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 97 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index fd3b758..976826d 100644 --- a/README.md +++ b/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 -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +- 🖥️ 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 -## 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]