🖥️ Terminal Portfolio

A modern, interactive terminal-themed portfolio website built with Next.js 16, React 19, TypeScript, and Tailwind CSS. Features a unique terminal interface with matrix-style animations and AI-powered chat functionality.

🌟 Features

Terminal Interface: Unique command-line style navigation system
Matrix Animations: Cyberpunk-inspired visual effects with falling code
AI Chat Integration: Powered by Google Gemini AI for interactive conversations
Responsive Design: Fully optimized for mobile, tablet, and desktop devices
SEO Optimized: Enhanced with custom sitemap.xml and robots.txt for better search engine visibility
Type-Safe: Built with TypeScript for robust code quality
Modern Stack: Leveraging the latest Next.js 16 App Router and React 19
Dark Theme: Eye-friendly terminal-inspired dark mode
Smooth Animations: Typewriter effects, hover animations, and transitions

🚀 Live Demo

Visit the live site: Your Vercel URL

📸 Screenshots

🛠️ Tech Stack

Frontend

Framework: Next.js 16.0 - React framework with App Router
UI Library: React 19.2 - Latest React with enhanced performance
Language: TypeScript 5 - Type-safe JavaScript
Styling: Tailwind CSS 4.0 - Utility-first CSS framework

Backend & AI

API Routes: Next.js API routes for server-side logic
AI Integration: Google Generative AI (Gemini) - AI-powered chat functionality

Development Tools

Linting: ESLint with Next.js config
PostCSS: Modern CSS processing with Tailwind

📁 Project Structure

terminal/
├── app/                          # Next.js App Router directory
│   ├── about/                    # About page
│   │   └── page.tsx
│   ├── api/                      # API routes
│   │   └── chat/                 # AI chat endpoint
│   │       └── route.ts
│   ├── contact/                  # Contact page
│   │   └── page.tsx
│   ├── projects/                 # Projects showcase page
│   │   └── page.tsx
│   ├── skills/                   # Skills page
│   │   └── page.tsx
│   ├── globals.css               # Global styles
│   ├── layout.tsx                # Root layout component
│   ├── page.tsx                  # Home page
│   ├── robots.ts                 # SEO: robots.txt configuration
│   └── sitemap.ts                # SEO: sitemap.xml generation
├── components/                   # React components
│   ├── IdentityComp.tsx          # Identity/profile component
│   ├── TerminalComp.tsx          # Main terminal component
│   └── TerminalComp/             # Terminal sub-components
│       ├── About.tsx             # About section component
│       ├── Contact.tsx           # Contact section component
│       ├── Projects.tsx          # Projects section component
│       └── Skills.tsx            # Skills section component
├── public/                       # Static assets
│   ├── css/                      # Additional CSS files
│   │   ├── IdentityComp.css
│   │   └── TerminalComp.css
│   ├── images/                   # Image assets
│   └── manifest.json             # PWA manifest
├── eslint.config.mjs             # ESLint configuration
├── next.config.ts                # Next.js configuration
├── next-env.d.ts                 # Next.js TypeScript declarations
├── package.json                  # Project dependencies
├── postcss.config.mjs            # PostCSS configuration
├── tsconfig.json                 # TypeScript configuration
└── README.md                     # Project documentation

🔧 Installation & Setup

Prerequisites

Node.js 18+ installed
npm or yarn package manager
Google Gemini API key (for AI chat feature)

Steps

Clone the repository

git clone https://github.com/M0rs-Ruki/terminal.git
cd terminal

Install dependencies

npm install
# or
yarn install

Set up environment variables

Create a .env.local file in the root directory:

GEMINI_API_KEY=your_google_gemini_api_key_here

Run the development server

npm run dev
# or
yarn dev

Open your browser

Navigate to http://localhost:3000

📜 Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm run start

# Run ESLint
npm run lint

🎨 Key Components

Terminal Interface

The main terminal component provides an interactive command-line experience with features like:

Command history navigation
Tab completion
Custom command handlers
Matrix rain background effect

AI Chat Integration

Powered by Google Gemini AI, the chat feature allows visitors to:

Ask questions about my work and experience
Get instant responses
Have natural conversations

SEO Optimization

Enhanced search engine visibility through:

sitemap.ts: Dynamically generates sitemap.xml with all pages
robots.ts: Configures web crawler access and sitemap location
Metadata optimization in layout.tsx
Semantic HTML structure

🌐 SEO Features

This portfolio includes dedicated SEO optimization files:

`app/sitemap.ts`

Automatically generates sitemap.xml
Lists all pages with their URLs and metadata
Helps search engines discover and index content
Updates dynamically based on routes

`app/robots.ts`

Configures which pages search engines can crawl
Points to the sitemap.xml location
Optimizes crawling efficiency
Follows SEO best practices

Additional SEO Enhancements

Meta tags for description, keywords, and Open Graph
Structured data for better search results
Optimized page titles and descriptions
Semantic HTML5 elements

🚢 Deployment

This project is deployed on Vercel for optimal performance and seamless CI/CD.

Deploy Your Own

Manual Deployment

Install Vercel CLI (if not already installed)

npm install -g vercel

Deploy

vercel

Set environment variables in Vercel dashboard:
- Go to Project Settings → Environment Variables
- Add GEMINI_API_KEY

🎯 Features Breakdown

Responsive Design

Mobile-first approach
Breakpoints for mobile, tablet, and desktop
Touch-friendly interface
Optimized typography scaling

Animations

Typewriter text effects
Matrix-style falling code
Smooth page transitions
Hover effects and micro-interactions

Performance

Next.js 16 App Router for optimal loading
React 19 with enhanced rendering
Code splitting and lazy loading
Optimized images and assets

📱 Pages Overview

Home (/): Terminal interface with navigation commands
About (/about): Personal background, education, and current focus
Skills (/skills): Technical skills organized by category
Projects (/projects): Portfolio of completed projects
Contact (/contact): Contact information and social links

🤝 Connect With Me

GitHub: @M0rs-Ruki
LinkedIn: Anup Pradhan
Twitter/X: @AnupPradhan0
YouTube: @morscode7
Email: anuppradhan929@gmail.com

📝 License

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

🙏 Acknowledgments

Inspired by classic terminal interfaces and cyberpunk aesthetics
Built with modern web technologies
AI chat powered by Google Gemini
Deployed on Vercel's edge network

💡 Future Enhancements

Add blog section with MDX support
Implement dark/light theme toggle
Add more terminal commands
Integrate analytics dashboard
Add project filtering and search
Implement PWA features for offline access
Add more AI chat personalities

🐛 Bug Reports

Found a bug? Please open an issue on GitHub Issues.

⭐ Show Your Support

If you like this project, please consider giving it a ⭐ on GitHub!

Built with 💚 by Anup Pradhan

Last Updated: November 2025

Name		Name	Last commit message	Last commit date
Latest commit History 26 Commits
app		app
components		components
public		public
.dockerignore		.dockerignore
.gitignore		.gitignore
Dockerfile		Dockerfile
LICENSE		LICENSE
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

License

M0rs-Ruki/terminal

Folders and files

Latest commit

History

Repository files navigation