Terminal Portfolio Template

A stunning Next.js portfolio template with Matrix-style animations, scroll-triggered effects, and a cyberpunk terminal aesthetic. Perfect for developers, designers, and tech professionals who want to stand out.

✨ Features

• 🎬 Matrix Rain Background - Authentic digital rain effect with customizable colors
• 🎯 Scroll-Triggered Animations - Smooth GSAP & Framer Motion animations
• 💻 Terminal Aesthetic - Code-inspired design with syntax highlighting
• 📱 Fully Responsive - Perfect on all devices
• ⚡ Next.js 15 - Built with the latest Next.js features
• 🎨 Tailwind CSS - Easy to customize and extend
• 📦 TypeScript - Type-safe development
• 🚀 Performance Optimized - Lighthouse score 90+
• 🎭 Dark Theme - Professional dark cyberpunk color scheme

🎨 Sections Included

1. Hero Section - Typewriter effect with Matrix rain background
2. Services - Animated service cards with code snippets
3. Portfolio - Project showcases with hover effects
4. Process - Interactive timeline showing your workflow
5. Tech Stack - Animated skill bars and technologies
6. Contact - Terminal-styled contact form

📸 Preview

Live Demo | Screenshots

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

# Clone the template
git clone https://github.com/Terminal-Blank/terminal-portfolio-template.git my-portfolio

# Navigate to directory
cd my-portfolio

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 to see your site!

📝 Customization Guide

1. Personal Information

Edit app/page.tsx to update the hero section:

const fullText = "Your Name"; // Change this
const subtitle = "// Your tagline here";

2. Services

Edit components/Services.tsx - Update the services array:

const services = [
  {
    title: "Your Service",
    icon: "🎯",
    description: "Service description",
    code: `// Your code snippet`,
  },
  // ...
];

3. Portfolio Projects

Edit components/Portfolio.tsx - Update the projects array:

const projects = [
  {
    title: "Project Name",
    category: "Category",
    description: "Project description",
    tech: ["Tech1", "Tech2"],
    features: ["Feature 1", "Feature 2"],
    color: "from-blue-500 to-cyan-500",
  },
  // ...
];

4. Tech Stack

Edit components/TechStack.tsx - Update your skills:

const techCategories = [
  {
    category: "Frontend",
    technologies: [
      { name: "React", level: 95 },
      // Add your skills
    ],
  },
];

5. Colors & Styling

Edit tailwind.config.ts to customize colors:

colors: {
  'terminal': {
    'black': '#0d1117',   // Background
    'green': '#00ff41',   // Primary accent
    'blue': '#00b4d8',    // Secondary accent
    // Customize these
  },
}

6. Contact Information

Edit components/Contact.tsx:

// Update email, availability, and project minimum

🎨 Customization Examples

Change Matrix Rain Color

In components/Hero.tsx:

<MatrixRain color="#00d4ff" /> {/* Blue instead of green */}

Adjust Animation Speed

In components/Hero.tsx, modify the typewriter speed:

}, 100); // Faster typing (was 150)

Change Gradient Colors

Update any text-gradient by modifying tailwind.config.ts:

'text-gradient': 'bg-gradient-to-r from-pink-500 to-purple-500',

📁 Project Structure

terminal-portfolio-template/
├── app/
│   ├── globals.css          # Global styles
│   ├── layout.tsx           # Root layout
│   └── page.tsx             # Main page
├── components/
│   ├── Hero.tsx             # Hero section
│   ├── Services.tsx         # Services section
│   ├── Portfolio.tsx        # Portfolio section
│   ├── Process.tsx          # Process timeline
│   ├── TechStack.tsx        # Skills section
│   ├── Contact.tsx          # Contact form
│   └── MatrixRain.tsx       # Matrix background
├── lib/
│   └── gsap-config.ts       # GSAP configuration
├── public/
│   └── images/              # Your images
└── tailwind.config.ts       # Tailwind config

🚢 Deployment

Deploy to Vercel (Recommended)

Or manually:

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Deploy to Netlify

# Install Netlify CLI
npm i -g netlify-cli

# Build and deploy
npm run build
netlify deploy --prod

Deploy to GitHub Pages

1. Update next.config.js:

const nextConfig = {
  output: 'export',
  images: { unoptimized: true },
}

2. Build and deploy:

npm run build
# Push to gh-pages branch

🎯 Optimization Tips

Images

• Use Next.js <Image> component for automatic optimization
• Compress images before adding (use TinyPNG)
• Use WebP format when possible

Performance

• Lazy load components below the fold
• Minimize animation complexity on mobile
• Use loading="lazy" for images

SEO

Update app/layout.tsx metadata:

export const metadata = {
  title: "Your Name | Portfolio",
  description: "Your description",
  keywords: ["your", "keywords"],
}

🛠️ Built With

• Next.js 15 - React framework
• Tailwind CSS - Styling
• Framer Motion - Animations
• GSAP - Scroll animations
• TypeScript - Type safety

📚 Resources

• Next.js Documentation
• Tailwind CSS Docs
• Framer Motion Docs
• GSAP Docs

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT © Terminal Blank

💬 Support

• 📧 Email: hello@terminalblank.com
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

🌟 Showcase

Built something cool with this template? Let us know!

⭐ Star History

---

Made with ❤️ by Terminal Blank

If this template helped you, consider giving it a ⭐️!