Pulumi Challenge Submission: Interactive Resume

Mahesh Gurjar — Mon, 07 Apr 2025 05:15:44 +0000

Pulumi Challenge Submission: Interactive Resume Deployment

Live Demo | github page | GitHub Repository

What I Built 🛠️

I created and deployed an interactive resume website using modern web technologies and Pulumi's infrastructure-as-code capabilities. The solution features:

Single-page React application with animations and glassmorphism design
AWS Cloud Infrastructure (S3 + CloudFront) provisioned through code
CI/CD-ready configuration
Cost-optimized architecture (<$1/month)
Responsive design for all devices

Key Technical Features:

Scroll progress indicator
Animated skill matrix
Expandable project cards
Dark/light theme toggle
AWS CloudFront CDN caching
HTTPS enforcement

Project Structure 📂

interactive-resume/
├── frontend/               # React application
│   ├── public/            # Static assets
│   ├── src/               # Components & styles
│   └── package.json       # Frontend dependencies
│
├── infra/                 # Pulumi infrastructure
│   ├── index.ts          # AWS resource definitions
│   ├── Pulumi.yaml       # Project configuration
│   └── Pulumi.dev.yaml   # Development stack config
│
└── README.md             # Deployment documentation

Technical Stack 💻

Component	Technologies Used
Frontend	React, TypeScript, Framer Motion, Styled Components
Infrastructure	Pulumi (TypeScript), AWS S3, CloudFront
DevOps	GitHub Actions, AWS CLI
Design	Glassmorphism, CSS Animations

My Journey 🧭

Initial Challenges 🚧

Pulumi Configuration "Error: Missing required configuration variable 'interactive-resume:aws:region' Solution: Learned Pulumi's namespacing pattern:

   pulumi config set aws:region us-east-1

TypeScript Build Issues "Could not find entry point 'index.js'" Solution: Added proper TypeScript configuration:

   {
     "compilerOptions": {
       "outDir": "./bin",
       "rootDir": "./"
     }
   }

CloudFront-S3 Permissions "403 Access Denied" errors Solution: Implemented Origin Access Identity:

   const oai = new aws.cloudfront.OriginAccessIdentity("oai");

Key Learnings 🎓

Infrastructure as Code Benefits
- Reproducible environments
- Version-controlled infrastructure
- Easy tear-down with pulumi destroy
AWS Cost Optimization
- Using CloudFront Price Class 100
- S3 Intelligent-Tier storage
- Free TLS certificates via ACM
CI/CD Patterns
- Automated S3 deployments
- Cache invalidation workflows
- Environment-specific configurations

Deployment Walkthrough 🚀

Prerequisites

AWS account with CLI credentials
Pulumi CLI installed
Node.js v18+

Step-by-Step Process

Clone Repository

   git clone https://github.com/mahesh-space/interactive-resume.git

Frontend Setup

   cd frontend
   npm install
   npm run build

Infrastructure Deployment

   cd ../infra
   npm install
   pulumi stack init dev
   pulumi config set aws:region us-east-1
   pulumi up

Deployment Architecture:

graph LR
    A[User] --> B[CloudFront CDN]
    B --> C[S3 Bucket]
    C --> D[Static Website Files]
    D --> E[React Application]

Pulumi Implementation Details ⚙️

Key Resources Provisioned:

// Create S3 bucket
const siteBucket = new aws.s3.Bucket("resumeBucket", {
  website: {
    indexDocument: "index.html",
    errorDocument: "404.html",
  },
  acl: "private",
});

// Configure CloudFront
const cdn = new aws.cloudfront.Distribution("cdn", {
  enabled: true,
  defaultCacheBehavior: { /* ... */ },
  origins: [{
    s3OriginConfig: {
      originAccessIdentity: oai.cloudfrontAccessIdentityPath,
    },
  }],
});

Notable Configurations:

S3 bucket policy restricting access to CloudFront
Cache headers optimization
Error document handling
Cost monitoring tags

Best Practices Implemented ✅

Security
- S3 bucket private by default
- HTTPS enforcement
- IAM least privilege principle
Performance
- Global CDN distribution
- Brotli compression
- Cache-control headers
Maintainability
- Separated frontend/infra codebases
- Detailed documentation
- Environment-specific configs

Future Improvements 🔮

Add CI/CD pipeline with GitHub Actions
Implement visitor counter using Lambda@Edge
Add automated accessibility testing
Create staging/production environments

Forem: Mahesh Gurjar