🌟 Manish Venkatarathnam — Personal Portfolio

Production-Ready Personal Portfolio & Engineering Showcase
Built with React.js 18, Vite, Framer Motion, Glassmorphism CSS, and GitHub REST API

Live Demo • Features • Tech Stack • Design System • Screenshots • Installation • Contact

📌 Executive Overview

Welcome to the official repository of Manish Venkatarathnam's Personal Portfolio. This web application serves as a comprehensive engineering showcase demonstrating expertise across DevOps Automation, Cloud Infrastructure, and Modern Frontend Engineering.

Designed to match SaaS landing page quality, the application leverages an interactive dark glassmorphism aesthetic, cyber gold accents, HTML5 canvas particle constellations, dynamic GitHub API integration, and Framer Motion scroll reveal animations.

🚀 Live Demo & Repository

🌐 Live Website: https://manishvenki.github.io/
💻 GitHub Repository: https://github.com/manishvenki/Portfolio

✨ Key Features

🎨 Glassmorphism UI System: High-blur backdrops, cyber gold (#FFD700) accents, and cyan (#64FFDA) highlights.
🌓 Dual Theme Engine: Seamlessly switch between Dark Glassmorphic Theme and Smooth Light Theme.
⚡ Lightning Fast Vite Build: Optimized chunk splitting, zero unnecessary re-renders, and high Lighthouse scores.
🎭 Rich Framer Motion Animations: Staggered scroll entrances, card tilt hover effects, and modal transitions.
🌌 Canvas Particle Constellation: Interactive HTML5 particle network reacting to cursor movement and gravity.
🖱️ Custom Mouse Spotlight & Cursor: Radial spotlight gradient following cursor position with hover state scaling.
📱 Mobile-First Responsiveness: Tailored viewports from 375px mobile screens to ultra-wide 4K displays.
📂 Project Category Filter & Search: Instant real-time filtering across DevOps, Cloud, Frontend, Full Stack, and Android.
🔍 Architecture Detail Modal: Deep-dive popup displaying key architectural features, tech stack, stats grid, and live links.
📊 Dynamic GitHub REST API Integration: Automated fetch of profile statistics, contribution activity chart, language breakdown, and pinned repos.
📜 Verified Credentials Showcase: Embedded cards for AWS, Microsoft Azure, Oracle Cloud (OCI), and Cisco certifications.
📬 Interactive EmailJS Contact Form: Direct message delivery with live feedback toast and celebratory confetti burst.
🚀 SEO & Social Optimization: Open Graph tags, Twitter Cards, sitemap.xml, and robots.txt pre-configured.

🎨 Design System

Dark Theme (Default)

Token Name	Hex Code	Usage Scope
Background Primary	`#0A192F`	Main canvas background
Background Secondary	`#112240`	Glass card containers & inputs
Gold Accent	`#FFD700`	Primary branding, buttons, highlights
Cyan Accent	`#64FFDA`	Secondary tech tags & active states
Primary Text	`#E6F1FF`	Main headings & bold titles
Secondary Text	`#8892B0`	Body copy, descriptions & subtitles

Light Theme

Token Name	Hex Code	Usage Scope
Background Primary	`#F8FAFC`	Crisp light body background
Card Background	`#FFFFFF`	Pure white glass cards with soft shadows
Amber Gold Accent	`#D97706`	High-contrast gold buttons & accents
Deep Teal Accent	`#0D9488`	High-contrast secondary highlights
Primary Text	`#0F172A`	Deep slate headings & high legibility text

🏗️ Tech Stack & Tooling

Domain	Technologies Used
Core Architecture	React.js 18, Vite 5, JavaScript (ES6+), HTML5, CSS Modules
Animation & Motion	Framer Motion, React Type Animation, Canvas Confetti
Icons & UI Utilities	React Icons, React Scroll, React Intersection Observer
API & Networking	Axios, GitHub REST API, EmailJS (`@emailjs/browser`)
Testing & QA	Playwright Chromium (Automated Screenshot Suite)
DevOps & Tooling	Git, GitHub, VS Code, npm, Azure Static Web Apps

📂 Project Architecture

c:\Users\manis\OneDrive\Desktop\Job Resumes\Portolio\
├── docs/
│   └── images/               # High-resolution Desktop & Mobile screenshots
├── public/
│   ├── favicon.svg           # Custom branded favicon
│   ├── robots.txt            # Search engine crawl directives
│   └── sitemap.xml           # SEO sitemap
└── src/
    ├── assets/               # Static assets & PDF resume downloads
    ├── components/           # Reusable modular React components
    │   ├── About/            # Focus switcher & education timeline
    │   ├── BackToTop/        # Floating scroll-to-top button
    │   ├── Certifications/   # Gold credential cards
    │   ├── Contact/          # EmailJS contact form + confetti
    │   ├── CustomCursor/     # Interactive mouse trail follower
    │   ├── Experience/       # Internship vertical timeline
    │   ├── Footer/           # Minimal SaaS footer
    │   ├── GitHubStats/      # Live GitHub profile & contribution graph
    │   ├── Hero/             # Typing effect, spotlight & CTAs
    │   ├── LoadingScreen/    # Percentage preloader screen
    │   ├── Navbar/           # Glass sticky navbar & theme toggle
    │   ├── ParticlesBackground/ # Canvas particle constellation
    │   ├── Projects/         # Filtering, search, hero card & modal
    │   ├── ScrollProgress/   # Top progress bar indicator
    │   ├── Skills/           # Progress bars & category cards
    │   ├── TechStack/        # 3D floating technology icon grid
    │   └── ThemeProvider/    # Dark/Light theme context
    ├── data/                 # Data files (projects, skills, certs)
    ├── hooks/                # Custom React hooks (useGitHubData, useScrollPosition)
    ├── pages/                # Main Home page container
    ├── styles/               # Design tokens & global styling
    ├── App.jsx               # App root with ThemeProvider & LoadingScreen
    └── main.jsx              # Application entry point

📌 Main Sections Overview

1. 🚀 Hero Section

Animated typing effect rotating between DevOps Engineer, Cloud Engineer, Frontend Developer, and Infrastructure Automation Specialist.
Gradient spotlight following cursor movement.
Direct CTA buttons to view projects, download resumes, or visit GitHub/LinkedIn.

2. 👨‍💻 About & Academic Journey

Resume Focus Switcher: Toggle summaries between DevOps Focus, Cloud Focus, and Frontend Focus.
Specializations: Containerization, CI/CD, IaC, Kubernetes, Linux.
Education Timeline: M.Sc. Computer Science & BCA at Kristu Jayanti College.

3. 💼 Experience Timeline

IT & Cybersecurity Intern @ Cynux Era LLP (March - June 2026).
Frontend Intern @ Software Development Cell (KJU) (June - July 2025).

4. 🛠️ Featured Projects & Architecture

Hero Featured Project: InfraPilot – DevOps Automation (Jenkins, Docker, Terraform, Kubernetes, Prometheus, Grafana).
Projects Grid: DarkTrace Replica, Azure Static Web App, Oriel Cafe, GearGo Logistics, Education Tracker, Atlas Travel.
Detail Modal: Interactive popup showing architectural features, stats grid, tech stack, and repository links.

5. 🧰 Skills & Technology Ecosystem

Categorized skill progress bars with live search filtering.
3D floating icon grid featuring Docker, Jenkins, Terraform, Kubernetes, React, Angular, AWS, Azure, Linux, MongoDB, Python, and Git.

6. 📜 Verified Certifications

AWS Cloud Practitioner Essentials, Microsoft Azure AI-900, OCI Foundations Associate, and Cisco Cloud Computing.

7. 📊 Live GitHub Integration

Live API statistics: public repos, followers, top language breakdown, contribution chart, and pinned repositories.

📷 Screenshots

📸 Desktop Preview (1920 × 1080)

01. Hero & Navbar

02. About & Education Timeline

03. Professional Experience

04. Featured Projects & Filters

05. Project Architecture Modal Detail

06. Skills & Progress Bars

07. Technology Ecosystem

08. Certifications & Accreditation

09. Live GitHub Statistics & Activity

10. Contact Form & Footer

11. Light Theme Mode

📱 Mobile Preview (iPhone 14 Pro — 390 × 844)

Home View	Mobile Drawer Menu

About Section	Experience Timeline

Projects Grid	Architecture Modal

Skills Capabilities	Tech Icons

Certifications	GitHub Stats

Contact Form	Light Theme View

🖥️ Getting Started

Prerequisites

Ensure you have Node.js (v18+) and npm installed.

node -v
npm -v

Installation

Clone the Repository:

git clone https://github.com/manishvenki/Portfolio.git
cd Portfolio

Install Dependencies:
```
npm install
```
Start Local Development Server:
```
npm run dev
```
The app will open automatically at http://localhost:3000.
Create Production Build:
```
npm run build
```
Preview Production Build:
```
npm run preview
```

🤝 Connect With Me

MANISH VENKATARATHNAM
DevOps Engineer • Cloud Engineer • Frontend Developer

📍 Location: Bengaluru, Karnataka, India
📧 Email: manishvenki07@gmail.com
📱 Phone: +91 6361798848
💼 LinkedIn: linkedin.com/in/manish-venkatarathnam
💻 GitHub: github.com/manishvenki

⭐ If you find this portfolio inspiring, please consider starring the repository!

Crafted with precision using React.js, Vite & Framer Motion

Name		Name	Last commit message	Last commit date
docs		docs
public		public
src		src
.gitignore		.gitignore
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation