🏭 ManuFX - Ajith Srikanth Portfolio

Advanced Manufacturing Engineer & AI Innovation Specialist
Bridging Smart Manufacturing, Supply Chain Optimization, and AI-Driven Automation for Industry 4.0 Transformation

🚀 Live Demo

🌐 Portfolio Website: https://manufx.vercel.app
📁 GitHub Repository: https://github.com/dreamerskymaster/portfolio

🔄 Automatic Deployment

This portfolio features GitHub Actions for seamless CI/CD:

• ✅ Push to main → Automatic production deployment
• ✅ Pull requests → Preview deployments
• ✅ CI/CD Pipeline → Automated testing and building
• ✅ Environment Variables → Secure configuration management

📋 Table of Contents

• Overview
• Features
• Tech Stack
• Project Structure
• Installation
• Development
• Deployment
• Key Sections
• Media & Assets
• Performance
• Contributing
• License

🎯 Overview

This portfolio represents Ajith Srikanth, an Advanced Manufacturing Engineer with expertise in:

• 🏭 Manufacturing Excellence: TPM, Kaizen, Lean Methodology, OEE optimization
• 🤖 Automation & Systems: PLC/HMI Programming, SCADA, IoT, Industry 4.0
• 🧠 AI & Innovation: Machine Learning, Computer Vision, Predictive Analytics
• 👥 Leadership: Cross-functional team management, Training & Development

✨ Features (Overhaul v2.0)

🎨 Premium UI/UX

• OLED Dark Mode: True black background for incredible contrast.
• Warm Light Mode: Editorial-style warm paper theme for readability.
• Typography System: Integrated Satoshi, Instrument Serif, and JetBrains Mono for a premium feel.
• Glassmorphic Design: Modern glassmorphic effects with dynamic gradient backgrounds.
• Micro-Interactions: Custom trailing cursor, section parallax, and animated link underlines.

📱 Interactive Sections

• Impact Dashboard: Dynamic metrics grid with animated counters (useCountUp).
• 3D Tilt Cards: Project cards with interactive 3D tilt and glow effects.
• Professional Timeline: Interactive career progression with detailed achievements.
• Personal Interests: Gamified hobbies section with media galleries.
• Technical Tooltips: Interactive explanations for industry-specific terms.

🔧 Technical Excellence

• SPA Routing: Seamless Single Page Application transitions via react-router-dom.
• SEO Optimized: Helmet-powered metadata and JSON-LD Structured Data for high search rankings.
• Accessibility: ARIA labels, skip-links, and full keyboard navigation support.
• Performance: Code splitting, lazy loading, and zero build-time syntax errors.

🛠️ Tech Stack

Frontend

• React 18 - Component-based UI library
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library
• React Router DOM - Client-side routing

Build & Deployment

• Vite - Fast build tool and dev server
• Vercel - Cloud platform for deployment
• GitHub Actions - CI/CD automation

📁 Project Structure

├── src/
│   ├── components/          # UI Components
│   │   ├── ui/              # Atom-level components (Button, Card, Chip)
│   │   ├── CustomCursor.tsx # Trailing cursor logic
│   │   ├── ImpactDashboard.tsx # Animated metrics
│   │   ├── PageTransition.tsx  # Global blur-fade wrapper
│   │   ├── ScrollProgress.tsx  # Vertical reading indicator
│   │   └── ParallaxHeading.tsx # Parallax header effects
│   ├── pages/              # Routed Page Components
│   ├── data/               # Static Data Modules
│   │   ├── profile.ts      # Main career & project data
│   │   └── technicalTerms.ts # Tooltip definitions
│   ├── utils/              # Hooks & Logic
│   │   ├── useTiltEffect.ts # 3D interaction hook
│   │   └── useCountUp.ts    # Counter animation hook
│   └── styles/             # Global CSS & Tokens
├── public/                 # Static Assets (ManuFX logo, etc.)
├── content/               # Markdown content (Projects, Articles)
└── .github/workflows/     # CI/CD configuration

🚀 Installation

Prerequisites

• Node.js 18+
• npm

Quick Start

1. Clone the repository

   git clone https://github.com/dreamerskymaster/portfolio.git
   cd portfolio

2. Install dependencies

   npm install

3. Start development server

   npm run dev

🔧 Development

Available Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build

# Code Quality
npm run lint         # Run ESLint
npm run typecheck    # TypeScript type checking

🖼️ Media & Assets

This project uses a centralized mapping system for all visual content. See the Media & Assets Mapping Guide for details.

🤝 Contributing

This is a personal professional portfolio. While it is public, it is maintained for individual professional representation.

📄 License

This project is licensed under the MIT License.

---

Built with ❤️ by Ajith Srikanth | ManuFX Branding

Last updated: February 2026