☁️ Cloud Computing Portfolio

DevOps & Cloud Infrastructure Monitoring Dashboard

A professional portfolio showcasing real-world cloud deployments, containerization, and DevOps practices with production infrastructure.

Student: Ken Patrick A. Garcia
Course: IV ACSAD - Cloud Computing
Institution: University of Makati

---

🎯 Project Overview

This Next.js application serves as a DevOps-themed monitoring dashboard showcasing a multi-cloud infrastructure portfolio with:

• AWS Deployment: EC2, S3, and RDS three-tier architecture
• Docker Containerization: 4 applications on Easypanel VPS
• Production Monitoring: Real-time metrics and health status
• Modern Stack: Next.js 16, TypeScript, Tailwind CSS v4

---

🚀 Live Deployments

1. Designers' Cafe (AWS)

• URL: http://3.106.231.215:8081
• Stack: Astro, Node.js, PostgreSQL
• Infrastructure: EC2 (t2.micro), S3, RDS
• Region: ap-southeast-2 (Sydney)

2. SpringBoot REST API (Easypanel)

• URL: https://springboot-app.kygozf.easypanel.host
• Stack: Java 21, Spring Boot 3.5, Maven, H2
• Features: Multi-stage Docker, health monitoring, Let's Encrypt SSL

3. kubectl.dev (Easypanel)

• URL: https://certificate-kubectldev.kygozf.easypanel.host
• Stack: Next.js 16, TypeScript, Tailwind v4
• Theme: Terminal UI with K8s tutorials (Minikube, kubectl)

4. CertifiKit (Easypanel)

• URL: https://certificate-certifikit.kygozf.easypanel.host
• Stack: Next.js 14, PostgreSQL, n8n
• Features: Certificate generator with drag-and-drop editor

5. ContainerQuest (Easypanel)

• URL: https://certificate-container-quest.kygozf.easypanel.host
• Stack: Next.js 14, TypeScript, Tailwind CSS
• Content: 10 research-backed quiz questions on containers vs VMs

---

✨ Dashboard Features

DevOps Monitoring Theme

• Grafana/DataDog Inspired: Dark theme with monitoring aesthetics
• Real-time Metrics: CPU, Memory, Disk I/O visualization
• Live Clock: Updates every second (hydration-safe)
• Service Status: Operational indicators with pulse animations
• Infrastructure Overview: AWS, Docker, and VPS statistics

Technical Highlights

• Server Components: Optimized Next.js 16 App Router
• Type Safety: Full TypeScript with strict mode
• Responsive Design: Mobile-first approach
• Accessibility: WCAG AA compliant color scheme
• Performance: Optimized with Turbopack

---

🛠️ Tech Stack

Frontend

• Framework: Next.js 16 (App Router)
• Language: TypeScript 5.6
• Styling: Tailwind CSS v4
• Icons: Lucide React
• Fonts: Geist Sans & Geist Mono

DevOps & Infrastructure

• Cloud: AWS (EC2, S3, RDS)
• Containers: Docker with multi-stage builds
• Orchestration: Easypanel on VPS
• Region: Singapore (VPS), Sydney (AWS)

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

# Clone repository
git clone https://github.com/KpG782/cloud-computing-portfolio.git
cd cloud-computing-portfolio/website

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 to view the dashboard.

Build for Production

# Create optimized build
npm run build

# Start production server
npm start

---

📁 Project Structure

website/
├── app/
│   ├── layout.tsx       # Root layout with metadata
│   ├── page.tsx         # Main dashboard component
│   └── globals.css      # Global styles and animations
├── public/              # Static assets
├── package.json         # Dependencies
├── next.config.ts       # Next.js configuration
├── tsconfig.json        # TypeScript configuration
└── README.md            # This file

---

📊 Infrastructure Stats

Metric	Value
Total Services	5
AWS Projects	1 (Designers' Cafe)
Docker Containers	4 (Easypanel VPS)
Average Uptime	99.8%
Average Response	142ms
Monthly Cost	~$2.00

---

🎨 Design Features

Monitoring Dashboard

• Dark Theme: #0b0d11 background (GitHub-inspired)
• Card System: #161b22 with subtle borders
• Color Coding: Status indicators and metric gradients
• Typography: Monospace fonts for technical data

Components

• Status Indicators: Animated pulse for operational services
• Metric Bars: Progress bars with gradient fills
• Info Cards: Infrastructure breakdown by provider
• Service Grid: 2-column responsive layout

---

💡 Key Learning Outcomes

Cloud Computing

• ✅ AWS three-tier architecture (EC2, S3, RDS)
• ✅ VPS deployment and management
• ✅ Cost optimization strategies
• ✅ Multi-cloud infrastructure

DevOps Practices

• ✅ Docker containerization and multi-stage builds
• ✅ CI/CD with GitHub integration
• ✅ SSL/TLS automation (Let's Encrypt)
• ✅ Health monitoring and logging

Full-Stack Development

• ✅ Next.js 16 with App Router
• ✅ TypeScript type safety
• ✅ Responsive design patterns
• ✅ Accessibility standards

---

🔗 Quick Links

• Portfolio: kengarciaportfolio-kpg782s-projects.vercel.app
• LinkedIn: ken-patrick-garcia-ba5430285
• GitHub: @KpG782
• Email: kenpatrickgarcia123@gmail.com

---

📄 License

MIT License - Educational project for cloud computing demonstration.

---

🙏 Acknowledgments

• University of Makati - Cloud Computing Course
• AWS Free Tier - Cloud infrastructure
• Easypanel - VPS container orchestration
• Next.js Team - Modern web framework

---

Built with Next.js 16, TypeScript, and Real Cloud Infrastructure

Showcasing production-grade DevOps practices and multi-cloud deployments