DEV Community

Mahesh Gurjar
Mahesh Gurjar

Posted on

Pulumi Challenge Submission: Interactive Resume

#devchallenge #pulumichallenge #webdev #cloud

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
Enter fullscreen mode Exit fullscreen mode

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 🚧

  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
Enter fullscreen mode Exit fullscreen mode
  1. TypeScript Build Issues "Could not find entry point 'index.js'" Solution: Added proper TypeScript configuration: 
   {
     "compilerOptions": {
       "outDir": "./bin",
       "rootDir": "./"
     }
   }
Enter fullscreen mode Exit fullscreen mode
  1. CloudFront-S3 Permissions "403 Access Denied" errors Solution: Implemented Origin Access Identity: 
   const oai = new aws.cloudfront.OriginAccessIdentity("oai");
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  1. Frontend Setup 
   cd frontend
   npm install
   npm run build
Enter fullscreen mode Exit fullscreen mode
  1. Infrastructure Deployment 
   cd ../infra
   npm install
   pulumi stack init dev
   pulumi config set aws:region us-east-1
   pulumi up
Enter fullscreen mode Exit fullscreen mode

Deployment Architecture:

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

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,
    },
  }],
});
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
bassg0navy profile image
bassg0navy •

Nicely done! Everything was very transparent and very well documented.

Collapse
 
mahesh_gurjar profile image
Mahesh Gurjar •

Thank you so much for the kind words! I’m really glad to hear that everything was clear and well-documented. If you have any questions or need further details, feel free to reach out!