✯ Terminal Portfolio - Bashfolio

A terminal-style portfolio website built entirely using HTML, CSS, and vanilla JavaScript. Inspired by Unix shells and Bash prompts, this site simulates a fully interactive CLI interface where visitors can run commands to learn more about me — like whoami, projects, socials, email, and more. Experience the nostalgia of command-line interfaces with modern web development.

Important

⚙️ Terminal Portfolio Features

The Terminal Portfolio (Bashfolio) simulates a real Unix terminal experience with authentic command-line interface, interactive commands, realistic typing animations, and multiple color themes. It showcases modern web development techniques while providing a unique, retro computing experience that stands out from traditional portfolio websites.

Technologies Used

This terminal portfolio leverages HTML5 for semantic structure, CSS3 for terminal styling and animations, and vanilla JavaScript for command processing and interactive functionality. It demonstrates pure web technologies without frameworks, creating an authentic terminal experience with modern web standards.

🚀 Deployment Platforms & Hosting

Modern hosting platforms provide seamless deployment with features like automatic CI/CD, form handling, global CDN distribution, and performance optimization for terminal portfolio websites.

Terminal Features

This repository features authentic terminal emulation with command history, tab completion, multiple color themes, realistic typing effects, and responsive design. It includes ASCII art display, system information commands, social media integration, and interactive command processing with error handling.

Important

⚡ Terminal Commands & Features

Interactive Command Line Interface — Experience authentic terminal interaction with a comprehensive set of commands. This terminal portfolio demonstrates real-world command-line functionality with modern web technologies, combining the power of HTML5, CSS3, and vanilla JavaScript for an immersive CLI experience.

🔥 Available Commands

Command	Description
help	Displays all available commands
whoami	Shows your name and intro bio
socials	Displays your social media links
projects	Lists your highlighted personal or academic projects
email	Shows your contact email
neofetch	Displays fun system info in neofetch-style layout
asciiart	Prints cool ASCII art
sudo	Easter egg 😄
clear	Clears the screen
exit	Exits the simulated terminal

🎯 Terminal Command Demos

• 🎨 Multiple Color Themes
  • Classic terminal themes: Green, Amber, Blue, Red, Pink
  • Dark mode optimized for extended use
  • Theme persistence across sessions

    🎨 Terminal Themes & Customization

• ⚡ Terminal Features
  • Realistic typing animations and caret blinking
  • Command history navigation with arrow keys
  • Auto-completion and command suggestions
  • Responsive design for all devices

    ⚡ Interactive Terminal Features

• 🌐 Pure Web Technologies
  • No frameworks or dependencies required
  • Vanilla JavaScript for optimal performance
  • CSS3 animations and transitions
  • HTML5 semantic structure

This terminal portfolio project showcases authentic command-line interface simulation using pure web technologies. The website features realistic terminal behavior, interactive commands, and multiple themes that demonstrate advanced CSS and JavaScript skills. Perfect for developers who want to create a unique, memorable portfolio experience.

⚠️ Note: This is a client-side terminal simulation. No actual system commands are executed for security reasons.

★ Terminal Development Resources

🧩 Core Terminal Technologies

1] HTML5 – Semantic structure for terminal interface and accessibility
2] CSS3 – Terminal styling, animations, and responsive design
3] JavaScript ES6+ – Command processing and interactive functionality
4] Terminal Emulation – Authentic CLI experience with web technologies
5] Animation APIs – Smooth typing effects and transitions
6] Local Storage – Theme persistence and user preferences

⚙️ Terminal Component Types

1] Command Parser:
Processes user input, validates commands, and executes appropriate functions with error handling.
2] Output Renderer:
Displays command results with proper formatting, colors, and animations in terminal style.
3] Theme Manager:
Handles multiple color schemes, theme switching, and persistent user preferences.
4] Animation Engine:
Controls typing effects, cursor blinking, and smooth transitions for realistic terminal feel.

🧰 Essential Development Tools

1] VS Code – Modern code editor with terminal integration – code.visualstudio.com
2] Git – Version control for tracking development progress – git-scm.com
3] Chrome DevTools – Browser tools for debugging terminal behavior
4] Live Server – Local development server with hot reload
5] Netlify – Modern hosting with instant deployment – netlify.com
6] Terminal Emulators – Reference for authentic terminal behavior
7] ASCII Art Generators – Tools for creating terminal art
8] Color Palette Tools – Terminal theme color selection

🛠️ Terminal Simulation Technologies

