AI Developer Portfolio - Terminal & Lab Interface

An innovative, futuristic portfolio website featuring both a classic terminal interface and modern UI pages with dual theme support. Built for AI & API developers who want to showcase their work with style.

✨ Features

🎨 Dual Theme System

Hacker Theme: Classic dark terminal aesthetic with green accents
Neon Theme: Cyberpunk-inspired design with neon colors and glassmorphism effects
Seamless theme switching with persistent storage

🖥️ Terminal Interface (Home)

Authentic bash-style terminal with command-line interactions
Interactive command system with tab completion
Command history navigation (up/down arrows)
ASCII art banners and typing animations
Available commands: help, about, projects, skills, contact, clear, and more

📁 Modern UI Pages

Projects Page (`/projects`)

Grid-based layout with futuristic card design
Animated card transitions using Framer Motion
Technology tags and category badges
Direct links to GitHub repositories and live demos
Responsive design for all screen sizes

Skills Page (`/skills`)

Categorized skill display (Languages, AI/ML, Backend, Cloud, Tools)
Animated skill cards with smooth transitions
Clean, modern badge system for individual technologies

Lab Page (`/lab`)

Advanced Crawler Simulation: Mock AI-powered tech trend scanner
- Simulates scanning GitHub Trends, Product Hunt, and Reddit
- Displays trending technologies with interactive logs
- Real-time log updates with animated feedback
Build Tester: Development workflow simulator
- Run test suites
- Deploy simulation with loading states
- Mock API responses with animated feedback
Interactive Logs Terminal: Real-time activity monitoring
- Color-coded log levels (info, success, warning, error)
- Timestamp tracking
- Auto-scrolling log viewer

🚀 Navigation System

Persistent header with quick access to all pages
"Launch Lab" button prominently featured
Theme toggle accessible from all pages
Smooth navigation with wouter routing

🎬 Animations

Framer Motion integration throughout
Page entry animations
Card hover effects and transitions
Modal animations for interactive elements
Smooth theme transitions

🛠️ Tech Stack

Frontend

React with TypeScript
Tailwind CSS for styling
shadcn/ui component library
Framer Motion for animations
Wouter for routing
TanStack Query for API state management
Lucide React for icons

Backend

Express.js server
Vite for development and building
Mock API endpoints for demonstration

📦 Installation

# Install dependencies
npm install

# Start development server
npm run dev

# The application will be available at http://localhost:5000

🎯 Usage

Terminal Commands

Once on the home page, try these commands:

# Get help
help

# View information about the developer
about

# See all projects
projects

# View specific project details
project 1

# Display technical skills
skills

# Get contact information
contact

# Clear the terminal
clear

# Show command history
history

Navigation

Home (/): Interactive terminal interface
Projects (/projects): Modern project showcase with cards
Skills (/skills): Categorized skills display
Lab (/lab): Advanced AI development tools simulation

Theme Switching

Click the theme toggle button (sparkles icon for Neon, terminal icon for Hacker) in the top-right corner of any page to switch between themes.

🔌 API Endpoints

Mock API

GET /api/github-trending - Returns mock trending technology data

The application includes mock API endpoints for demonstration purposes. In a production environment, these can be connected to real data sources.

🎨 Customization

Portfolio Content

Edit client/src/data/portfolio.ts to customize:

Personal information and bio
Projects and case studies
Skills and technologies
Contact information
ASCII art banners

Theme Colors

Modify theme colors in client/src/index.css:

:root for light mode
.dark for Hacker theme
.neon for Neon cyberpunk theme

🔐 Ethical Usage Notice

This portfolio includes a simulated "crawler" and development tools for demonstration purposes only. The Lab page features are:

Educational demonstrations showing potential AI/ML capabilities
Mock data with no actual external API calls by default
Simulation only - not connected to live data sources

If Extending This Project

If you plan to connect real APIs or implement actual web scraping:

Respect robots.txt and terms of service for all websites
Use official APIs where available (GitHub API, Product Hunt API, etc.)
Implement rate limiting to avoid overwhelming servers
Obtain proper authorization for accessing third-party services
Follow ethical guidelines for data collection and usage
Comply with relevant laws (GDPR, CCPA, etc.)

📝 Environment Variables

No environment variables are required for the basic portfolio. If extending with real APIs:

# Example for real API integration (not currently implemented)
GITHUB_API_KEY=your_key_here
PRODUCT_HUNT_API_KEY=your_key_here

🚢 Deployment

Replit Deployment

This project is optimized for Replit's deployment platform. Simply click the "Publish" button in Replit to make your portfolio live.

Other Platforms

# Build for production
npm run build

# The built files will be in dist/public
# Deploy to any static hosting service (Vercel, Netlify, etc.)

📁 Project Structure

.
├── client/
│   ├── src/
│   │   ├── components/      # React components
│   │   │   ├── ui/          # shadcn UI components
│   │   │   ├── Terminal.tsx
│   │   │   ├── ThemeProvider.tsx
│   │   │   └── ThemeToggle.tsx
│   │   ├── pages/           # Page components
│   │   │   ├── Home.tsx     # Terminal interface
│   │   │   ├── Projects.tsx # Projects grid
│   │   │   ├── Skills.tsx   # Skills showcase
│   │   │   └── Lab.tsx      # AI Lab dashboard
│   │   ├── data/            # Portfolio content
│   │   │   └── portfolio.ts
│   │   ├── hooks/           # Custom React hooks
│   │   └── lib/             # Utilities
│   └── index.html
├── server/
│   ├── index.ts             # Express server
│   ├── routes.ts            # API routes
│   └── vite.ts              # Vite integration
├── shared/
│   └── schema.ts            # TypeScript types
└── README.md

🎓 Learning Resources

This project demonstrates:

Modern React patterns with TypeScript
Component-based architecture
State management with hooks
API integration with TanStack Query
Animation with Framer Motion
Theme system implementation
Responsive design principles

📄 License

MIT License - Feel free to use this as a template for your own portfolio!

🤝 Contributing

This is a personal portfolio template, but feel free to fork and customize it for your own use. If you find bugs or have suggestions, please open an issue.

🌟 Acknowledgments

Built with Replit
UI components from shadcn/ui
Icons from Lucide
Animations powered by Framer Motion

Ready to showcase your AI & API development skills? Start customizing this portfolio today! 🚀

Name		Name	Last commit message	Last commit date
attached_assets		attached_assets
client		client
server		server
shared		shared
.gitignore		.gitignore
.replit		.replit
README.md		README.md
components.json		components.json
design_guidelines.md		design_guidelines.md
drizzle.config.ts		drizzle.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
replit.md		replit.md
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation