Terminal Portfolio - Vicky (TypeScript)

🚀 An interactive terminal-based portfolio built with TypeScript that runs with npx vicky

This project creates a beautiful, interactive portfolio experience right in the terminal. Perfect for developers who want to showcase their work in a unique and memorable way! Built with TypeScript for better type safety and developer experience.

✨ Features

• 🎨 Beautiful ASCII art and animations
• 🌈 Colorful interface with gradient text
• 📱 Interactive navigation menu
• 📊 Visual skill level indicators
• 💼 Detailed work experience and projects
• 🎯 Fun personal facts and interests
• 📧 Easy contact information access
• 🔄 Smooth transitions and loading animations
• 🔷 TypeScript for type safety and better DX
• 📝 Full type definitions for all data structures

🚀 Quick Start

Option 1: Run directly with npx (Recommended)

npx vicky

Option 2: Local development

# Clone the repository
git clone https://github.com/vicky/terminal-portfolio.git
cd terminal-portfolio

# Install dependencies
npm install

# Build the TypeScript project
npm run build

# Run the built version
npm start

# Or run in development mode with hot reload
npm run dev

🛠️ Development Scripts

npm run build       # Compile TypeScript to JavaScript
npm start          # Build and run the portfolio
npm run dev        # Run with ts-node for development
npm run dev:watch  # Run with nodemon and ts-node for hot reload

🏗️ Project Structure

terminal-portfolio/
├── src/                    # TypeScript source files
│   ├── index.ts           # Main CLI entry point
│   ├── portfolio.ts       # Portfolio data manager class
│   └── types.ts           # TypeScript type definitions
├── dist/                  # Compiled JavaScript files
│   ├── index.js          # Compiled main entry (executable)
│   ├── portfolio.js      # Compiled portfolio manager
│   ├── types.js          # Compiled type definitions
│   └── *.d.ts            # TypeScript declaration files
├── data/                 # JSON files with your content
│   ├── about.json
│   ├── contact.json
│   ├── education.json
│   ├── experience.json
│   ├── fun-stuff.json
│   ├── projects.json
│   └── skills.json
├── assets/              # ASCII art and other assets
├── package.json         # NPM configuration with TypeScript build
├── tsconfig.json        # TypeScript configuration
├── README.md           # Documentation
├── LICENSE             # MIT License
└── .gitignore          # Git ignore rules

🔷 TypeScript Benefits

• Type Safety: All data structures are strongly typed
• Better IDE Support: IntelliSense and autocomplete
• Compile-time Error Detection: Catch errors before runtime
• Self-documenting Code: Types serve as inline documentation
• Refactoring Support: Safe and reliable code changes

📝 Type Definitions

All data structures are defined in src/types.ts:

interface Experience {
  company: string;
  position: string;
  duration: string;
  location: string;
  description: string;
  achievements: string[];
}

interface Project {
  name: string;
  description: string;
  technologies: string[];
  github: string;
  demo?: string;
}

interface Skill {
  name: string;
  level: number; // 1-5 scale
}
// ... and many more

🛠️ Customization

All portfolio content is stored in JSON files in the data/ directory. Simply edit these files to customize your portfolio. The TypeScript types ensure data integrity and provide excellent IDE support.

� Data Files Structure

data/
├── about.json          # Personal bio and highlights
├── contact.json        # Contact information
├── education.json      # Educational background
├── experience.json     # Work experience
├── fun-stuff.json      # Fun facts and personal interests
├── projects.json       # Portfolio projects
└── skills.json         # Technical skills with levels

📝 Editing Your Content

All data follows strict TypeScript interfaces, ensuring consistency and catching errors early:

1. Personal Information (about.json) - Type: AboutData

   {
     "bio": "Your personal bio here...",
     "highlights": [
       "Key highlight 1",
       "Key highlight 2"
     ]
   }

2. Experience (experience.json) - Type: Experience[]

   [
     {
       "company": "Company Name",
       "position": "Your Position",
       "duration": "2020 - Present",
       "location": "City, State",
       "description": "Job description...",
       "achievements": ["Achievement 1", "Achievement 2"]
     }
   ]

3. Skills (skills.json) - Type: SkillCategory

   {
     "Category Name": [
       { "name": "Skill Name", "level": 5 }
     ]
   }

   Note: Skill levels are from 1-5

4. Projects (projects.json) - Type: Project[]

   [
     {
       "name": "Project Name",
       "description": "Project description...",
       "technologies": ["Tech1", "Tech2"],
       "github": "https://github.com/username/repo",
       "demo": "https://demo-url.com"
     }
   ]

🔧 Development Tips

TypeScript Development

• Use npm run dev for development with ts-node
• Types are automatically validated during compilation
• IDE will provide autocomplete for all data structures
• Build errors will prevent invalid data structures

Adding New Data Types

1. Define the interface in src/types.ts
2. Add the property to PortfolioData interface
3. Update Portfolio class with getter method
4. Add handling in TerminalPortfolio class

🎨 Customizing the Design

Colors and Styling

The main styling is handled in src/index.ts. You can customize:

• Color schemes: Modify chalk colors and gradient configurations
• ASCII art: Change the figlet font or create custom ASCII art
• Box styles: Adjust boxen styling for information displays
• Loading animations: Customize ora spinner styles

Adding New Sections

1. Add a new data file in the data/ directory
2. Define the TypeScript interface in src/types.ts
3. Add the interface to PortfolioData type
4. Create a getter method in src/portfolio.ts
5. Add a new menu option and handler in src/index.ts

📦 Publishing to NPM

To publish your own terminal portfolio:

1. Update package.json

   {
     "name": "your-npm-package-name",
     "bin": {
       "your-command": "./dist/index.js"
     }
   }

2. Build and publish

   npm run build
   npm login
   npm publish

3. Test your package

   npx your-package-name

🔧 Development Scripts

npm run build       # Compile TypeScript to JavaScript
npm start          # Build and run the portfolio
npm run dev        # Run with ts-node for development
npm run dev:watch  # Run with nodemon and ts-node for hot reload
npm test           # Run tests (placeholder)

📚 Dependencies

Runtime Dependencies

• chalk - Terminal string styling
• inquirer - Interactive command line prompts
• boxen - Create boxes in the terminal
• figlet - ASCII art text
• gradient-string - Beautiful gradient colors
• ora - Elegant terminal spinners

Development Dependencies

• typescript - TypeScript compiler
• ts-node - TypeScript execution environment
• nodemon - File watching for development
• @types/node - Node.js type definitions
• @types/inquirer - Inquirer type definitions
• @types/figlet - Figlet type definitions
• @types/gradient-string - Gradient-string type definitions

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📋 Roadmap

• Add theme switching (dark/light modes)
• Include more ASCII art options
• Add sound effects (optional)
• Support for images in terminal
• Add a blog/writing section
• Integration with GitHub API for live project data
• Multiple language support

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by other creative terminal applications
• Thanks to the open-source community for the amazing libraries
• Special thanks to anyone who runs npx vicky and checks out the portfolio!

📞 Support

If you have any questions or run into issues:

• 📧 Email: hello@vicky.dev
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

Made with ❤️ and lots of ☕ by Vicky

Run npx vicky to see it in action!