1] Command Line Interface: HTML structure, CSS styling, JavaScript processing
2] Text Animation: CSS keyframes, JavaScript intervals, typing effects
3] Theme Systems: CSS custom properties, local storage, dynamic styling
4] Interactive Elements: Event listeners, keyboard navigation, command history

📁 Project Structure

Click to expand file structure

Web-Bashfolio/
├── 📄 index.html              # Main terminal interface
├── 📜 LICENSE                 # MIT license
├── 📖 README.md              # Project documentation
├── 📁 assets/
│   ├── 🎨 palet.png          # Color palette reference
│   ├── 🎬 themes.gif         # Theme demonstration
│   └── 📊 themes_stack.png   # Theme stack overview
├── 📁 css/
│   ├── 🎨 academia.css       # Academic theme
│   ├── 🌅 aurora.css         # Aurora theme
│   ├── ⚫ b&w.css            # Black & white theme
│   ├── 🔵 default.css        # Default blue theme
│   ├── ☕ espresso.css       # Espresso dark theme
│   ├── 💚 green.css          # Classic green theme
│   ├── 💖 pink.css           # Retro pink theme
│   └── ⚙️ set_theme.css      # Theme management
├── 📁 js/
│   ├── 🔶 caret.js           # Terminal cursor animation
│   ├── ⚡ command.js         # Command processing logic
│   └── 🎮 main.js            # Main application logic
├── 📁 prvt/                  # Private development files
│   ├── 🌅 aurorav1.css       # Aurora theme v1
│   ├── 📝 backup.md          # Development backup
│   ├── 🔶 caret.js           # Caret backup
│   ├── ⚡ command.js         # Command backup
│   ├── 📄 index.html         # Index backup
│   ├── 🎮 main.js            # Main backup
│   ├── 🎨 style.css          # Style backup
│   └── 🧪 temp.css           # Temporary styles
└── 📁 Tutorial/              # Step-by-step guides
    ├── 📘 01_terminal_core_ui_.md
    ├── 📘 02_user_input___typing_handler_.md
    ├── 📘 03_command_interpreter_.md
    ├── 📘 04_command_output_data_.md
    ├── 📘 05_output_rendering_engine_.md
    ├── 📘 06_theme_management_.md
    └── 📖 README.md          # Tutorial overview

🚀 Quick Start - Deploy Your Own Copy!

🎯 Option 1: Fork & Deploy (Recommended for Beginners)

Get your own terminal portfolio live in under 2 minutes!

1. 🍴 Fork this repository

   • Click the "Fork" button at the top of this page
   • This creates your own copy of the project

2. 🚀 Deploy instantly to Netlify

   • Click the "Deploy to Netlify" button above
   • Connect your GitHub account
   • Select your forked repository
   • Your site will be live in minutes!

3. ✏️ Customize later

   • Edit files directly on GitHub or clone locally
   • Netlify will automatically redeploy when you make changes
   • Follow the customization guide below to personalize it

💡 Learn How It Works - Tutorial Series

Want to understand how this terminal portfolio was built? Check out our comprehensive tutorial series:

📚 Tutorial Folder - Step-by-step guides covering:

Perfect for:

• 🎓 Learning terminal emulation with web technologies
• 💻 Understanding vanilla JavaScript project structure
• 🎨 Creating your own terminal-style portfolio
• 📚 Web development educational purposes

🛠️ Option 2: Local Development Setup

Prerequisites

• Web browser (Chrome, Firefox, Safari, Edge)
• Code editor (VS Code recommended)
• Git (for version control)
• Basic understanding of HTML, CSS, and JavaScript

Local Development

1. Clone your forked repository (or this one)

   git clone https://github.com/YOUR-USERNAME/rushi-bashfolio.git
   cd rushi-bashfolio

2. Open in your browser

   • Simply open index.html in your web browser
   • Or use a local server for better development experience:

   # Using Python
   python -m http.server 8000
   
   # Using Node.js
   npx serve .
   
   # Using VS Code Live Server extension
   # Right-click on index.html → "Open with Live Server"

3. View the terminal

   • Open http://localhost:8000 in your browser
   • Start typing commands like help, whoami, projects

🌐 Deployment Options

🔵 Netlify (Recommended - Free)

For your forked repository:

1. Go to Netlify
2. Click "New site from Git"
3. Connect your GitHub account
4. Select your forked rushi-bashfolio repository
5. Deploy settings:
   • Build command: (leave empty)
   • Publish directory: (leave empty or set to root)
6. Click "Deploy site"

One-click deploy:

🟠 Vercel (Free)

1. Go to Vercel
2. Import your forked GitHub repository
3. Deploy with default settings

⚫ GitHub Pages (Free)

