Deepak Sagar - DevOps Engineer Portfolio

A modern, responsive portfolio showcasing DevOps expertise and professional journey

---

🎯 Overview

This portfolio website showcases my expertise as a DevOps Engineer with comprehensive experience in cloud infrastructure, automation, and modern deployment practices. Built with cutting-edge web technologies to demonstrate both technical skills and attention to detail.

✨ Key Highlights

• 🏗️ Infrastructure as Code expertise with Terraform & Ansible
• ☁️ AWS Cloud architecture and deployment
• 🐳 Container Orchestration with Docker & Kubernetes
• 🔄 CI/CD Pipeline automation with Jenkins
• 📊 Monitoring & Observability with Prometheus & Grafana
• 🛡️ Security Tools including Trivy, SonarQube, OWASP ZAP & Checkov
• 🌙 Dark/Light Theme toggle support

---

🛠️ Tech Stack

Frontend Technologies

DevOps Technologies Showcased

Security Tools

---

🚀 Quick Start

Prerequisites

Make sure you have the following installed:

• (v18 or higher)
• 
• 

🔧 Installation

1. Clone the repository

   git clone <url>
   cd portfolio

2. Install dependencies

   npm install
   # or
   yarn install

3. Start development server

   npm run dev
   # or
   yarn dev

4. Open your browser

   Navigate to http://localhost:8080
   

🏗️ Build for Production

# Build the project
npm run build

# Preview the build
npm run preview

---

📁 Project Structure

📦 portfolio/
├── 📂 public/
│   ├── 🖼️ lovable-uploads/     # Images and assets
│   └── 📄 favicon.ico
├── 📂 src/
│   ├── 📂 components/
│   │   ├── 🏠 Hero.tsx         # Landing section with theme toggle
│   │   ├── 👤 About.tsx        # About me section
│   │   ├── 🛠️ Skills.tsx       # Technical skills with security tools
│   │   ├── 💼 Projects.tsx     # Featured projects
│   │   ├── 💻 Experience.tsx   # Work experience
│   │   ├── 🎓 Education.tsx    # Educational background
│   │   ├── 📞 Contact.tsx      # Contact information
│   │   └── 📂 ui/              # Reusable UI components
│   ├── 📂 lib/
│   │   └── ⚙️ utils.ts         # Utility functions
│   ├── 📂 pages/
│   │   ├── 🏡 Index.tsx        # Main page
│   │   └── ❌ NotFound.tsx     # 404 page
│   ├── 🎨 index.css           # Global styles
│   └── 🚀 main.tsx            # App entry point
├── 📄 package.json
├── 📄 tailwind.config.ts
├── 📄 vite.config.ts
└── 📖 README.md

---

🌟 Features

🎨 Modern Design

• Responsive Layout: Optimized for all device sizes
• Dark/Light Theme: Toggle between themes with a button
• Gradient Effects: Eye-catching visual elements
• Smooth Animations: Enhanced user experience

📱 Sections Included

Section	Description	Technologies
👤 About	Professional background	TypeScript
🛠️ Skills	Technical expertise with security tools	Shield.io badges
💼 Projects	Featured DevOps projects	Interactive cards
💻 Experience	Current role at DigiEra	Timeline layout
🎓 Education	Academic background	Card components
📞 Contact	Professional links	Social integration

---

🛡️ Security & Best Practices

• ✅ Type Safety with TypeScript
• ✅ Security Scanning with Trivy, SonarQube, OWASP ZAP, Checkov
• ✅ Code Quality with ESLint
• ✅ Responsive Design principles
• ✅ Accessibility standards
• ✅ SEO Optimization
• ✅ Performance optimization

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the Project
2. Create Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit Changes (git commit -m 'Add AmazingFeature')
4. Push to Branch (git push origin feature/AmazingFeature)
5. Open Pull Request

---

Deepak Sagar - DevOps Engineer

📍 Moradabad, Uttar Pradesh, India

---

This project is licensed under the MIT License - see the LICENSE file for details

Star this repository if you found it helpful!

Made with ❤️ by Deepak Sagar