🖥️ Terminal Portfolio Template

Create your own interactive terminal-style portfolio in minutes—no coding required!

Live Demo: subhayu99.github.io

---

🌿 Note: Two-Branch Setup

This repository uses a dual-branch strategy:

• main branch (you are here) → Clean template with .example files only
• personal branch → Maintainer's actual portfolio (deployed to subhayu99.github.io)

For template users: You're in the right place! When you click "Use this template", you'll get this clean main branch.

For maintainers: See MAINTAINER_GUIDE.md for how to work with both branches.

---

✨ Features

• 🎨 Beautiful Terminal UI - Retro-style terminal interface with multiple themes
• 📱 Fully Responsive - Works perfectly on desktop, tablet, and mobile
• 🚀 Zero-Code Setup - Use visual resume builder, no programming needed
• 🤖 AI Resume Converter - Convert existing resumes to YAML with AI (built-in!)
• ⚡ Lightning Fast - Built with React and Vite for optimal performance
• 📄 Auto-Generated PDF - Your resume automatically converts to downloadable PDF
• 🎭 Multiple Themes - Matrix, Blue, Purple, Amber, Red, and more
• 🔍 Smart Search - Search across all your content instantly
• 📊 Interactive Commands - Explore your portfolio through terminal commands
• 💾 PWA Support - Installable as a progressive web app with offline capabilities
• 🔒 Secure - Built-in XSS protection and Content Security Policy
• ♿ Accessible - ARIA labels and keyboard navigation support
• 🔄 Auto-Deploy - Push changes to GitHub, site updates automatically
• 🎨 Custom Fields Support - Add any custom fields to personalize your resume beyond the standard schema
• 📂 Dynamic Sections - Create custom sections (certifications, awards, etc.) that become terminal commands automatically

🌟 Easy Mode - Get Started in 10 Minutes

Perfect for non-technical users! No installation of npm, Python, or any tools required.

Step 1: Create Your Resume

Visit app.rendercv.com and create your resume using the visual builder:

1. Fill in your information (name, email, experience, education, etc.)
2. Add your skills, projects, and achievements
3. Customize sections to match your background
4. Download the YAML file when done

Time: ~5 minutes

💡 Pro Tip: Use AI to Convert Your Existing Resume (Even Faster!)

Already have a resume? Skip the manual entry and let AI do the work!

🤖 Method 1: Built-in AI Resume Converter (Recommended)

After deploying your portfolio (Steps 2-4), you can use the built-in converter:

1. Visit your live portfolio at https://yourusername.github.io
2. Type replicate in the terminal
3. Click "Get AI Conversion Prompt" button
4. Copy the comprehensive prompt to your clipboard
5. Paste it into ChatGPT, Claude, or Gemini along with your resume
6. Get perfectly formatted resume.yaml output
7. Upload it to your repository to update your portfolio

Time: ~2 minutes | Benefit: Always uses the latest schema format!

📝 Method 2: Manual AI Conversion (Before Deployment)

If you want to prepare your resume before deploying:

1. Open resume.yaml.example in the template repository
2. Copy its contents
3. Use this prompt with ChatGPT, Claude, or Gemini:

   I have my resume below. Please convert it to this YAML format:
   [Paste resume.yaml.example contents]
   
   Here's my resume:
   [Paste your resume text, PDF content, or LinkedIn profile]
   
   Please maintain all my information but structure it exactly like the example.
   

4. Copy the AI-generated YAML and save it as resume.yaml

Why this works: AI excels at reformatting structured data. You get perfect YAML syntax without learning the format!

Step 2: Create Your Portfolio Repository

1. Click the "Use this template" button at the top of this page
2. Name your repository: yourusername.github.io
   • Replace yourusername with your GitHub username
   • This naming is important for GitHub Pages!
3. Choose Public visibility
4. Click "Create repository"

Time: ~1 minute

Step 3: Enable GitHub Actions & Pages

Important: Do this BEFORE uploading your resume to avoid workflow errors!

1. Go to Settings → Pages (in left sidebar)
2. Under "Source", select "GitHub Actions"
3. Go to Settings → Actions → General
4. Under "Actions permissions", ensure actions are enabled

