🎯 Terminal Portfolio - Complete Overview

✨ What You Have

A fully functional, production-ready terminal-style developer portfolio with React + Vite featuring:

✅ Core Features Implemented

Terminal Boot Sequence - 3 second animated startup
11 Interactive Commands - help, about, skills, projects, experience, socials, contact, resume, whoami, theme, clear
Command History - Navigate with arrow keys
Tab Autocomplete - Smart command suggestions
Dark & Light Mode - Theme toggle with terminal green accent (#00ff55)
Sound Effects - Optional Web Audio API (beep, success, error, keypress)
Analytics Tracking - Local localStorage monitoring
Responsive Design - Works on desktop, tablet, mobile
Blinking Cursor - Authentic terminal aesthetic
Keyboard First - Full keyboard navigation support

🎨 Design Features

Terminal green accent color with glow effect
Smooth typing animations and transitions
Professional dark mode (default) + light mode
Customizable CSS with module scoping
Mobile-friendly layout
Monospace font stack (Courier New, JetBrains Mono, Cascadia Code)

🚀 Tech Stack

React 19 - Functional components
Vite 7 - Lightning-fast dev server & build
CSS Modules - Scoped, maintainable styling
Web Audio API - Programmatic sound generation
ES6+ Modern JavaScript - Clean, readable code

📂 Your Portfolio Data

Everything about you is in src/config/portfolio.js:

{
  personal: {
    name: 'Abhishek Shaw',
    tagline: 'Tech Enthusiast',
    location: 'Kolkata, India',
    age: 20,
  },
  about: 'A 20yo programmer with intermediate skills and professional goal. I get work done...',
  skills: {
    Languages: ['Java', 'Python', 'JavaScript', 'SQL', 'NoSQL'],
    'Frameworks & Tools': ['Express', 'React', 'LangChain'],
    'Cloud & DevOps': ['AWS', 'Docker'],
    'Database & APIs': ['PostgreSQL', 'MongoDB', 'Redis', 'WebSockets', 'RESTful APIs'],
    Other: ['Git', 'Linux', 'Database Design', 'Problem Solving'],
  },
  projects: [
    // Backend For AdviseAI
    // Banking System
  ],
  experience: [
    // Full-stack Developer @ AdviseAI
    // Competitive Programmer
  ],
  social: {
    github: 'https://github.com/akshawop',
    linkedin: 'https://linkedin.com/in/akshawop',
    email: 'abhishekshaw1507@gmail.com',
    resume: null, // Add your resume URL here
  },
  theme: {
    accentColor: '#00ff55',  // Terminal green
    // ... other theme colors
  },
  features: {
    autocomplete: true,
    soundEffects: true,
    analytics: true,
    lightMode: true,
  },
}

All commands pull data from this single file!

🎮 Available Commands (Try Them!)

Navigation Commands

help          → Show all available commands
about         → Display your bio
whoami        → Show user profile information

Portfolio Commands

skills        → View all technical skills by category
projects      → List all projects with descriptions
projects 1    → Detailed view of "Backend For AdviseAI"
projects 2    → Detailed view of "Banking System"
projects list → Show project IDs for quick access
experience    → Display work history and achievements

Contact & Social

socials       → Show GitHub, LinkedIn, Email
contact       → Same as socials
resume        → Open resume link in new tab

System Commands

theme         → Display current theme
theme toggle  → Switch dark/light mode (use header button)
clear         → Clear terminal screen

Keyboard Shortcuts

TAB           → Autocomplete command
↑ Arrow Up    → Previous command in history
↓ Arrow Down  → Next command in history
Ctrl+C        → Clear current input

🚀 Getting Started

1. Start Development Server

cd d:\OneDrive\Desktop\portfolio
npm run dev

Open browser at http://localhost:5173

2. Test All Features

Type help to see all commands
Try each command to see your data
Press TAB to autocomplete
Use ↑↓ arrows for history
Click theme button to switch modes

3. Customize Your Content

Edit src/config/portfolio.js:

Update personal info
Add more skills or projects
Change colors
Toggle features on/off

4. Build & Deploy

npm run build    # Creates optimized build

Then deploy using:

Vercel: vercel deploy
Netlify: netlify deploy --prod --dir=dist
GitHub Pages: Follow DEPLOYMENT.md

📁 File Structure

portfolio/
├── src/
│   ├── config/
│   │   └── portfolio.js          ⭐ YOUR DATA LIVES HERE
│   ├── components/
│   │   └── Terminal.jsx          Main interactive component
│   ├── utils/
│   │   ├── commandHandlers.js    Command output logic
│   │   ├── commandParser.js      Input parsing
│   │   ├── soundEffects.js       Audio generation
│   │   └── analytics.js          Usage tracking
│   ├── hooks/
│   │   ├── useTypingAnimation.js Typing effect
│   │   └── useCommandHistory.js  History navigation
│   ├── styles/
│   │   └── Terminal.module.css   All styling
│   ├── App.jsx                   Root component
│   ├── App.css                   Global styles
│   ├── main.jsx                  Entry point
│   └── index.css                 Base styles
├── public/                        Static assets
├── package.json                  Dependencies & scripts
├── vite.config.js               Build configuration
├── QUICK_START.md               Quick reference guide
├── SETUP.md                     Customization guide
├── DEPLOYMENT.md                Deployment instructions
├── ARCHITECTURE.md              Technical documentation
└── index.html                   HTML entry point

🎨 Customization Examples

Change Accent Color

// src/config/portfolio.js
theme: {
  accentColor: '#0099ff',  // Change to blue
  // All green theme will become blue
}

Add New Skill

skills: {
  Languages: ['Java', 'Python', 'JavaScript', 'SQL', 'NoSQL', 'C++'],  // Add here
}

Add New Project

projects: [
    // ... existing projects
    {
        id: 3,
        name: "AI Chat System",
        description: "Real-time messaging with LLM integration",
        highlights: ["Feature 1", "Feature 2"],
        tech: ["Node.js", "React", "OpenAI"],
        github: "https://github.com/akshawop/chat-system",
        live: "https://chat-system.vercel.app",
    },
];

Update Resume Link

social: {
  // ...
  resume: 'https://drive.google.com/file/d/YOUR-FILE-ID/view',  // Add URL
}

Disable Sound Effects

features: {
  soundEffects: false,  // Mute sounds
}

📊 Analytics

Local Tracking (Built-in)

// Stored in browser localStorage
{
  visitCount: 5,
  commandsExecuted: {
    help: 3,
    skills: 2,
    projects: 5,
    about: 1
  },
  firstVisit: "2025-12-18T10:30:00.000Z",
  lastVisit: "2025-12-18T14:45:00.000Z"
}

View Analytics

Press F12 (DevTools) → Console:

JSON.parse(localStorage.getItem("portfolio_analytics"));

🌐 Deployment Options

Option 1: Vercel ⚡ (Recommended)

Fastest deployment
Automatic from GitHub
https://your-name.vercel.app

Option 2: Netlify 🔷

Easy GitHub integration
Good performance
https://your-site.netlify.app

Option 3: GitHub Pages 📄

Free, no external account needed
Perfect for portfolios
https://akshawop.github.io/portfolio

See DEPLOYMENT.md for full instructions.

✨ Key Implementation Details

Boot Sequence

1. "Initializing terminal..."
2. "Loading portfolio data..."
3. "Mounting file system..."
4. "Connecting to neural network..."
5. "Portfolio loaded successfully!"
6. "Welcome, Abhishek!"

Command Execution Flow

User types "projects 1"
  → Parsed: {command: "projects", args: ["1"]}
  → Handler finds project ID 1
  → Generates formatted output
  → Adds command line to terminal
  → Adds output line to terminal
  → Terminal re-renders

Autocomplete Behavior

User types "sk"
  → Autocomplete matches "skills"
  → Suggestion shows: "skills"
  → User presses TAB
  → Input fills: "skills"
  → User presses Enter
  → Skills command executes

🔒 Security & Best Practices

Current Implementation

✅ No external API calls required ✅ All data stored locally ✅ No localStorage of sensitive data ✅ Input sanitized via text handling ✅ No eval() or dynamic code execution ✅ Responsive to mobile

Production Ready

✅ Minified build ✅ Tree-shaken unused code ✅ CSS scoped to prevent conflicts ✅ No console.log() in production ✅ Error boundaries implemented ✅ Keyboard accessible

🎯 Next Steps

Immediate (Now)

✅ Start dev server: npm run dev
✅ Test all commands
✅ Review your data in portfolio.js

Short-term (Today)

✅ Customize content in portfolio.js
✅ Update social links with your URLs
✅ Test theme toggle and features
✅ Build production version: npm run build

Medium-term (This Week)

✅ Deploy to Vercel/Netlify/GitHub Pages
✅ Add resume PDF link
✅ Share URL with friends/colleagues
✅ Test on mobile devices

Long-term (Ongoing)

✅ Update projects regularly
✅ Add new skills as you learn
✅ Track analytics and engagement
✅ Consider custom domain

📚 Documentation

Document	Purpose
QUICK_START.md	Fast reference for your portfolio
SETUP.md	Detailed customization guide
DEPLOYMENT.md	How to deploy to production
ARCHITECTURE.md	Technical deep-dive

🆘 Troubleshooting

Commands not working?

Check src/config/portfolio.js for syntax errors
Missing commas or brackets?
Restart dev server: npm run dev

Portfolio looks wrong?

Clear browser cache: Ctrl+Shift+Delete
Check CSS in src/styles/Terminal.module.css
Inspect element (F12) to debug

Sound effects not playing?

Browser autoplay policy requires user interaction
Some browsers block audio until user clicks
Try disabling in config: soundEffects: false

Deploy not working?

Run npm run build locally first
Check for console errors: F12
Verify all URLs are correct
See DEPLOYMENT.md for platform-specific help

💡 Pro Tips

Edit Config Safely: Use VS Code with Prettier to format JSON
Test Locally First: Always test changes with npm run dev
Share Smartly: Add portfolio link to GitHub, LinkedIn, resume
Keep Updated: Add projects as you build them
Track Analytics: Occasionally check who's visiting and what they check

🎉 You're All Set!

Your terminal portfolio is:

✅ Fully functional
✅ Production-ready
✅ Easy to customize
✅ Responsive & accessible
✅ Deploying-ready

Now go show the world your awesome self! 🚀

📞 Quick Reference

Start Dev: npm run dev Build: npm run build Main Data File: src/config/portfolio.js Styling: src/styles/Terminal.module.css Deploy: See DEPLOYMENT.md

Questions? Check the relevant .md file in the root directory!

Terminal Portfolio v1.0 - Made with ❤️ for Developers

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
public		public
src		src
.gitignore		.gitignore
ARCHITECTURE.md		ARCHITECTURE.md
BUILD_SUMMARY.md		BUILD_SUMMARY.md
DEPLOYMENT.md		DEPLOYMENT.md
DEPLOYMENT_READY.md		DEPLOYMENT_READY.md
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

akshawop/portfolio

Folders and files

Latest commit

History

Repository files navigation