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 💻

My Journey 🧭

Initial Challenges 🚧

1. 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

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

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

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

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

Key Learnings 🎓

1. Infrastructure as Code Benefits

   • Reproducible environments
   • Version-controlled infrastructure
   • Easy tear-down with pulumi destroy

2. AWS Cost Optimization

   • Using CloudFront Price Class 100
   • S3 Intelligent-Tier storage
   • Free TLS certificates via ACM

3. 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

1. Clone Repository

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

1. Frontend Setup

cd frontend
   npm install
   npm run build

1. 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 ✅

1. Security

   • S3 bucket private by default
   • HTTPS enforcement
   • IAM least privilege principle

2. Performance

   • Global CDN distribution
   • Brotli compression
   • Cache-control headers

3. Maintainability

   • Separated frontend/infra codebases
   • Detailed documentation
   • Environment-specific configs

Future Improvements 🔮

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