Time: ~1 minute

Step 4: Upload Your Resume

1. In your new repository, click "Add file" → "Upload files"
2. Drag and drop your resume.yaml file from Step 1
3. Commit the file (click "Commit changes")
4. The deployment will start automatically! Wait 2-5 minutes

Time: ~3 minutes (mostly waiting for deployment)

🎉 Done!

Your portfolio is now live at: https://yourusername.github.io

📝 Updating Your Portfolio

To update your information:

1. Option A: Edit on GitHub

   • Go to your repository
   • Click on resume.yaml
   • Click the pencil icon to edit
   • Make changes and commit

2. Option B: Use RenderCV again

   • Update your resume at app.rendercv.com
   • Download new YAML file
   • Upload to replace old resume.yaml

Your site will automatically rebuild and update within 2-5 minutes!

🎨 Customization (Optional)

Change Theme

Visit your portfolio and use these commands in the terminal:

theme matrix    # Green Matrix-style (default)
theme blue      # Blue terminal
theme purple    # Purple hacker theme
theme amber     # Vintage amber monitor
theme red       # Red alert theme

The theme is saved in your browser, so it persists across visits!

Custom ASCII Art Name

Create a custom ASCII art version of your name:

1. Go to patorjk.com/software/taag
2. Type your name and choose a font
3. Copy the ASCII art
4. Create client/public/data/styled_name.txt in your repo
5. Paste the ASCII art and commit

Custom Profile Banner

Customize the neofetch output (the welcome banner):

1. Create client/public/data/neofetch.txt in your repo
2. Add your custom ASCII art and info
3. See client/public/data/neofetch.txt.example for inspiration

Progressive Web App Settings

Customize the PWA (installable app) settings:

1. Copy client/public/manifest.json.example to client/public/manifest.json

2. Edit the file:

   {
     "name": "Your Name - Terminal Portfolio",
     "short_name": "Your Portfolio",
     "description": "Your description here"
   }

3. Commit the changes

Custom Fields & Dynamic Sections Support

Want to add extra information beyond the standard resume fields? You can add any custom fields AND any custom sections you want!

Examples of custom fields you can add:

social_networks:
  - network: "LinkedIn"
    username: "yourname"
    profile_url: "https://linkedin.com/in/yourname"  # ✨ Custom field!
    verified: true  # ✨ Custom field!

technologies:
  - label: "Languages"
    details: "JavaScript, TypeScript, Python"
    proficiency_level: "Expert"  # ✨ Custom field!
    years_experience: 5  # ✨ Custom field!

experience:
  - company: "Tech Company"
    position: "Senior Engineer"
    github_team: "tech-company/platform"  # ✨ Custom field!
    tech_stack: ["React", "Node.js", "AWS"]  # ✨ Custom field!
    team_size: 8  # ✨ Custom field!

education:
  - institution: "University"
    degree: "B.S. Computer Science"
    gpa: 3.8  # ✨ Custom field!
    honors: "Magna Cum Laude"  # ✨ Custom field!

projects:
  - name: "Cool Project"
    date: "2024"
    github_repo: "https://github.com/you/project"  # ✨ Custom field!
    live_url: "https://project.com"  # ✨ Custom field!
    tech_stack: ["React", "TypeScript"]  # ✨ Custom field!

# 🆕 Dynamic Sections! Add ANY section you need:
certifications:
  - name: "AWS Certified Solutions Architect"
    date: "2024-03"
    highlights:
      - "Demonstrated expertise in designing distributed systems"
    issuer: "Amazon Web Services"  # ✨ Custom field!
    certification_id: "AWS-PSA-12345"  # ✨ Custom field!

awards:
  - name: "Engineering Excellence Award"
    date: "2024-01"
    highlights:
      - "Recognized for outstanding technical contribution"
    awarded_by: "Tech Corp"  # ✨ Custom field!

# Simple text entries also work!
languages:
  - "English (Native)"
  - "Spanish (Professional)"

How it works:

