Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/kuberwastaken/kuberwastaken.github.io

The Best Terminal-Inspired Portfolio Website on The Internet™
https://github.com/kuberwastaken/kuberwastaken.github.io

ai kuber kuber-mehta portfolio react terminal terminal-emulator

Last synced: 9 months ago
JSON representation

The Best Terminal-Inspired Portfolio Website on The Internet™

Awesome Lists containing this project

README 

          


  
The Best Terminal Inspired Portfolio on the Internet™️







  Portfolio GIF








  Half Joking with the title, not really, well, not until proven otherwise atleast...






  React

    AI

    PWA




---





  

    Try it out here for yourself

  




---






## Welcome to my Personal Portfolio Repository!



This project is the fruit of blood, sweat, and eye strain to showcase my skills, projects, and professional journey through an interactive terminal-style interface. Dive in and feel free to explore the things that set my portfolio apart.



Expect me adding a lot other cool stuff and not mentioning this in the README because I prefer to ship stuff and hate documenting it (ugh) and this is one of my favorite personal projects to mess around with.



---



## 🛠️ Technical Architecture



### **Frontend Framework**

- **React** - Latest React with concurrent features and improved performance

- **Custom Hooks & Context** - Efficient state management and theme switching

- **Component Architecture** - Modular, reusable components with clear separation of concerns



### **Core Technologies**

