IH.
IH.

Connect

Menu

Animated Portfolio Technical Reference

1. Project Overview

This is a dynamic, fully responsive, and highly interactive animated developer portfolio. It is built with a custom Node.js/Express backend, MongoDB database, Cloudinary image upload hosting, and a secure glassmorphism admin dashboard.

2. Technology Stack & Infrastructure

  • Frontend: HTML/CSS/JS with advanced CSS animations and Glassmorphism design principles.
  • Backend API: Node.js & Express.
  • Database: MongoDB Atlas (M0 Shared Free Tier).
  • Media Hosting: Cloudinary Free Tier for image uploads.
  • Deployment: Microsoft Azure Virtual Machine (Ubuntu LTS) managed via PM2.
  • Reverse Proxy: Nginx.

3. Azure Deployment Architecture

The application is deployed on an Azure Ubuntu VM utilizing PM2 for process management.

Deployment Configuration

  • Node.js Process: Runs internally on port 3000.
  • Process Manager: PM2 handles auto-restarts, logs, and boot persistence.
  • Reverse Proxy: Nginx sits in front on port 80 and reverse-proxies to 127.0.0.1:3000. This architecture ensures that the Node application does not require root privileges to bind to port 80.
  • Managed Services: Database and image hosting are entirely offloaded to MongoDB Atlas and Cloudinary, reducing the storage and memory footprint on the Azure VM.

4. Setup & Installation Lifecycle

Local Development

The local environment is configured via a standard .env file holding MongoDB connection strings, JWT secrets, Admin credentials, and Cloudinary API keys. A fast setup can be achieved via npm run dev.

Azure VM Provisioning

  1. VM Creation: An Ubuntu LTS instance is provisioned with SSH key authentication.
  2. Network Security: Inbound port rules are configured to allow HTTP (80), HTTPS (443), and SSH (22).
  3. Environment Initialization: NVM is utilized to manage Node versions (Node v20) without requiring sudo for global module installations.
  4. PM2 Execution: The server is started persistently using PM2 (pm2 start server.js --name animated).

5. Admin Dashboard

A secure admin dashboard allows the owner to manipulate portfolio data directly. Access to the /admin route is protected via credentials configured in the environment variables, backed by JWT-based authentication.