1. In your forked repository settings
2. Go to "Pages" section
3. Source: Deploy from branch → main
4. Your site will be available at: https://YOUR-USERNAME.github.io/rushi-bashfolio

🔴 Firebase Hosting (Free tier available)

1. Install Firebase CLI: npm install -g firebase-tools
2. Run firebase init hosting in your project directory
3. Deploy with firebase deploy

🎨 Customization Guide

🎯 Quick Customization Checklist

After forking and deploying, personalize your terminal portfolio:

• Update personal information in js/command.js
• Replace projects with your own work
• Change social media links to yours
• Update contact email
• Modify the welcome message
• Add your own ASCII art
• Choose your preferred theme
• Update the page title in index.html

📝 Personalizing Content

Updating Personal Information

Edit the command outputs in js/command.js:

1. Update whoami command:

whoami: {
  description: "Display current user information",
  output: () => {
    return `
guest@portfolio:~$ whoami
Your Name Here
Student | Developer | Your Title

Your bio and introduction here...
    `;
  }
}

2. Modify projects command:

projects: {
  description: "Display portfolio projects",
  output: () => {
    return `
🚀 Your Amazing Project
   Description of your project
   [Tech: React, Node.js, MongoDB]
   
🎮 Another Cool Project  
   What this project does
   [Tech: JavaScript, CSS, HTML]
    `;
  }
}

3. Change socials command:

socials: {
  description: "Display social media links",
  output: () => {
    return `
📱 Social Media Links:
   GitHub: https://github.com/yourusername
   LinkedIn: https://linkedin.com/in/yourprofile
   Twitter: https://twitter.com/yourhandle
    `;
  }
}

4. Update email command:

email: {
  description: "Display contact email",
  output: () => {
    return `📧 Contact: your.email@example.com`;
  }
}

🎨 Adding New Commands

Creating Custom Commands

Add new commands in js/command.js:

// Add to the commands object
commands: {
  // ... existing commands
  resume: {
    description: "Download my resume",
    output: () => {
      window.open('./assets/your-resume.pdf', '_blank');
      return "📄 Opening resume in new tab...";
    }
  },
  
  skills: {
    description: "Display technical skills",
    output: () => {
      return `
💻 Technical Skills:
   Languages: JavaScript, Python, Java
   Frontend: React, Vue.js, HTML/CSS
   Backend: Node.js, Express, MongoDB
   Tools: Git, Docker, VS Code
      `;
    }
  }
}

🎨 Theme Customization

Using Existing Themes

Switch between pre-built themes by changing the CSS import in index.html:

<!-- Choose one of these themes -->
<link rel="stylesheet" href="css/green.css">     <!-- Classic green -->
<link rel="stylesheet" href="css/aurora.css">   <!-- Aurora blue -->
<link rel="stylesheet" href="css/pink.css">     <!-- Retro pink -->
<link rel="stylesheet" href="css/espresso.css"> <!-- Dark espresso -->

Creating New Themes

Create a new CSS file in the css/ directory:

/* css/mytheme.css */
:root {
  --primary-color: #your-primary-color;
  --secondary-color: #your-secondary-color;
  --background-color: #your-background;
  --text-color: #your-text-color;
  --accent-color: #your-accent-color;
}

📚 Learning from Tutorials

Follow the Tutorial Series

Learn how each component works by following our tutorial series in the Tutorial/ folder:

1. Overview - Project architecture and concepts
2. Terminal Core UI - Building the terminal interface
3. User Input & Typing Handler - Handling user interactions
4. Command Interpreter - Processing commands
5. Command Output Data - Managing command responses
6. Output Rendering Engine - Displaying results
7. Theme Management - Creating and switching themes

Perfect for:

• Understanding the codebase structure
• Learning terminal emulation concepts
• Building your own commands and features
• Exploring advanced customization options

🤝 Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/new-command)
3. Add your changes (new commands, themes, features)
4. Test your changes thoroughly
5. Commit your changes (git commit -m 'Add new terminal command')
6. Push to the branch (git push origin feature/new-command)
7. Open a Pull Request

Contribution Ideas

• 🎨 New terminal themes
• ⚡ Additional commands
• 🐛 Bug fixes and improvements
• 📚 Documentation updates
• 🌐 Accessibility enhancements

Contact

📧 Email: rushiofficial1205@gmail.com
💼 LinkedIn: in/rushhiii
🐙 GitHub: @rushhiii
🌐 Portfolio: rushi-bashfolio.netlify.app
🖥️ Terminal Portfolio: rushi-bashfolio.netlify.app

by @rushhiii