- **HTML5 & Semantic Markup** - Accessible, SEO-friendly structure (thanks [CSS Naked day](https://github.com/Kuberwastaken/Kuberwastaken.github.io/tree/css-naked-day))

- **CSS3 & Advanced Animations** - Custom CSS grid, flexbox, and smooth transitions

- **ES6+ JavaScript** - Modern JavaScript with async/await, destructuring, and modules

- **Local Storage Integration** - Persistent game scores and user preferences



### **Performance Features**

- **Code Splitting** - Lazy loading for optimal performance

- **Component Memoization** - React.memo for expensive re-renders

- **Event Listener Cleanup** - Proper memory management and cleanup

- **Efficient Re-rendering** - Strategic use of useCallback and useMemo hooks

- **Canvas Optimization** - RequestAnimationFrame for smooth 60fps animations

- **Local Storage Caching** - Persistent data without server calls

- **PWA Ready** - Service worker support for offline functionality

- **Responsive Design** - Mobile-first approach with adaptive layouts

- **Cross-Browser Compatibility** - Tested across Chrome, Firefox, Safari, and Edge



---



## 🎮 Interactive Features Deep Dive



### **🖥️ Terminal Emulator**

A fully functional terminal interface with:

- **Command Autocomplete** - Smart suggestions with fuzzy matching

- **Command History** - Navigate previous commands with arrow keys

- **Error Handling** - Intelligent error messages with command suggestions

- **Real-time Feedback** - Immediate visual and textual responses



### **🎯 Gaming Ecosystem**

**Snake Game**

- Classic gameplay with modern touch controls

- Collision detection and smooth animations

- Mobile-optimized controls and responsive design



**Tetris**

- Full line-clearing mechanics with scoring system

- Piece rotation and collision detection

- Local storage for high scores



**2048**

- Swipe and keyboard controls

- Smooth tile animations and merging logic

- Win/lose detection with game state management



**Flappy Bird**

- Physics-based gameplay with gravity simulation

- Procedural pipe generation

- Touch and keyboard controls with responsive design



**[The Backdooms](https://github.com/kuberwastaken/backdooms)**

- DOOM-inspired game built in under 2.6KB

- QR code integration for viral sharing

- Backrooms aesthetic with 3D-like gameplay



### **🤖 AI Integration - JARVIS**

- **Custom AI Assistant** - Built with backend integration

- **Session Management** - Persistent conversations across page reloads

- **Markdown Support** - Rich text formatting in responses

- **Portfolio Intelligence** - AI trained on portfolio content for accurate responses

- **Error Handling** - Graceful degradation when API is unavailable



### **🧮 Advanced Calculator**

- Full mathematical expression parsing

- Support for parentheses and complex operations

- Scientific notation and advanced functions

- Responsive button layout for mobile devices



### **🎨 Dynamic Theming System**

- **15+ Pre-built Themes** - Curated solid colors and gradients

- **Real-time Theme Switching** - Instant visual updates without page reload

- **Persistent Preferences** - Themes saved to localStorage for return visits

- **CSS Custom Properties** - Efficient theme management with CSS variables

- **Interactive Theme Gallery** - Visual theme picker with live previews

- **Branded Themes** - Special themes inspired by projects (ORCUS, GitHub Art)

- **Gradient Support** - Complex linear gradients including Deep Space, Cherry Blossom

- **Dynamic Injection** - Runtime CSS injection for seamless theme changes



### **🤖 JARVIS AI Integration Details**

- **Backend Architecture** - Node.js backend with session management

- **Session Persistence** - Conversations persist across page reloads

- **Markdown Rendering** - Full markdown support with custom parser

- **Error Handling** - Graceful degradation when backend is unavailable

- **Real-time Chat** - WebSocket-like experience with HTTP polling

- **Portfolio Intelligence** - AI trained specifically on portfolio content

- **Response Formatting** - Rich text with links, lists, and code blocks

- **Mobile Optimization** - Touch-friendly chat interface with responsive design



### **🔍 Integrated Search Capabilities**

Direct search integration for:

- **Google Search** - `google [query]`

- **YouTube Search** - `youtube [query]`

- **Wikipedia Lookup** - `wiki [query]`

- **ChatGPT Access** - `chatgpt [query]`

- **Perplexity AI** - `perplexity [query]`



### **📊 Data Visualization**

- **Animated Skills Charts** - Interactive skill level indicators

- **Project Masonry Layout** - Dynamic grid with hover effects

- **ASCII Art Generation** - Custom ASCII selfie display

- **Neofetch Clone** - System information display



### **🎭 Special Effects**

- **Hollywood Matrix Effect** - Toggle-able background effect with `hackermode` command

- **Smooth Animations** - CSS transitions and transforms

- **Particle Effects** - Canvas-based visual enhancements

- **Loading States** - Elegant loading indicators throughout

- **RGB Animations** - Dynamic color-cycling text effects

- **Glassmorphism UI** - Modern blur effects with backdrop filters



### **🎪 Easter Eggs & Hidden Features**



Try it out yourself 🙃



Click to spoil them anyways



- **ASCII Selfie** - Custom ASCII art with hidden developer comments

- **Command Typo Correction** - Intelligent suggestions using Levenshtein distance algorithm

- **Secret Command Aliases** - Multiple ways to execute the same commands

- **Browser Mockups** - Faux webpage previews for projects

- **Version Display** - Portfolio version tracking in welcome message

- **Memory Persistence** - Game high scores and theme preferences saved locally



---



## 📱 Mobile-First Design



### **Touch Optimizations**

- **Gesture Controls** - Swipe navigation for games

- **Touch-Friendly Buttons** - Optimized touch targets

- **Responsive Typography** - Fluid font scaling

- **Mobile Command Input** - On-screen keyboard optimization



### **Performance on Mobile**

- **Optimized Assets** - Compressed images and efficient loading

- **Touch Event Handling** - Prevents scrolling conflicts

- **Viewport Management** - Proper mobile viewport configuration

- **Battery Efficiency** - Optimized animations and rendering



---



## 🎯 Command System Architecture



### **Available Commands** (30+ total)

```bash

# Navigation & Information

help, who, skills, projects, resume, blog



# Games & Entertainment  

games, snake, tetris, 2048, flappybird, backdooms



# Utilities & Tools

calculator, neofetch, ascii-selfie, time, date



# Search & External

google [query], youtube [query], wiki [query]

chatgpt [query], perplexity [query]



# Customization

theme [name], background [name], hackermode



# Social & Contact

github, linkedin, email, discord, youtube



# AI Assistant

jarvis [query]



# System

clear, misc

```



### **Smart Command Processing**

- **Fuzzy Matching** - Suggests similar commands for typos using Levenshtein distance

- **Alias Support** - Multiple ways to call the same command (e.g., `s`, `sk`, `skills`)

- **Parameter Parsing** - Intelligent argument handling for search commands

- **Error Recovery** - Helpful error messages with clickable suggestions

- **Command History** - Navigate previous commands with arrow keys (↑/↓)

- **Auto-complete** - Smart command suggestions with fuzzy matching



### **Advanced Gaming Architecture**

- **Physics Engine** - Custom gravity and collision detection for Flappy Bird

- **Game State Management** - Persistent high scores across sessions

- **Touch Controls** - Region-based touch input for mobile Snake gameplay

- **Frame Rate Optimization** - RequestAnimationFrame for smooth 60fps gaming

- **Cross-Platform Input** - Unified keyboard and touch event handling

- **Memory Management** - Proper cleanup of game intervals and event listeners



---



## 🎨 Design Philosophy



### **Terminal Aesthetics**

- **Monospace Typography** - JetBrains Mono for authentic terminal feel

- **Green-on-Black Color Scheme** - Classic terminal colors with modern touches

- **Scan Lines & CRT Effects** - Subtle retro visual elements

- **Authentic Terminal Behaviors** - Cursor animations, text streaming



### **Modern UX Principles**

- **Progressive Disclosure** - Information revealed as needed

- **Immediate Feedback** - Real-time responses to user actions

- **Error Prevention** - Smart defaults and input validation

- **Accessibility** - Screen reader support and keyboard navigation



---



## 📊 Project Showcase Integration



### **Featured Projects**

- **TREAT** - Tech platform with 1000+ users

- **PolyThink** - AI-powered content platform

- **Engram** - Open-source educational resources

- **LifeMap** - Personal network visualization tool

- **MiniLMs** - Custom AI chatbot development



### **Project Display Features**

- **Interactive Cards** - Hover effects and animations

- **Live Previews** - Embedded iframes for web projects

- **GitHub Integration** - Direct repository links

- **Responsive Gallery** - Mobile carousel and desktop masonry



---



## 🎯 Future Roadmap



Very vibe dependent honestly :P



---



## 🚀 Getting Started



### **Local Development**

```bash

# Clone the repository

git clone https://github.com/Kuberwastaken/Kuberwastaken.github.io.git



# Navigate to project directory

cd Kuberwastaken.github.io



# Install dependencies

npm install



# Start development server

npm start



# Build for production

npm run build



# Deploy to GitHub Pages

npm run deploy

```



### **Key Dependencies**

- **React 19.0.0** - Core framework

- **@react-pdf-viewer** - PDF rendering for resume

- **react-scripts 5.0.1** - Build toolchain

- **gh-pages** - Deployment automation



---



This portfolio represents the intersection of **technical expertise**, **creative design**, and **user experience innovation**. It's not just a showcase of past work—it's a playground for exploring new technologies and pushing the boundaries of what's possible in a web browser.



**Visit the live portfolio**: [kuber.studio](https://kuber.studio/)



---





  
Built with ❤️ by Kuber Mehta