• ✅ Custom Fields: Add any extra fields to standard sections - they appear in your portfolio automatically
• ✅ Dynamic Sections: Create new sections (like certifications, awards, languages) - they become terminal commands!
• ✅ Web Interface: Custom fields and sections are fully accessible in your terminal portfolio
• ✅ PDF Generation: Custom fields are automatically stripped for RenderCV compatibility
• ✅ Zero Errors: No manual management needed - it just works!
• ✅ Fully Backward Compatible: All existing resumes continue to work

Examples of dynamic sections you can add:

• certifications - Professional certifications
• awards - Awards and recognitions
• languages - Language proficiencies
• volunteer_work - Volunteer experience
• speaking - Speaking engagements
• courses - Online courses or training
• Any section name you want!

See resume.yaml.example for more examples and inspiration!

🔧 Advanced Mode (For Developers)

Want full control? Clone the repository and customize everything!

Prerequisites

• Node.js 18+ (download)
• npm or yarn
• Git

Local Development

# Clone your repository
git clone https://github.com/yourusername/yourusername.github.io.git
cd yourusername.github.io

# Install dependencies
npm install

# Copy configuration files
cp template.config.yaml.example template.config.yaml
cp .env.example .env
cp client/public/manifest.json.example client/public/manifest.json

# Add your resume
# (Create resume.yaml using RenderCV or copy from examples/)

# Generate resume data
npm run generate-resume

# Start development server
npm run dev

Visit http://localhost:5173 to see your portfolio!

Build for Production

# Build the application
npm run build

# Preview production build
npm run preview

Advanced Customization

See the Advanced Guide for:

• Custom themes and colors
• Adding new terminal commands
• Modifying UI components
• API integrations
• Custom features

📚 Documentation

• Deployment Guide - How GitHub Actions deploys your site
• Advanced Guide - Full customization options
• Troubleshooting - Common issues and solutions
• RenderCV Docs - Resume YAML format reference

🎯 Available Commands

Once your portfolio is live, try these commands in the terminal:

Command	Description
help	Show all available commands
about	Display introduction and quick links
skills	List technical skills and technologies
experience	Show work experience and roles
education	Display educational background
projects	Show professional projects
personal	Show personal projects
publications	Display publications (if available)
timeline	Show chronological timeline of all events
contact	Display contact information and social links
resume	Download resume PDF
theme [name]	Change terminal color theme
replicate	AI Resume Converter & portfolio setup guide
neofetch	Display system information
search [query]	Search across all portfolio content
whoami	Display your name and title
ls	List available commands (alias for help)
pwd	Print working directory
cat [file]	Display file contents
clear	Clear the terminal screen

🏗️ Project Structure

subhayu99.github.io/
├── client/                  # Frontend React application
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── hooks/          # Custom hooks (terminal logic)
│   │   ├── lib/            # Utilities and themes
│   │   └── config/         # Configuration files
│   └── public/
│       ├── data/           # Generated resume data
│       └── icons/          # PWA icons
├── scripts/                     # Build scripts
│   ├── generate-resume.js       # Resume generation script
│   ├── generate-ai-prompt.js    # AI conversion prompt generator
│   └── build.js                 # Smart build script
├── docs/                   # Documentation
├── examples/               # Example resume files
├── .github/workflows/      # GitHub Actions workflows
├── resume.yaml            # Your resume (create this!)
└── resume.config.yaml     # Resume generation config

🤝 Contributing

Found a bug? Have a feature idea? Contributions are welcome!

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

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Built with React and Vite
• Resume generation powered by RenderCV
• Inspired by classic terminal interfaces and retro computing
• ASCII art from patorjk.com

⭐ Show Your Support

If you found this template helpful, please consider:

• ⭐ Starring this repository
• 🐦 Sharing it on social media
• 🔗 Adding a link back to the template in your portfolio
• 💬 Spreading the word to friends and colleagues

📞 Support

Need help? Have questions?

• 📖 Check the Documentation
• 🐛 Open an Issue
• 💬 Start a Discussion
• 📧 Contact the maintainer

---

Made with ❤️ by developers, for developers

View Demo · Report Bug · Request Feature