🖥️ Portfolio Template

One YAML. Resume + portfolio. Always in sync.

Stop maintaining your resume and portfolio site in parallel. resume.yaml is the single source of truth — the same file emits a PDF resume and a multi-mode portfolio site (splash → terminal → editorial GUI). Update once; both stay in sync. Use show_on_resume to control which entries appear where.

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! Fork this repo and GitHub will copy main only (the "Copy the main branch only" checkbox in the fork dialog is on by default), so you skip all the maintainer's personal data.

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

---

✨ Features

• 📄 Single Source of Truth - resume.yaml drives a PDF resume and a portfolio site — no more drift between them
• 🖨️ Auto-Rendered PDF Resume - rendercv-powered, downloadable, regenerates on every push
• 🎭 Multi-Mode Portfolio - splash page picks between retro terminal and editorial GUI; both render from the same data
• 🚀 Zero-Code Setup - visual resume builder + AI converter, no programming needed
• 📊 show_on_resume Flag - mark which projects/entries land in the PDF vs. site-only
• 🤖 AI Resume Converter - paste an existing resume, get clean resume.yaml
• 🎨 Themes & Polish - matrix/blue/purple/amber terminal themes; scroll-pinned animations + sparklines + PWA install in GUI mode
• 📱 Fully Responsive - works on desktop, tablet, and mobile
• 🔍 Smart Search - search across all your content instantly
• 📂 Custom Fields & Dynamic Sections - add any field/section; appears in GUI and becomes a terminal command automatically
• 🔒 Secure & Accessible - XSS protection, Content Security Policy, ARIA labels, keyboard nav
• 🔄 Auto-Deploy - push to GitHub, site rebuilds automatically

🔧 How It Works

flowchart LR
    yaml["📝 resume.yaml<br/><i>single source of truth</i>"]

    yaml -->|rendercv| pdf["📄 resume.pdf<br/><i>downloadable</i>"]
    yaml -->|build| json["📦 resume.json<br/><i>website data</i>"]

    json --> splash["🎬 splash page"]
    splash --> terminal["💻 terminal mode<br/><i>retro CRT</i>"]
    splash --> gui["✨ editorial GUI<br/><i>scroll-pinned</i>"]

Loading

The build pipeline turns one YAML into both a PDF resume and a multi-mode website. rendercv produces the PDF; the same data flows into resume.json, which the splash page reads. Visitors pick terminal mode (retro CRT with commands, themes, hidden games) or editorial GUI mode (scroll-pinned animations, sparklines, PWA install). Both modes render from the same JSON, so they never drift from the PDF — that's the "always in sync" guarantee.

🌟 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: Fork This Repo

1. Click the "Fork" button at the top of this page (or visit github.com/subhayu99/subhayu99.github.io/fork)
2. Rename it to yourusername.github.io in the "Repository name" field
   • Replace yourusername with your actual GitHub handle — GitHub checks availability inline
   • This naming is what makes GitHub Pages serve your site at the root URL
3. Leave "Copy the main branch only" checked (it's the default) — this skips the maintainer's personal branch
4. Click "Create fork"

Time: ~1 minute

Why fork instead of "Use this template"? Forks have an upstream remote linked back to this repo for free, so you can pull future engine improvements with git fetch upstream main && git merge upstream/main — see docs/UPGRADING.md. They also count toward public adoption stats (run showcase on the demo site to see).

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!

🔄 Pulling Engine Updates

Because you forked (not used "Use this template"), your repo has an upstream remote pointing back at the template — pulling future engine improvements is one command:

git fetch upstream main
git merge upstream/main
git push origin main

Your resume.yaml, manifest.json, and other personal files stay untouched. For the auto-PR workflow, conflict recovery, and orphan migration (people who used the old "Use this template" button), see docs/UPGRADING.md.

🎨 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 - 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 appear in both terminal and GUI modes
• ✅ 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