How I Turned My Resume Website into a Cloud-Powered Project

When I first started this project, my resume was just a simple HTML and CSS page sitting in an S3 bucket. But what’s a website without some dynamic elements? I wanted to track how many people visit my site—not just for fun, but as a way to explore AWS serverless technologies. This led me to build a serverless visitor counter using JavaScript, DynamoDB, API Gateway, and AWS Lambda.

Here’s a breakdown of how I did it and what I learned along the way.

Step 1: Adding JavaScript for the Visitor Counter 🖥️

Since my website is static, I needed JavaScript to fetch and display the visitor count. The idea was simple:

1. When someone loads the page, JavaScript requests an API.
2. The API retrieves the current visitor count from a database.
3. The page updates to show the new count.

Step 2: Storing Visitor Count in DynamoDB 📊

I needed a database to store the number of visitors, and Amazon DynamoDB was the perfect choice. It’s serverless, scalable, and free for small projects.

Setting Up DynamoDB

I created a DynamoDB table with:
• Partition Key: id (set to a fixed value like "visitorCounter")
• Attribute: count (integer storing the visitor count)

Step 3: Building an API with API Gateway & AWS Lambda ⚡

Instead of letting my JavaScript communicate directly with DynamoDB (which would be a security risk), I built an API using:
•AWS API Gateway (to handle HTTP requests)
•AWS Lambda (Python) (to interact with DynamoDB)

Writing the Lambda Function

I wrote a Python function that:

1. Retrieves the current visitor count from DynamoDB
2. Increments the count
3. Updates the database with the new value
4. Returns the updated count as a JSON response

Step 4: Connecting API Gateway to Lambda 🌐

Next, I needed to create an API Gateway to expose this Lambda function as a REST API.

API Gateway Setup

1. Create a new API Gateway (REST API).
2. Create a GET endpoint (e.g., /visitor-count).
3. Connect it to the Lambda function.
4. Enable CORS so my JavaScript can make requests from the browser.

Step 5: Automating Deployments with AWS SAM ⚙️

Instead of manually setting up DynamoDB, API Gateway, and Lambda every time, I used AWS Serverless Application Model (SAM) to define everything as code.

Step 6: Automating CI/CD with GitHub Actions 🚀

To make my project automatically update whenever I push changes, I set up GitHub Actions:

CI/CD for Backend

1. When I push changes to my Lambda function or API, GitHub Actions runs my Python tests.
2. If the tests pass, the SAM application automatically deploys to AWS.

CI/CD for Frontend

1. When I update index.html, styles.css, or script.js, GitHub Actions uploads the new files to my S3 bucket.
2. It then invalidates the CloudFront cache, so visitors see the latest version instantly.

Final Thoughts: What I Learned 🎓

This project provided great hands-on experience in serverless development. Some key takeaways:

✅ JavaScript is powerful—even on a static site, you can create dynamic elements with APIs.
✅ DynamoDB is an easy-to-use NoSQL database, perfect for lightweight projects.
✅ AWS Lambda + API Gateway makes it simple to build serverless APIs.
✅ Infrastructure as Code (AWS SAM) is a game-changer—no more manual setup!
✅ CI/CD with GitHub Actions ensures my site stays up-to-date automatically.