From HTML to the Cloud:
Crafting a Modern Portfolio with AWS

May 18, 2024 - You Kim Chhay

Building a portfolio webpage isn't just about showcasing your skills - it's about pushing the boundaries of web development. I leveraged HTML5, CSS3, and JavaScript (with jQuery) to bring my portfolio to life. Back in December 2023, I meticulously crafted and implemented every detail. Using GitHub Pages, I deployed the site, making it publicly accessible.

Throughout the early months of 2024, I made periodic updates. This month, I undertook a significant enhancement: adding a contact form with robust validation and a sophisticated backend architecture. I leverage various AWS services to manage the form submission and distribute the front-end application.

Here is a peek into the intricate architecture:

Key AWS Services

• Route53 for a domain name system
• Certificate Manager for SSL certificates
• IAM policies and roles for service integration
• CloudWatch for logging and analysis
• S3 for hosting the static website
• CloudFront for content distribution
• API Gateway for the backend API
• Lambda functions for pushing and storing the message
• SNS for email notification
• SQS for service decoupling
• DynamoDB for data storage

Step-by-Step Implementation

To achieve this advanced architecture, I followed these significant steps:

1. Domain Setup:
   • Purchased a domain name in Route53.
   • Requested certificates in Certificate Manager for both API Gateway API and CloudFront distribution.
2. Service Configuration:
   • Created an SNS topic with an email subscription.
   • Set up an SQS queue and a DynamoDB table.
   • Defined IAM policies and roles to grant necessary permissions to Lambda functions.
3. Lambda Functions:
   • Developed functions to push messages to SNS and SQS and store the data in DynamoDB.
4. API Gateway:
   • Created a POST method to receive and process form data.
   • Enabled CORS to ensure cross-origin requests are handled properly.
   • Configured a custom domain name with the ACM certificate and Route53 record.
5. Hosting:
   • Uploaded the front-end application to an S3 bucket with public access and static web hosting enabled.
   • Set up a CloudFront distribution with the S3 bucket website endpoint, an alternate domain name, and the ACM certificate.
   • Created a Route53 record for the CloudFront distribution.

Tips and Tricks

Here are a few challenging aspects that might assist you in successfully deploying a similar architecture:

• Ensure Lambda functions have IAM roles with the necessary policies to integrate other AWS resources like SNS, SQS, and DynamoDB.
• Enable CORS in API Gateway and include CORS headers in Lambda function responses.
• When SQS triggers a Lambda function, the message body is in the event argument. Lambda automatically deletes the message from the queue, so you do not need to manually handle message receipt or deletion.

This project has been a remarkable journey, blending front-end development with robust AWS backend services. The result is a dynamic, responsive portfolio that showcases my skills and demonstrates the potential of modern web development techniques.